textareaタグ -テキスト入力フィールドを作成する｜HTML辞典
<textarea>タグとは？
<textarea> タグは、複数行のテキスト入力フィールドを作成するためのタグ です。<input type="text"> とは異なり、改行を含む長いテキストの入力が可能です。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、インタラクティブコンテンツ（Interactive Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<textarea> は開始タグ（<textarea>）と閉じタグ（</textarea>）の両方が必要です。
基本的な記述方法
<textarea name="message" rows="4" cols="50" placeholder="メッセージを入力してください"></textarea>使用できる主な属性
<textarea> タグにはさまざまな属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
name | フィールドの名前を指定 | <textarea name="comments">...</textarea> |
rows | 表示する行数を指定 | <textarea rows="5">...</textarea> |
cols | 表示する列数を指定 | <textarea cols="40">...</textarea> |
placeholder | 入力のヒントを表示 | <textarea placeholder="ここに入力">...</textarea> |
maxlength | 最大文字数を指定 | <textarea maxlength="200">...</textarea> |
wrap | テキストの折り返し設定 | <textarea wrap="hard">...</textarea> |
readonly | 読み取り専用にする | <textarea readonly>...</textarea> |
disabled | 無効化する | <textarea disabled>...</textarea> |
required | 必須入力にする | <textarea required>...</textarea> |
CSSを使ったデザイン変更
テキストエリアのデザインを調整する場合は、CSSを活用できます。
textarea {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}適切な使用例
✅ ユーザーのメッセージを入力するテキストエリア
<form>
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="ここに入力してください"></textarea>
<button type="submit">送信</button>
</form>✅ maxlength を指定して文字数制限を設定する
<textarea name="feedback" maxlength="500" placeholder="500文字以内でご意見を入力してください"></textarea>✅ readonly を使用して編集不可にする
<textarea name="info" readonly>このテキストは編集できません。</textarea>✅ required を使用して必須入力にする
<form>
<label for="comment">コメント:</label>
<textarea id="comment" name="comment" required></textarea>
<button type="submit">送信</button>
</form>適切でない使用例（誤った使い方）
❌ name を指定しないとサーバーにデータが送信されない
<!-- NG: name属性なし -->
<textarea placeholder="メッセージを入力してください"></textarea>✅ 正しい書き方（name を指定）
<textarea name="message" placeholder="メッセージを入力してください"></textarea>❌ rows や cols を省略すると表示サイズが小さくなる
<!-- NG: rowsとcolsなし -->
<textarea></textarea>✅ 正しい書き方（適切なサイズを設定）
<textarea rows="4" cols="50"></textarea><textarea>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<textarea> | 複数行のテキスト入力 | 改行が可能 | コメント入力、メッセージ送信 |
<input type="text"> | 1行のテキスト入力 | 改行不可 | ユーザー名、メールアドレスなどの入力 |
<select> | 選択リストを作成 | <option> と組み合わせて使用 | プルダウンメニュー |
<button> | ボタンを作成 | type="submit" でフォーム送信可能 | クリック可能なボタン |
使用上の注意点
✅ name を必ず指定する
nameを指定しないと、フォーム送信時にデータがサーバーに送信されない。
✅ rows と cols を適切に設定する
- サイズを指定しないと、小さすぎて使いにくくなる。
✅ placeholder を活用して入力ガイドを表示する
- 例：
<textarea placeholder="ご意見を入力してください"></textarea>
関連タグ
まとめ
<textarea>タグは、HTML文書内で複数行のテキスト入力フィールドを作成するためのタグです。 nameを設定し、rowsとcolsで適切なサイズを指定することで、ユーザーが入力しやすいフォームを作成できます。
