HTML Living Standard/textarea

textarea 要素

<textarea> 要素は、ユーザーが自由にテキストを入力できる複数行のテキスト入力フィールドを提供します。この要素はフォームでよく使用され、デフォルトの値を表示したり、ユーザー入力を受け取ったりすることができます。

カテゴリ

フローコンテンツ
フォーム関連要素
インタラクティブコンテンツ
パルプリアブルコンテンツ（読み取り専用でない場合）

使用される文脈

フローコンテンツ内で使用可能。

コンテンツモデル

テキストコンテンツ。初期値を指定するために使用される。

タグの省略

開始タグおよび終了タグは省略できません。

属性

<textarea> 要素には以下の属性が使用できます：

グローバル属性 — すべてのHTML要素で共通の属性。
cols — テキストエリアの幅（文字単位）。
rows — テキストエリアの高さ（行単位）。
disabled — 無効化された状態に設定。
readonly — 読み取り専用に設定。
name — フォームで送信されるデータの名前。
maxlength — 入力できる最大文字数。
minlength — 入力する最小文字数。
placeholder — 入力欄に表示されるヒントテキスト。
required — このフィールドが必須であることを指定。
wrap — テキストの折り返し方法（soft または hard）。
autocomplete — オートコンプリートの挙動を指定。
form — 紐付けられるフォーム要素のID。
spellcheck — スペルチェックの有効/無効を指定。

使用例

基本的な使用例

<form action="/submit" method="post">
  <label for="comments">コメント:</label>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  <button type="submit">送信</button>
</form>

プレースホルダーを使用

<textarea name="message" placeholder="ここにメッセージを入力してください..."></textarea>

読み取り専用のテキストエリア

<textarea name="readonly-example" readonly>この内容は編集できません。</textarea>

最大文字数と最小文字数の制限

<textarea name="limited-text" maxlength="100" minlength="10"></textarea>

テキストの折り返しを指定

<textarea name="hard-wrap" wrap="hard"></textarea>

使用上の注意

アクセシビリティ: 必ず <label> 要素を使用して、テキストエリアの目的を明確にしてください。aria-label 属性や aria-labelledby 属性も利用可能です。
プレースホルダー: placeholder 属性は補助的な情報として使用し、重要なラベルの代わりには使用しないでください。
パフォーマンス: 大量のデフォルトテキストを指定すると、ページのレンダリングが遅くなる可能性があります。

非推奨の使用法

ユーザー入力を防ぐ場合は readonly 属性を使用してください。JavaScriptで無効化する代わりに、適切なHTML属性を設定するほうがセマンティクス的に正しいです。

参考情報

テキストエリアは、複数行のテキスト入力に最適です。
maxlength や minlength を使用して、入力内容の制限を簡単に実装できます。
CSSを使用して、テキストエリアの外観をカスタマイズできます。