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要素

Element/input

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+

Element/input

カテゴリー
フローコンテンツ
フレージングコンテンツ
type属性がHidden状態でない場合:インタラクティブコンテンツ
type属性がHidden状態でない場合:記載ラベル付け可能送信可能、およびリセット可能自動大文字化継承フォームに関連付けられた要素
type属性がHidden状態である場合:記載送信可能リセット可能自動大文字化継承フォームに関連付けられた要素
type属性がHidden状態でない場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
acceptファイルアップロードコントロールで予期されるファイルタイプに対するヒント
alt — 画像が利用不可である場合に使用する代用テキスト
autocomplete — フォームオートフィル機能に対するヒント
checked — コントロールがチェックされているかどうか
dirnameフォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前
disabled — フォームコントロールが無効であるかどうか
formform要素とこの要素を関連付ける
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 — 横の次元
Also, the title attribute has special semantics on this element: Description of pattern (when used with pattern attribute)
アクセシビリティの考慮
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属性は、要素のデータ型(および関連するコントロール)を制御する。It is an enumerated attribute with the following keywords and states:

キーワード状態データ型コントロール型
hidden非表示任意の文字列該当なし
textテキスト改行なしのテキストテキストコントロール
searchSearch改行なしのテキスト検索コントロール
telTelephone改行なしのテキストテキストコントロール
urlURL絶対URLテキストコントロール
emailEmail電子メールアドレス(のリスト)テキストコントロール
パスワードPassword改行なしのテキスト(センシティブな情報)データ入力を不明瞭にするテキストコントロール
dateDateタイムゾーンを伴わない日付(年、月、日)日付のコントロール
monthMonthタイムゾーンを伴わない年と月から成る日付月のコントロール
weekWeekタイムゾーンを伴わない週番号と週数から成る日付週のコントロール
timeTimeタイムゾーンを伴わない時刻(時、分、秒、秒の小数)時刻のコントロール
datetime-localLocal Date and Timeタイムゾーンを伴わない日付と時刻(年、月、日、時、分、秒、秒の小数)日付および時刻のコントロール
numberNumber数値テキストコントロールまたはスピナーコントロール
rangeRange正確な値が重要ではない追加のセマンティックを持つ数値スライダーコントロールまたは類似のもの
colorColor8ビットの赤、緑、青色コンポーネントをもつRGB色カラーピッカー
checkboxCheckbox定義済みリストからの0個以上の値の集合チェックボックス
radioRadio Button列挙値ラジオボタン
fileFile UploadMIMEタイプをもつ0個以上のファイルと任意でファイル名ラベルとボタン
submitSubmit Button選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ列挙値ボタン
imageImage Button選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ、特定の画像のサイズを基準とする座標クリック可能な画像、またはボタンのいずれか
resetReset Button該当なしボタン
buttonButton該当なしボタン

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

acceptaltautocompletecheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderreadonlyrequiredsizesrcstepwidthコンテンツ属性、checkedfilesvalueAsDatevalueAsNumber、およびlistIDL属性、select()メソッド、selectionStartselectionEnd、およびselectionDirectionIDL属性、setRangeText() and setSelectionRange()メソッド、stepUp() and stepDown()メソッド、inputおよびchangeイベントが、そのtype属性の状態に依存するinput要素に適用する。各タイプを定義するサブセクションはまた、各タイプにこれらの機能を適用するものと適用しないものを、規範的"簿記"セクションで明瞭に定義する。これらの機能の動作は、それら様々なセクションで定義されるため、それらが適用するかどうかに依存する。(コンテンツ属性APIeventsを参照)。

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

HiddenText, SearchTelephone, URLEmailPasswordDate, Month, Week, TimeLocal Date and TimeNumberRangeColorCheckbox, Radio ButtonFile UploadSubmit ButtonImage ButtonReset Button, Button
コンテンツ属性
accept···········Yes···
alt·············Yes·
autocompleteYesYesYesYesYesYesYesYesYesYes·····
checked··········Yes····
dirnameYesYesYesYesYes·······Yes··
formaction············YesYes·
formenctype············YesYes·
formmethod············YesYes·
formnovalidate············YesYes·
formtarget············YesYes·
height·············Yes·
list·YesYesYes·YesYesYesYesYes·····
max·····YesYesYesYes······
maxlength·YesYesYesYes··········
min·····YesYesYesYes······
minlength·YesYesYesYes··········
multiple···Yes·······Yes···
pattern·YesYesYesYes··········
placeholder·YesYesYesYes··Yes·······
popovertarget············YesYesYes
popovertargetaction············YesYesYes
readonly·YesYesYesYesYesYesYes·······
required·YesYesYesYesYesYesYes··YesYes···
size·YesYesYesYes··········
src·············Yes·
step·····YesYesYesYes······
width·············Yes·
IDL属性とメソッド
checked··········Yes····
files···········Yes···
valueAsDate·····Yes·········
valueAsNumber·····YesYesYesYes······
list·YesYesYes·YesYesYesYesYes·····
select()·YesYesYes†YesYes†Yes†Yes†·Yes†·Yes†···
selectionStart·YesYes·Yes··········
selectionEnd·YesYes·Yes··········
selectionDirection·YesYes·Yes··········
setRangeText()·YesYes·Yes··········
setSelectionRange()·YesYes·Yes··········
stepDown()·····YesYesYesYes······
stepUp()·····YesYesYesYes······
イベント
input event·YesYesYesYesYesYesYesYesYesYesYes···
change event·YesYesYesYesYesYesYesYesYesYesYes···

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

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

