最終更新日

textarea要素

textarea要素は、複数行のテキスト入力欄を作ります。textarea要素内に含めたテキストが、入力欄の初期値となります。textarea要素は、Phrasingコンテンツの記述箇所で使用できます。

cols属性は、入力欄の横幅を1行の最大文字数で指定します。省略時の既定値は「20」です。また、rows属性は、表示する入力欄の行数を1以上の整数で指定します。指定しない場合の既定値は「2」です。

wrap属性は、テキストの折り返しの動作について、「soft」または「hard」のいずれかのキーワードで指定します。省略時の既定値は「soft」です。「soft」を指定すると、テキストの送信時に改行は設定されません。「hard」を指定すると、ブラウザによりテキストの改行が設定され、改行付きでテキストが送信されます。wrap属性が「hard」に設定されている場合、cols属性の指定は必須です。

maxlength属性では、入力欄に入力可能な最大の文字数を指定できます。

placeholder属性では、ユーザーのテキスト入力の際にヒントとなる、短い説明を指定することができます。ヒントは、単語や語句などで、改行文字を含むことはできません。placeholderはHTML5からの新しい属性で、ブラウザによっては対応していないことがあります。ヒントが長い文章の場合や、より助言的な内容の場合は、title属性を使うとよいでしょう。

dirname属性は、textarea要素のテキストの方向性の送信を可能にします。値には、フォーム送信の間にその方向性の値を含むフィールドの名前として文字列を指定できます。

readonly属性を指定すると、入力欄でのユーザーの文字入力や編集操作ができなくなります。

required属性が指定されている場合、ユーザーは送信前に値の入力が必須となります。

autofocus、disabled、form、nameの各属性は、フォームコントロールの要素で共通の属性です。属性値の指定に関しては、button要素の項も参照してください。

HTML5での変更点
・autofocus、dirname、form、maxlength、placeholder、requiredの各属性が新たに追加されました。
・datasrc、datafldの各属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
Interactiveコンテンツ
フォーム関連要素
省略不可 Phrasingコンテンツを子にできる要素 テキスト
属性 説明
cols 数値 入力欄の文字数を指定します。初期値は「20」です。
rows 数値 入力欄の行数を指定します。初期値は「2」です。
wrap soft|hard テキストの折り返しについて「soft」か「hard」のいずれかを指定します。初期値は「soft」です。
maxlength 数値 入力可能な最大の文字数を指定します。
placeholder 文字列 入力のヒントとなるような文字列を指定します。
dirname 文字列 書字方向が変わる可能性のあるテキストに対して識別名を指定します。
readonly readonly 論理属性。textarea要素の項目を読み取り専用にします。
required required 論理属性。入力が必須となる項目に指定します。
autofocus autofocus 論理属性。ページ表示時に項目がフォーカスされます。
disabled disabled 論理属性。フォームコントロールが使用不可になります。
form ID form要素のid属性の値を指定します。
name 文字列 textarea要素の名前を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <p>マクドエイドではお客様のご意見を承っております。</p>
  <p><textarea cols="50" rows="10" name="request"></textarea></p>
</body>
参考文献:W3C HTML5「4.10.13 The textarea element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。