Webフロントエンドを学習中です。フォームを作っていて、複数行の入力欄をつくる <textarea> の仕様が地味にややこしく、<input type="text"> と混同して手が止まりました。整理も兼ねて、同じところでつまずく人向けにまとめておきます。
<textarea> と <input type="text"> の違い
どちらも「文字を入力してもらう」ための部品ですが、役割が少し違います。
<input type="text"> |
<textarea> |
|
|---|---|---|
| 入力できる行数 | 1行のみ | 複数行（改行OK） |
| タグの形 | 閉じタグなし（空要素） | 開始タグ + 閉じタグ |
| 初期値の指定 |
value 属性 |
タグの中に書いたテキスト |
| サイズ変更 | 不可 | デフォルトでマウスでリサイズ可 |
ざっくり言うと、1行で足りるなら input、問い合わせ本文のように複数行を想定するなら textarea という使い分けです。
以下、textarea で戸惑いやすい3つのポイントを順に見ていきます。
ポイント①：閉じタグが必要（input にはない）
<input> は閉じタグを書かない「空要素（void element）」ですが、<textarea> は 開始タグと閉じタグをセットで書く必要があります。
<!-- input：閉じタグなし -->
<input class="input" type="text">
<!-- textarea：閉じタグが必要 -->
<textarea class="input" id="comment" name="comment"></textarea>
閉じタグ </textarea> を書き忘れると、それ以降の要素が textarea の中身として飲み込まれ、レイアウトが崩れます。「なんとなく input と同じ形」で書くとハマるポイントです。
ポイント②：タグの中身は「初期値」になる
input は value 属性で初期値を指定しますが、textarea は 開始タグと閉じタグの間に書いたテキストがそのまま初期値 になります。
<textarea name="comment">最初から表示される文字になります</textarea>
ただ、実際のフォームで初期値を入れたい場面はそれほど多くありません。多くの場合は中身を空にして、
<textarea class="input" id="comment" name="comment"></textarea>
のように、これだけで完結させて使います。「中身は基本カラ、閉じタグは省略しない」と覚えておくと迷いません。
ポイント③：rows / cols とCSSの優先順位
textarea には、入力欄の初期サイズを指定する属性があります。
-
rows：表示する行数（高さ） -
cols：1行に表示する文字数の目安（横幅）
<textarea class="input" id="comment" name="comment" rows="4" cols="50"></textarea>
ただし、CSSで width / height を指定している場合はそちらが優先されます。CSSでサイズを管理しているなら、rows / cols が最終的な見た目を決めるわけではありません。
とはいえ rows は「CSSが当たるまでの初期の高さ」として機能するので、最低限の高さの目安として rows だけ書いておくのも一つの手です。
よくある誤解
「rows/colsを書かないとエラーになる」と思われがちですが、省略しても既定値（rows=2,cols=20）が使われるだけでエラーにはなりません。
必ず書く必要があるのは閉じタグ</textarea>の方です。ここを混同しないようにしましょう。
まとめ
<textarea> を使うときのポイントは次の3つです。
-
閉じタグ
</textarea>は必須（inputと違い、省略すると表示が壊れる） - タグの中身は初期値になる。基本は空で使う
-
rows/colsはあくまで目安。サイズを厳密に決めたいなら CSS のwidth/heightを使う
「input と似ているようで、閉じタグと初期値の扱いが違う」——ここさえ押さえておけば、textarea でつまずくことはほぼなくなるはずです。
まだ学習中の身なので、誤りや補足があればコメントで教えていただけると嬉しいです。最後まで読んでいただきありがとうございました。