Element/input#checked

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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


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

4.10.5.1 type 属性の状態
4.10.5.1.1 Hidden状態(type=hidden

Element/input/hidden

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera2+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

この要素には、autocompleteおよびdirnameコンテンツ属性が適用される。

value IDL属性は、この要素に適用し、モードのデフォルトとなる。

次のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckedformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionreadonlyrequiredsizesrcstepおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

inputおよびchangeイベントは適用しない

4.10.5.1.2 Texttype=text)状態とSearch状態(type=search

Element/input/search

Support in all current engines.

Firefox4+Safari5+Chrome5+
Opera10.6+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/input/text

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletedirnamelistmaxlengthminlengthpatternplaceholderreadonlyrequiredsizeコンテンツ属性、listselectionStartselectionEndselectionDirectionvalueIDL属性、select()setRangeText()setSelectionRange()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckedformactionformenctypeformmethodformnovalidateformtargetheightmaxminmultiplepopovertargetpopovertargetactionsrcstepおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesvalueAsDatevalueAsNumber IDL属性、stepDown()stepUp()メソッド。

4.10.5.1.3 Telephone状態(type=tel

and <input type="url">, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.">Element/input/tel

Support in all current engines.

FirefoxYesSafari4+Chrome3+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS3+Chrome Android18+WebView Android37+Samsung Internet?Opera Android11+

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

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

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

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletedirnamelistmaxlengthminlengthpatternplaceholderreadonlyrequiredsizeコンテンツ属性、listselectionStartselectionEndselectionDirectionvalueIDL属性、select()setRangeText()setSelectionRange()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckedformactionformenctypeformmethodformnovalidateformtargetheightmaxminmultiplepopovertargetpopovertargetactionsrcstepおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesvalueAsDatevalueAsNumber IDL属性、stepDown()stepUp()メソッド。

4.10.5.1.4 URL状態(type=url

Element/input/url

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletedirnamelistmaxlengthminlengthpatternplaceholderreadonlyrequiredsizeコンテンツ属性、listselectionStartselectionEndselectionDirectionvalueIDL属性、select()setRangeText()setSelectionRange()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckedformactionformenctypeformmethodformnovalidateformtargetheightmaxminmultiplepopovertargetpopovertargetactionsrcstepおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesvalueAsDatevalueAsNumber IDL属性、stepDown()stepUp()メソッド。

文書が次のマークアップを含んでいた場合:

<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>

そしてユーザーが"www.w3"と入力し、ユーザーエージェントが最近ユーザーがhttps://url.spec.whatwg.org/#url-parsingおよびhttps://streams.spec.whatwg.org/を訪れたことを認められる場合、レンダリングはこのように見えるかもしれない:

A text box with an icon on the left followed by the text

このサンプルにおいて最初の4つのURLは、(おそらく、ユーザーがこれらのURLを参照する頻度による)実装定義の方法でソートされた、ユーザーが入力したテキストと一致する著者が指定したリスト内の4つのURLで構成される。ユーザーエージェントはユーザーがスキームの部分を省略して、ドメイン名上のインテリジェントマッチングを実行できるようにするために、値がURLであるという情報をどのように使っているかに注意する。

最後の2つのURL(また、利用可能であるより多くの値のスクロールバーの効能を考えると、おそらく多くのURL)は、ユーザーエージェントのセッション履歴データからふさわしいものである。このデータは、ページのDOMで利用できない。この特殊な例において、ユーザーエージェントはその値を提供するためのタイトルを持たない。

4.10.5.1.5 Email state (type=email)

Element/input/email

Support in all current engines.

Firefox1+Safari5+Chrome5+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

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の故意の違反である。

以下のJavaScriptとPerl互換の正規表現は、上記の定義を実装したものである。

/^[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])?)*$/

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletedirnamelistmaxlengthminlengthmultiplepatternplaceholderreadonlyrequiredおよび sizeコンテンツ属性、listおよびvalue IDL属性、select()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckedformactionformenctypeformmethodformnovalidateformtargetheightmaxminpopovertargetpopovertargetactionsrcstepおよび width

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

4.10.5.1.6 Password状態(type=password

Element/input/password

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera2+Edge79+
Edge (Legacy)12+Internet Explorer2+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, min, multiple, popovertarget, popovertargetaction, src, step, and width.

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistvalueAsDatevalueAsNumber IDL属性、stepDown()stepUp()メソッド。

4.10.5.1.7 Date状態(type=date

Element/input/date

Support in all current engines.

Firefox57+Safari14.1+Chrome20+
Opera11+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

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

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

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

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

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

Date状態(および、後続の節で説明される他の日付と時刻に関連する状態)は、現代の暦を基準に正確な日付および時刻が確証されないような値を入力するためのものではない。たとえば、"ビッグバン後の1ミリ秒"、"ジュラ紀初期"、または"西暦紀元前250年頃の冬"のような年代のエントリーには不適切だろう。

グレゴリオ暦の導入以前の日付の入力のために、著者は、Date状態(および、以降の節で説明される他の日付と時刻に関連する状態)を使用しないように推奨される。これは、ユーザーエージェントが、グレゴリオ暦以前の時代から日付および時刻の変換をサポートする必要がないように、ユーザーに変換を求め、ユーザーに過度の負担を手動でかけるためである。(これは16世紀から20世紀初頭にわたって、異なる国で異なる時期に発生した、グレゴリオ暦が段階的に導入されたために複雑である。)代わりに、きめ細かい入力コントロールは、Number状態をもつselect要素とinput要素を使って提供することが著者に推奨される。

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumber IDL属性、select()stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionsizesrcwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedselectionStartselectionEndselectionDirection IDL属性、setRangeText()setSelectionRange()メソッド。

4.10.5.1.8 Month状態(type=month

Element/input/month

Support in all current engines.

FirefoxNoSafariNoChrome20+
Opera11+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android18+Safari iOSYesChrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumber IDL属性、select()stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionsizesrcwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirection IDL属性、setRangeText()setSelectionRange()メソッド。

4.10.5.1.9 Week状態(type=week

Element/input/week

FirefoxNoSafariNoChrome20+
Opera11+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android18+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumber IDL属性、select()stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionsizesrcwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirection IDL属性、setRangeText()setSelectionRange()メソッド。

4.10.5.1.10 Time状態(type=time

Element/input/time

Support in all current engines.

Firefox57+Safari14.1+Chrome20+
Opera10+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

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

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumber IDL属性、select()stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionsizesrcwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirection IDL属性、setRangeText()setSelectionRange()メソッド。

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

Element/input/datetime-local

Support in all current engines.

Firefox93+Safari14.1+Chrome20+
Opera11+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

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

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

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequiredおよびstepコンテンツ属性、listvalueおよびvalueAsNumber IDL属性、select()stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionsizesrcwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDate IDL属性、setRangeText()setSelectionRange()メソッド。

次の例は、フライト予約アプリケーションの一部を示す。アプリケーションは、datetime-localに設定されたtype属性を持つinput要素を使用し、次に、選択された空港のタイムゾーンで指定された日付と時刻を解釈する。

<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

Element/input/number

Support in all current engines.

Firefox29+Safari5.1+Chrome7+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminplaceholderreadonlyrequiredおよびstepコンテンツ属性、listvalueおよびvalueAsNumber IDL属性、select()およびstepUp()stepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternpopovertargetpopovertargetactionsizesrcおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDate IDL属性、setRangeText()setSelectionRange()メソッド。

これは数値入力制御を使用する例である:

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

上述したように、ユーザーエージェントは、送信するために必要な形式に変換し、ユーザーのローカルフォーマットの数値入力をサポートするかもしれない。これは、グループ化区切り文字("872,000,000,000"のように)の処理と、様々な桁区切り記号(たとえば"3,99"と"3.99")またはその土地の数字(たとえばアラビア語、ヒンディー語、ペルシャ語、タイ語のものなど)の使用を含むかもしれない。

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

4.10.5.1.13 Range状態(type=range

Element/input/range

Support in all current engines.

Firefox23+Safari3.1+Chrome4+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android52+Safari iOS5+Chrome Android57+WebView Android4.4+Samsung Internet?Opera Android11+

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

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

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

ここでlist属性をもつオートコンプリートリストを使用する範囲コントロールの例を示す。たとえば事前設定された光量、または速度コントロールとして使用される範囲コントロールで典型的な速度制限など、特に重要であるコントロールの完全な範囲に沿った値が存在する場合、これは役に立つかもしれない。次のマークアップ断片で:

<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; }

このようにレンダリングされるかもしれない:

A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.

ユーザーエージェントがスタイルシートが指定した高さと幅のプロパティの比からコントロールの向きを決定する様子に注意する。同様に色はスタイルシートから派生したものである。しかし、目盛りはマークアップに由来である。具体的には、step属性は目盛りの配置に影響を与えず、ユーザーエージェントは著者が指定した終了値を使用するかを決定してから、極端に長い目盛りを追加する。

不正値+50が無視される様子にも注意する。

ほかにも、以下のマークアップ断片を考えてみる:

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

ユーザーエージェントは、様々な方法で表示できる。たとえば:

As a dial.

あるいは:

As a long horizontal slider with tick marks.

ユーザーエージェントは、スタイルシートで指定された次元に基づいて表示するかを選ぶことができる。これは、幅の違いにもかかわらず、目盛りのために同じ解像度を維持することができるだろう。

最後に、2つのラベルの値を持つ範囲コントロールの例を次に示す:

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

コントロールが垂直に描画するスタイルとともに、次のようになる:

A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'.

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

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

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

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するautocompletelistmaxminおよびstepコンテンツ属性、listvalueおよびvalueAsNumber IDL属性、stepDown()およびstepUp()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxlengthminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionreadonlyrequiredsizesrcおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDateIDL属性、select()setRangeText()setSelectionRange()メソッド。

4.10.5.1.14 Color状態(type=color

Element/input/color

Support in all current engines.

Firefox29+Safari12.1+Chrome20+
Opera12+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android🔰 27+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

input要素は、単純色を表す文字列に要素のを設定するための、色のコントロールを表す

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

以下の共通input要素のコンテンツ属性およびIDL属性は要素に適用するautocompleteおよびlistコンテンツ属性、listおよびvalue IDL属性、select()メソッド。

value IDL属性は、モードのとなる。

inputおよびchangeイベントは適用する

次のコンテンツ属性を指定してはならず、要素に適用しないacceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightmaxmaxlengthminminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionreadonlyrequiredsizesrcstepおよびwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

4.10.5.1.15 Checkbox状態(type=checkbox

Element/input/checkbox

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

input.indeterminate [ = value ]

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コントロールのレンダリングを上書きし、現在の値が表示されないようにする。

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するcheckedおよびrequiredコンテンツ属性、checkedおよびvalue IDL属性。

value IDL属性はモードdefault/onとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltautocompletedirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionreadonlysizesrcstepおよび width

以下のIDL属性とメソッドは、要素に適用しないfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

4.10.5.1.16 Radio Button状態(type=radio

Element/input/radio

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

次の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するcheckedおよびrequiredコンテンツ属性、checkedおよびvalue IDL属性。

value IDL属性はモードdefault/onとなる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltautocompletedirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderpopovertargetpopovertargetactionreadonlysizesrcstepおよび width

以下のIDL属性とメソッドは、要素に適用しないfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

4.10.5.1.17 File Upload状態(type=file

Element/input/file

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera11+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

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


Attributes/accept

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Element/input#attr-accept

Support in all current engines.

Firefox37+Safari11.1+Chrome26+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android37+Safari iOS11.3+Chrome Android26+WebView Android4.4+Samsung Internet1.5+Opera Android15+

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

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

文字列"audio/*"
音声ファイルが受け入れられることを示す。
文字列"video/*"
動画ファイルが受け入れられることを示す。
文字列"image/*"
画像ファイルが受け入れられることを示す。
パラメーターのない妥当なMIMEタイプ文字列
指定された型のファイルが受け入れられることを示す。
最初の文字がU+002E FULL STOP文字(.)である文字列
指定されたファイル拡張をもつファイルが受け入れられることを示す。

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

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

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

たとえば、Microsoft Word文書をOpen Document形式のファイルに変換するアプリケーションを考えてみる。Microsoft Word文書は多種多様なMIMEタイプと拡張子で記載されるので、次のように、サイトは複数列挙できる:

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

ファイルの種類を記述するためにファイル拡張子のみを使用するプラットフォーム上で、もしあれば、他の拡張子を判別するために、MIMEタイプがシステムの型登録テーブル(システムで使用される拡張子にMIMEタイプを対応付ける)とともに使用できると同時に、ここに記載される拡張子は、許可された文書をフィルターするために使用できる。同様に、システムがファイル名または拡張子を持たないが、内部的にMIMEタイプをもつ文書を識別するシステムで、システムで使用されるMIMEタイプに既知の拡張子を対応づける拡張子登録テーブルをシステムが持つ場合、拡張子を使用できると同時に、MIMEタイプは許可されたファイルを選択するために使用できる。

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

Element/input/file

歴史的な理由により、value IDL属性は、ファイル名に文字列"C:\fakepath\"を接頭辞として付ける。一部のレガシーユーザーエージェントは、実際に(セキュリティ上の脆弱性があった)完全なパスを含む。この結果として、後方互換性のある方法でvalue IDL属性からファイル名を取得することは自明ではない。次の関数は適切に互換性のある方法でファイル名を抽出する:

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>

以下の共通input要素コンテンツ属性、IDL属性、およびメソッドは要素に適用するacceptmultiplerequiredコンテンツ属性、filesvalue IDL属性、select()メソッド。

value IDL属性は、モードのファイル名となる。

inputおよびchangeイベントは適用する

以下のコンテンツ属性を指定してはならず、要素に適用しないaltautocompletecheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthpatternpopovertargetpopovertargetactionplaceholderreadonlysizesrcstepおよびwidth

要素のvalue属性は省略しなければならない。

以下のIDL属性とメソッドは、要素に適用しないcheckedlistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

4.10.5.1.18 Submit Button状態(type=submit

Element/input/submit

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

formactionformenctypeformmethodformnovalidateformtarget属性は、フォーム送信用の属性である。

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

The following common input element content attributes and IDL attributes apply to the element: dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, popovertarget, and popovertargetaction content attributes; value IDL attribute.

value IDL属性はモードdefaultとなる。

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width.

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

inputおよびchangeイベントは適用しない

4.10.5.1.19 Image Button状態(type=image

Element/input/image

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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


Element/input#src

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

Element/input#alt

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

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


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

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

formactionformenctypeformmethodformnovalidateformtarget属性は、フォーム送信用の属性である。

image.width [ = value ]
image.height [ = value ]

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

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

次の共通input要素コンテンツ属性およびIDL属性は要素に適用するaltformactionformenctypeformmethodformnovalidateformtargetheightpopovertargetpopovertargetactionsrcおよびwidthコンテンツ属性、value IDL属性。

value IDL属性はモードdefaultとなる。

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptautocompletecheckeddirnamelistmaxmaxlengthminminlengthmultiplepatternplaceholderreadonlyrequiredsizestep

要素のvalue属性は省略しなければならない。

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

inputおよびchangeイベントは適用しない

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

次のフォームを取ると:

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

ユーザーが座標(127,40)で画像をクリックした場合、フォームを送信するために使用されるURLは"process.cgi?where.x=127&where.y=40"となる。

(この例において、マップが表示されないユーザー、および"Show location list"というラベルの付いたボタンが表示されたユーザーを仮定し、ボタンをクリックすることはマップの代わりから選択する場所のリストの表示をサーバーにさせる。)

4.10.5.1.20 Reset Button状態(type=reset

Element/input/reset

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

value IDL属性は、この要素に適用し、モードのデフォルトとなる。

次の共通input要素コンテンツ属性は要素に適用するpopovertargetおよびpopovertargetaction

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltautocompletecheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderreadonlyrequiredsizesrcstepwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

inputおよびchangeイベントは適用しない

4.10.5.1.21 Button状態(type=button

Element/input/button

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

value IDL属性は、この要素に適用し、モードのデフォルトとなる。

次の共通input要素コンテンツ属性は要素に適用するpopovertargetおよびpopovertargetaction

以下のコンテンツ属性を指定してはならず、要素に適用しないacceptaltautocompletecheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminminlengthmultiplepatternplaceholderreadonlyrequiredsizesrcstepwidth

以下のIDL属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

inputおよびchangeイベントは適用しない

4.10.5.2 共通input要素属性
4.10.5.2.1 minおよびmax属性

Attributes/maxlength

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Attributes/minlength

Support in all current engines.

Firefox51+Safari10.1+Chrome40+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Attributes/maxlength

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

Attributes/minlength

Support in all current engines.

Firefox51+Safari10.1+Chrome40+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/input#attr-maxlength

Support in all current engines.

Firefox4+Safari5.1+Chrome4+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android5+Safari iOS9+Chrome Android18+WebView Android4.4+Samsung Internet1.5+Opera Android15+
caniuse.com table

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

Element/input#attr-minlength

Support in all current engines.

Firefox51+Safari10.1+Chrome40+
Opera27+Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android51+Safari iOS10.3+Chrome Android40+WebView Android40+Samsung Internet4.0+Opera Android27+
caniuse.com table

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属性

Attributes/readonly

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Attributes/readonly

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Attributes/readonly

Support in all current engines.

Firefox1+Safari≤4+Chrome1+
Opera≤12.1+Edge79+
Edge (Legacy)12+Internet Explorer≤6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android≤12.1+

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

disabledreadonlyの違いは、読み取り専用コントロールは引き続き機能するが、無効化されたコントロールは通常、有効にされるまでコントロールとして機能しない。これは、この仕様の他の部分では、disabled概念(たとえば、要素のアクティブ化動作フォーカス可能な領域であるかどうか、エントリーリストの構築時など)を参照する規範的な要件とともに詳細に説明される。テキストが選択またはコピーできるかどうかなど、無効なコントロールとのユーザーの対話に関連するその他の動作は、この標準で定義されない。

他のコントロール(チェックボックスやボタンなど)は、読み取り専用と無効の区別がないため、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となる。

以下のフォームは、電子メールアドレスに対しておよびパスワードに対しての2つの必須フィールドを持つ。フォームはまた、ユーザーがパスワードフィールドおよび3つ目のフィールドで同じパスワードを打ち込む場合に、妥当であるとみなされる3つ目のフィールドを持つ。

<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>

ラジオボタンに対して、グループ内のラジオボタンのいずれかが選択されている場合、required属性は満たされる。したがって次の例において、必須としてマークされる1つのみでなく、ラジオボタンのいずれかがチェックされうる。

<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属性

Attributes/multiple

Support in all current engines.

Firefox3.6+Safari4+Chrome2+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

Element/input#attr-multiple

Support in all current engines.

Firefox3.6+Safari4+Chrome2+
Opera≤12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android≤37+Samsung Internet?Opera Android≤12.1+

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

以下の抜粋は、電子メールクライアントの"To"フィールドが複数の電子メールアドレスを受け入れることができる方法を示す。

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

ユーザーの連絡先データベースで多くの友人の間で、ユーザーが、2人の友人"Spider-Man"(アドレス"spider@parker.example.net")と"Scarlet Witch"(アドレス"scarlet@avengers.example.net")持っていた場合、ユーザーが"s"を入力した後に、ユーザーエージェントは、ユーザーにこれら2つの電子メールアドレスを推奨するかもしれない。

このページはまた、サイトからユーザーの連絡先データベースにリンクすることができる:

<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>

ユーザーがこのテキストフィールドに"bob@example.net"を入力した後、"s"で始まる2番目の電子メールアドレスを入力し始めていたと仮定する。ユーザーエージェントは、前述した2人の友人だけでなく、datalist要素で指定された"astrophy"と"astronomy"の値の両方を表示するかもしれない。

次の抜粋は、電子メールクライアントの"Attachments"フィールドが、アップロード用に複数ファイルを受け入れることができる様子を示す。

<label>Attachments: <input type=file multiple name=att></label>
4.10.5.2.6 pattern属性

Attributes/pattern

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera≤12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android≤37+Samsung Internet?Opera Android≤12.1+

Attributes/pattern

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

pattern属性は、チェックされるコントロールの、または、multiple属性が適用されて設定される場合はコントロールのそれぞれのに対する正規表現を指定する。

指定する場合、属性の値はJavaScript Pattern[+UnicodeSetsMode, +N]生成物と一致しなければならない。

input要素が指定されたpattern属性を持つ場合、著者は、パターンの説明与えるためにtitle属性を含めるべきである。存在する場合、パターンが一致しないことをユーザーに通知する、またはツールチップでまたはコントロールがフォーカスを取得するときに支援技術によって読み出されるなど、他の任意の適切な時点で、ユーザーエージェントは、この属性のコンテンツを使用してもよい。

たとえば、次の断片で:

<label> Part number:
 <input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/>
</label>

ユーザーエージェントにこのような警告を表示させるかもしれない:

A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.

コントロールがpattern属性を持つ場合、titleか使用された場合、パターンを記述しなければならない。追加情報はまた、コントロールで埋める際にユーザーを支援する限り、含まれるかもしれない。そうでなければ、支援技術は弱められるだろう。

たとえば、title属性がコントロールのキャプションを含んだ場合、支援技術は、The text you have entered does not match the required pattern. Birthday、で終わるかもしれず、これは有益ではない。

ユーザーエージェントはエラー以外の状況で(たとえば、コントロールの上にマウスを移動ツールチップとして)titleをまだ表示してもよく、あたかもエラーが必然的に発生しているかのように、著者はtitleを言葉で表すことのない注意すべきである。

4.10.5.2.7 minおよびmax属性

Attributes/max

Support in all current engines.

Firefox16+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

Attributes/min

Support in all current engines.

Firefox16+Safari5+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

フォームコントロールは、ユーザーが提供できる値の許容範囲を制限することに対して明示的な制約を適用できる。通常、このような範囲は線形および連続だろう。しかし、フォームコントロールの最大限広い範囲が有限である場合、フォームコントロールは定期的なドメインを持つことができ、かつ著者は境界にまたがり、その中で明示的に範囲を指定できる。

具体的に、type=time制御の広い範囲が深夜の真夜中(24時間)であり、かつ著者は両方の連続線形範囲(たとえば午後9時から午後11時までなど)や不連続な範囲にわたる深夜(たとえば午後11時から午前1時までなど)を設定できる。

minおよびmax属性は、要素に対して許可された範囲を示す。

要素が定期的なドメインを持たない場合、max属性の値(最大値)は、min属性の値(最小値)未満であってはならない。

要素が定義された最小値または定義された最大値を持つ場合、要素は、範囲の制限がある

次の日付コントロールは1980年代以前の日付への入力を制限する:

<input name=bday type=date max="1979-12-31">

次の数のコントロールは、0より大きい整数への入力を制限する:

<input name=quantity required="" type="number" min="1" value="1">

真夜中にデフォルト設定、21時と6時の間に発生した分への時間管理限界入力:

<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">
4.10.5.2.8 step属性

Attributes/step

Support in all current engines.

Firefox16+Safari5+Chrome5+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

step属性は、許可される値を制限することによって、または複数の値の期待される(そして必須の)粒度を示す。

step属性が指定される場合、0より大きい数値に解析する妥当な浮動小数点数である値を持たなければならない、または文字列"any"とASCII大文字・小文字不区別で一致する値のいずれかを持たなければならない。

次の範囲の制御は、範囲0..1の値のみを受け取り、その範囲内の256のステップを可能にする:

<input name=opacity type=range min=0 max=1 step=0.00392156863>

次のコントロールは、任意の精度(たとえば1000分の1秒精度以上)で、ある日において任意の時間を選択できる:

<input name=favtime type=time step=any>

通常、時間のコントロールは1分の精度に制限される。

4.10.5.2.9 list属性

Element/input#list

Support in all current engines.

Firefox4+Safari12.1+Chrome20+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android12.1+

list属性は、ユーザーに提案済み選択肢の一覧を示す要素を識別するために使用される。

存在する場合、その値は同じツリーdatalist要素のIDでなければならない。

このURLフィールドは、いくつかの提案を提供する。

<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
 <option value="https://www.google.com/" label="Google">
 <option value="https://www.reddit.com/" label="Reddit">
</datalist>

ユーザーの履歴から他のURLも表示されることがあるが、これはユーザーエージェントに任される。

この例は、レガシーユーザーエージェントで依然として劣化しつつ有用である、自動補完リスト機能を使用するフォームを設計する方法を示す。

自動補完リストは単なる支援であり、コンテンツにとって重要でない場合、単に子option要素とともにdatalist要素を使用すれば十分である。レガシーユーザーエージェントで値をレンダリングされてるのを防止するために、これらは、インラインの代わりにvalue属性の内部に配置する必要がある。

<p>
 <label>
  Enter a breed:
  <input type="text" name="breed" list="breeds">
  <datalist id="breeds">
   <option value="Abyssinian">
   <option value="Alpaca">
   <!-- ... -->
  </datalist>
 </label>
</p>

ただし、値がレガシーユーザーエージェントで示される必要がある場合、フォールバックコンテンツは、次のようにdatalist要素内に配置することができる:

<p>
 <label>
  Enter a breed:
  <input type="text" name="breed" list="breeds">
 </label>
 <datalist id="breeds">
  <label>
   or select one from the list:
   <select name="breed">
    <option value=""> (none selected)
    <option>Abyssinian
    <option>Alpaca
    <!-- ... -->
   </select>
  </label>
 </datalist>
</p>

フォールバックコンテンツは、datalistをサポートしないユーザーエージェントでのみ表示される。一方で、それらがdatalist要素の子ではないにもかかわらず、選択肢はすべてのユーザーエージェントで検出される。

datalistで使用されるoption要素がselectedである場合、要素は(select要素に影響を与えるため)レガシーユーザーエージェントによってデフォルトで選択されるが、要素がdatalistをサポートするユーザーエージェントでinput要素に何の影響もないことに注意する。

4.10.5.2.10 placeholder属性

Element/input#placeholder

Support in all current engines.

Firefox4+Safari4+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

Element/input#attr-placeholder

Support in all current engines.

Firefox4+Safari4+Chrome3+
Opera≤12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android≤37+Samsung Internet?Opera Android≤12.1+

コントロールが値を持たない場合、placeholder属性は、データ入力を伴うユーザーの支援を意図する短いヒント(単語や短いフレーズ)を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。指定される場合、属性は、U+000A LINE FEED(LF)またはU+000D CARRIAGE RETURN(CR)文字を含まない値を持たなければならない。

placeholder属性は、labelの代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title属性がより適切である。

このメカニズムは非常に似ているが微妙に異なる:コントロールのlabelによって与えられるヒントは毎回表示され、placeholder属性に与えられた短いヒントはユーザーが値を入力する前にのみ表示され、ユーザーが詳細なヘルプを要求するときにtitle属性におけるヒントは表示される。

ここでplaceholder属性を使用するメール設定のユーザーインターフェイスの例は次のとおり:

<fieldset>
 <legend>Mail Account</legend>
 <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
 <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
 <p><label>Password: <input type="password" name="password"></label></p>
 <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
</fieldset>

コントロールのコンテンツが1つの方向性を持つが、プレースホルダーは異なる方向性を持つ必要がある状況において、Unicodeの双方向アルゴリズムの書式文字は属性値で使用できる:

<input name=t1 type=tel placeholder="&#x202B;رقم الهاتف 1&#x202E;">
<input name=t2 type=tel placeholder="&#x202B;رقم الهاتف 2&#x202E;">

もう少しわかりやすくするために、インラインのアラビア語の代わりに数値文字参照を使用する同じ例を示す:

<input name=t1 type=tel placeholder="&#x202B;&#1585;&#1602;&#1605; &#1575;&#1604;&#1607;&#1575;&#1578;&#1601; 1&#x202E;">
<input name=t2 type=tel placeholder="&#x202B;&#1585;&#1602;&#1605; &#1575;&#1604;&#1607;&#1575;&#1578;&#1601; 2&#x202E;">
4.10.5.3 共通input要素API
input.value [ = value ]

フォームコントロールの現在のを返す。

値を変更する設定が可能である。

コントロールがファイルコントロールであるときに空文字列以外の任意の値に設定される場合、"InvalidStateError" DOMExceptionを投げる。

input.checked [ = value ]

フォームコントロールの現在checkednessを返す。

checkednessを変更する設定が可能である。

input.files [ = files ]

フォームコントロールの選択されたファイルを列挙するFileListオブジェクトを返す。

コントロールがファイル制御でない場合はnullを返す。

FileListオブジェクトに設定して、フォームコントロールの選択したファイルを変更できる。たとえば、ドラッグアンドドロップ操作の結果として。

input.valueAsDate [ = value ]

該当する場合、フォームのコントロールのを表すDateオブジェクトを返す。そうでなければ、nullを返す。

値を変更する設定が可能である。

コントロールが日付または時刻ベースでない場合、"InvalidStateError" DOMExceptionを投げる。

input.valueAsNumber [ = value ]

該当する場合、フォームのコントロールのを表す数値を返す。そうでなければ、NaNを返す。

値を変更する設定が可能である。NaNにこれを設定すると、空文字列の基になる値を設定する。

コントロールが日付または時刻ベースでも数値でもない場合、"InvalidStateError" DOMExceptionを投げる。

input.stepUp([ n ])
input.stepDown([ n ])

step属性で指定されたによって、フォームコントロールの値をn倍に変更する。nのデフォルト値は1である。

コントロールが日付または時刻ベースまたは数値のいずれでもない場合、またはstep属性値が"any"である場合、"InvalidStateError" DOMExceptionを投げる。

input.list

list属性によって示されたdatalist要素を返す。

input.showPicker()

HTMLInputElement/showPicker

Support in all current engines.

Firefox101+Safari16+Chrome99+
Opera?Edge99+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ユーザーが値を選択できるように、input,に適用可能なピッカーUIを表示する。(特定のコントロールにピッカーUIが実装されていない場合、このメソッドは何もしない。)

Throws an "InvalidStateError" DOMException if input is not mutable.

一時的なユーザーアクティベーションなしで呼び出された場合、"NotAllowedError" DOMException を投げる。

inputがクロスオリジンiframe内にある場合、inputFile UploadまたはColor状態でない限り、"SecurityError" DOMExceptionを投げる。