テキストフィールド
Text Field
別名: テキストボックス、テキスト入力欄、Text input、Text box、Input field
生態（さわってみる）
ラベルは常に表示、placeholderは未入力時だけのヒントで入力すると消える（別物）
一言定義
ラベルと1行の入力欄からなる、フォームで最も基本的な文字入力UI。
分類
使う場面
- 名前・メール・住所など、単一行で完結する自由記述を集めたいとき
- 入力候補が絞り込めない、あるいは事実上無数にあるとき
避ける場面
- 複数行にわたる長文入力が必要なとき（→テキストエリア）
- 入力候補を提示して選ばせたいとき（→オートコンプリートやセレクトボックス）
近縁種との比較
テキストエリアとは入力できる行数で区別され、1行で完結する値にはテキストフィールド、 改行を含む長文にはテキストエリアを使う。候補選択を伴わせたい場合はオートコンプリートに 発展させ、送信前にその場でエラーを伝えたい場合はインラインバリデーションを組み合わせる。 日付という特定のデータ型に特化させたものがデートピッカーで、表記ゆれが起きやすいかどうかで 汎用のテキストフィールドに任せるかカレンダーUIに任せるかを判断する。
実例リンク
アクセシビリティ
- role
- input[type="text"]（またはemail/tel等）+ 関連付けられた<label>（for/id、またはlabelでinputを包む）
- キーボード操作
- Tabで到達、通常のテキスト編集キー操作
- 補足
- フローティングラベルはCSSのみ（:placeholder-shown疑似クラス等）で実装可能。labelとplaceholderは別物で、placeholderを常時表示のラベル代わりにしてはいけない（NN/g）