HTML5タグ虎の巻

textareaタグ

textareaは、複数行のテキスト入力欄を作成するタグです。

解説

formタグの子要素として定義します。

form送信時にはパラメータ(name属性値)と、入力されたテキスト(value属性値)がセットになって送信されます。

1行のみ入力を受け付けたい場合は、input type="text"を使用してください。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
テキスト

属性

textareaタグには以下の属性が指定できます。

【属性】
属性説明
colsテキストエリアの横表示サイズを文字数で指定する
(例)横表示サイズを50文字分にする cols="50"
 ※半角文字サイズが基準です
rowsテキストエリアの縦表示サイズを文字数で指定する
(例)縦表示サイズを10文字分にする cols="10"
form紐づけるformのIDを指定する
(例)formのidがfrm01の場合 form="frm01"
maxlength入力できる最大文字数を指定する
(例)maxlength="100"
 ※全角半角関係なく1文字は1文字と数えます
placeholderプレースホルダーを指定する
(例)placeholder="100文字以内で入力してください。"
readonly読み取り専用にする
(例)readonly="readonly"
 ※readonlyのみでもOKです。
wrap
required必須入力であることを指定する
(例)required="required"
 ※requiredのみでもOKです。
【共通属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="sample"
name要素に名前を指定する
(例)name="txt1"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーでの移動順を指定する
(例)tabindex="3"
autofocus初期フォーカスを設定する
(例)autofocus="true"
disabled非活性にする
(例)disabled="true"

サンプル

属性値未指定

<textarea></textarea>

サイズのみ指定

<textarea cols="30" rows="5"></textarea>

サイズと初期値を指定

<textarea cols="30" rows="5">おはようございます</textarea>

読取り専用

<textarea cols="30" rows="5" readonly="true">おはようございます</textarea>

見た目は変化ありませんが、値の入力は不可です。

プレースホルダーと最大文字数を指定

<textarea cols="50" rows="5" maxlength="500" placeholder="ご自由に入力してください。(500文字まで)"></textarea>

必須入力

<textarea name="txa01" required></textarea>

未入力だと、送信時にチェックがかかります。

備考

  • cols、rowsで表示サイズを指定しても完全に指定した文字数のサイズにはなりません。
  • プレースホルダーは、入力値が存在する場合は表示されません。
  • JavaScriptなどで値を取得したい場合は、value値を参照すれば取得できます。

関連項目