HTML <textarea> タグ

定義と使用法

<textarea> タグは複数行のテキスト入力コントロールを定義します。

<textarea> 要素は通常フォームで使用され、ユーザーの入力、例えばコメントやレビューを収集するために使用されます。

テキストエリアは無限の文字数を収容することができ、テキストは等幅字体（通常はCourier）で表示されます。

テキストエリアのサイズは、colsとrows属性（またはCSSを使用して）で指定されます。

フォームを送信した後にname属性が必要です（name属性が省略されると、テキストエリアのデータは送信されません）。

テキストエリアとラベル（label）を関連付けるためにid属性が必要です。

ヒント：常に追加してください <label> タグを使用して、最高のアクセス性を実現します！

参照してください：

HTML DOM リファレンスマニュアル：Textarea オブジェクト

CSSチュートリアル：フォームのスタイルを設定します

インスタンス

例1

多行テキスト入力コントロール（テキストエリア）：

<label for="w3review">CodeW3C.comへのコメント：</label>
<textarea id="w3review" name="w3review" rows="4" cols="50">
codew3c.comで、ウェブサイトの開発方法を学びます。すべてのWeb開発技術の無料チュートリアルを提供しています。
</textarea>

自分で試してみてください

例2

デフォルトの調整サイズオプションを無効にします：

<html>
<head>
<style>
textarea {
  resize: none;
}
</style>
</head>
<body>
<label for="w3review">CodeW3C.comへのコメント：</label>
<textarea id="w3review" name="w3review" rows="4" cols="50">
codew3c.comで、ウェブサイトの開発方法を学びます。すべてのWeb開発技術の無料チュートリアルを提供しています。
</textarea>
</body>
</html>

自分で試してみてください

属性

属性 値 説明
autofocus autofocus テキストエリアがページ読み込み時に自動的にフォーカスを取得するように指定します。
cols 数字 テキストエリアの見える幅を指定します。
dirname textareaname.dir 送信されるテキストエリアの文字方向を指定します。
disabled disabled テキストエリアを無効にする必要があります。
form フォーム ID テキストエリアが属するフォームを指定します。
maxlength 数字 テキストエリアが許可する最大の文字数を指定します。
name テキスト テキストエリアの名前を指定します。
placeholder テキスト テキストエリアの期待される値の短いヒントを指定します。
readonly readonly テキストエリアが読み取り専用であることを指定します。
required required テキストエリアが必須であることを指定します。
rows 数字 テキストエリア内で見える行数を指定します。
wrap
  • hard
  • soft
 フォームを送信する際にテキストエリアのテキストの改行方法を指定します。

グローバル属性

<textarea> タグはサポートしています HTMLのグローバル属性。

イベント属性

<textarea> タグはサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

なし。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート