Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ<textarea> についてです。
はじめに
HTMLフォーム <form> では、入力内容に応じて適切なパーツを使い分けることが重要です。
この記事では、複数行のテキスト入力ができる <textarea> タグについて解説します。
<input> タグとの違いも含めて、わかりやすく説明します。
<textarea> タグとは？
<textarea> タグは、複数行のテキストを入力できるフォーム部品です。
お問い合わせフォームの「自由記述欄」などでよく使われます。次のコードとそのプレビュー画像をご覧ください。
<textarea name="message"></textarea>
💡 ポイント
✔ 複数行入力ができる
✔ 改行を含む文章に対応
✔ inputでは代用できない (input は1行のみ)
基本構文
<textarea name=”message” rows=”5″ cols=”30″>
初期値
</textarea>
主な属性
| 属性 | 説明 |
|---|---|
| name | データ名 (識別子) |
| rows | 表示行数 |
| cols | 表示幅 |
| maxlength | 最大文字数制限 |
| minlength | 最小文字数制限 |
| placeholder | 入力例 |
基本的な使用例
「お問い合わせ」欄を設ける例です。
<label>お問い合わせ内容</label>
<textarea name="message" placeholder="内容を入力してください"></textarea>
複数行の入力が可能のテキストエリアを配置できました。
<input>との違い
<input> と <textarea> の違いを表にしました。
| 項目 | <input> | <textarea> |
|---|---|---|
| 入力 | 1行 | 複数行 |
| 改行 | 不可 | 可能 |
| 用途 | 名前・メール など | メッセージ など |
実用サンプル
では、<input> と <textarea> を併用しているサンプルを紹介します。
<form>
<label>名前:</label>
<input type="text" name="name">
<label>mail:</label>
<input type="mail" name="mail">
<label>お問い合わせ内容:</label>
<textarea name="message"
rows="5" cols="50"
maxlength="200"
placeholder="200文字以内で入力してください">
</textarea>
<input type="submit" value="送信">
</form>
maxlength=”200″ で最大入力文字数を設定しています。
おわりに (まとめ)
今回は、Webページ「HTML」の フォーム部品の <textarea> について勉強しました。
- <textarea> は複数行入力専用です
- 長文や自由記述に最適です
- フォームでは必ず使う重要要素のひとつです
- 1行入力用タグの <input> とは用途が明確に違います
👉 フォーム作成の基本は
「form + input・textarea + label」の組み合わせと言えます。
次回はフォーム部品の <select> (選択式入力) について勉強します。
この記事が、少しでも誰かのお役に立てれば幸いです。
当サイトの記事で使用したVBAなどのサンプルをDLできます
この記事のサンプルはありません！
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
