HTMLのtextarea要素とは？複数行入力欄の使い方を解説

💡 この記事でわかること

• textarea要素とは何か
• textarea要素の基本的な書き方
• よく使う属性(rows・cols・placeholder・maxlength等)
• 入力欄のサイズ変更(resize)の制御方法
• 初心者がつまずきやすいポイント

1. textarea要素とは？

textarea要素とは、
👉 お問い合わせ内容や自己紹介文など、複数行にわたる長めのテキストを入力してもらうための入力欄を作るタグです。

1行のテキスト入力にはinput要素のtype="text"を使いますが、改行を含む長文を入力してほしい場合はtextarea要素を使います。

👉 input要素・type属性についての記事はこちら

💡 「お問い合わせフォームのメッセージ欄」を思い浮かべると、textarea要素の使いどころがイメージしやすいはずです。

2. textarea要素の基本的な書き方

input要素と大きく違う点として、textarea要素には閉じタグが必要で、初期値はvalue属性ではなくタグに挟まれた中身として書きます。

<textarea name="message"></textarea>

初期値を入れる場合は、開始タグと終了タグの間に直接文字を書きます。

<textarea name="message">ご自由にご記入ください</textarea>

💡 input要素と同じく、textareaにもname属性が必要です。name属性がないと入力内容がフォーム送信時に送られません。

3. よく使う属性

rows・cols:入力欄の初期サイズ

rowsは表示する行数、colsは1行あたりの文字数の目安を指定します。

<textarea name="message" rows="5" cols="40"></textarea>

👉 実務ではcolsで文字数を調整するよりも、CSSのwidthプロパティで横幅を指定する方が一般的です。rowsは初期の高さの目安としてよく使われます。

placeholder:入力例の表示

<textarea name="message" placeholder="お問い合わせ内容をご記入ください"></textarea>

maxlength:入力できる文字数の上限

<textarea name="message" maxlength="400"></textarea>

required・readonly・disabled

• required:未入力のまま送信しようとするとエラーになる必須項目にする
• readonly:文字は表示されるが編集できないようにする(送信はされる)
• disabled:操作も送信もできない状態にする

4. 入力欄のサイズ変更(resize)を制御する

textarea要素は、初期状態だとユーザーが右下の角をドラッグして自由にサイズを変更できます。この挙動はCSSのresizeプロパティで制御できます。

textarea {
  resize: vertical; /* 縦方向のみサイズ変更を許可 */
}

resizeには次のような値を指定できます。

• both:縦横どちらも変更可能(初期値)
• vertical:縦方向のみ変更可能
• horizontal:横方向のみ変更可能
• none:サイズ変更を禁止

💡 デザインを崩されたくない場合はnoneやverticalを指定することが多いですが、横幅までユーザーに自由に変更されるとレイアウトが崩れやすいため、verticalが無難な選択です。

5. labelと組み合わせて使う

textarea要素も、input要素やselect要素と同じくlabel要素と組み合わせて使います。

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5"></textarea>

👉 label要素についての記事はこちら

6. 初心者がつまずきやすいポイント

value属性で初期値を指定しようとしてしまう

input要素の感覚で<textarea value="...">のように書いてしまいがちですが、textarea要素にvalue属性はありません。初期値はタグに挟まれた中身として書きます。

閉じタグを忘れる

input要素と違い、textarea要素は自己終了タグではありません。</textarea>を忘れると、それ以降のHTMLがすべて入力欄の中身として扱われてしまうことがあります。

開始タグの直後に改行を入れてしまう

コードを見やすくしようと、開始タグの直後で改行してから初期値を書くと、その改行文字自体が初期値の先頭に含まれてしまう場合があります。初期値を入れたい場合は、開始タグの直後に改行を入れずに書くのが安全です。

まとめ

この記事では、HTMLのtextarea要素の使い方について解説しました。

• textarea要素は、複数行のテキストを入力してもらうためのタグ
• input要素と違い閉じタグが必要で、初期値はタグの中身に書く
• rows・cols・placeholder・maxlengthなどで見た目や挙動を調整できる
• CSSのresizeプロパティでサイズ変更の可否をコントロールできる

お問い合わせフォームなど、長めのテキストを受け取りたい場面ではぜひtextarea要素を活用してみてください。