HTML: The Living Standard

Edition for Web Developers — Last Updated 13 November 2024

1. 1. 1. 4.10.5 input要素
         1. 4.10.5.1 type属性の状態
            1. 4.10.5.1.1 Hidden状態（type=hidden）
            2. 4.10.5.1.2 Text（type=text）状態とSearch状態（type=search）
            3. 4.10.5.1.3 Telephone状態（type=tel）
            4. 4.10.5.1.4 URL状態（type=url）
            5. 4.10.5.1.5 Email状態（type=email）
            6. 4.10.5.1.6 Password状態（type=password）
            7. 4.10.5.1.7 Date状態（type=date）
            8. 4.10.5.1.8 Month状態（type=month）
            9. 4.10.5.1.9 Week状態（type=week）
            10. 4.10.5.1.10 Time状態（type=time）
            11. 4.10.5.1.11 Local Date and Time状態（type=datetime-local）
            12. 4.10.5.1.12 Number状態（type=number）
            13. 4.10.5.1.13 Range状態（type=range）
            14. 4.10.5.1.14 Color状態（type=color）
            15. 4.10.5.1.15 Checkbox状態（type=checkbox）
            16. 4.10.5.1.16 Radio Button状態（type=radio）
            17. 4.10.5.1.17 File Upload状態（type=file）
            18. 4.10.5.1.18 Submit Button状態（type=submit）
            19. 4.10.5.1.19 Image Button状態（type=image）
            20. 4.10.5.1.20 Reset Button状態（type=reset）
            21. 4.10.5.1.21 Button状態（type=button）
         2. 4.10.5.2 共通input要素属性
            1. 4.10.5.2.1 maxlengthおよびminlength属性
            2. 4.10.5.2.2 size属性
            3. 4.10.5.2.3 readonly属性
            4. 4.10.5.2.4 required属性
            5. 4.10.5.2.5 multiple属性
            6. 4.10.5.2.6 pattern属性
            7. 4.10.5.2.7 minおよびmax属性
            8. 4.10.5.2.8 step属性
            9. 4.10.5.2.9 list属性
            10. 4.10.5.2.10 placeholder属性
         3. 4.10.5.3 共通input要素API

4.10.5 input要素

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

type属性がHidden状態でない場合：インタラクティブコンテンツ。

type属性がHidden状態でない場合：記載、ラベル付け可能、送信可能、リセット可能、および自動大文字化および自動修正継承フォームに関連付けられた要素。

type属性がHidden状態である場合：記載、送信可能、リセット可能、および自動大文字化および自動修正継承フォームに関連付けられた要素。

type属性がHidden状態でない場合：パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

Nothing。

text/htmlにおけるタグ省略：

終了タグなし。

コンテンツ属性：

グローバル属性

accept — ファイルアップロードコントロールで予期されるファイルタイプに対するヒント

alpha — Allow the color's alpha component to be set

alt — 画像が利用不可である場合に使用する代用テキスト

autocomplete — フォームオートフィル機能に対するヒント

checked — コントロールがチェックされているかどうか

colorspace — The color space of the serialized color

dirname — フォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前

disabled — フォームコントロールが無効であるかどうか

form — form要素とこの要素を関連付ける

formaction — フォーム送信に使用するURL

formenctype — フォーム送信に使用するエントリーリストのエンコーディングタイプ

formmethod — フォーム送信に使用する変形

formnovalidate — フォーム送信のためのフォームコントロール検証を回避する

formtarget — フォーム送信に対するナビゲート可能

height — 縦の次元

list — オートコンプリートオプションのリスト

max — 最大値

maxlength — 値の最大長さ

min — 最小値

minlength — 値の最小長さ

multiple — 複数の値を許可するかどうか

name — フォーム送信およびform.elements APIで使用する要素の名前

pattern — フォームコントロールの値でマッチするパターン

placeholder — フォームコントロール内に配置されるユーザー可視ラベル

popovertarget — ポップオーバー要素を切り替え、表示、または非表示にするターゲットとする

popovertargetaction — ターゲットのポップオーバー要素を切り替える、表示する、またじゃ非表示にするかを示す

readonly — ユーザーによって編集される値を許可するかどうか

required — コントロールがフォーム送信に要求されるかどうか

size — コントロールのサイズ

src — リソースのアドレス

