概要
名前やメールアドレスなど、ユーザーに文字を直接入力してもらうための欄です。何を入力する欄かを示す <label> を for／id で input と結び付けておくと、ラベルをクリックしても入力欄にフォーカスが移り、スクリーンリーダーでも「何の欄か」が読み上げられます。補足文で入力形式のヒントを添えたり、入力内容が不正なときは aria-invalid とエラーメッセージで状態を明示したりします。
別名
表記ゆれ：インプット、テキストフィールド、入力ボックス、text input
英語の “input” をそのままカタカナにした「インプット」も現場ではよく使われますが、正式には <input> 要素そのものを指す言葉です。
AI への伝え方
「メールアドレスの入力欄を label 付きで作って、不正な形式のときはエラー表示にして」のように、label の必要性とエラー時の見た目をセットで伝えます。入力例を示したいだけなら「プレースホルダー」の役割になるため、ラベルの代わりにしないでほしい旨を伝えると誤解を防げます。
似たパーツとの違い
「プレースホルダー」は入力欄の中に薄く表示される入力例で、テキスト入力欄を構成する要素の 1 つです。ラベルの代わりに使うと、入力を始めた瞬間にヒントが消えてしまう問題があります。 「フローティングラベル」はラベルが入力欄の中から上に浮き上がる表現方法で、テキスト入力欄とラベルの配置方法の一種という違いがあります。