HTML

【図解】HTMLのtextareaの使い方【改行できるinput】

どうも、つよぽんです!

今回はHTMLのtextareaタグの使い方について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • 複数行入力できるフォームを作りたい方
  • <input type=”text”>と何が違うか知りたい方
  • textareaで入力した文字列をサーバーに送る方法を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのtextareaタグの使い方を覚えるHTMLでユーザーに情報を入力してもらうときに使われるinputタグでは、1行のテキストフォームしか作成できません。しかし今回説明するtextareaタグを使うことで複数行入力が可能になります。...

今回の内容は以下のとおりです。

今回の内容
  • HTMLのtextareaで改行可能な入力フォームが作れる
  • name属性でサーバーにデータを送る

 

HTMLのtextareaで改行可能な入力フォームが作れる

プログラミングをする子ども

HTMLのinputタグでは1行入力しかできない

文字入力をできるようにするために、すぐに思い浮かぶタグはなんでしょうか?

おそらくinputタグではないでしょうか?(<input type=”text”>)

たしかにinputタグを使うことで入力フォームを作ることは出来るのですが、inputタグで作られる入力フォームでは1行の入力しか行うことが出来ません。

以下の画像はTwitterやFacebookでinputタグが使われている箇所になります。

文字入力用のinputタグが使われている部分文字入力用のinputタグが使われている部分

このようにinputタグ1行の入力しか出来ず、改行を含む複数行の入力には使えません。

HTMLのtextareaタグを使うことで改行・複数行入力可能となる

inputタグでは1行しか入力が出来ないと説明しました。

では複数行入力できるようにするためにはどうすればよいのでしょうか?

複数行入力できるようにするためには、HTMLのtextareaタグを使うことで実現できます。

以下の画像の赤枠内textareaタグを使ってできる項目になります。

textareで複数行文字入力が可能になるtextareaで複数行文字入力が可能になる

上の画像のtextarea内で入力されている内容を見ると、改行が可能なこともわかります。

アンケートお問い合わせなど、ユーザーに多めの文字入力をしてもらう際には、inputタグではなく、textareaタグを使うのが適切かと思います。

name属性でサーバーにデータを送る

それでは、textareaに入力された文字列をサーバーに送るにはどうすれば良いでしょうか?

結論から言うと、「name属性」をtextareaタグに追加します。

textareaタグを使ったサンプルコードtextareaタグを使ったサンプルコード

上の画像のコードが読みづらい場合は以下のリンクから直接コードを確認することが可能です。

下の画像は、実際にtextareaに文字を入力してデータを送信したときの様子になります。

textareaに入力して、送信ボタンを押したときの挙動textareaに入力して、送信ボタンを押したときの挙動

「送信」ボタンをクリックした後、URL欄の赤枠の部分で「name属性値=入力内容」が表示されているのがわかるかと思います。

URL欄に表示される「入力内容」を確認すると「%0D」「%0A」と書かれているのにかづかれた方もいるかと思います。

これは改行コードと呼ばれるもので、コンピュータ側でどこで改行があったかを判断するために使われます。

詳しくは以下のサイトを参考にしていただけたらと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • inputタグでは1行入力しかできない
  • textareaタグを使うことで改行・複数行入力が可能となる
  • サーバーに入力内容を送る際にはname属性をセットする

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのtextareaタグの使い方を覚えるHTMLでユーザーに情報を入力してもらうときに使われるinputタグでは、1行のテキストフォームしか作成できません。しかし今回説明するtextareaタグを使うことで複数行入力が可能になります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です