step — フォームコントロールの値でマッチする粒度

type — フォームコントロールの種類

value — フォームコントロールの値

width — 横の次元

また、title属性は、この要素で特別なセマンティックスを持つ：パターンの説明（pattern属性とともに使用する場合）。

アクセシビリティの考慮：

Hidden状態におけるtype属性：著者向け、実装者向け。

Text状態におけるtype属性：著者向け、実装者向け。

Search状態におけるtype属性：著者向け、実装者向け。

Telephone状態におけるtype属性：著者向け、実装者向け。

URL状態におけるtype属性：著者向け、実装者向け。

Email状態におけるtype属性：著者向け、実装者向け。

Password状態におけるtype属性：著者向け、実装者向け。

Date状態におけるtype属性：著者向け、実装者向け。

Month状態におけるtype属性：著者向け、実装者向け。

Week状態におけるtype属性：著者向け、実装者向け。

Time状態におけるtype属性：著者向け、実装者向け。

Local Date and Time状態におけるtype属性：著者向け、実装者向け。

Number状態におけるtype属性：著者向け、実装者向け。

Range状態におけるtype属性：著者向け、実装者向け。

Color状態におけるtype属性：著者向け、実装者向け。

Checkbox状態におけるtype属性：著者向け、実装者向け。

Radio Button状態におけるtype属性：著者向け、実装者向け。

File Upload状態におけるtype属性：著者向け、実装者向け。

Submit Button状態におけるtype属性：著者向け、実装者向け。

Image Button状態におけるtype属性：著者向け、実装者向け。

Reset Button状態におけるtype属性：著者向け、実装者向け。

Button状態におけるtype属性：著者向け、実装者向け。

DOMインターフェイス：

HTMLInputElementを使用する。

input要素は、通常、ユーザーがデータを編集できるようにするためのフォームコントロールと、型指定されたデータフィールドを表す。

type属性は、要素のデータ型（および関連するコントロール）を制御する。属性は、次のキーワードと状態を持つ列挙属性である：

この属性の欠損値のデフォルトと不正値のデフォルトは、両方ともText状態である。

Which of the accept, alpha, alt, autocomplete, checked, colorspace, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, and list IDL attributes, the select() method, the selectionStart, selectionEnd, and selectionDirection, IDL attributes, the setRangeText() and setSelectionRange() methods, the stepUp() and stepDown() methods, and the input and change events apply to an input element depends on the state of its type attribute. The subsections that define each type also clearly define in normative "bookkeeping" sections which of these feature apply, and which do not apply, to each type. これらの機能の動作は、それら様々なセクションで定義されるため、それらが適用するかどうかに依存する。for content attributes, for APIs, for events).

次の表は、コンテンツ属性、IDL属性、メソッド、およびイベントのどれが各状態に適用されるかをまとめたものである：

†コントロールが選択可能なテキストを持たない場合、select()メソッドは、"InvalidStateError" DOMExceptionなしで操作不能に終わる。

valueコンテンツ属性はinput要素のデフォルトの値を示す。

checkedコンテンツ属性は、input要素のデフォルトのcheckednessを与える真偽属性である。

name属性は要素の名前を表す。dirname属性は、要素の方向がどのように送信されるかを制御する。disabled属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。form属性は、フォームの所有者とinput要素を明示的に関連付けるために使用される。autocomplete属性は、どのようにユーザーエージェントがオートフィルの振る舞いを提供するかを制御する。

4.10.5.1 type 属性の状態

4.10.5.1.1 Hidden状態（type=hidden）

input要素は、検査されることを意図せず、またユーザーによって操作されない値を表す。

name属性が存在し、かつ文字列"_charset_"にASCII大文字・小文字区別で一致する値を持つ場合、その要素のvalue属性を省略しなければならない。

4.10.5.1.2 Text（type=text）状態とSearch状態（type=search）

input要素は、要素の値に対する1行のプレーンテキスト編集コントロールを表す。

Text状態とSearch状態の違いは、主に文体である：検索コントロールが通常のテキストコントロールと区別されるプラットフォームにおいて、Search状態は、通常のテキストコントロールのように表示されるよりも、プラットフォームの検索コントロールと一致する外観になるかもしれない。

指定される場合、value属性は、U+000A LINE FEED（LF）またはU+000D CARRIAGE RETURN（CR）文字を含まない値を持たなければならない。

