<input>要素

Technical Summary

Structure / Content model

項目	仕様上の整理
Context	phrasing contentが期待される場所
Content model	Nothing
Tag omission	終了タグなし。inputはvoid element
基本的な意味	typed data field。具体的な意味はtype状態に依存

したがって、inputの中にテキストや子要素を入れて意味を補うことはできません。表示上の説明はlabelなど周囲の要素で関連付けます。

type状態とVariant

状態の例	データの意味	関連するコントロール
Hidden	任意の文字列	表示用コントロールなし
Text / Search	改行を含まない文字列	テキストまたは検索コントロール
Email / URL / Password	メールアドレス、絶対URL、機密性のある文字列	テキストコントロール（Passwordは入力を隠す）
Date / Month / Week / Time	タイムゾーンなしの日付・時刻の値	日付・時刻コントロール
Number / Range	数値。Rangeは厳密値が重要でないことも表す	テキスト・spinner・slider等
Checkbox / Radio	定義済み集合の選択、または列挙値	checkbox / radio button
File / Submit / Image / Reset / Button	ファイル、送信、画像座標、リセット、ボタンの各状態	状態に対応する専用コントロール

これは単なる見た目の切替ではありません。仕様は状態ごとに、content attribute、IDL attribute、method、eventの適用可否を定義します。

<input type="email" name="address">
<input type="checkbox" name="topics" value="html">
<input type="date" name="published-on">

Enumerated attributeとしての type

typeは任意の文字列をそのまま意味として採用する属性ではなく、定義済みkeywordから状態を選ぶenumerated attributeです。値がない場合と無効な値の場合はText状態になります。未知の値を指定しても、独自の新しいinput状態は作成されません。

条件	選択される状態	注意点
type省略	Text	通常の1行テキスト入力として扱う
定義済みkeyword	対応する状態	状態ごとの適用表と個別仕様を確認する
未知または無効な値	Text	値そのものを新しい状態として解釈しない

Form-associated / Category

inputはform-associated elementです。ただし、type状態によってcategoryが変わります。

状態	主なcategory / 関連性
Hidden以外	flow、phrasing、interactive、listed、labelable、submittable、resettable、form-associated、palpable
Hidden	flow、phrasing、listed、submittable、resettable、form-associated。interactive、labelable、palpableとしては扱わない

同じ要素名だからといって、すべての状態が同じUI・アクセシビリティ・イベント・フォーム処理を持つわけではありません。

Attributes / Constraint validation

• nameはフォーム送信で使用する名前と、form.elements APIでの参照に関係します。
• value、checked、filesなどは、選択された状態に応じた値・状態を表します。
• required、pattern、min、max、step、minlength、maxlengthなどは、状態ごとに適用範囲と検証方法が定義されます。
• disabled、readonly、autocomplete、listなども、すべての状態で同じ意味を持つとは限りません。

制約検証の対象になるかどうかは、属性名の一覧だけでは決まりません。状態、disabled・readonly等の条件、値の型、フォーム送信処理を合わせて確認する必要があります。

const field = document.querySelector('input');
field.type;
field.value;
field.validity;
field.checkValidity();

Labelとの関係

labelableな状態では、label要素のforとinputのidを対応させるexplicit association、またはlabelの子孫に置くimplicit associationを使えます。placeholderはlabelの代替ではありません。

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" autocomplete="email">

DOM Interface

input要素はHTMLInputElementとして公開されます。共通のvalueやtypeだけでなく、checked、files、valueAsDate、valueAsNumber、validity、labels、stepUp()など、状態に依存するAPIを持ちます。

Fact / Evidence（主張 / 根拠）

主要Factを、適用条件・確認状態・仕様上の根拠位置と対応付けています。未完了の範囲は下のCoverage / Open Issuesに残しています。

Evidence

1. HTML Standard: The input element — 意味、category、content model、属性、DOM interface
2. HTML Standard: States of the type attribute — typeの各状態、適用範囲、状態別処理
3. HTML Standard: The label element — labelable controlとの関連付け
4. HTML Standard: Form control infrastructure — form-associated、constraint validation、フォームコントロールの共通基盤

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

共通fixture / 記録: <form id="evidence-form" method="get">内に、type省略のinput、for/idによる明示関連、label内inputの暗黙関連、required、disabled、submitとtype省略のbuttonを配置しました。環境: Chrome 152.0.0.0（Windows NT 10.0） / 確認日 2026-09-12。

WPTの対応付けにはWPTリポジトリ、アクセシビリティの基準にはHTML-AAMを参照します。

Coverage / Open Issues

• 確認済みtyped data field、typeの状態選択、void要素、主要category、labelとの関係、HTMLInputElementの概要
• 未完了全type状態についての属性適用表、値サニタイズ、変換規則、イベントの完全な追跡
• 未完了フォーム送信のentry list生成、successful controls、form-associated要素間の処理順序
• 未完了ARIA・platform accessibility mapping、ブラウザー別実装結果、WPT、歴史的変更

このページは初期Coverageです。確認済みの範囲を示すものであり、input要素全体の検証完了や公開可能性を主張しません。

Related surface

初心者向けのtypeの選び方、label、フォーム例はYugienのinput要素ページを参照してください。labelable要素との関連付けとaccessible nameはAtlasのlabel要素、リンクの条件とactivation behaviorはAtlasのa要素で確認できます。