実行できるHTMLドキュメント: テキストエリア

Q: HTML でテキストエリアを作るにはどうすればいいですか？

フォームの中に と一緒に と書きます。 と違って終了タグがあり、タグの間に書いたものが最初のテキストになります。

Q: テキストエリアの初期値を設定するには？

タグの間にテキストを書きます: Hello 。HTML の textarea には value 属性がありません。JavaScript では textarea.value を読み書きします。

Q: テキストエリアのサイズを変更できないようにするには？

CSS で resize: none を指定します。たいていは resize: vertical のほうが親切です。長いテキストのために高さは広げられますが、横にドラッグしてレイアウトを崩すことはできません。

Q: テキストエリアの文字数を制限するには？

maxlength="280" を付けます。ブラウザはその長さで入力を受け付けなくなります。残りの文字数がわかるよう、input イベントで更新するカウンターを横に表示し、サーバーでも長さをチェックしましょう。

Q: テキストエリアのフォントが違うのはなぜですか？

Chrome と Firefox は textarea に初期状態で約 13px の等幅フォントを使います。font: inherit を付けると、ページのほかの部分と揃います。

テキストエリアの作り方

<textarea> は複数行のためのテキスト欄で、メッセージ、コメント、説明などに使います。rows で見える高さを行数で決めます。何行か入力して Send を押してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

<input> とは 2 つの点が違います。textarea には終了タグが必要で、最初のテキストは value 属性ではなくタグの間に書きます。送信時には name と一緒に、改行も含めたテキストが値として送られます。

テキストエリアの属性

属性	働き
`name`	テキストを送るときのキー
`rows`	見える高さを行数で指定 (初期値 2)
`cols`	見える幅を文字数で指定 (初期値 20)。たいていは CSS の `width` のほうがよい
`placeholder`	空の間に表示されるヒント
`maxlength`、`minlength`	文字数での長さの制限
`required`	空にできない
`readonly`	選択とコピーはできるが編集できない。送信はされる
`disabled`	使えない。送信もされない
`wrap`	`soft` (初期値) または `hard`。下で説明
`spellcheck`	`true` または `false`

初期値はタグの間に書く

<textarea> と </textarea> の間にあるものはすべて、空白、タブ、改行も含めて書いたとおりに最初のテキストになります。無視されるのは開始タグの直後の改行 1 つだけです。そのため、インデントが落とし穴になります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

2 つ目のテキストエリアは 4 つの空白で始まり、改行ともう 2 つの空白で終わっています。読者はそれを全部消さなければなりません。初期値のテキストはタグにくっつけて書きましょう。

textarea の中の HTML は描画されません。タグの間の <b>hi</b> は、そのままの文字として表示されます。

幅、サイズ変更、自動で伸びる欄

ブラウザでは、読者が角をドラッグしてテキストエリアのサイズを変えられます。CSS の resize でそれを制限でき、width: 100% と box-sizing: border-box で入れ物の幅にぴったり合わせられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

最後の欄は、キーを押すたびに高さをリセットし、scrollHeight (中身と padding の高さ) に枠線を足した値に設定しています。何行か入力してみてください。スクロールバーは表示されません。いちばん親切な初期設定は resize: vertical です。長い回答には場所があり、誰もレイアウトより広く欄をドラッグできません。

Chromium 系のブラウザでは、field-sizing: content を使えば CSS だけで自動で伸ばせます。対応していないブラウザはこの行を無視して普通のサイズのままにするので、追加しても安全です。ただ、すべての読者に伸びる欄を提供したいならスクリプトは残しましょう。

maxlength と文字数カウンター

maxlength は入力を決まった文字数で止めます。それだけでは何の警告も出ないので、読者は入力できなくなって初めて気づきます。カウンターがあれば解決します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby を使うと、スクリーンリーダーは入力欄と一緒にカウンターを読み上げ、aria-live="polite" はキー入力の合間にその変化を伝えます。maxlength を守らせるのはブラウザだけなので、サーバーでも長さをチェックする必要があります。

送信されるテキストの改行

読者が入れた改行はテキストと一緒に送られます。送信データでは、それぞれが復帰と改行の組 (URL エンコードされたフォームでは %0D%0A) になり、ほとんどのサーバーはこれを想定しています。後でそのテキストを改行付きでページに表示するには、出力時に <br> に変換するか、要素に white-space: pre-line を指定します。

wrap="hard" (cols が必要です) はさらに、見た目上折り返された位置にも改行を入れるので、サーバーは cols 文字以下の行を受け取ります。初期値の wrap="soft" は、読者が入力した改行だけを送ります。

テキストエリアのデザイン

Chrome と Firefox は textarea に約 13px の等幅フォントを使うので、テキストエリアだけ浮いて見えることがよくあります。font: inherit で直せます。枠線を変えるなら、フォーカスのスタイルは見えるように残しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

プレースホルダーのテキストは読めるコントラストにしましょう。多くのデザインで使われる薄いグレーは読みにくいです。そして、ほかの入力欄と同じく、プレースホルダーはラベルではありません。読者が入力を始めると消えてしまいます。ラベルについては HTML の label で解説しています。

よくある間違い

<textarea value="..."> と書く。 value 属性はありません。タグの間にテキストを書きましょう。
HTML に合わせて初期値のテキストをインデントする。 空白が値の一部になります。
自己終了の <textarea /> と書く。 空要素ではないので、</textarea> がないとページの残りがテキストとして中に取り込まれます。
font: inherit がない。 入力欄が小さな等幅フォントになります。
小さな固定の高さで resize: none にする。 長い回答が小さなスクロールする箱に押し込まれます。
maxlength だけに頼る。 サーバーでも長さをチェックしましょう。

よくある質問

HTML でテキストエリアを作るにはどうすればいいですか？

フォームの中に <label> と一緒に <textarea name="message" rows="4"></textarea> と書きます。<input> と違って終了タグがあり、タグの間に書いたものが最初のテキストになります。

テキストエリアの初期値を設定するには？

タグの間にテキストを書きます: <textarea name="bio">Hello</textarea>。HTML の textarea には value 属性がありません。JavaScript では textarea.value を読み書きします。

テキストエリアのサイズを変更できないようにするには？

CSS で resize: none を指定します。たいていは resize: vertical のほうが親切です。長いテキストのために高さは広げられますが、横にドラッグしてレイアウトを崩すことはできません。

テキストエリアの文字数を制限するには？

maxlength="280" を付けます。ブラウザはその長さで入力を受け付けなくなります。残りの文字数がわかるよう、input イベントで更新するカウンターを横に表示し、サーバーでも長さをチェックしましょう。

テキストエリアのフォントが違うのはなぜですか？

Chrome と Firefox は textarea に初期状態で約 13px の等幅フォントを使います。font: inherit を付けると、ページのほかの部分と揃います。

HTML のテキストエリア: rows、resize、maxlength、初期値