4.10.5.1.3 Telephone状態（type=tel）

input要素は、その要素の値で与えられた電話番号の編集に対するコントロールを表す。

指定される場合、value属性は、U+000A LINE FEED（LF）またはU+000D CARRIAGE RETURN（CR）文字を含まない値を持たなければならない。

URLやEmail型とは異なり、Telephone型は特定の構文を強制しない。これは意図的なものである。妥当である電話番号は多種多様にわたって存在するので、実際に、電話番号フィールドは自由形式のフィールドになる傾向がある。特定の形式を適用する必要のあるシステムは、クライアント側の検証機構に接続するためにpattern属性またはsetCustomValidity()メソッドを使用するよう推奨される。

4.10.5.1.4 URL状態（type=url）

input要素は、要素の値で指定された単一の絶対URLを編集するためのコントロールを表す。

指定されかつ空でない場合、value属性は、絶対URLである潜在的にスペースで囲まれた妥当なURLである値を持たなければならない。

<input type="url" name="location" list="urls">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="https://www.rfc-editor.org/rfc/rfc2045">
 <option label="HTML" value="https://html.spec.whatwg.org/">
 <option label="DOM" value="https://dom.spec.whatwg.org/">
 <option label="Fullscreen" value="https://fullscreen.spec.whatwg.org/">
 <option label="Media Session" value="https://mediasession.spec.whatwg.org/">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix.org/version3/">
</datalist>

4.10.5.1.5 Email state (type=email)

Email状態がどのように動作するかは、multiple属性が指定されるかどうかに依存する。

multiple属性が要素に指定されない場合

input要素は、その要素の値valueで指定された電子メールアドレスを編集するためのコントロールを表す。

指定されてかつ空でない場合、value属性は、単一の妥当な電子メールアドレスである値を持たなければならない。

multiple属性が要素に指定されている場合

input要素は、要素の値で与えられた電子メールアドレスを追加、削除、および編集するに対するコントロールを表す。

value属性が指定される場合、妥当な電子メールアドレスのリストである値を持たなければならない。

multiple属性が設定または除去される場合、ユーザーエージェントは値サニタイズアルゴリズムを実行しなければならない。

妥当な電子メールアドレスは、Unicode文字セットと以下のABNFのemail生成物にマッチする文字列である。このABNFは、RFC 1123で説明される拡張を実装する。[ABNF] [RFC5322] [RFC1034] [RFC1123]

email         = 1*( atext / "." ) "@" label *( "." label )
label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext         = < as defined in RFC 5322 section 3.2.3 >
let-dig       = < as defined in RFC 1034 section 3.5 >
ldh-str       = < as defined in RFC 1034 section 3.5 >

この要求事項は、この条件で実際に使用するには、あまりにも厳格である（"@"文字の前）と同時に、あまりにも曖昧（"@"文字の後）であり、かつあまりにも緩慢な（コメント、空白文字、ほとんどのユーザーにはなじみのない方法である引用符を許容する）電子メールアドレスの構文を定義する、RFC5322の故意の違反である。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

ここで、各トークンは、妥当な電子メールアドレスそのものである。妥当な電子メールアドレスのリストは、コンマ区切りトークンの集合である。

4.10.5.1.6 Password状態（type=password）

input要素は、要素の値に対する1行のプレーンテキスト編集コントロールを表す。ユーザー以外が値を見ることができないようにユーザーエージェントは値を見えなくすべきである。

指定される場合、value属性は、U+000A LINE FEED（LF）またはU+000D CARRIAGE RETURN（CR）文字を含まない値を持たなければならない。

4.10.5.1.7 Date状態（type=date）

input要素は、特定の日付を表す、要素の値を設定する文字列に対するコントロールを表す。

入力形式と日付、時刻、および数値フォームコントロールに対する送信フォーマットとの違いに関する議論については概要の節を参照のこと。

指定されてかつ空でない場合、value属性は、妥当な日付文字列である値を持たなければならない。

min属性が指定された場合、妥当な日付文字列となる値を持たなければならない。max属性が指定された場合、妥当な日付文字列となる値を持たなければならない。

step属性は日単位で表される。デフォルトのステップは1日である。

4.10.5.1.8 Month状態（type=month）

input要素は、特定の月を表す、要素の値を設定する文字列に対するコントロールを表す。

