テキストエリア

Textarea

別名: テキストエリア入力欄、複数行テキストボックス、Text area、Multiline text input

生態(さわってみる)

0 / 140文字

一言定義

複数行にわたる長文を自由に入力できる、縦に伸縮可能なテキスト入力UI。

分類

使う場面

  • コメント・自由記述・お問い合わせ内容など、改行を含む長文を書かせたいとき
  • 入力量の目安が数十〜数百文字に及ぶとき

避ける場面

  • 1行で完結する短い値(氏名・メールアドレスなど)を集めるとき(→テキストフィールド)
  • 太字やリストなどの装飾を持たせたいとき(→リッチテキストエディタ)

近縁種との比較

テキストフィールドとの違いは1行か複数行かのみで、入力枠の大きさと改行の可否以外の挙動は ほぼ共通する。氏名やメールアドレスのように1行で完結する値にはテキストフィールドを、コメントや 自由記述のような長文にはテキストエリアを使い分ける。太字やリストといった装飾まで必要になった 場合は、テキストエリアの範囲を超えてリッチテキストエディタの領分になる。

実例リンク

アクセシビリティ

role
textarea + 関連付けられた<label>
キーボード操作
Tabで到達、Enterで改行(フォーム送信をトリガーしない)
補足
リサイズ可否はCSSのresizeプロパティで制御する。文字数上限がある場合はaria-describedbyで文字数カウンターと関連付ける