input要素

input要素は、ユーザーがデータ入力できるようにするためのフォームコントロールを表します。

type属性によって振る舞いが大きく異なり、単一行テキストフィールド、チェックボックス、ラジオボタンなどに変化する特殊な要素です。それぞれ入力できる値の型も変化する特徴があります。

form要素と組み合わせることで入力値をサーバへ送信する目的の他にも、JavaScriptウィジェットなどでも活躍します。

type属性によって変化するのは振る舞いだけではなく付与できる属性も変化する複雑さをもちます。

使用例

<label>お名前<input type="text" pattern="[a-z]+-[a-z]+" title="苗字と名前を半角ハイフン繋ぎの小文字半角英字でご記入ください" placeholder="user-name"></label>

入力内容を制限するために用いられる正規表現を指定できるpattern属性はtitle属性のもつ元々の「要素の補足情報」というセマンティクスを「正規表現の説明」へと変化させます。

<ul>

<li><label>男性<input type="radio" name="gender"></label></li>

<li><label>女性<input type="radio" name="gender"></label></li>

</ul>

使用可能な属性

• すべてのグローバル属性
• accept
• alt
• autocomplete
• autofocus
• checked
• dirname
• disabled
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height
• inputmode
• list
• max
• maxlength
• min
• minlength
• multiple
• name
• pattern
• placeholder
• readonly
• required
• size
• src
• step
• type
• value
• width

コンテンツカテゴリ

• フローコンテンツ
• フレージングコンテンツ
• インタラクティブコンテンツ
  • ただしtype属性値がhiddenではない場合
• フォーム関連要素（リスト対象、ラベル付け可能、送信可能、およびリセット可能、再関連付け可能）
  • ただしtype属性値がhiddenではない場合
• パルパブルコンテンツ
  • ただしtype属性値がhiddenではない場合
• フォーム関連要素（リスト対象、送信可能、リセット可能、再関連付け可能）
  • ただしtype属性値がhiddenである場合

子要素にしていい要素の種類

• 空要素のため、子孫になる要素を持ちません

親要素にしていい要素の種類

• フレージングコンテンツが期待されているすべての要素

仕様書と策定状況