入力形式と日付、時刻、および数値フォームコントロールに対する送信フォーマットとの違いに関する議論については概要の節を参照のこと。

指定されてかつ空でない場合、value属性は、妥当な月文字列である値を持たなければならない。

min属性が指定された場合、妥当な月文字列となる値を持たなければならない。max属性が指定された場合、妥当な月文字列となる値を持たなければならない。

step属性は月単位で表される。デフォルトのステップは1ヶ月である。

4.10.5.1.9 Week状態（type=week）

input要素は、特定の週を表す、要素の値を設定する文字列に対するコントロールを表す。

入力形式と日付、時刻、および数値フォームコントロールに対する送信フォーマットとの違いに関する議論については概要の節を参照のこと。

指定されてかつ空でない場合、value属性は、妥当な週文字列である値を持たなければならない。

min属性が指定された場合、妥当な週文字列となる値を持たなければならない。max属性が指定された場合、妥当な週文字列となる値を持たなければならない。

step属性は週単位で表される。デフォルトのステップは1週間である。

4.10.5.1.10 Time状態（type=time）

input要素は、特定の時刻を表す、要素の値を設定する文字列に対するコントロールを表す。

入力形式と日付、時刻、および数値フォームコントロールに対する送信フォーマットとの違いに関する議論については概要の節を参照のこと。

指定されてかつ空でない場合、value属性は、妥当な時刻文字列である値を持たなければならない。

min属性が指定された場合、妥当な時刻文字列となる値を持たなければならない。max属性が指定された場合、妥当な時刻文字列となる値を持たなければならない。

step属性は秒単位で表される。デフォルトのステップは60秒である。

4.10.5.1.11 Local Date and Time状態（type=datetime-local）

input要素は、特定のローカルな日付および時刻を表す、要素の値を設定する文字列に対するコントロールを表す。

入力形式と日付、時刻、および数値フォームコントロールに対する送信フォーマットとの違いに関する議論については概要の節を参照のこと。

指定されてかつ空でない場合、value属性は、妥当なローカルな日付および時刻文字列である値を持たなければならない。

min属性が指定された場合、妥当なローカル日付および時刻文字列となる値を持たなければならない。max属性が指定された場合、妥当なローカル日付および時刻文字列となる値を持たなければならない。

step属性は秒単位で表される。デフォルトのステップは60秒である。

Date状態の節における歴史的な日付の注意を参照のこと。

<fieldset>
 <legend>Destination</legend>
 <p><label>Airport: <input type=text name=to list=airports></label></p>
 <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
</fieldset>
<datalist id=airports>
 <option value=ATL label="Atlanta">
 <option value=MEM label="Memphis">
 <option value=LHR label="London Heathrow">
 <option value=LAX label="Los Angeles">
 <option value=FRA label="Frankfurt">
</datalist>

4.10.5.1.12 Number状態（type=number）

input要素は、数値を表す文字列に要素の値を設定する文字列に対するコントロールを表す。

この仕様は、ユーザーエージェントがどのようなユーザーインターフェイスを使用するかを定義しない。ユーザーエージェントのベンダーは、最良のものをユーザーのニーズに提供するよう考慮することが推奨される。たとえば、ペルシャ語やアラビア語商圏においてユーザーエージェントは、ペルシャ語とアラビア語の数字入力（上記のように送信するために必要な形式に変換）をサポートするだろう。同様に、ローマ人に設計されたユーザーエージェントは、小数よりもむしろローマ数字の値を表示することがある。または（より現実的に）フランス市場向けに設計されたユーザーエージェントは1000と小数の前のコンマとの間にアポストロフィで値を表示することがあり、内部的に上記の送信形式に変換して、その方法で値を入力できる。

指定されてかつ空でない場合、value属性は、妥当な浮動小数点数である値を持たなければならない。

min属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。max属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。

デフォルトのステップは1である（ステップベースが非整数値を持たない限り、ユーザーによって選択される整数のみを許可する）。

<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>

