textareaタグとは?|複数行のテキスト入力欄を作成する

textareaタグとは?|複数行のテキスト入力欄を作成する
リンゴ
博士、問い合わせフォームにコメントを書けるような入力欄を設置したいんですが、どんなフォーム部品を使えばいいですか?
博士
そんなときは<textarea>タグを使えばいいんじゃ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<textarea>タグとは

 

<textarea>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素(リスト化された要素、送信可能要素、リセット可能要素、再関連付け可能要素、ラベル付け可能要素) / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容テキスト


 
 
<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。
 
 

入力欄の初期値

textarea要素の中にテキストを入れておけば、入力欄の中にそのテキストをあらかじめ表示させることができます。

 
 

スポンサーリンク

cols属性

1行に表示する文字数(幅)を指定します。

 
 
デフォルトの値は「20」と規定されていますが、実際に表示される幅はブラウザによって異なります。
 
 
博士
指定できるのは1以上の整数じゃ。
 
 

row属性

表示する行数を指定します。

 
 
デフォルトの値は「2」と規定されています。
 
 
博士
この属性も、指定できるのは1以上の整数じゃ。
 
 

スポンサーリンク

wrap属性

入力したテキストを送信する際に、改行を反映させるかどうかを指定します。
指定できる値は以下の通りです。

  • soft
    意図的に改行を入力した箇所以外は、改行されずに送信されます。(デフォルト)
  • hard
    入力欄の中で折り返された箇所に、改行を入れて送信されます。
    このため、値に「hard」を指定したときは、cols属性で入力欄の幅を指定しておく必要があります。

 
 

maxlength属性

入力欄に入力できる最大文字数を指定します。

 
 

スポンサーリンク

placeholder属性

ユーザーに対して、入力欄に何を入力したらいいのか、簡単なヒントとして表示させるテキストを指定します。
この属性に対応したブラウザでは、placeholder属性に指定した値が、ヒントとしてあらかじめ入力欄に表示されます。

 
 

autocomplete属性

入力欄でオートコンプリート機能を有効にするかどうかを指定します。

オートコンプリート
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
 
 
指定できる値は、「on」「off」のどちらかです。

  • on
    オートコンプリート機能を有効にする(デフォルト)
  • off
    オートコンプリート機能を無効にする

 
 
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」(有効)として扱われますが、form要素に「autocomplete=”off”」(無効)が指定されているときは、form要素の設定内容が使用されます。
 
 

スポンサーリンク

dirname属性

入力値の表記方向を示す情報を、サーバーに送信するための名前を指定します。
例えば、ユーザーが右から左へテキストを入力した場合、右から左の方向を示す情報が、dirname属性に指定された名前とともにサーバーへ送信されます。
 
 

inputmode属性

入力欄の入力モードを指定します。

 
 
inputmode属性の値には、以下のキーワードを指定することができます。

キーワード説明
verbatim文章ではない英数字による文字列の入力(ユーザー名やパスワードなど、対コンピューター向け)
latinラテン文字による自由形式なテキストの入力
latin-nameラテン文字によるユーザー名の入力
latin-proseラテン文字によるメッセージの入力
full-width-latin全角英数字入力モード
kana全角かな入力モード
kana-name全角かな入力モード
katakana全角カタカナ入力モード
numeric「,」や「-」を含む半角数字の入力(クレジットカード番号など)、数値の場合はtype=”number”が適切
tel「*」や「#」を含む半角数字の入力(電話番号)、通常はtype=”tel”を使用
email「@」や「.」を含む半角英数字の入力(メールアドレス)、通常はtype=”email” を使用
url「/」や「.」を含む半角英数字の入力(URL)、通常はtype=”url”を使用

 
 

スポンサーリンク

readonly属性

読み取り専用にして、ユーザーが入力値を編集できないようにします。
こちらは、以下のいずれかの形式で指定します。

  • readonly
  • readonly=”readonly”
  • readonly=””

 
 

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

  • required
  • required=”required”
  • required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

スポンサーリンク

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 
form属性は、部品をform要素の外に配置する場合に使用します。
form要素の中に配置する場合は不要です。
 
 

スポンサーリンク

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 
上記の場合、name=Ichiroというかたちで送信されます。
 
 

使用例

 
 

表示例

当店についてご意見をお聞かせください。

 
 

スポンサーリンク

まとめ

複数行のテキスト入力欄を作成する際は、<textarea>タグを使用します。
 
 

博士
ユーザーからのコメント欄を設けるときなどに使えるぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








textareaタグとは?|複数行のテキスト入力欄を作成する