HTML textarea：複数行入力・文字数制限・readonlyと送信値

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML textarea は複数行のプレーンテキストを受け付けます。初期内容は開きタグと閉じタグの間に配置し、表示サイズには rows/cols を、入力文字数制限には minlength/maxlength を使用してください。値をフォームと一緒に送信するには name を設定します。

表示サイズ、初期内容、および入力制限

textarea には終了タグが必要です。input とは異なり、初期値に HTML の value 属性を使用しません。タグ間の改行やスペースは内容に影響するため、フォーマットのインデントが不要な入力を生み出していないか確認してください。

属性	役割と制限
`rows`、`cols`	正の整数を使用して、平均文字幅で測定した表示行数と幅を設定します。これらは入力行や文字数に制限を設けるものではなく、CSS の幅と高さも表示に影響します。
`placeholder`	値が空の場合に表示されるヒントです。実際の値として送信されず、入力時に消えるため、別のラベルの代わりにはなりません。
`required`	空の場合に通常のフォーム送信をブロックします。空白のみのテキストが意味を持つかどうかは判断しません。
`minlength`、`maxlength`	ユーザーが入力する値のUTF-16コード単位での最小および最大の長さを制限します。1つの絵文字は2単位以上を使用することがあります。最小値だけを指定すると空の値が許可されます。必須入力の場合はrequiredと組み合わせてください。
`readonly`	ユーザーによる編集を防ぎますが、フォーカスとコピーは可能です。nameが指定されている場合、フォームデータに含まれ続けます。
`disabled`	コントロールを無効にし、フォームデータおよび制約検証から除外します。

マルチライン入力の完全な例を実行する

この完全なコードを textarea.html として保存し、ブラウザで開きます。サーバーや追加ライブラリは必要ありません。送信ボタンは送信する代わりにブラウザの名前/値のエントリを表示します。

<!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 { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>問い合わせを作成</h1>
  <form id="demo">
    <label for="message">内容（5～200コード単位）</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="問題の状況と希望する結果を記入してください。">1行目です。
2行目です。</textarea>
    <label for="reference">読み取り専用の案内</label>
    <textarea id="reference" name="reference" rows="2" readonly>注文番号も記入してください。</textarea>
    <label for="locked">無効な項目</label>
    <textarea id="locked" name="locked" rows="2" disabled>この値は送信対象から除外されます。</textarea>
    <button type="submit">送信値を確認</button>
    <button type="reset">初期化</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

最初のフォームを送信します: message と reference が表示されます。JSON \n は値に改行があることを示し、locked は省略されます。
メッセージをクリアして送信します: 必須バリデーションがブロックします。その後、直接通常の文字を2～3文字入力して最低長バリデーションを確認します。
メッセージとして <b>Practice</b> を入力して送信します。入力と出力がテキストであるため、結果は太字ではなくタグ状テキストとして表示されます。
リセットは元の二行のメッセージを復元し、結果をクリアします。リセットは値を空にするのではなく、HTML のデフォルトに戻ります。

ネイティブブラウザのバリデーションは、ユーザー入力や通常のフォーム送信に役立ちます。同じチェックはスクリプトによって割り当てられた値には保証されないため、実際のアプリケーションではサーバー側でも必須値、許可された長さ、フォーマットを検証する必要があります。

視覚的な折り返しと実際の改行を区別する

入力欄の幅による画面上の折り返しと、Enterキーで挿入した改行は別のものです。デフォルトの wrap="soft" は、テキストが視覚的に折り返されるだけで送信された改行を追加しません。wrap="hard" は、指定された列幅に従って送信された改行を追加し、cols を必要とします。狭い画面に合わせるには、まずデフォルトの折り返しと CSS の幅を使用してください。

この例の max-width: 100% は、狭い画面でもフィールドを親要素内に収めるのに役立ち、resize: vertical はユーザーがフィールドの高さを変更できるようにします。cols="32" のピクセル幅はフォント、文字幅、ブラウザによって異なるため、正確に 1 行に 32 文字が収まると仮定しないでください。

JavaScript で値を読み取り、サーバーで検証します

現在の入力はtextarea.valueを通して読み込み、デフォルトはtextarea.defaultValueを通して読み込みます。ユーザーの編集を読むには、タグのtextContentではなくvalueを使用してください。例では結果をtextContentに書き込むため、入力はHTMLとして実行されません。

readonlyとdisabledはセキュリティコントロールではありません。ユーザーは開発者ツールや別のリクエストを介して値を変更できるため、変更不可の注文番号や権限データは信頼できるサーバーデータで確認してください。サーバーがバイト数や他の文字単位をカウントする場合、ブラウザのmaxlengthと同じ単位を使用しているか確認してください。

MDNのtextarea要素リファレンスは属性と制約について説明しています。

HTMLリファレンス