<textarea></textarea>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 テキスト

textarea要素は、複数行のテキスト入力欄を作成します。


<textarea name="example1"></textarea>

<textarea name="example2" cols="50" rows="10">サンプル</textarea>

属性
任意属性
name="" 部品の名前 文字列 部品を識別するための名前
cols="" 入力欄の幅 数値 文字数で指定(既定値は 20
rows="" 入力欄の高さ 数値 行数で指定(既定値は 2
minlength="" 入力できる最小文字数 数値 文字数で指定
maxlength="" 入力できる最大文字数 数値 文字数で指定
wrap="" 送信時の改行の有無 soft 折り返しを反映せずに送信する(既定値)
hard 折り返し部分に改行を入れて送信する
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
autocomplete="" オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
詳細トークン (詳しくは仕様書をご覧ください)
placeholder="" 入力のヒント 文字列 記入例、フォーマットの例
dirname="" 書字方向の送信に使う名前 文字列 識別するための名前
readonly 読み取り専用 readonly 値は省略可能
disabled 部品の無効化 disabled 値は省略可能
required 入力必須 required 値は省略可能

入力欄の初期値について

textarea要素内の文字列は、初期値として入力欄に表示されることになります。

<textarea name="example">
この文字列が初期値として表示されます
</textarea>
  • 初期値の文字列に<>記号が含まれる場合は、&lt;&gt;と記述します。また、&記号も&amp;と記述しておきます。

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、入力されたデータ(または初期値)とセットで送信されることになります。

<textarea name="comment">
Hello
</textarea>

上記の場合は、comment=Hello といった感じで送信されます。

cols属性とrows属性について

cols属性rows属性は、入力欄の幅と高さを指定します。

次の例では、50文字分の幅と10行分の高さを指定しています。

<textarea name="example" cols="50" rows="10"></textarea>

minlength属性について

minlength属性は、入力できる最小文字数を指定します。

次の例では、最小文字数を10文字に指定しています。

<textarea name="example" minlength="10"></textarea>

maxlength属性について

maxlength属性は、入力できる最大文字数を指定します。

次の例では、最大文字数を50文字に指定しています。

<textarea name="example" maxlength="50"></textarea>

wrap属性について

wrap属性は、入力テキストの折り返し部分を、送信データに反映させるかどうかを指定します。指定できる値は次の2つです。

soft
折り返しを反映せずに送信します。(既定値)
hard
折り返し部分に改行を入れて送信します。
<textarea name="example" cols="30" wrap="hard"></textarea>
  • wrap="hard" を指定する場合は、cols属性の指定が必須となります。

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、部品をform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<p>コメント:<textarea name="comment" form="example"></textarea></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
  • 古いブラウザでは、この機能に対応していない場合があります。
  • form属性の使用例は、form要素のページでご覧になれます。

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を有効にするかどうかを指定します。

値には on(有効にする)または off(無効にする)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態が適用されます)

<textarea name="example" autocomplete="off"></textarea>
  • HTML 5.1以降では、フォーム部品のautocomplete属性に on / off 以外の値(詳細トークン)も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、詳細な設定を行うことができます。

placeholder属性について

placeholder属性は、入力の助けとなるような短いヒント(記入例やフォーマットの例など)を指定します。

対応しているブラウザでは、この値が入力欄に表示されます。(入力を開始すると消えます)

通信欄:<textarea name="message" placeholder="連絡事項等はこちらへ"></textarea>

次のように改行を入れることもできます。(この改行は入力欄に表示されるテキストにも反映されます)

通信欄:<textarea name="message" placeholder="連絡事項等はこちらへ
・納期
・ご予算
・その他" cols="50" rows="10"></textarea>

dirname属性について

dirname属性は、書字方向の送信に使う名前を指定します。

この値(名前)は、入力内容の書字方向(ltr または rtl)とセットで送信されることになります。(書字方向は自動的に判別されます)

<textarea name="comment" dirname="commentDir">Hello</textarea>

例えば、上記の内容を送信した場合、対応しているブラウザでは次のような形式で送られることになります。(ltr は自動的に付けられます)

comment=Hello&commentDir=ltr

readonly属性について

readonly属性は、そのフォーム部品が読み取り専用であることを指定します。

この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。

<textarea name="example" readonly></textarea>
  • この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。

<textarea name="example" disabled></textarea>
  • この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

<textarea name="example" required></textarea>
旧HTMLからの変更点
  • HTML5:maxlength属性、minlength属性、wrap属性、form属性、autocomplete属性、autofocus属性、placeholder属性、dirname属性、required属性が追加されました。
  • HTML5:cols属性とrows属性が必須ではなくなりました。
  • HTML5.1:inputmode属性が追加されました。
  • HTML5.1:autocomplete属性に on / off 以外の値(詳細トークン)も指定できるようになりました。(詳しくは仕様書をご覧ください
  • HTML5.2:inputmode属性が廃止されました。
  • HTML LS:autofocus属性とinputmode属性がグローバル属性として再定義されました。

使用例

初期値を設定した例

<p><textarea name="example1">初期値の文字列</textarea></p>

表示例

cols属性とrows属性を指定した例

<p><textarea name="example2" cols="30" rows="10"></textarea></p>

表示例

placeholder属性を指定した例

<p><textarea name="example3" placeholder="連絡事項等はこちらへ
・納期
・ご予算
・その他" cols="30" rows="10"></textarea></p>

表示例

readonly属性とdisabled属性を指定した例

<p><textarea name="example4" readonly>読み取り専用</textarea></p>

<p><textarea name="example5" disabled>部品の無効化</textarea></p>

表示例

required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="textarea.html">

<p>内容:<br><textarea name="example" required></textarea> <strong>必須</strong></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

内容:
必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。