textarea要素の使い方

HTMLのtextarea要素は、問い合わせ内容やコメントのような複数行の文章を入力するためのフォーム部品です。短い一行の入力にはinput、改行を含む文章にはtextareaを使います。

先に結論

最小の例

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

labelのforとtextareaのidを同じ値にすると、説明と入力欄が関連付けられます。rowsとcolsは最初に表示する大きさの目安です。画面の幅に合わせる調整はCSSで行います。

この例は入力欄の使い方に集中するため、送信ボタンと送信先を置いていません。実際に送信するには、フォームのaction、送信ボタン、サーバー側の処理も用意します。

初期値を書く場所

textareaの初期値は、開始タグと終了タグの間のテキストです。value属性を付けても、inputのように初期値を指定する方法にはなりません。

<textarea id="note" name="note" rows="4">最初に表示する文章</textarea>

書き方	意味
タグの間のテキスト	最初に表示する初期値になる
textarea.value	現在入力されている値を読む・変更する
textarea.defaultValue	フォームのリセット時に戻る基準の値を扱う

ユーザーが入力した後の現在値と、HTMLに書いた初期値は同じとは限りません。フォームのリセットでは、初期値を基準に入力欄が戻ります。

大きさとヒントを指定する

rowsは表示する行数、colsは1行の文字数の目安です。文章量に合わせて値を決めますが、利用者の画面幅はさまざまなので、最終的な幅や余白はCSSでも調整します。

<label for="comment">コメント</label>
<textarea id="comment" name="comment" rows="6" cols="50"
  placeholder="内容を入力してください"></textarea>

placeholderは入力前に表示する短いヒントです。入力欄の目的をいつでも伝えるlabelの代わりにはなりません。

必須入力と文字数

requiredを付けると、空のまま送信しないようにブラウザーの制約検証を利用できます。minlengthとmaxlengthでは、入力する文章の長さに下限・上限を設けられます。

<label for="description">説明（10文字以上）</label>
<textarea id="description" name="description"
  minlength="10" maxlength="500" required></textarea>

ブラウザーの制約検証は入力を助ける仕組みです。送信された値が正しいか、許可された内容かどうかは、サーバー側でも必ず確認します。

readonlyとdisabledの違い

属性	入力欄の状態	フォーム送信
readonly	表示・選択はできるが、ユーザーは編集できない	通常のフォーム部品として扱われる
disabled	操作できない部品として扱われる	値はフォーム送信の対象にならない

一時的に編集だけ禁止したい場合と、その部品をフォーム処理から外したい場合を区別して使います。どちらの場合も、サーバー側で値を信頼してはいけません。

よくある間違い

• <textarea value="文章">と書く。初期値はタグの間のテキストで指定します。
• labelを付けず、placeholderだけで入力内容を説明する。placeholderは入力後に消えるため、labelを用意します。
• rowsやcolsだけで、すべての画面のサイズを固定しようとする。レスポンシブな幅や見た目はCSSで調整します。
• ブラウザーの入力チェックだけで安全だと考える。受け取った値はサーバー側でも検証し、必要に応じて保存前に処理します。
• 編集できない部品にdisabledを付けたまま送信できると思う。送信対象に残したいなら、readonlyなど別の設計を検討します。

もう少し詳しく

textareaは単なる大きな入力欄ではありません。初期値と現在値、フォームリセット、制約検証、改行、アクセシビリティ、送信値が関係します。利用者が何を入力するのかをlabelで伝え、必要な文章量や改行の扱いを説明すると、迷いにくいフォームになります。

Atlasで確認する

仕様上の初期値・現在値の境界、改行の正規化、wrap、フォーム送信、HTMLTextAreaElement API、アクセシビリティマッピングまで確認したい場合は、Yugien Atlasのtextarea要素を参照してください。フォーム送信の共通処理はAtlasのform要素、labelとの関連付けはAtlasのlabel要素でも確認できます。