【HTML】textareaの使い方｜rows・maxlength・resizeで複数行入力欄を作る方法

お問い合わせフォームやコメント欄のように、複数行のテキストを入力してもらうときに使うのが <textarea> 要素です。1行だけの <input type="text"> とは違い、改行を含む長い文章をそのまま入力できます。この記事では、<textarea> の基本的な書き方から、入力欄の大きさを決める方法、よく使う属性、文字数のカウント、リサイズの制御までをまとめて解説します。HTML を学び始めた方や、フォーム作りでつまずいている方を対象にしています。

textareaで複数行の入力欄を作る

<textarea> は、複数行のテキストを入力できる欄を作るための要素です。<input> が終了タグを持たない空要素なのに対して、<textarea> は開始タグと終了タグのペアで書きます。

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

あらかじめ文章を表示しておきたいときは、開始タグと終了タグのあいだに書きます。<input> のように value 属性で初期値を指定するのではない点に注意してください。

<!-- タグのあいだに書いた文字が初期値になる -->
<textarea name="message">ここに最初から表示されるテキスト</textarea>

このとき、タグのあいだに書いた改行やスペースもそのまま初期値になります。意図しない空白が入りやすいので、初期値が不要なら <textarea></textarea> のように中身を空にしておくのが基本です。

入力欄の大きさを決める（rows・cols）

入力欄の初期サイズは rows 属性と cols 属性で指定できます。rows は表示する行数、cols は1行あたりのおおよその文字数（半角換算の幅）です。

<!-- 5行・横40文字分の入力欄 -->
<textarea name="message" rows="5" cols="40"></textarea>

ただし cols による横幅の指定は、フォントや文字種によって実際の幅が変わるため、現在は CSS で width を指定するのが一般的です。rows で初期の高さだけ決めておき、横幅やそれ以上の見た目は CSS に任せると、レイアウトが安定します。

textarea {
  width: 100%;        /* 横幅は親要素に合わせる */
  box-sizing: border-box;
}

よく使う属性

<textarea> では、<input> と共通の属性が多く使えます。代表的なものをまとめます。

placeholder はあくまで入力例を薄く表示するだけで、初期値ではありません。フォーカスして文字を打ち始めると消えますし、空欄のまま送信すれば値は空になります。最初から入力済みの状態にしたいときは、前述のとおりタグのあいだに文字を書きます。

labelと結びつけて使いやすくする

入力欄が何のための欄かを示すには <label> を使います。label の for 属性と textarea の id を同じ値にすると、両者が結びつきます。ラベルをクリックしたときに入力欄にフォーカスが移り、スクリーンリーダーでも項目名が正しく読み上げられます。

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

<label> 自体の詳しい使い方は、別記事の「label要素の使い方」も参考にしてください。

入力された文字数をカウントする

「あと何文字入力できるか」を表示すると、フォームがぐっと使いやすくなります。入力された値は JavaScript の value プロパティで取得でき、その文字数は value.length でわかります。入力のたびに発生する input イベントに合わせて数えれば、リアルタイムにカウントを更新できます。次の例は実際に入力して動きを確認できます。

<div class="form-field">
  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message" rows="5" maxlength="200" placeholder="ご質問やご要望をご記入ください"></textarea>
  <p class="counter"><span id="count">0</span> / 200</p>
</div>

.form-field {
  max-width: 360px;
  font-family: sans-serif;
}
.form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}
.form-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical; /* 縦方向だけリサイズを許可する */
  box-sizing: border-box;
}
.form-field textarea:focus {
  outline: none;
  border-color: #007bff;
}
.counter {
  margin: 4px 0 0;
  text-align: right;
  font-size: 13px;
  color: #888;
}

const textarea = document.getElementById('message');
const count = document.getElementById('count');

// 入力されるたびに value の文字数を数えて表示する
textarea.addEventListener('input', () => {
  count.textContent = textarea.value.length;
});

この例では maxlength="200" で上限も決めているので、200文字を超える入力はブラウザ側でブロックされます。カウント表示と組み合わせると、ユーザーは残り文字数を意識しながら入力できます。

リサイズの挙動をCSSで制御する

<textarea> は、多くのブラウザで右下のつまみをドラッグして大きさを変えられます。この挙動は CSS の resize プロパティで制御できます。

横幅を width: 100% で固定しているレイアウトでは、ユーザーが横方向に広げるとデザインが崩れることがあります。そのため resize: vertical にして縦だけ伸ばせるようにしておくと扱いやすくなります。先ほどのデモでもこの指定を使っています。

値が送信されない・初期値が表示されないとき

name属性がないと値が送られない

フォームを送信したのにサーバー側で入力内容を受け取れない場合、name 属性の付け忘れがよくある原因です。name は送信されるデータの「キー（名前）」になるため、これがないとその欄の値はまったく送られません。id はラベルとの結びつけや JavaScript からの参照に使うもので、送信には関係しない点にも注意してください。

初期値はvalue属性ではなくタグの中身に書く

「value 属性を付けたのに初期値が表示されない」というのも定番のつまずきです。<textarea> には value 属性がなく、初期値は開始タグと終了タグのあいだに書きます。<input> の感覚で value を付けても無視されてしまうので、書き方を切り替えましょう。

意図しない改行や空白が入る

初期値を入れるときに、読みやすさのため改行やインデントを入れると、その空白がそのまま入力欄の中身になってしまいます。<textarea> の中身は見たままが値になるため、初期値を空にしたいときは <textarea></textarea> と隙間なく書くのが確実です。

まとめ

<textarea> は複数行のテキストを入力できる要素で、初期値はタグのあいだに書きます。rows で初期の高さを決め、横幅やリサイズの挙動は CSS（width や resize）で整えるのが扱いやすい組み合わせです。name を付けて値を送れるようにし、maxlength や required で入力を制限し、<label> と結びつけて使いやすくする——この基本を押さえれば、実用的な入力欄が作れます。JavaScript の value と input イベントを組み合わせれば、文字数カウントのような一歩進んだ機能も簡単に追加できます。

参考ページ

• <textarea>: テキストエリア要素 – HTML | MDN
• resize – CSS: カスケーディングスタイルシート | MDN
• HTMLTextAreaElement – Web API | MDN