type=number状態は、数字のみで構成されるように出現するが、厳密に番号を伝えない入力に適さない。たとえば、クレジットカード番号や米国の郵便番号には不適切だろう。type=number決定する簡単な方法は、（たとえば"up"と"down"の矢印をもつ）スピンボックスインターフェイスを持つ入力制御が筋が通るかどうかを検討することである。最後の桁で1つ間違ったクレジットカード番号の取得は小さなミスではなく、すべての桁を間違って取得することと同じである。よって、ユーザーが"up"と"down"ボタンを使用してクレジットカード番号を選択することは筋が通らないだろう。スピンボックスインターフェイスが適切でない場合、type=textはおそらく正しい選択である（おそらくinputmodeまたはpattern属性を持つ）。

4.10.5.1.13 Range状態（type=range）

input要素は、数値を表す文字列に要素の値を設定するためのコントロールを表すが、正確な値が重要ではないという通知とともに、Number状態を提供するよりも単純なインターフェイスをユーザーエージェントに提供させる。

value属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。

デフォルト値は、最小値に最小値と最大値の差の半分を加えたものである。ただし、最大値が最小値よりも小さい場合を除き、この場合デフォルト値が最小値となる。

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
 <option value="++50">
</datalist>

input { writing-mode: vertical-lr; height: 75px; width: 49px; background: #D5CCBB; color: black; }

<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>

<input type="range" name="a" list="a-values">
<datalist id="a-values">
<option value="10" label="Low">
<option value="90" label="High">
</datalist>

この状態において、範囲およびステップ制約は、ユーザー入力の間でさえも強制され、そして値を空文字列に設定する方法は存在しない。

min属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。デフォルトの最小は0である。max属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。デフォルトの最大は100である。

デフォルトのステップは1である（min属性が非整数値を持たない限り、整数のみを許可する）。

4.10.5.1.14 Color状態（type=color）

The input element represents a color well control, for setting the element's value to a string representing the serialization of a CSS color.

In this state, there is always a CSS color picked, and there is no way for the end user to set the value to the empty string.

The alpha attribute is a boolean attribute. If present, it indicates the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque.

The colorspace attribute indicates the color space of the serialized CSS color. It also hints at the desired user interface for selecting a CSS color. 属性は、次のキーワードと状態を持つ列挙属性である：

The attribute's missing value default and invalid value default are both the Limited sRGB state.

The value attribute, if specified and not the empty string, must have a value that is a CSS color.

4.10.5.1.15 Checkbox状態（type=checkbox）

input要素は、その要素のcheckedness状態を表す2状態コントロールを表す。要素のcheckedness状態がtrueの場合、コントロールは正の選択を表し、falseの場合、負の選択を表す。要素のindeterminate DOM属性がtrueに設定される場合、あたかもコントロールが第3の状態である、不確定であったかのように、コントロールの選択を隠すべきである。

たとえ要素のindeterminate IDL属性がtrueに設定されても、コントロールはtrueの3状態ではない。indeterminate IDL属性は、第3の状態の外観を与える。

input.indeterminate [ = value ]

✔MDN

HTMLInputElement#indeterminate

Support in all current engines.

Firefox3.6+Safari3+Chrome1+

---

Opera≤12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android≤12.1+

---

caniuse.com table

設定する場合、checkboxコントロールのレンダリングを上書きし、現在の値が表示されないようにする。

4.10.5.1.16 Radio Button状態（type=radio）

input要素は、他のinput要素と組み合わせて使用した場合、1つのみのコントロールがそのcheckedness状態をtrueに設定させることができるラジオボタングループを形成するコントロールを表す。要素のcheckedness状態がtrueである場合、コントロールは、グループ内の選択されたコントロールを表し、falseである場合、選択されてないグループ内のコントロールを示す。

input要素aを含むラジオボタングループはまた、次のすべての条件を満たす他のinput要素bを含む：

• input要素bのtype属性は、Radio Button状態となる。
• aおよびbが同じフォームの所有者を持つ、または両者がフォームの所有者を持たないかのいずれか。
• aとbの両方は、同じツリーに属する。
• どちらもname属性を持ち、name属性は空ではなく、aのname属性の値はbのname属性の値と同じある。

ツリーは、ラジオボタングループがその要素のみを含むinput要素を含めてはならない。

ラジオボタングループ内のラジオボタンがいずれもチェックされない場合、（ユーザーまたはスクリプトのいずれかによって）ボタンの1つがチェックされるようになるまで、インターフェイスで初期にチェックされない。

4.10.5.1.17 File Upload状態（type=file）

input要素は、各ファイルがファイル名、ファイルタイプ、ファイル本体（ファイルの内容）で構成される、選択されたファイルのリストを表す。

accept属性は、どのファイルタイプが受け入れられるかのヒントとともにユーザーエージェントを提供するために指定されてもよい。

指定された場合、この属性は、次のいずれかとASCII大文字・小文字不区別で一致しなければならない、それぞれがカンマ区切りトークンの集合で構成しなければならない。

文字列"audio/*"

音声ファイルが受け入れられることを示す。

文字列"video/*"

動画ファイルが受け入れられることを示す。

文字列"image/*"

画像ファイルが受け入れられることを示す。

パラメーターのない妥当なMIMEタイプ文字列

指定された型のファイルが受け入れられることを示す。

最初の文字がU+002E FULL STOP文字（.）である文字列

指定されたファイル拡張をもつファイルが受け入れられることを示す。

トークンは、他のトークンのいずれかとASCII大文字・小文字不区別で一致してはならない（つまり重複は許可されない）。

ユーザーエージェントは、一般的なファイルピッカーよりも適切なユーザーインターフェイスを表示するためにこの属性の値を使用してもよい。たとえば、値image/*を与えられると、ユーザーエージェントはユーザーにローカルカメラのオプションや、写真コレクションから写真の選択を提供できる。値audio/*を与えられると、ユーザーエージェントは、ユーザーにヘッドセットのマイクを使用してクリップを記録するオプションを提供できる。

著者は、特定の形式でデータを検索するとき、任意のMIMEタイプと対応する拡張子の両方を指定することが推奨される。

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

拡張子は曖昧になる傾向があり（たとえば、".dat"拡張子を使用する莫大な数のフォーマットが存在しており、Microsoft Wordの文書でない場合でも、ユーザーは通常、非常に簡単に".doc"という拡張子を持つファイル名に変更できる）、そしてMIMEタイプは信頼性が低くなる傾向がある（たとえば、多くのフォーマットは正式に登録された型を持たず、実際に多くのフォーマットが多数の異なるMIMEタイプを用いて識別される）。ユーザーが敵対的でなく、ユーザーエージェントが完全にaccept属性の要件に従った場合であっても、それが期待されるフォーマットでないかもしれないので、著者は通常、クライアントから受信したデータが慎重に扱われるべきであることに注意する。

function extractFilename(path) {
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12); // modern browser
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  return path; // just the filename
}

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>

4.10.5.1.18 Submit Button状態（type=submit）

input要素は、アクティブにされたとき、フォームを送信するボタンを表す。要素は、具体的に送信ボタンとなるボタンである。

デフォルトのラベルは実装定義であり、かつ通常ボタンの幅はボタンのラベルに依存するため、ボタンの幅はfingerprintableな情報の数ビットをリークすることがありうる。このビットはユーザーエージェントのアイデンティティおよびユーザーロケールに強く相関される可能性がある。

formaction、formenctype、formmethod、formnovalidate、formtarget属性は、フォーム送信用の属性である。

formnovalidate属性は、制約検証をトリガーしない送信ボタンを作成するために使用することができる。

4.10.5.1.19 Image Button状態（type=image）

input要素は、ユーザーが座標を選択してフォームを送信する画像、または代わりに、ユーザーがフォームを送信できるボタンを表す。要素は、具体的に送信ボタンとなるボタンである。

座標に対する2つのエントリーを送信することによってフォームの送信時にサーバーに送信され、制御の名前から得られるが、".x"と".y"はそれぞれの座標のxとy成分をもつ名前に付加される。

画像はsrc属性によって指定される。src属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でないURLを含めなければならない。

alt属性は、画像を使用できないユーザーおよびユーザーエージェントのためにボタンのテキストラベルを提供する。alt属性は存在しなければならず、画像が利用できなかった場合に等価なボタンに対して適切だろうラベルを与える空でない文字列を含まなければならない。

input要素は、次元属性をサポートする。

src属性が設定され、かつ画像が使用可能であり、そしてユーザーエージェントがその画像を表示するように構成される場合、要素はsrc属性で指定された画像から座標を選択するためのコントロールを表す。その場合に、要素がmutableである場合、ユーザーエージェントはユーザーがこの座標を選択できるようにすべきである。

そうでなければ、要素は、alt属性の値によってラベルが指定される送信ボタンを表す。

formaction、formenctype、formmethod、formnovalidate、formtarget属性は、フォーム送信用の属性である。

image.width [ = value ]

image.height [ = value ]

これらの属性は、実際のレンダリングされた画像の大きさ、または次元が未知である場合に0を返す。

対応するコンテンツ属性を変更するために、設定が可能である。

この状態の挙動に関して多くの側面は、img要素の挙動に似ている。読者は、同じ要件の多くがより詳細に記載される節を読むことを推奨する。

<form action="process.cgi">
 <input type=image src=map.png name=where alt="Show location list">
</form>

4.10.5.1.20 Reset Button状態（type=reset）

アクティブにされたとき、input要素は、フォームをリセットするボタンを表す。要素はボタンである。

デフォルトのラベルは実装定義であり、かつ通常ボタンの幅はボタンのラベルに依存するため、ボタンの幅はfingerprintableな情報の数ビットをリークすることがありうる。このビットはユーザーエージェントのアイデンティティおよびユーザーロケールに強く相関される可能性がある。

4.10.5.1.21 Button状態（type=button）

input要素は、デフォルトの動作をもたないボタンを表す。要素が空文字列であるかもしれないが、ボタンのラベルは、value属性で指定されなければならない。要素はボタンである。

4.10.5.2 共通input要素属性

4.10.5.2.1 minおよびmax属性

maxlength属性は、フォームコントロールmaxlength属性である。

minlength属性は、フォームコントロールminlength属性である。

input要素が最大許容値の長さを持つ場合、その要素のvalue属性値に属する値の長さは、要素の最大許容値の長さ以下でなければならない。

<label>What are you doing? <input name=status maxlength=140></label>

<p><label>Username: <input name=u required></label>
<p><label>Password: <input name=p required minlength=12></label>

4.10.5.2.2 size属性

視覚的なレンダリングにおいて、size属性は、ユーザーエージェントが要素の値を編集している間にユーザーが参照できるようにする、文字数を与える。

size属性が指定される場合、0より大きい妥当な負でない整数である値を持たなければならない。

4.10.5.2.3 readonly属性

readonly属性は、ユーザーがフォームコントロールを編集できるかどうかを制御する真偽属性である。

<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> Product ID <th> Product name <th> Price <th> Action
  <tr>
   <td> <input readonly="readonly" name="1.pid" value="H412">
   <td> <input required="required" name="1.pname" value="Floor lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">Delete</button>
  <tr>
   <td> <input readonly="readonly" name="2.pid" value="FG28">
   <td> <input required="required" name="2.pname" value="Table lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">Delete</button>
  <tr>
   <td> <input required="required" name="3.pid" value="" pattern="[A-Z0-9]+">
   <td> <input required="required" name="3.pname" value="">
   <td> $<input required="required" type="number" min="0" step="0.01" name="3.pprice" value="">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">Delete</button>
 </table>
 <p> <button formnovalidate="formnovalidate" name="action" value="add">Add</button> </p>
 <p> <button name="action" value="update">Save</button> </p>
</form>

4.10.5.2.4 required属性

required属性は真偽属性である。指定される場合、要素はrequiredとなる。

<h1>Create new account</h1>
<form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
 <p>
  <label for="username">Email address:</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="Create account">
</form>

<fieldset>
 <legend>Did the movie pass the Bechdel test?</legend>
 <p><label><input type="radio" name="bechdel" value="no-characters"> No, there are not even two female characters in the movie. </label>
 <p><label><input type="radio" name="bechdel" value="no-names"> No, the female characters never talk to each other. </label>
 <p><label><input type="radio" name="bechdel" value="no-topic"> No, when female characters talk to each other it's always about a male character. </label>
 <p><label><input type="radio" name="bechdel" value="yes" required> Yes. </label>
 <p><label><input type="radio" name="bechdel" value="unknown"> I don't know. </label>
</fieldset>

4.10.5.2.5 multiple属性

multiple属性は、ユーザーに複数の値を指定することを許可するかどうかを示す真偽属性である。

<label>To: <input type=email multiple name=to></label>

<label>To: <input type=email multiple name=to list=contacts></label>
...
<datalist id="contacts">
 <option value="hedral@damowmow.com">
 <option value="pillar@example.com">
 <option value="astrophy@cute.example">
 <option value="astronomy@science.example.org">
</datalist>