HTMLのtextareaタグとは？rows・cols・placeholderの書き方を初心者向けに解説

お問い合わせ内容や備考など、改行しながら文章を入力できる欄を作りたいときは、HTMLの<textarea>を使います。書き方を調べると似た属性が並び、入力欄の大きさ、薄く表示する入力例、最初から入れておく文章をどこで指定するか迷いやすい部分です。

まずは入力欄の大きさ・入力の案内・実際の入力値を分けて考えると整理できます。たとえば、大きな入力欄にしても文字数の上限は決まらず、入力例を表示してもその文章が送られるわけではありません。

この記事では、項目名の付け方から表示サイズ、入力例、初期値、送信される内容までを、コードと図解で説明します。後半には、コピーしたHTMLファイルをブラウザーで開き、外部へ送信せずに入力条件と値を確かめる練習も用意しています。

textareaタグの役割

<textarea>は、複数行の入力欄を作るHTML要素です。入力するのは、太字などの装飾を含まない文字列（プレーンテキスト）です。MDNのtextarea要素リファレンスでも、複数行のプレーンテキスト編集コントロールとして説明されています。

お問い合わせ内容、備考、プロフィール文、レビューなど、1行では収まりにくい文章の入力に向いています。入力欄の右下をドラッグして大きさを変えられるかどうかは、ブラウザーやCSSの設定によって異なります。

input type="text"との違い

短い1行入力には<input type="text">、改行を含む文章には<textarea>を使います。

比較項目	input type="text"	textarea
入力できる行	1行	複数行
主な用途	氏名、会社名、件名	問い合わせ内容、備考
初期値の書き方	value属性	開始タグと終了タグの間
要素の形	終了タグなし	開始タグと終了タグが必要

入力内容の長さだけでなく、改行を許可したいかで選ぶと判断しやすくなります。

textareaタグの基本的な書き方

実用的な入力欄では、項目名を伝える<label>と、入力欄を作る<textarea>を組み合わせます。

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

labelのfor="message"とtextareaのid="message"を同じ値にすると、項目名と入力欄を明示的に関連付けられます。MDNのlabel要素リファレンスでも、forとフォームコントロールのidを対応させる方法が示されています。

要素・属性	役割	この例
label	何を入力する欄か伝える	お問い合わせ内容
id	label・CSS・JavaScriptと関連付ける	message
name	送信データの項目名にする	message
rows・cols	表示サイズの目安を指定する	6行・横幅の目安40

idは同じページで重複させません。上の例ではidとnameを両方messageにしていますが、同じにする決まりはありません。必ず一致させるのは、関連付けるlabelのforとtextareaのidです。

textareaの開始タグと終了タグ

textareaは<input>と違い、開始タグと終了タグを組み合わせます。</textarea>を省略せず、入力欄の内容をタグの内側に置きます。

<!-- 正しい基本形 -->
<textarea name="message"></textarea>

<!-- textareaに自己終了タグは使わない -->
<textarea name="message" />

HTMLタグと属性の基本を確認したい場合は、HTMLタグの基本と書き方も参考にしてください。

rows・colsによる表示サイズの指定

rowsは見えるテキスト行数、colsは平均的な文字幅を基準にした横幅の目安です。次の例は縦6行分の表示と、平均文字幅の40倍を目安にした横幅を指定しています。日本語が必ず40文字並ぶという意味ではありません。

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

rows・colsは入力できる文字数の上限ではなく、表示サイズの目安です。ユーザーは指定値を超えて入力でき、内容が増えるとスクロールします。

図は表示範囲の目安を表しています。文字数を制限したい場合は、この後で説明するmaxlengthを使います。

rowsの書き方

rowsには正の整数を指定します。MDNでは既定値が2と説明されています。問い合わせ内容なら5〜8行程度など、想定する文章量に合わせて初期表示を決めます。

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

行数を小さくしすぎると、入力済みの文章を見返しにくくなります。スマートフォンでも入力内容を確認しやすい高さかテストしてください。

colsの書き方

colsにも正の整数を指定します。MDNでは既定値が20と説明されています。ただし、実際のピクセル幅はフォントやブラウザーによって変わるため、厳密な横幅指定ではありません。

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

