HTML <textarea> タグ

HTML フォーム開発において、<textarea> タグはユーザーが複数行のテキストを入力することを可能にします。

前章で学んだ単行テキスト用の <input type="text"> とは異なり、<textarea> はより広いスペースを提供します。長文のメッセージ、詳細なコメント、自己紹介、または改行を必要とする大きなテキストブロックを入力させるのに最適です。

1. <textarea> タグの基本理解

<textarea> タグは、複数行のテキスト入力コントロールを定義します。ユーザーは（制限を設けない限り）ほぼ無制限の長さのテキストを入力できます。フォームが送信されると、<textarea> 内のすべての文字（改行コードを含む）がまとめてサーバーへ送信されます。

1.1 基本的な構文構造

<textarea> タグを使用する基本的な構文は以下の通りです。

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

コードの要素分解：

• <textarea> と </textarea>: これはペアで構成されるタグであり、それぞれテキストエリアの開始と終了を表します。
• name 属性: このテキストエリアの名称を指定します。この例では "message" です。サーバーにフォームデータを送信する際、バックエンドはこの名前を使用してデータを識別するため、極めて重要です。
• rows 属性: テキストエリアの表示上の高さ（行数）を指定します。ここでは "4" に設定されており、初期状態で 4 行分の文字が表示される高さになります。
• cols 属性: テキストエリアの表示上の幅（平均文字幅単位）を指定します。ここでは "50" に設定されており、初期状態で約 50 文字分が収まる幅になります。
• タグの間のテキスト ("ここにメッセージを入力..."): これはテキストエリアのデフォルトの初期値として表示されます。注意点として、ユーザーがこれを削除せずに送信すると、このテキストもそのまま送信されてしまいます（現在はヒント表示として placeholder 属性を使うのが一般的です）。

2. <textarea> の主要な制御属性

基本的なサイズ制御以外にも、<textarea> には挙動や外観を細かく制御するための様々な属性が用意されています。

• name: （必須）テキストエリアの名前。フォーム送信時にデータを識別するために使用されます。
• 例：<textarea name="feedback"></textarea>
• rows と cols: ページ上での初期状態の行数（高さ）と列数（幅）を制御します。
• 例：<textarea rows="10" cols="30"></textarea>
• maxlength: この入力ボックスに入力できる最大文字数を厳格に制限します。
• 例：<textarea maxlength="200"></textarea>
• placeholder: （推奨）何を入力すべきかを説明する薄い色のヒントテキストを提供します。入力エリアが空の時に表示され、ユーザーがタイピングを開始すると自動的に消えます。タグの間に直接テキストを書くよりも、ユーザー体験（UX）の面で非常に優れています。
• 例：<textarea placeholder="貴重なご意見をお聞かせください"></textarea>
• required: 必須項目のバリデーション。この属性を付けると、ユーザーが内容を入力しない限りフォームを送信できなくなります。
• 例：<textarea name="comment" required></textarea>
• readonly: 読み取り専用属性。ユーザーは中の文字を見ることも、選択してコピーすることもできますが、内容を編集することはできません。
• 例：<textarea name="terms" readonly>サービス利用規約の内容...</textarea>
• disabled: 無効化属性。無効化されたテキストエリアはグレーアウトされ、ユーザーは編集できなくなります。また、フォーム送信時にそのデータはサーバーへ送信されません。
• 例：<textarea name="notes" disabled>このフィールドは無効です。</textarea>
• wrap: フォーム送信時の改行の扱いを制御します。一般的な値は soft（ボックス内では自動改行されるが、サーバー送信時は 1 本の長い行として送られる）または hard（ボックス内の改行をそのまま改行コードとしてサーバーへ送信する）です。
• 注：モダンな開発ではこの属性が使われる機会は減っており、フロントエンドでの改行表示は通常 CSS で制御されます。

2.1 総合的な属性活用の例

これらの属性を組み合わせて、機能の整ったテキストエリアを作成してみましょう。

<textarea 
  name="description" 
  rows="5" 
  cols="40" 
  maxlength="500" 
  placeholder="詳細な説明を入力してください（最大 500 文字）" 
  required>
</textarea>

この例のポイント：

• バックエンドで受信するデータ名は "description"。
• 初期サイズは高さ 5 行、幅 40 文字分。
• 最大 500 文字まで入力可能。
• 薄いグレーのヒントテキストでユーザーをガイド。
• 必須項目であり、未入力では送信不可。

3. 実戦演習：<textarea> の一般的な活用シーン

実際の開発現場で <textarea> がどのように使われているか、いくつかの具体例を見てみましょう。

3.1 シーン 1：基本的な掲示板

ユーザーが自由に意見を入力できる、最もシンプルなメッセージフォームです。

<form>
  <label for="comment">メッセージを入力してください：</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>
  
  <input type="submit" value="メッセージを送信">
</form>

解説：

• <label> タグを使用し、for 属性と <textarea> の id を紐付けています。これによりアクセシビリティが向上し、ラベルテキストをクリックしても入力エリアがアクティブになります。
• rows="4" と cols="50" で適切な初期サイズを与えています。

3.2 シーン 2：文字数制限付きのフィードバックフォーム

スパムや過度に長い投稿を防ぐために、文字数を制限しヒントを表示するパターンです。

<form>
  <label for="feedback">フィードバックを提供：</label><br>
  <textarea 
    id="feedback" 
    name="feedback" 
    rows="5" 
    cols="60" 
    maxlength="250" 
    placeholder="フィードバックをご記入ください（最大 250 文字）">
  </textarea><br><br>
  
  <input type="submit" value="フィードバックを送信">
</form>

解説：

• maxlength="250" が「ガードマン」として機能し、250 文字を超える入力を断固として拒否します。
• placeholder でユーザーに上限文字数を親切に伝えています。

3.3 シーン 3：利用規約とプライバシーポリシーの表示ボックス

長文の規約をユーザーに読ませる際、文字を編集させずスクロール表示させるために readonly 属性が活躍します。

<form>
  <label for="terms">サービス利用規約：</label><br>
  <textarea id="terms" name="terms" rows="10" cols="60" readonly>
サービスのご利用ありがとうございます。開始前に以下の条項をよくお読みください：
1. お客様は適用されるすべての法律を遵守する必要があります...
... (ここに数千文字の内容が入る) ...
  </textarea><br><br>
  
  <input type="checkbox" id="agree" name="agree" required>
  <label for="agree">上記の利用規約を読み、同意します</label><br><br>
  
  <input type="submit" value="新規登録">
</form>

解説：

• <textarea> に readonly を付与することで、純粋な表示用スクロールボックスとして機能させています。
• 下部に required 属性付きの <input type="checkbox">（チェックボックス）を配置し、同意のチェックを入れないと「新規登録」ボタンが押せないように強制しています。