実際の幅はCSSで整える

画面幅に合わせて入力欄の幅を変える場合は、HTMLのrowsで高さの目安を示し、次のCSSで横幅を親要素に合わせられます。CSSはHTMLの<head>内の<style>に書くか、読み込んだCSSファイルへ書きます。

textarea {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

placeholderによる入力例の表示

placeholderは、入力欄が空のときに短いヒントや入力例を表示する属性です。

<label for="message">お問い合わせ内容</label>
<textarea
  id="message"
  name="message"
  placeholder="例：料金の相談"
></textarea>

ユーザーが文字を入力すると、placeholderの文字は消えます。値として送信されることもありません。

labelとplaceholderの役割

placeholderだけで項目名を伝えず、labelを併用します。入力後にplaceholderが消えると、何の欄だったか確認しにくくなるためです。MDNとHTML Standardも、placeholderをlabelの代替として使わないよう示しています。

入力前に見えていた例文は、入力後には表示されません。「お問い合わせ内容」という項目名は残るため、書いている途中でも欄の目的を確かめられます。

placeholderに書く内容

長い注意事項や入力条件をplaceholderへ詰め込むと、入力開始後に読めなくなります。必須条件、文字数、個人情報に関する注意などは、入力欄の外へ常時表示してください。

textareaのplaceholderには改行を含められます。ただし、入力すると案内が見えなくなるため、複数行にわたる説明も入力欄の外に置くと、入力中に読み返せます。

初期値と現在の入力内容

textareaの初期値は、value属性ではなく、開始タグと終了タグの間へ書きます。

<textarea name="message">資料の送付を希望します。</textarea>

HTMLで初期値を設定する場所は、<textarea>と</textarea>の間です。

<!-- textareaの初期値としては使わない -->
<textarea name="message" value="資料の送付を希望します。"></textarea>

タグ内の空白と改行

読みやすく見せるためにタグ内を改行すると、その改行や字下げが初期値へ含まれる場合があります。

<!-- 先頭に意図しない空白を入れたくない場合 -->
<textarea name="message">ここから入力してください</textarea>

初期値が不要なら、開始タグの直後に終了タグを書きます。テンプレート文を入れる場合は、実際の初期値をブラウザーで確認してください。

JavaScriptで初期値と現在値を読む

ここはJavaScriptを使う場合の補足です。HTMLの書き方だけを学ぶ場合は、次の「nameと送信データの関係」へ進んで構いません。入力欄の現在の内容をvalue、HTMLに書いた初期値をdefaultValueというプロパティ（要素が持つ情報）で読み取れます。

<textarea id="message">最初の文章</textarea>

<script>
  const textarea = document.querySelector('#message');
  textarea.addEventListener('input', () => {
    console.log('初期値:', textarea.defaultValue);
    console.log('現在値:', textarea.value);
  });
</script>

上の例は、練習用HTMLファイルの<body>内に書きます。PC版Chromeではページを右クリックして「検証」を選び、開いた開発者ツールの「Console」を開きます。Consoleは、JavaScriptが出力した結果やエラーを見る場所です。入力欄を「書き換えた文章」に変更すると、初期値は「最初の文章」、現在値は「書き換えた文章」と表示されます。

開いた直後は初期値と現在値が同じです。利用者が文章を書き換えると現在値だけが変わり、初期値はそのまま残ります。

nameと送信データの関係

フォーム送信では、textareaのnameが項目名、現在入力されている文章が値になります。次は送信先を用意した場合の構造例です。action="/contact"は同じサイトの送信先パスの例であり、HTMLを書くだけでは受信処理やメール送信は作られません。

<form action="/contact" method="post">
  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message">見積もりを希望します。</textarea>
  <button type="submit">送信する</button>
</form>

概念的には、次の名前と値の組が送られます。

message=見積もりを希望します。

MDNのフォームデータの送信でも、フォームデータは名前と値の組として説明されています。この表示は名前と値の対応を示したものです。実際の通信では、送信方法を指定するmethodやデータ形式を指定するenctypeに応じた形へ変換されます。

nameがない場合の送信対象

<!-- 入力はできるが、送信用の項目名がない -->
<textarea id="message"></textarea>

idはlabel、CSS、JavaScriptとの関連付けに使いますが、送信時の項目名にはなりません。nameがない、または空のtextareaはフォームの送信データに含まれません。受信したいtextareaには、空でないnameを付けます。

改行を含む文章も1つの値として送られる

textareaへ複数行を入力すると、改行を含む文章全体が1つの値になります。受信するプログラムは、textareaのnameと同じ項目名で値を取り出します。

受信データをWebページへ表示するときは、入力をHTMLタグとして実行させず文字として扱う処理が必要です。また、ブラウザーの入力条件だけに頼らず、受信するサーバー側でも長さや内容を確認します。

textareaでよく使う属性

基本のname・rows・cols・placeholderに加え、入力必須、文字数、編集可否などを目的に応じて指定します。

属性	役割	注意点
name	送信データの項目名	受信したい場合に必要
id	label・CSS・JavaScriptとの関連付け	nameとは別の役割
rows・cols	表示サイズの目安	入力文字数の制限ではない
placeholder	空欄時の短いヒント	labelの代わりにしない
required	空欄での送信を防ぐ	サーバー側でも検証する
minlength・maxlength	入力文字数の下限・上限	必要な説明を欄外にも表示
readonly	編集不可にする	nameがあり無効でなければ送信対象
disabled	操作不可にする	フォーム送信の対象から外れる
wrap	送信時の改行処理を指定	hardにはcolsが必要

required・minlength・maxlengthで入力条件を付ける

<textarea
  id="message"
  name="message"
  required
  minlength="10"
  maxlength="1000"
></textarea>

この例では空欄を不可とし、10以上1000以下の長さを入力条件にします。minlengthだけでは空欄を禁止できないため、必須入力にはrequiredも必要です。長さはUTF-16コード単位で数えられ、一部の絵文字は見た目の1文字が2以上に数えられます。ブラウザーの検証は回避できるため、受信側の検証も必要です。

readonlyとdisabledの違い

どちらも利用者が編集できない欄を作りますが、選択や送信の扱いが異なります。下の表は、送信するformに属し、空でないnameを持つtextareaの比較です。readonlyの欄が親要素などによってdisabledになっている場合は、送信対象から外れます。

比較項目	readonly	disabled
ユーザーの編集	できない	できない
フォーカス・選択	できる	できない
フォーム送信	送信対象になる	送信対象にならない

disabledのtextareaは通常のフォーム送信に含まれません。表示用の固定文を送る必要がある場合、disabledを外すだけで解決しようとせず、受信側で信頼できる値を決定する設計も検討してください。

wrap属性で改行の扱いを指定する

wrap="soft"は表示上の折り返しを送信値へ追加せず、wrap="hard"は表示上の折り返しを改行として送信値へ含めます。hardを使う場合はcolsも指定します。通常は既定のsoftで十分か、受信側の期待と照らして判断してください。

CSSのresizeでサイズ変更を制御する

textarea {
  resize: vertical;
}

resize: verticalを指定すると、対応するブラウザーでは縦方向だけサイズ変更できます。resize: noneで全面的に禁止できますが、長文入力時の使いやすさを下げる場合があります。禁止する前に、十分な高さとスクロール時の操作性を確認してください。

ブラウザー内で試す練習コード

VS Codeなどのテキストエディターで新しいファイルを作り、次のコード全体をコピーします。文字コードをUTF-8にして、textarea-practice.htmlという名前で保存してください。末尾が.html.txtになっていないことを確認し、保存したファイルをブラウザーで開きます。HTMLファイルを初めて作る場合は、HTMLの基本構造とDOCTYPEの書き方を先に確認できます。

「お問い合わせ内容（必須）」の入力欄と「値を確認する」ボタンが表示されれば、練習を始められます。この練習は画面内で値を確認するもので、サーバーへの送信やメールの送付は行いません。JavaScriptは確認用なので、最初は書き換えずに試してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>textareaの練習</title>
  <style>
    body { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <form id="practice-form">
    <label for="message">お問い合わせ内容（必須）</label>
    <p id="message-help">10～1000文字を目安に入力してください。</p>
    <textarea id="message" name="message" rows="6" cols="40"
      placeholder="例：料金の相談" aria-describedby="message-help"
      required minlength="10" maxlength="1000"></textarea>
    <button type="button" id="check">値を確認する</button>
  </form>
  <pre id="result" aria-live="polite">まだ確認していません。</pre>

  <script>
    const form = document.querySelector('#practice-form');
    const result = document.querySelector('#result');
    form.addEventListener('submit', event => event.preventDefault());
    document.querySelector('#check').addEventListener('click', () => {
      result.textContent = '入力条件を確認してください。';
      if (!form.reportValidity()) return;
      const value = new FormData(form).get('message');
      result.textContent = value === null
        ? 'messageは送信対象にありません。'
        : 'message=' + value;
    });
  </script>
</body>
</html>

reportValidity()で入力条件を確認し、FormDataでフォームの名前と値の組を取り出します。結果はtextContentへ入れるため、入力した文字がHTMLとして実行されることはありません。APIの詳細はMDNのreportValidity()とFormData()で確認できます。

入力条件と値を順に確かめる

表示や送信がうまくいかないとき

placeholderが表示されない

最初に入力欄が空か確認します。開始タグと終了タグの間に初期値や字下げの空白があると、placeholderは表示されません。空欄にしたい場合は<textarea ...></textarea>のようにタグの間を空にし、保存して再読み込みします。

入力欄の後ろのHTMLまで文字として見える

終了タグ</textarea>の書き忘れや綴りを確認します。正しく閉じて再読み込みし、入力欄の後ろに置いたボタンや文章が本来の表示へ戻れば修正完了です。

入力した値が受信側に届かない

画面内の練習では値が出るのに実際の送信で届かない場合は、次の箇所を確認します。受信側を用意していない場合は、HTMLの属性変更だけでは解決しません。

• 項目そのものがない：textareaのnameが空でないか、disabledが付いていないかを確認します。入力欄をまとめる親のfieldsetにdisabledが付いていると、その中のtextareaも無効になります。ただし、fieldsetの最初のlegend（グループの見出し）の中にある要素は例外です。条件の詳細はMDNのdisabled属性の説明で確認できます。
• 別のフォームが送られる：textareaと送信ボタンが対象のform内にあるかを確認します。formの外へ置く場合はform属性で対象formのidを指定する必要があります。
• 送信先で処理されない：送信ボタンのtype="submit"、formのaction・method、受信プログラムが読む項目名を確認します。受信ログにmessageと入力した文章があれば、textareaのデータ到達を確認できます。メール送信の成否はその後の処理で確認します。

よくある質問

rowsを変えても高さが変わらないのはなぜですか？

CSSでheightやmin-heightが指定されていないか確認してください。colsによる横幅も、CSSのwidthが指定されていると変化しないことがあります。

textareaにvalue属性で初期値を指定できますか？

HTMLでは使いません。開始タグと終了タグの間へ初期値を書きます。JavaScriptのvalueは現在の内容を読む・変えるための別のものです。

練習コードだけで問い合わせメールは届きますか？

届きません。練習は画面内で値を確かめるコードです。実運用では送信先と受信プログラムを用意し、必要に応じてメールを送る処理を実装します。

まとめ

textareaタグは、改行を含む文章を入力し、フォームデータとして送るための要素です。

• textareaは複数行のプレーンテキスト入力欄を作る
• labelのforとtextareaのidを対応させる
• nameは送信データの項目名になる
• rows・colsは表示サイズの目安で、文字数制限ではない
• placeholderは短いヒントに使い、labelの代わりにしない
• HTMLの初期値は開始タグと終了タグの間へ書く
• JavaScriptのvalueは現在値、defaultValueは初期値を表す
• disabledは送信対象外。readonlyはnameとformの条件を満たせば送信対象になる

まずは練習コードで、空欄の案内・複数行の値・rowsによる高さの変化を確認しましょう。表示と入力値を別々に確かめると、属性の役割を区別しやすくなります。

フォーム全体と入力条件を学ぶ

実際に送信できるフォームを組み立てるときは、form・action・methodの役割を確認してください。

入力必須や文字数の条件を詳しく指定したい場合は、入力チェックの基本を確認できます。