Living Standard — Last Updated 1 November 2024
input
要素type
属性の状態type=hidden
)type=text
)状態とSearch状態(type=search
)type=tel
)type=url
)type=email
)type=password
)type=date
)type=month
)type=week
)type=time
)type=datetime-local
)type=number
)type=range
)type=color
)type=checkbox
)type=radio
)type=file
)type=submit
)type=image
)type=reset
)type=button
)input
要素属性input
要素APIinput
要素Support in all current engines.
Support in all current engines.
type
属性がHidden状態でない場合:インタラクティブコンテンツ。type
属性がHidden状態でない場合:記載、ラベル付け可能、送信可能、リセット可能、および自動大文字化および自動修正継承フォームに関連付けられた要素。type
属性がHidden状態である場合:記載、送信可能、リセット可能、および自動大文字化および自動修正継承フォームに関連付けられた要素。type
属性がHidden状態でない場合:パルパブルコンテンツ。accept
— ファイルアップロードコントロールで予期されるファイルタイプに対するヒントalpha
— Allow the color's alpha component to be setalt
— 画像が利用不可である場合に使用する代用テキストautocomplete
— フォームオートフィル機能に対するヒントchecked
— コントロールがチェックされているかどうかcolorspace
— The color space of the serialized colordirname
— フォーム送信で、要素の方向を送信するために使用するフォームコントロールの名前disabled
— フォームコントロールが無効であるかどうかform
— form
要素とこの要素を関連付けるformaction
— フォーム送信に使用するURLformenctype
— フォーム送信に使用するエントリーリストのエンコーディングタイプ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
属性とともに使用する場合)。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。type
属性:著者向け、実装者向け。[Exposed =Window ]
interface HTMLInputElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString accept ;
[CEReactions ] attribute boolean alpha ;
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute boolean defaultChecked ;
attribute boolean checked ;
[CEReactions ] attribute DOMString colorSpace ;
[CEReactions ] attribute DOMString dirName ;
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
attribute FileList ? files ;
[CEReactions ] attribute USVString formAction ;
[CEReactions ] attribute DOMString formEnctype ;
[CEReactions ] attribute DOMString formMethod ;
[CEReactions ] attribute boolean formNoValidate ;
[CEReactions ] attribute DOMString formTarget ;
[CEReactions ] attribute unsigned long height ;
attribute boolean indeterminate ;
readonly attribute HTMLDataListElement ? list ;
[CEReactions ] attribute DOMString max ;
[CEReactions ] attribute long maxLength ;
[CEReactions ] attribute DOMString min ;
[CEReactions ] attribute long minLength ;
[CEReactions ] attribute boolean multiple ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString pattern ;
[CEReactions ] attribute DOMString placeholder ;
[CEReactions ] attribute boolean readOnly ;
[CEReactions ] attribute boolean required ;
[CEReactions ] attribute unsigned long size ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString step ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString defaultValue ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString value ;
attribute object ? valueAsDate ;
attribute unrestricted double valueAsNumber ;
[CEReactions ] attribute unsigned long width ;
undefined stepUp (optional long n = 1);
undefined stepDown (optional long n = 1);
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
readonly attribute NodeList ? labels ;
undefined select ();
attribute unsigned long ? selectionStart ;
attribute unsigned long ? selectionEnd ;
attribute DOMString ? selectionDirection ;
undefined setRangeText (DOMString replacement );
undefined setRangeText (DOMString replacement , unsigned long start , unsigned long end , optional SelectionMode selectionMode = "preserve");
undefined setSelectionRange (unsigned long start , unsigned long end , optional DOMString direction );
undefined showPicker ();
// also has obsolete members
};
HTMLInputElement includes PopoverInvokerElement ;
input
要素は、通常、ユーザーがデータを編集できるようにするためのフォームコントロールと、型指定されたデータフィールドを表す。
type
属性は、要素のデータ型(および関連するコントロール)を制御する。属性は、次のキーワードと状態を持つ列挙属性である:
キーワード | 状態 | データ型 | コントロール型 |
---|---|---|---|
hidden | 任意の文字列 | 該当なし | |
text | テキスト | 改行なしのテキスト | テキストコントロール |
search | Search | 改行なしのテキスト | 検索コントロール |
tel | Telephone | 改行なしのテキスト | テキストコントロール |
url | URL | 絶対URL | テキストコントロール |
email | 電子メールアドレス(のリスト) | テキストコントロール | |
パスワード | Password | 改行なしのテキスト(センシティブな情報) | データ入力を不明瞭にするテキストコントロール |
date | Date | タイムゾーンを伴わない日付(年、月、日) | 日付のコントロール |
month | Month | タイムゾーンを伴わない年と月から成る日付 | 月のコントロール |
week | Week | タイムゾーンを伴わない週番号と週数から成る日付 | 週のコントロール |
time | Time | タイムゾーンを伴わない時刻(時、分、秒、秒の小数) | 時刻のコントロール |
datetime-local | Local Date and Time | タイムゾーンを伴わない日付と時刻(年、月、日、時、分、秒、秒の小数) | 日付および時刻のコントロール |
number | Number | 数値 | テキストコントロールまたはスピナーコントロール |
range | Range | 正確な値が重要ではない追加のセマンティックを持つ数値 | スライダーコントロールまたは類似のもの |
color | Color | 8ビットの赤、緑、青色コンポーネントをもつRGB色 | カラーピッカー |
checkbox | Checkbox | 定義済みリストからの0個以上の値の集合 | チェックボックス |
radio | Radio Button | 列挙値 | ラジオボタン |
file | File Upload | MIMEタイプをもつ0個以上のファイルと任意でファイル名 | ラベルとボタン |
submit | Submit Button | 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ列挙値 | ボタン |
image | Image Button | 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ、特定の画像のサイズを基準とする座標 | クリック可能な画像、またはボタンのいずれか |
reset | Reset Button | 該当なし | ボタン |
button | Button | 該当なし | ボタン |
この属性の欠損値のデフォルトと不正値のデフォルトは、両方とも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属性、メソッド、およびイベントのいずれかが各状態に適用するかをまとめたものである:
Text, Search | Telephone, URL | Password | Date, Month, Week, Time | Local Date and Time | Number | Range | Color | Checkbox, Radio Button | File Upload | Submit Button | Image Button | Reset Button, Button | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
コンテンツ属性 | |||||||||||||||
accept | · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
alpha | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · | · |
alt | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
autocomplete | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
checked | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
colorspace | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · | · |
dirname | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | Yes | · | · |
formaction | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formenctype | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formmethod | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formnovalidate | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formtarget | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
height | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
list | · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
max | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
min | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
minlength | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
multiple | · | · | · | Yes | · | · | · | · | · | · | · | Yes | · | · | · |
pattern | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
placeholder | · | Yes | Yes | Yes | Yes | · | · | Yes | · | · | · | · | · | · | · |
popovertarget | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | Yes |
popovertargetaction | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | Yes |
readonly | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
required | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
size | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
src | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
step | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
width | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
IDL属性とメソッド | |||||||||||||||
checked | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
files | · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
value | default | value | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
valueAsDate | · | · | · | · | · | Yes | · | · | · | · | · | · | · | · | · |
valueAsNumber | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
list | · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
select() | · | Yes | Yes | Yes† | Yes | Yes† | Yes† | Yes† | · | Yes† | · | Yes† | · | · | · |
selectionStart | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionEnd | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionDirection | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
setRangeText() | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
setSelectionRange() | · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
stepDown() | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
stepUp() | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
イベント | |||||||||||||||
input event | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
change event | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
†コントロールが選択可能なテキストを持たない場合、select()
メソッドは、"InvalidStateError
" DOMException
なしで操作不能に終わる。
Some states of the type
attribute define a value sanitization algorithm.
Each input
element has a value, which is exposed by the value
IDL attribute. Some states define an algorithm to convert a string to a number, an algorithm to convert a number to a string, an algorithm to convert a string to a Date
object, and an algorithm to convert a Date
object to a string, which are used by max
, min
, step
, valueAsDate
, valueAsNumber
, and stepUp()
.
An input
element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the value. (It is also set to true when the value is programmatically changed, as described in the definition of the value
IDL attribute.)
value
コンテンツ属性はinput
要素のデフォルトの値を示す。value
コンテンツ属性が追加、設定、または削除されるとき、コントロールの汚い値フラグがfalseである場合、存在するかどうか、ユーザーエージェントは要素の値をvalue
コンテンツ属性に設定しなければならず、そうでなければ空文字列である場合、定義されるかどうか、現在の値サニタイズアルゴリズムを実行する。
Each input
element has a checkedness, which is exposed by the checked
IDL attribute.
Each input
element has a boolean dirty checkedness flag. When it is true, the element is said to have a dirty checkedness. The dirty checkedness flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the checkedness.
Support in all current engines.
checked
コンテンツ属性は、input
要素のデフォルトのcheckednessを与える真偽属性である。checked
コンテンツ属性が追加されるとき、コントロールがdirty checkednessを持たない場合、ユーザーエージェントは要素のcheckednessをtrueに設定しなければならない。checked
コンテンツ属性が削除されるとき、コントロールがdirty checkednessを持たない場合、ユーザーエージェントは要素のcheckednessをfalseに設定しなければならない。
The reset algorithm for input
elements is to set its user validity, dirty value flag, and dirty checkedness flag back to false, set the value of the element to the value of the value
content attribute, if there is one, or the empty string otherwise, set the checkedness of the element to true if the element has a checked
content attribute and false if it does not, empty the list of selected files, and then invoke the value sanitization algorithm, if the type
attribute's current state defines one.
Each input
element can be mutable. Except where otherwise specified, an input
element is always mutable. Similarly, except where otherwise specified, the user agent should not allow the user to modify the element's value or checkedness.
When an input
element is disabled, it is not mutable.
The readonly
attribute can also in some cases (e.g. for the Date state, but not the Checkbox state) stop an input
element from being mutable.
The cloning steps for input
elements must propagate the value, dirty value flag, checkedness, and dirty checkedness flag from the node being cloned to the copy.
The activation behavior for input
elements element, given event, are these steps:
If element is not mutable and is not in the Checkbox state and is not in the Radio state, then return.
Run element's input activation behavior, if any, and do nothing otherwise.
Run the popover target attribute activation behavior on element.
Recall that an element's activation behavior runs for both user-initiated activations and for synthetic activations (e.g., via el.click()
). User agents might also have behaviors for a given control — not specified here — that are triggered only by true user-initiated activations. A common choice is to show the picker, if applicable, for the control. In contrast, the input activation behavior only shows pickers for the special historical cases of the File Upload and Color states.
The legacy-pre-activation behavior for input
elements are these steps:
If this element's type
attribute is in the Checkbox state, then set this element's checkedness to its opposite value (i.e. true if it is false, false if it is true) and set this element's indeterminate
IDL attribute to false.
If this element's type
attribute is in the Radio Button state, then get a reference to the element in this element's radio button group that has its checkedness set to true, if any, and then set this element's checkedness to true.
The legacy-canceled-activation behavior for input
elements are these steps:
If the element's type
attribute is in the Checkbox state, then set the element's checkedness and the element's indeterminate
IDL attribute back to the values they had before the legacy-pre-activation behavior was run.
If this element's type
attribute is in the Radio Button state, then if the element to which a reference was obtained in the legacy-pre-activation behavior, if any, is still in what is now this element's radio button group, if it still has one, and if so, setting that element's checkedness to true; or else, if there was no such element, or that element is no longer in this element's radio button group, or if this element no longer has a radio button group, setting this element's checkedness to false.
When an input
element is first created, the element's rendering and behavior must be set to the rendering and behavior defined for the type
attribute's state, and the value sanitization algorithm, if one is defined for the type
attribute's state, must be invoked.
When an input
element's type
attribute changes state, the user agent must run the following steps:
If the previous state of the element's type
attribute put the value
IDL attribute in the value mode, and the element's value is not the empty string, and the new state of the element's type
attribute puts the value
IDL attribute in either the default mode or the default/on mode, then set the element's value
content attribute to the element's value.
Otherwise, if the previous state of the element's type
attribute put the value
IDL attribute in any mode other than the value mode, and the new state of the element's type
attribute puts the value
IDL attribute in the value mode, then set the value of the element to the value of the value
content attribute, if there is one, or the empty string otherwise, and then set the control's dirty value flag to false.
Otherwise, if the previous state of the element's type
attribute put the value
IDL attribute in any mode other than the filename mode, and the new state of the element's type
attribute puts the value
IDL attribute in the filename mode, then set the value of the element to the empty string.
Update the element's rendering and behavior to the new state's.
Signal a type change for the element. (The Radio Button state uses this, in particular.)
Invoke the value sanitization algorithm, if one is defined for the type
attribute's new state.
Let previouslySelectable be true if setRangeText()
previously applied to the element, and false otherwise.
Let nowSelectable be true if setRangeText()
now applies to the element, and false otherwise.
If previouslySelectable is false and nowSelectable is true, set the element's text entry cursor position to the beginning of the text control, and set its selection direction to "none
".
name
属性は要素の名前を表す。dirname
属性は、要素の方向がどのように送信されるかを制御する。disabled
属性は、コントロールが非対話的にするためおよびその値を送信するのを防ぐために使用される。form
属性は、フォームの所有者とinput
要素を明示的に関連付けるために使用される。autocomplete
属性は、どのようにユーザーエージェントがオートフィルの振る舞いを提供するかを制御する。
elements.">HTMLInputElement#indeterminate
Support in all current engines.
The indeterminate
IDL attribute must initially be set to false. On getting, it must return the last value it was set to. On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.
Support in all current engines.
The accept
, alpha
, alt
, max
, min
, multiple
, pattern
, placeholder
, required
, size
, src
, and step
IDL attributes must reflect the respective content attributes of the same name. The dirName
IDL attribute must reflect the dirname
content attribute. The readOnly
IDL attribute must reflect the readonly
content attribute. The defaultChecked
IDL attribute must reflect the checked
content attribute. The defaultValue
IDL attribute must reflect the value
content attribute.
The colorSpace
IDL attribute must reflect the colorspace
content attribute, limited to only known values. The type
IDL attribute must reflect the respective content attribute of the same name, limited to only known values. The maxLength
IDL attribute must reflect the maxlength
content attribute, limited to only non-negative numbers. The minLength
IDL attribute must reflect the minlength
content attribute, limited to only non-negative numbers.
The IDL attributes width
and height
must return the rendered width and height of the image, in CSS pixels, if an image is being rendered; or else the natural width and height of the image, in CSS pixels, if an image is available but not being rendered; or else 0, if no image is available. When the input
element's type
attribute is not in the Image Button state, then no image is available. [CSS]
On setting, they must act as if they reflected the respective content attributes of the same name.
willValidate
、validity
、およびvalidationMessage
IDL属性、checkValidity()
、reportValidity()
およびsetCustomValidity()
メソッドは、制約検証APIの一部である。labels
IDL属性は、要素のlabel
のリストを提供する。The select()
, selectionStart
, selectionEnd
, selectionDirection
, setRangeText()
, and setSelectionRange()
methods and IDL attributes expose the element's text selection. The disabled
, form
, and name
IDL attributes are part of the element's forms API.
type
属性の状態type=hidden
)Support in all current engines.
When an
element's attribute is in the state, the rules in this section apply.要素は、検査されることを意図せず、またユーザーによって操作されない値を 。
Constraint validation: If an
element's attribute is in the state, it is .属性が存在し、かつ文字列" "に で一致する値を持つ場合、その要素の 属性を省略しなければならない。
この要素には、
および コンテンツ属性が される。IDL属性は、この要素に 、モードの となる。
The following content attributes must not be specified and
to the element: , , , , , , , , , , , , , , , , , , , , , , , , , , and .以下のIDL属性とメソッドは、要素に
: 、 、 、 、 、 、 、 IDL属性、 、 、 、 、 メソッド。および イベントは 。
type=text
)状態とSearch状態(type=search
)Support in all current engines.
elements of type text create basic single-line text fields.">Element/input/text
Support in all current engines.
When an input
element's type
attribute is in the Text state or the Search state, the rules in this section apply.
input
要素は、要素の値に対する1行のプレーンテキスト編集コントロールを表す。
Text状態とSearch状態の違いは、主に文体である:検索コントロールが通常のテキストコントロールと区別されるプラットフォームにおいて、Search状態は、通常のテキストコントロールのように表示されるよりも、プラットフォームの検索コントロールと一致する外観になるかもしれない。
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir
attribute to "ltr
" if the user selected a left-to-right writing direction, and "rtl
" if the user selected a right-to-left writing direction.
Queue an element task on the user interaction task source given the element to fire an event named input
at the element, with the bubbles
and composed
attributes initialized to true.
指定される場合、value
属性は、U+000A LINE FEED(LF)またはU+000D CARRIAGE RETURN(CR)文字を含まない値を持たなければならない。
The value sanitization algorithm is as follows: Strip newlines from the value.
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、dirname
、list
、maxlength
、minlength
、pattern
、placeholder
、readonly
、required
、size
コンテンツ属性、list
、selectionStart
、selectionEnd
、selectionDirection
、value
IDL属性、select()
、setRangeText()
、setSelectionRange()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, max
, min
, multiple
, popovertarget
, popovertargetaction
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、valueAsDate
、valueAsNumber
IDL属性、stepDown()
、stepUp()
メソッド。
type=tel
)Support in all current engines.
When an input
element's type
attribute is in the Telephone state, the rules in this section apply.
input
要素は、その要素の値で与えられた電話番号の編集に対するコントロールを表す。
If the element is mutable, its value should be editable by the user. User agents may change the spacing and, with care, the punctuation of values that the user enters. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
指定される場合、value
属性は、U+000A LINE FEED(LF)またはU+000D CARRIAGE RETURN(CR)文字を含まない値を持たなければならない。
The value sanitization algorithm is as follows: Strip newlines from the value.
URLやEmail型とは異なり、Telephone型は特定の構文を強制しない。これは意図的なものである。妥当である電話番号は多種多様にわたって存在するので、実際に、電話番号フィールドは自由形式のフィールドになる傾向がある。特定の形式を適用する必要のあるシステムは、クライアント側の検証機構に接続するためにpattern
属性またはsetCustomValidity()
メソッドを使用するよう推奨される。
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、dirname
、list
、maxlength
、minlength
、pattern
、placeholder
、readonly
、required
、size
コンテンツ属性、list
、selectionStart
、selectionEnd
、selectionDirection
、value
IDL属性、select()
、setRangeText()
、setSelectionRange()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, max
, min
, multiple
, popovertarget
, popovertargetaction
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、valueAsDate
、valueAsNumber
IDL属性、stepDown()
、stepUp()
メソッド。
type=url
)elements of type url are used to let the user enter and edit a URL.">Element/input/url
Support in all current engines.
When an input
element's type
attribute is in the URL state, the rules in this section apply.
input
要素は、要素の値で指定された単一の絶対URLを編集するためのコントロールを表す。
If the element is mutable, the user agent should allow the user to change the URL represented by its value. User agents may allow the user to set the value to a string that is not a valid absolute URL, but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface). User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
指定されかつ空でない場合、value
属性は、絶対URLである潜在的にスペースで囲まれた妥当なURLである値を持たなければならない。
The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、dirname
、list
、maxlength
、minlength
、pattern
、placeholder
、readonly
、required
、size
コンテンツ属性、list
、selectionStart
、selectionEnd
、selectionDirection
、value
IDL属性、select()
、setRangeText()
、setSelectionRange()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, max
, min
, multiple
, popovertarget
, popovertargetaction
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、valueAsDate
、valueAsNumber
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/
を訪れたことを認められる場合、レンダリングはこのように見えるかもしれない:
このサンプルにおいて最初の4つのURLは、(おそらく、ユーザーがこれらのURLを参照する頻度による)実装定義の方法でソートされた、ユーザーが入力したテキストと一致する著者が指定したリスト内の4つのURLで構成される。ユーザーエージェントはユーザーがスキームの部分を省略して、ドメイン名上のインテリジェントマッチングを実行できるようにするために、値がURLであるという情報をどのように使っているかに注意する。
最後の2つのURL(また、利用可能であるより多くの値のスクロールバーの効能を考えると、おそらく多くのURL)は、ユーザーエージェントのセッション履歴データからふさわしいものである。このデータは、ページのDOMで利用できない。この特殊な例において、ユーザーエージェントはその値を提供するためのタイトルを持たない。
type=email
)Support in all current engines.
When an input
element's type
attribute is in the Email state, the rules in this section apply.
Email状態がどのように動作するかは、multiple
属性が指定されるかどうかに依存する。
multiple
属性が要素に指定されない場合input
要素は、その要素の値valueで指定された電子メールアドレスを編集するためのコントロールを表す。
If the element is mutable, the user agent should allow the user to change the email address represented by its value. User agents may allow the user to set the value to a string that is not a valid email address. The user agent should act in a manner consistent with expecting the user to provide a single email address. User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value. User agents may transform the value for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.
Constraint validation: While the user interface is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
指定されてかつ空でない場合、value
属性は、単一の妥当な電子メールアドレスである値を持たなければならない。
The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
Constraint validation: While the value of the element is neither the empty string nor a single valid email address, the element is suffering from a type mismatch.
multiple
属性が要素に指定されている場合input
要素は、要素の値で与えられた電子メールアドレスを追加、削除、および編集するに対するコントロールを表す。
If the element is mutable, the user agent should allow the user to add, remove, and edit the email addresses represented by its values. User agents may allow the user to set any individual value in the list of values to a string that is not a valid email address, but must not allow users to set any individual value to a string containing U+002C COMMA (,), U+000A LINE FEED (LF), or U+000D CARRIAGE RETURN (CR) characters. User agents should allow the user to remove all the addresses in the element's values. User agents may transform the values for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.
Constraint validation: While the user interface describes a situation where an individual value contains a U+002C COMMA (,) or is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
Whenever the user changes the element's values, the user agent must run the following steps:
Let latest values be a copy of the element's values.
Strip leading and trailing ASCII whitespace from each value in latest values.
Let the element's value be the result of concatenating all the values in latest values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
value
属性が指定される場合、妥当な電子メールアドレスのリストである値を持たなければならない。
The value sanitization algorithm is as follows:
Split on commas the element's value, strip leading and trailing ASCII whitespace from each resulting token, if any, and let the element's values be the (possibly empty) resulting list of (possibly empty) tokens, maintaining the original order.
Let the element's value be the result of concatenating the element's values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
Constraint validation: While the value of the element is not a valid email address list, the element is suffering from a type mismatch.
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])?)*$/
ここで、各トークンは、妥当な電子メールアドレスそのものである。妥当な電子メールアドレスのリストは、コンマ区切りトークンの集合である。To obtain the list of tokens from a valid email address list, an implementation must split the string on commas.
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、dirname
、list
、maxlength
、minlength
、multiple
、pattern
、placeholder
、readonly
、required
および size
コンテンツ属性、list
およびvalue
IDL属性、select()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, max
, min
, popovertarget
, popovertargetaction
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=password
)Support in all current engines.
When an input
element's type
attribute is in the Password state, the rules in this section apply.
input
要素は、要素の値に対する1行のプレーンテキスト編集コントロールを表す。ユーザー以外が値を見ることができないようにユーザーエージェントは値を見えなくすべきである。
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
指定される場合、value
属性は、U+000A LINE FEED(LF)またはU+000D CARRIAGE RETURN(CR)文字を含まない値を持たなければならない。
The value sanitization algorithm is as follows: Strip newlines from the value.
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、maxlength
、minlength
、pattern
、placeholder
、readonly
、required
、size
コンテンツ属性、selectionStart
、selectionEnd
、selectionDirection
、value
IDL属性、select()
、setRangeText()
、setSelectionRange()および
setSelectionRange()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, list
, max
, min
, multiple
, popovertarget
, popovertargetaction
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、list
、valueAsDate
、valueAsNumber
IDL属性、stepDown()
、stepUp()
メソッド。
type=date
)Support in all current engines.
When an input
element's type
attribute is in the Date state, the rules in this section apply.
input
要素は、特定の日付を表す、要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the date represented by its value, as obtained by parsing a date from it. User agents must not allow the user to set the value to a non-empty string that is not a valid date string. If the user agent provides a user interface for selecting a date, then the value must be set to a valid date string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid date string, the control is suffering from bad input.
入力フォーマットと日付、時刻、および数値フォームコントロールに対する送信形式との違いに関する議論、ならびにフォームコントロールのローカライゼーションに関する実装ノートについては概要の節を参照のこと。
指定されてかつ空でない場合、value
属性は、妥当な日付文字列である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
min
属性が指定された場合、妥当な日付文字列となる値を持たなければならない。max
属性が指定された場合、妥当な日付文字列となる値を持たなければならない。
step
属性は日単位で表される。The step scale factor is 86,400,000 (which converts the days to milliseconds, as used in the other algorithms). デフォルトのステップは1日である。
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest date for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a date from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z
") to midnight UTC on the morning of the parsed date, ignoring leap seconds.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid date string that represents the date that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z
").
The algorithm to convert a string to a Date
object, given a string input, is as follows: If parsing a date from input results in an error, then return an error; otherwise, return a new Date
object representing midnight UTC on the morning of the parsed date.
The algorithm to convert a Date
object to a string, given a Date
object input, is as follows: Return a valid date string that represents the date current at the time represented by input in the UTC time zone.
Date状態(および、後続の節で説明される他の日付と時刻に関連する状態)は、現代の暦を基準に正確な日付および時刻が確証されないような値を入力するためのものではない。たとえば、"ビッグバン後の1ミリ秒"、"ジュラ紀初期"、または"西暦紀元前250年頃の冬"のような年代のエントリーには不適切だろう。
グレゴリオ暦の導入以前の日付の入力のために、著者は、Date状態(および、以降の節で説明される他の日付と時刻に関連する状態)を使用しないように推奨される。これは、ユーザーエージェントが、グレゴリオ暦以前の時代から日付および時刻の変換をサポートする必要がないように、ユーザーに変換を求め、ユーザーに過度の負担を手動でかけるためである。(これは16世紀から20世紀初頭にわたって、異なる国で異なる時期に発生した、グレゴリオ暦が段階的に導入されたために複雑である。)代わりに、きめ細かい入力コントロールは、Number状態をもつselect
要素とinput
要素を使って提供することが著者に推奨される。
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、readonly
、required
、およびstep
コンテンツ属性、list
、value
、valueAsDate
、およびvalueAsNumber
IDL属性、select()
、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、selectionStart
、selectionEnd
、selectionDirection
IDL属性、setRangeText()
、setSelectionRange()
メソッド。
type=month
)Support in all current engines.
When an input
element's type
attribute is in the Month state, the rules in this section apply.
input
要素は、特定の月を表す、要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the month represented by its value, as obtained by parsing a month from it. User agents must not allow the user to set the value to a non-empty string that is not a valid month string. If the user agent provides a user interface for selecting a month, then the value must be set to a valid month string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid month string, the control is suffering from bad input.
入力フォーマットと日付、時刻、および数値フォームコントロールに対する送信形式との違いに関する議論、ならびにフォームコントロールのローカライゼーションに関する実装ノートについては概要の節を参照のこと。
指定されてかつ空でない場合、value
属性は、妥当な月文字列である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid month string, then set it to the empty string instead.
min
属性が指定された場合、妥当な月文字列となる値を持たなければならない。max
属性が指定された場合、妥当な月文字列となる値を持たなければならない。
step
属性は月単位で表される。The step scale factor is 1 (there is no conversion needed as the algorithms use months). デフォルトのステップは1ヶ月である。
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest month for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a month from input results in an error, then return an error; otherwise, return the number of months between January 1970 and the parsed month.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid month string that represents the month that has input months between it and January 1970.
The algorithm to convert a string to a Date
object, given a string input, is as follows: If parsing a month from input results in an error, then return an error; otherwise, return a new Date
object representing midnight UTC on the morning of the first day of the parsed month.
The algorithm to convert a Date
object to a string, given a Date
object input, is as follows: Return a valid month string that represents the month current at the time represented by input in the UTC time zone.
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、readonly
、required
、およびstep
コンテンツ属性、list
、value
、valueAsDate
、およびvalueAsNumber
IDL属性、select()
、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
IDL属性、setRangeText()
、setSelectionRange()
メソッド。
type=week
)When an input
element's type
attribute is in the Week state, the rules in this section apply.
input
要素は、特定の週を表す、要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it. User agents must not allow the user to set the value to a non-empty string that is not a valid week string. If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid week string, the control is suffering from bad input.
入力フォーマットと日付、時刻、および数値フォームコントロールに対する送信形式との違いに関する議論、ならびにフォームコントロールのローカライゼーションに関する実装ノートについては概要の節を参照のこと。
指定されてかつ空でない場合、value
属性は、妥当な週文字列である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid week string, then set it to the empty string instead.
min
属性が指定された場合、妥当な週文字列となる値を持たなければならない。max
属性が指定された場合、妥当な週文字列となる値を持たなければならない。
step
属性は週単位で表される。The step scale factor is 604,800,000 (which converts the weeks to milliseconds, as used in the other algorithms). デフォルトのステップは1週間である。The default step base is −259,200,000 (the start of week 1970-W01).
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a week string from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z
") to midnight UTC on the morning of the Monday of the parsed week, ignoring leap seconds.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid week string that represents the week that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z
").
The algorithm to convert a string to a Date
object, given a string input, is as follows: If parsing a week from input results in an error, then return an error; otherwise, return a new Date
object representing midnight UTC on the morning of the Monday of the parsed week.
The algorithm to convert a Date
object to a string, given a Date
object input, is as follows: Return a valid week string that represents the week current at the time represented by input in the UTC time zone.
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、readonly
、required
、およびstep
コンテンツ属性、list
、value
、valueAsDate
、およびvalueAsNumber
IDL属性、select()
、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
IDL属性、setRangeText()
、setSelectionRange()
メソッド。
type=time
)Support in all current engines.
When an input
element's type
attribute is in the Time state, the rules in this section apply.
input
要素は、特定の時刻を表す、要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid time string. If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid time string, the control is suffering from bad input.
入力フォーマットと日付、時刻、および数値フォームコントロールに対する送信形式との違いに関する議論、ならびにフォームコントロールのローカライゼーションに関する実装ノートについては概要の節を参照のこと。
指定されてかつ空でない場合、value
属性は、妥当な時刻文字列である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid time string, then set it to the empty string instead.
The form control has a periodic domain.
min
属性が指定された場合、妥当な時刻文字列となる値を持たなければならない。max
属性が指定された場合、妥当な時刻文字列となる値を持たなければならない。
step
属性は秒単位で表される。The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). デフォルトのステップは60秒である。
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes.
The algorithm to convert a string to a Date
object, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return a new Date
object representing the parsed time in UTC on 1970-01-01.
The algorithm to convert a Date
object to a string, given a Date
object input, is as follows: Return a valid time string that represents the UTC time component that is represented by input.
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、readonly
、required
、およびstep
コンテンツ属性、list
、value
、valueAsDate
、およびvalueAsNumber
IDL属性、select()
、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
IDL属性、setRangeText()
、setSelectionRange()
メソッド。
type=datetime-local
)Support in all current engines.
When an input
element's type
attribute is in the Local Date and Time state, the rules in this section apply.
input
要素は、特定のローカルな日付および時刻を表す、要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the date and time represented by its value, as obtained by parsing a date and time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid normalized local date and time string. If the user agent provides a user interface for selecting a local date and time, then the value must be set to a valid normalized local date and time string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid normalized local date and time string, the control is suffering from bad input.
入力フォーマットと日付、時刻、および数値フォームコントロールに対する送信形式との違いに関する議論、ならびにフォームコントロールのローカライゼーションに関する実装ノートについては概要の節を参照のこと。
指定されてかつ空でない場合、value
属性は、妥当なローカルな日付および時刻文字列である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is a valid local date and time string, then set it to a valid normalized local date and time string representing the same date and time; otherwise, set it to the empty string instead.
min
属性が指定された場合、妥当なローカル日付および時刻文字列となる値を持たなければならない。max
属性が指定された場合、妥当なローカル日付および時刻文字列となる値を持たなければならない。
step
属性は秒単位で表される。The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). デフォルトのステップは60秒である。
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest local date and time for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a date and time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0
") to the parsed local date and time, ignoring leap seconds.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid normalized local date and time string that represents the date and time that is input milliseconds after midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0
").
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、readonly
、required
およびstep
コンテンツ属性、list
、value
およびvalueAsNumber
IDL属性、select()
、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
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 >
type=number
)Support in all current engines.
When an input
element's type
attribute is in the Number state, the rules in this section apply.
input
要素は、数値を表す文字列に要素の値を設定する文字列に対するコントロールを表す。
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating-point number. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
この仕様は、ユーザーエージェントがどのようなユーザーインターフェイスを使用するかを定義しない。ユーザーエージェントのベンダーは、最良のものをユーザーのニーズに提供するよう考慮することが推奨される。たとえば、ペルシャ語やアラビア語商圏においてユーザーエージェントは、ペルシャ語とアラビア語の数字入力(上記のように送信するために必要な形式に変換)をサポートするだろう。同様に、ローマ人に設計されたユーザーエージェントは、小数よりもむしろローマ数字の値を表示することがある。または(より現実的に)フランス市場向けに設計されたユーザーエージェントは1000と小数の前のコンマとの間にアポストロフィで値を表示することがあり、内部的に上記の送信形式に変換して、その方法で値を入力できる。
指定されてかつ空でない場合、value
属性は、妥当な浮動小数点数である値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.
min
属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。max
属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。
The step scale factor is 1. デフォルトのステップは1である(ステップベースが非整数値を持たない限り、ユーザーによって選択される整数のみを許可する)。
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input.
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
、placeholder
、readonly
、required
およびstep
コンテンツ属性、list
、value
およびvalueAsNumber
IDL属性、select()
およびstepUp()
、stepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, popovertarget
, popovertargetaction
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
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
属性を持つ)。
type=range
)Support in all current engines.
When an input
element's type
attribute is in the Range state, the rules in this section apply.
input
要素は、数値を表す文字列に要素の値を設定するためのコントロールを表すが、正確な値が重要ではないという通知とともに、Number状態を提供するよりも単純なインターフェイスをユーザーエージェントに提供させる。
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating-point number. User agents must not allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
value
属性が指定された場合、妥当な浮動小数点数となる値を持たなければならない。
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the best representation, as a floating-point number, of the default value.
デフォルト値は、最小値に最小値と最大値の差の半分を加えたものである。ただし、最大値が最小値よりも小さい場合を除き、この場合デフォルト値が最小値となる。
When the element is suffering from an underflow, the user agent must set the element's value to the best representation, as a floating-point number, of the minimum.
When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating-point number that represents the maximum.
When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum, if there is a number that matches these constraints. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.
For example, the markup <input type="range" min=0 max=100 step=20 value=50>
results in a range control whose initial value is 60.
ここで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 : 75 px ; width : 49 px ; background : #D5CCBB; color : black; }
このようにレンダリングされるかもしれない:
ユーザーエージェントがスタイルシートが指定した高さと幅のプロパティの比からコントロールの向きを決定する様子に注意する。同様に色はスタイルシートから派生したものである。しかし、目盛りはマークアップに由来である。具体的には、step
属性は目盛りの配置に影響を与えず、ユーザーエージェントは著者が指定した終了値を使用するかを決定してから、極端に長い目盛りを追加する。
不正値+50
が無視される様子にも注意する。
ほかにも、以下のマークアップ断片を考えてみる:
< input name = x type = range min = 100 max = 700 step = 9.09090909 value = 509.090909 >
ユーザーエージェントは、様々な方法で表示できる。たとえば:
あるいは:
ユーザーエージェントは、スタイルシートで指定された次元に基づいて表示するかを選ぶことができる。これは、幅の違いにもかかわらず、目盛りのために同じ解像度を維持することができるだろう。
最後に、2つのラベルの値を持つ範囲コントロールの例を次に示す:
< 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である。
The step scale factor is 1. デフォルトのステップは1である(min
属性が非整数値を持たない限り、整数のみを許可する)。
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return the best representation, as a floating-point number, of input.
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:autocomplete
、list
、max
、min
およびstep
コンテンツ属性、list
、value
およびvalueAsNumber
IDL属性、stepDown()
およびstepUp()
メソッド。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, maxlength
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, readonly
, required
, size
, src
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
IDL属性、select()
、setRangeText()
、setSelectionRange()
メソッド。
type=color
)Support in all current engines.
When an input
element's type
attribute is in the Color state, the rules in this section apply.
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. 属性は、次のキーワードと状態を持つ列挙属性である:
キーワード | 状態 | 概要 |
---|---|---|
limited-srgb | Limited sRGB | The CSS color is converted to the 'srgb' color space and limited to 8-bits per component, e.g., "#123456 " or "color(srgb 0 1 0 / 0.5) ". |
display-p3 | Display P3 | The CSS color is converted to the 'display-p3' color space, e.g., "color(display-p3 1.84 -0.19 0.72 / 0.6) ". |
The attribute's missing value default and invalid value default are both the Limited sRGB state.
Whenever the element's alpha
or colorspace
attributes are changed, the user agent must run update a color well control color given the element.
If the element is mutable, the user agent should allow the user to change the color represented by its value, as obtained from parsing it. User agents must not allow the user to set the value to a string that running update a color well control color for the element would not set it to. If the user agent provides a user interface for selecting a CSS color, then the value must be set to the result of serializing a color well control color given the element and the end user's selection.
The input activation behavior for such an element element is to show the picker, if applicable, for element.
Constraint validation: While the element's value is not the empty string and parsing it returns failure, the control is suffering from bad input.
The value
attribute, if specified and not the empty string, must have a value that is a CSS color.
The value sanitization algorithm is as follows: Run update a color well control color for the element.
To update a color well control color, given an element element:
Assert: element is an input
element whose type
attribute is in the Color state.
If color is failure, then set color to opaque black.
Set element's value to the result of serializing a color well control color given element and color.
To serialize a color well control color, given an element element and a CSS color color:
Assert: element is an input
element whose type
attribute is in the Color state.
Let htmlCompatible be false.
If element's alpha
attribute is not specified, then set color's alpha component to be fully opaque.
If element's colorspace
attribute is in the Limited sRGB state:
Round each of color's components so they are in the range 0 to 255, inclusive. Components are to be rounded towards +∞.
If element's alpha
attribute is not specified, then set htmlCompatible to true.
This intentionally uses a different serialization path for compatibility with an earlier version of the color well control.
Otherwise, set color to color converted to using the 'color()' function.
Otherwise:
Assert: element's colorspace
attribute is in the Display P3 state.
Set color to color converted to the 'display-p3' color space.
Return the result of serializing color. If htmlCompatible is true, then do so with HTML-compatible serialization requested.
The following common input
element content attributes and IDL attributes apply to the element: alpha
, autocomplete
, colorspace
, and list
content attributes; list
and value
IDL attributes; select()
method.
次のコンテンツ属性を指定してはならず、要素に適用しない:accept
、alt
、checked
、dirname
、formaction
、formenctype
、formmethod
、formnovalidate
、formtarget
、height
、max
、maxlength
、min
、minlength
、multiple
、pattern
、placeholder
、popovertarget
、popovertargetaction
、readonly
、required
、size
、src
、step
およびwidth
。
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=checkbox
)Support in all current engines.
When an input
element's type
attribute is in the Checkbox state, the rules in this section apply.
input
要素は、その要素のcheckedness状態を表す2状態コントロールを表す。要素のcheckedness状態がtrueの場合、コントロールは正の選択を表し、falseの場合、負の選択を表す。要素のindeterminate
DOM属性がtrueに設定される場合、あたかもコントロールが第3の状態である、不確定であったかのように、コントロールの選択を隠すべきである。
たとえ要素のindeterminate
IDL属性がtrueに設定されても、コントロールはtrueの3状態ではない。indeterminate
IDL属性は、第3の状態の外観を与える。
The input activation behavior is to run the following steps:
If the element is not connected, then return.
Fire an event named input
at the element with the bubbles
and composed
attributes initialized to true.
Fire an event named change
at the element with the bubbles
attribute initialized to true.
Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.
input.indeterminate [ = value ]
設定する場合、checkboxコントロールのレンダリングを上書きし、現在の値が表示されないようにする。
以下の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:checked
およびrequired
コンテンツ属性、checked
およびvalue
IDL属性。
value
IDL属性はモードdefault/onとなる。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, autocomplete
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, list
, max
, maxlength
, min
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, readonly
, size
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=radio
)Support in all current engines.
When an input
element's type
attribute is in the Radio Button state, the rules in this section apply.
input
要素は、他のinput
要素と組み合わせて使用した場合、1つのみのコントロールがそのcheckedness状態をtrueに設定させることができるラジオボタングループを形成するコントロールを表す。要素のcheckedness状態がtrueである場合、コントロールは、グループ内の選択されたコントロールを表し、falseである場合、選択されてないグループ内のコントロールを示す。
input
要素aを含むラジオボタングループはまた、次のすべての条件を満たす他のinput
要素bを含む:
input
要素bのtype
属性は、Radio Button状態となる。name
属性を持ち、name
属性は空ではなく、aのname
属性の値はbのname
属性の値と同じある。ツリーは、ラジオボタングループがその要素のみを含むinput
要素を含めてはならない。
When any of the following phenomena occur, if the element's checkedness state is true after the occurrence, the checkedness state of all the other elements in the same radio button group must be set to false:
name
attribute is set, changed, or removed.The input activation behavior is to run the following steps:
If the element is not connected, then return.
Fire an event named input
at the element with the bubbles
and composed
attributes initialized to true.
Fire an event named change
at the element with the bubbles
attribute initialized to true.
Constraint validation: If an element in the radio button group is required, and all of the input
elements in the radio button group have a checkedness that is false, then the element is suffering from being missing.
The following example, for some reason, has specified that puppers are both required and disabled:
< form >
< p >< label >< input type = "radio" name = "dog-type" value = "pupper" required disabled > Pupper</ label >
< p >< label >< input type = "radio" name = "dog-type" value = "doggo" > Doggo</ label >
< p >< button > Make your choice</ button >
</ form >
If the user tries to submit this form without first selecting "Doggo", then both input
elements will be suffering from being missing, since an element in the radio button group is required (viz. the first element), and both of the elements in the radio button group have a false checkedness.
On the other hand, if the user selects "Doggo" and then submits the form, then neither input
element will be suffering from being missing, since while one of them is required, not all of them have a false checkedness.
ラジオボタングループ内のラジオボタンがいずれもチェックされない場合、(ユーザーまたはスクリプトのいずれかによって)ボタンの1つがチェックされるようになるまで、インターフェイスで初期にチェックされない。
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:checked
およびrequired
コンテンツ属性、checked
およびvalue
IDL属性。
value
IDL属性はモードdefault/onとなる。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, autocomplete
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, list
, max
, maxlength
, min
, minlength
, multiple
, pattern
, placeholder
, popovertarget
, popovertargetaction
, readonly
, size
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=file
)Support in all current engines.
When an input
element's type
attribute is in the File Upload state, the rules in this section apply.
input
要素は、各ファイルがファイル名、ファイルタイプ、ファイル本体(ファイルの内容)で構成される、選択されたファイルのリストを表す。
Filenames must not contain path components, even in the case that a user has selected an entire directory hierarchy or multiple files with the same name from different directories. Path components, for the purposes of the File Upload state, are those parts of filenames that are separated by U+005C REVERSE SOLIDUS character (\) characters.
Unless the multiple
attribute is set, there must be no more than one file in the list of selected files.
The input activation behavior for such an element element is to show the picker, if applicable, for element.
If the element is mutable, the user agent should allow the user to change the files on the list in other ways also, e.g., adding or removing files by drag-and-drop. When the user does so, the user agent must update the file selection for the element.
If the element is not mutable, the user agent must not allow the user to change the element's selection.
To update the file selection for an element element:
Queue an element task on the user interaction task source given element and the following steps:
Update element's selected files so that it represents the user's selection.
Fire an event named input
at the input
element, with the bubbles
and composed
attributes initialized to true.
Fire an event named change
at the input
element, with the bubbles
attribute initialized to true.
Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.
Support in all current engines.
Support in all current engines.
accept
属性は、どのファイルタイプが受け入れられるかのヒントとともにユーザーエージェントを提供するために指定されてもよい。
指定された場合、この属性は、次のいずれかとASCII大文字・小文字不区別で一致しなければならない、それぞれがカンマ区切りトークンの集合で構成しなければならない。
audio/*
"video/*
"image/*
"トークンは、他のトークンのいずれかとASCII大文字・小文字不区別で一致してはならない(つまり重複は許可されない)。To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.
ユーザーエージェントは、一般的なファイルピッカーよりも適切なユーザーインターフェイスを表示するためにこの属性の値を使用してもよい。たとえば、値image/*
を与えられると、ユーザーエージェントはユーザーにローカルカメラのオプションや、写真コレクションから写真の選択を提供できる。値audio/*
を与えられると、ユーザーエージェントは、ユーザーにヘッドセットのマイクを使用してクリップを記録するオプションを提供できる。
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
著者は、特定の形式でデータを検索するとき、任意の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
属性の要件に従った場合であっても、それが期待されるフォーマットでないかもしれないので、著者は通常、クライアントから受信したデータが慎重に扱われるべきであることに注意する。
歴史的な理由により、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属性、およびメソッドは要素に適用する:accept
、multiple
、required
コンテンツ属性、files
、value
IDL属性、select()
メソッド。
The following content attributes must not be specified and do not apply to the element: alpha
, alt
, autocomplete
, checked
, colorspace
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, list
, max
, maxlength
, min
, minlength
, pattern
, popovertarget
, popovertargetaction
, placeholder
, readonly
, size
, src
, step
, and width
.
要素のvalue
属性は省略しなければならない。
以下のIDL属性とメソッドは、要素に適用しない:checked
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=submit
)Support in all current engines.
When an input
element's type
attribute is in the Submit Button state, the rules in this section apply.
input
要素は、アクティブにされたとき、フォームを送信するボタンを表す。If the element has a value
attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such. 要素は、具体的に送信ボタンとなるボタンである。
デフォルトのラベルは実装定義であり、かつ通常ボタンの幅はボタンのラベルに依存するため、ボタンの幅はfingerprintableな情報の数ビットをリークすることがありうる。このビットはユーザーエージェントのアイデンティティおよびユーザーロケールに強く相関される可能性がある。
The element's input activation behavior given event is as follows:
If the element does not have a form owner, then return.
If the element's node document is not fully active, then return.
Submit the element's form owner from the element with userInvolvement set to event's user navigation involvement.
formaction
、formenctype
、formmethod
、formnovalidate
、formtarget
属性は、フォーム送信用の属性である。
formnovalidate
属性は、制約検証をトリガーしない送信ボタンを作成するために使用することができる。
次の共通input
要素コンテンツ属性、IDL属性、およびメソッドは要素に適用する:dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, popovertarget
およびpopovertargetaction
コンテンツ属性、value
IDL属性。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, alt
, autocomplete
, checked
, colorspace
, height
, list
, max
, maxlength
, min
, minlength
, multiple
, pattern
, placeholder
, readonly
, required
, size
, src
, step
, and width
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=image
)Support in all current engines.
When an input
element's type
attribute is in the Image Button state, the rules in this section apply.
input
要素は、ユーザーが座標を選択してフォームを送信する画像、または代わりに、ユーザーがフォームを送信できるボタンを表す。要素は、具体的に送信ボタンとなるボタンである。
座標に対する2つのエントリーを送信することによってフォームの送信時にサーバーに送信され、制御の名前から得られるが、".x
"と".y
"はそれぞれの座標のxとy成分をもつ名前に付加される。
Support in all current engines.
画像はsrc
属性によって指定される。src
属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でないURLを含めなければならない。
When any of the these events occur
input
element's type
attribute is first set to the Image Button state (possibly when the element is first created), and the src
attribute is presentinput
element's type
attribute is changed back to the Image Button state, and the src
attribute is present, and its value has changed since the last time the type
attribute was in the Image Button stateinput
element's type
attribute is in the Image Button state, and the src
attribute is set or changedthen unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches images on demand, or the src
attribute's value is the empty string, run these steps:
Let url be the result of encoding-parsing a URL given the src
attribute's value, relative to the element's node document.
If url is failure, then return.
Let request be a new request whose URL is url, client is the element's node document's relevant settings object, destination is "image
", initiator type is "input
", credentials mode is "include
", and whose use-URL-credentials flag is set.
Fetch request, with processResponseEndOfBody set to the following step given response response:
If the download was successful and the image is available, queue an element task on the user interaction task source given the input
element to fire an event named load
at the input
element.
Otherwise, if the fetching process fails without a response from the remote server, or completes but the image is not a valid or supported image, then queue an element task on the user interaction task source given the input
element to fire an event named error
on the input
element.
Fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.
The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the input
element. User agents must not run executable code embedded in the image resource. User agents must only display the first page of a multipage resource. User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource.
Support in all current engines.
alt
属性は、画像を使用できないユーザーおよびユーザーエージェントのためにボタンのテキストラベルを提供する。alt
属性は存在しなければならず、画像が利用できなかった場合に等価なボタンに対して適切だろうラベルを与える空でない文字列を含まなければならない。
If the src
attribute is set, and the image is available and the user agent is configured to display that image, then the element represents a control for selecting a coordinate from the image specified by the src
attribute. In that case, if the element is mutable, the user agent should allow the user to select this coordinate.
そうでなければ、要素は、alt
属性の値によってラベルが指定される送信ボタンを表す。
The element's input activation behavior given event is as follows:
If the element does not have a form owner, then return.
If the element's node document is not fully active, then return.
If the user activated the control while explicitly selecting a coordinate, then set the element's selected coordinate to that coordinate.
This is only possible under the conditions outlined above, when the element represents a control for selecting such a coordinate. Even then, the user might activate the control without explicitly selecting a coordinate.
Submit the element's form owner from the element with userInvolvement set to event's user navigation involvement.
The element's selected coordinate consists of an x-component and a y-component. It is initially (0, 0). The coordinates represent the position relative to the edge of the element's image, with the coordinate space having the positive x direction to the right, and the positive y direction downwards.
The x-component must be a valid integer representing a number x in the range −(borderleft+paddingleft) ≤ x ≤ width+borderright+paddingright, where width is the rendered width of the image, borderleft is the width of the border on the left of the image, paddingleft is the width of the padding on the left of the image, borderright is the width of the border on the right of the image, and paddingright is the width of the padding on the right of the image, with all dimensions given in CSS pixels.
The y-component must be a valid integer representing a number y in the range −(bordertop+paddingtop) ≤ y ≤ height+borderbottom+paddingbottom, where height is the rendered height of the image, bordertop is the width of the border above the image, paddingtop is the width of the padding above the image, borderbottom is the width of the border below the image, and paddingbottom is the width of the padding below the image, with all dimensions given in CSS pixels.
Where a border or padding is missing, its width is zero CSS pixels.
formaction
、formenctype
、formmethod
、formnovalidate
、formtarget
属性は、フォーム送信用の属性である。
image.width [ = value ]
image.height [ = value ]
これらの属性は、実際のレンダリングされた画像の大きさ、または次元が未知である場合に0を返す。
対応するコンテンツ属性を変更するために、設定が可能である。
次の共通input
要素コンテンツ属性およびIDL属性は要素に適用する:alt
、formaction
、formenctype
、formmethod
、formnovalidate
、formtarget
、height
、popovertarget
、popovertargetaction
、src
およびwidth
コンテンツ属性、value
IDL属性。
The following content attributes must not be specified and do not apply to the element: accept
, alpha
, autocomplete
, checked
, colorspace
, dirname
, list
, max
, maxlength
, min
, minlength
, multiple
, pattern
, placeholder
, readonly
, required
, size
, and step
.
要素のvalue
属性は省略しなければならない。
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
この状態の挙動に関して多くの側面は、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"というラベルの付いたボタンが表示されたユーザーを仮定し、ボタンをクリックすることはマップの代わりから選択する場所のリストの表示をサーバーにさせる。)
type=reset
)Support in all current engines.
When an input
element's type
attribute is in the Reset Button state, the rules in this section apply.
アクティブにされたとき、input
要素は、フォームをリセットするボタンを表す。If the element has a value
attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Reset" or some such. 要素はボタンである。
デフォルトのラベルは実装定義であり、かつ通常ボタンの幅はボタンのラベルに依存するため、ボタンの幅はfingerprintableな情報の数ビットをリークすることがありうる。このビットはユーザーエージェントのアイデンティティおよびユーザーロケールに強く相関される可能性がある。
The element's input activation behavior is as follows:
If the element does not have a form owner, then return.
If the element's node document is not fully active, then return.
Reset the form owner from the element.
Constraint validation: The element is barred from constraint validation.
value
IDL属性は、この要素に適用し、モードのデフォルトとなる。
次の共通input
要素コンテンツ属性は要素に適用する:popovertarget
およびpopovertargetaction
。
The following content attributes must not be specified and do not apply to the element: 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
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
type=button
)Support in all current engines.
When an input
element's type
attribute is in the Button state, the rules in this section apply.
input
要素は、デフォルトの動作をもたないボタンを表す。要素が空文字列であるかもしれないが、ボタンのラベルは、value
属性で指定されなければならない。If the element has a value
attribute, the button's label must be the value of that attribute; otherwise, it must be the empty string. 要素はボタンである。
The element has no input activation behavior.
Constraint validation: The element is barred from constraint validation.
value
IDL属性は、この要素に適用し、モードのデフォルトとなる。
次の共通input
要素コンテンツ属性は要素に適用する:popovertarget
およびpopovertargetaction
。
The following content attributes must not be specified and do not apply to the element: 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
.
以下のIDL属性とメソッドは、要素に適用しない:checked
、files
、list
、selectionStart
、selectionEnd
、selectionDirection
、valueAsDate
、valueAsNumber
IDL属性、select()
、setRangeText()
、setSelectionRange()
、stepDown()
、stepUp()
メソッド。
この節は非規範的である。
The formats shown to the user in date, time, and number controls is independent of the format used for form submission.
Browsers are encouraged to use user interfaces that present dates, times, and numbers according to the conventions of either the locale implied by the input
element's language or the user's preferred locale. Using the page's locale will ensure consistency with page-provided data.
For example, it would be confusing to users if an American English page claimed that a Cirque De Soleil show was going to be showing on 02/03, but their browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the date was presented in the same format everywhere. (There's still a risk that the user would end up arriving a month late, of course, but there's only so much that can be done about such cultural differences...)
input
要素属性These attributes only apply to an input
element if its type
attribute is in a state whose definition declares that the attribute applies. When an attribute doesn't apply to an input
element, user agents must ignore the attribute, regardless of the requirements and definitions below.
min
およびmax
属性or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength
Support in all current engines.
or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength
Support in all current engines.
or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength
Support in all current engines.
or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength
Support in all current engines.
Support in all current engines.
The maxlength
attribute, when it applies, is a form control maxlength
attribute.
Support in all current engines.
The minlength
attribute, when it applies, is a form control minlength
attribute.
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 >
size
属性視覚的なレンダリングにおいて、size
属性は、ユーザーエージェントが要素の値を編集している間にユーザーが参照できるようにする、文字数を与える。
size
属性が指定される場合、0より大きい妥当な負でない整数である値を持たなければならない。
If the attribute is present, then its value must be parsed using the rules for parsing non-negative integers, and if the result is a number greater than zero, then the user agent should ensure that at least that many characters are visible.
The size
IDL attribute is limited to only positive numbers and has a default value of 20.
readonly
属性Support in all current engines.
Support in all current engines.
Support in all current engines.
readonly
属性は、ユーザーがフォームコントロールを編集できるかどうかを制御する真偽属性である。指定される場合、要素はmutableでない。
Constraint validation: If the readonly
attribute is specified on an input
element, the element is barred from constraint validation.
disabled
とreadonly
の違いは、読み取り専用コントロールは引き続き機能するが、無効化されたコントロールは通常、有効にされるまでコントロールとして機能しない。これは、この仕様の他の部分では、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 >
required
属性required
属性は真偽属性である。指定される場合、要素はrequiredとなる。
Constraint validation: If the element is required, and its value
IDL attribute applies and is in the mode value, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.
以下のフォームは、電子メールアドレスに対しておよびパスワードに対しての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 >
ラジオボタングループが必須とされるかどうかにかかわらず、混乱を避けるために、著者は、グループ内のすべてのラジオボタンで属性を指定することが推奨される。実際一般に、これはユーザーが戻ることができない状態であるため、著者は、最初の場所で任意の最初にチェックするコントロールを持たないラジオボタングループを回避することが推奨されており、したがって一般に貧弱なユーザーインターフェイスと見なされる。
multiple
属性Support in all current engines.
Support in all current engines.
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 >
pattern
属性Support in all current engines.
Support in all current engines.
pattern
属性は、チェックされるコントロールの値、または、multiple
属性が適用されて設定される場合はコントロールのそれぞれの値に対する正規表現を指定する。
指定する場合、属性の値はJavaScript Pattern[+UnicodeSetsMode, +N]
生成物と一致しなければならない。
The compiled pattern regular expression of an input
element, if it exists, is a JavaScript RegExp
object. It is determined as follows:
If the element does not have a pattern
attribute specified, then return nothing. The element has no compiled pattern regular expression.
Let pattern be the value of the pattern
attribute of the element.
Let regexpCompletion be RegExpCreate(pattern, "v
").
If regexpCompletion is an abrupt completion, then return nothing. The element has no compiled pattern regular expression.
User agents are encouraged to log this error in a developer console, to aid debugging.
Let anchoredPattern be the string "^(?:
", followed by pattern, followed by ")$
".
Return ! RegExpCreate(anchoredPattern, "v
").
The reasoning behind these steps, instead of just using the value of the pattern
attribute directly, is twofold. First, we want to ensure that when matched against a string, the regular expression's start is anchored to the start of the string and its end to the end of the string. Second, we want to ensure that the regular expression is valid in standalone form, instead of only becoming valid after being surrounded by the "^(?:
" and ")$
" anchors.
A RegExp
object regexp matches a string input, if ! RegExpBuiltinExec(regexp, input) is not null.
Constraint validation: If the element's value is not the empty string, and either the element's multiple
attribute is not specified or it does not apply to the input
element given its type
attribute's current state, and the element has a compiled pattern regular expression but that regular expression does not match the element's value, then the element is suffering from a pattern mismatch.
Constraint validation: If the element's value is not the empty string, and the element's multiple
attribute is specified and applies to the input
element, and the element has a compiled pattern regular expression but that regular expression does not match each of the element's values, then the element is suffering from a pattern mismatch.
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
を言葉で表すことのない注意すべきである。
min
およびmax
属性Support in all current engines.
Support in all current engines.
フォームコントロールは、ユーザーが提供できる値の許容範囲を制限することに対して明示的な制約を適用できる。通常、このような範囲は線形および連続だろう。しかし、フォームコントロールの最大限広い範囲が有限である場合、フォームコントロールは定期的なドメインを持つことができ、かつ著者は境界にまたがり、その中で明示的に範囲を指定できる。
具体的に、type=time
制御の広い範囲が深夜の真夜中(24時間)であり、かつ著者は両方の連続線形範囲(たとえば午後9時から午後11時までなど)や不連続な範囲にわたる深夜(たとえば午後11時から午前1時までなど)を設定できる。
min
およびmax
属性は、要素に対して許可された範囲を示す。
Their syntax is defined by the section that defines the type
attribute's current state.
If the element has a min
attribute, and the result of applying the algorithm to convert a string to a number to the value of the min
attribute is a number, then that number is the element's minimum; otherwise, if the type
attribute's current state defines a default minimum, then that is the minimum; otherwise, the element has no minimum.
The min
attribute also defines the step base.
If the element has a max
attribute, and the result of applying the algorithm to convert a string to a number to the value of the max
attribute is a number, then that number is the element's maximum; otherwise, if the type
attribute's current state defines a default maximum, then that is the maximum; otherwise, the element has no maximum.
要素が定期的なドメインを持たない場合、max
属性の値(最大値)は、min
属性の値(最小値)未満であってはならない。
If an element that does not have a periodic domain has a maximum that is less than its minimum, then so long as the element has a value, it will either be suffering from an underflow or suffering from an overflow.
An element has a reversed range if it has a periodic domain and its maximum is less than its minimum.
要素が定義された最小値または定義された最大値を持つ場合、要素は、範囲の制限がある。
Constraint validation: When the element has a minimum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is less than the minimum, the element is suffering from an underflow.
Constraint validation: When the element has a maximum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum, the element is suffering from an overflow.
Constraint validation: When an element has a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum and less than the minimum, the element is simultaneously suffering from an underflow and suffering from an overflow.
次の日付コントロールは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" >
step
属性Support in all current engines.
step
属性は、許可される値を制限することによって、値または複数の値の期待される(そして必須の)粒度を示す。The section that defines the type
attribute's current state also defines the default step, the step scale factor, and in some cases the default step base, which are used in processing the attribute as described below.
step
属性が指定される場合、0より大きい数値に解析する、妥当な浮動小数点数である値を持たなければならない、または文字列"any
"とASCII大文字・小文字不区別で一致する値のいずれかを持たなければならない。
The attribute provides the allowed value step for the element, as follows:
If the attribute does not apply, then there is no allowed value step.
Otherwise, if the attribute is absent, then the allowed value step is the default step multiplied by the step scale factor.
Otherwise, if the attribute's value is an ASCII case-insensitive match for the string "any
", then there is no allowed value step.
Otherwise, if the rules for parsing floating-point number values, when they are applied to the attribute's value, return an error, zero, or a number less than zero, then the allowed value step is the default step multiplied by the step scale factor.
Otherwise, the allowed value step is the number returned by the rules for parsing floating-point number values when they are applied to the attribute's value, multiplied by the step scale factor.
The step base is the value returned by the following algorithm:
If the element has a min
content attribute, and the result of applying the algorithm to convert a string to a number to the value of the min
content attribute is not an error, then return that result.
If the element has a value
content attribute, and the result of applying the algorithm to convert a string to a number to the value of the value
content attribute is not an error, then return that result.
If a default step base is defined for this element given its type
attribute's state, then return it.
Return zero.
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
次の範囲の制御は、範囲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分の精度に制限される。
list
属性Support in all current engines.
list
属性は、ユーザーに提案済み選択肢の一覧を示す要素を識別するために使用される。
存在する場合、その値は同じツリーでdatalist
要素のIDでなければならない。
The suggestions source element is the first element in the tree in tree order to have an ID equal to the value of the list
attribute, if that element is a datalist
element. If there is no list
attribute, or if there is no element with that ID, or if the first element with that ID is not a datalist
element, then there is no suggestions source element.
If there is a suggestions source element, then, when the user agent is allowing the user to edit the input
element's value, the user agent should offer the suggestions represented by the suggestions source element to the user in a manner suitable for the type of control used. If appropriate, the user agent should use the suggestion's label and value to identify the suggestion to the user.
User agents are encouraged to filter the suggestions represented by the suggestions source element when the number of suggestions is large, including only the most relevant ones (e.g. based on the user's input so far). No precise threshold is defined, but capping the list at four to seven values is reasonable. If filtering based on the user's input, user agents should search within both the label and value of the suggestions for matches. User agents should consider how input variations affect the matching process. Unicode normalization should be applied so that different underlying Unicode code point sequences, caused by different keyboard- or input-specific mechanisms, do not interfere with the matching process. Case variations should be ignored, which may require language-specific case mapping. For examples of these, see Character Model for the World Wide Web: String Matching. User agents may also provide other matching features: for illustration, a few examples include matching different forms of kana to each other (or to kanji), ignoring accents, or applying spelling correction. [CHARMODNORM]
This text field allows you to choose a type of JavaScript function.
< input type = "text" list = "function-types" >
< datalist id = "function-types" >
< option value = "function" > function</ option >
< option value = "async function" > async function</ option >
< option value = "function*" > generator function</ option >
< option value = "=>" > arrow function</ option >
< option value = "async =>" > async arrow function</ option >
< option value = "async function*" > async generator function</ option >
</ datalist >
For user agents that follow the above suggestions, both the label and value would be shown:
Then, typing "arrow" or "=>" would filter the list to the entries with labels "arrow function" and "async arrow function". Typing "generator" or "*" would filter the list to the entries with labels "generator function" and "async generator function".
As always, user agents are free to make user interface decisions which are appropriate for their particular requirements and for the user's particular circumstances. However, this has historically been an area of confusion for implementers, web developers, and users alike, so we've given some "should" suggestions above.
How user selections of suggestions are handled depends on whether the element is a control accepting a single value only, or whether it accepts multiple values:
multiple
attribute specified or if the multiple
attribute does not applyWhen the user selects a suggestion, the input
element's value must be set to the selected suggestion's value, as if the user had written that value themself.
type
attribute is in the Email state and the element has a multiple
attribute specifiedWhen the user selects a suggestion, the user agent must either add a new entry to the input
element's values, whose value is the selected suggestion's value, or change an existing entry in the input
element's values to have the value given by the selected suggestion's value, as if the user had themself added an entry with that value, or edited an existing entry to be that value. Which behavior is to be applied depends on the user interface in an implementation-defined manner.
If the list
attribute does not apply, there is no suggestions source element.
この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
要素に何の影響もないことに注意する。
placeholder
属性Support in all current engines.
Support in all current engines.
コントロールが値を持たない場合、placeholder
属性は、データ入力を伴うユーザーの支援を意図する短いヒント(単語や短いフレーズ)を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。指定される場合、属性は、U+000A LINE FEED(LF)またはU+000D CARRIAGE RETURN(CR)文字を含まない値を持たなければならない。
placeholder
属性は、label
の代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title
属性がより適切である。
このメカニズムは非常に似ているが微妙に異なる:コントロールのlabel
によって与えられるヒントは毎回表示され、placeholder
属性に与えられた短いヒントはユーザーが値を入力する前にのみ表示され、ユーザーが詳細なヘルプを要求するときにtitle
属性におけるヒントは表示される。
User agents should present this hint to the user, after having stripped newlines from it, when the element's value is the empty string, especially if the control is not focused.
If a user agent normally doesn't show this hint to the user when the control is focused, then the user agent should nonetheless show the hint for the control if it was focused as a result of the autofocus
attribute, since in that case the user will not have had an opportunity to examine the control before focusing it.
ここで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 = " ‫ رقم الهاتف 1 ‮ " >
< input name = t2 type = tel placeholder = " ‫ رقم الهاتف 2 ‮ " >
もう少しわかりやすくするために、インラインのアラビア語の代わりに数値文字参照を使用する同じ例を示す:
< input name = t1 type = tel placeholder = " ‫ رقم الهاتف 1 ‮ " >
< input name = t2 type = tel placeholder = " ‫ رقم الهاتف 2 ‮ " >
input
要素APIinput.value [ = value ]
フォームコントロールの現在の値を返す。
値を変更する設定が可能である。
コントロールがファイルコントロールであるときに空文字列以外の任意の値に設定される場合、"InvalidStateError
" DOMException
を投げる。
input.checked [ = value ]
フォームコントロールの現在checkednessを返す。
checkednessを変更する設定が可能である。
input.files [ = files ]
Support in all current engines.
element.">HTMLInputElement/files
Support in all current engines.
フォームコントロールの選択されたファイルを列挙する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
input.showPicker()
ユーザーが値を選択できるように、input,に適用可能なピッカーUIを表示する。(特定のコントロールにピッカーUIが実装されていない場合、このメソッドは何もしない。)
inputがmutableでない場合、"InvalidStateError
" DOMException
を投げる。
一時的なユーザーアクティベーションなしで呼び出された場合、"NotAllowedError
" DOMException
を投げる。
inputがクロスオリジンiframe
内にある場合、inputがFile UploadまたはColor状態でない限り、"SecurityError
" DOMException
を投げる。
The value
IDL attribute allows scripts to manipulate the value of an input
element. The attribute is in one of the following modes, which define its behavior:
On getting, return the current value of the element.
On setting:
Let oldValue be the element's value.
Set the element's value to the new value.
Set the element's dirty value flag to true.
Invoke the value sanitization algorithm, if the element's type
attribute's current state defines one.
If the element's value (after applying the value sanitization algorithm) is different from oldValue, and the element has a text entry cursor position, move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none
".
On getting, if the element has a value
content attribute, return that attribute's value; otherwise, return the empty string.
On setting, set the value of the element's value
content attribute to the new value.
On getting, if the element has a value
content attribute, return that attribute's value; otherwise, return the string "on
".
On setting, set the value of the element's value
content attribute to the new value.
On getting, return the string "C:\fakepath\
" followed by the name of the first file in the list of selected files, if any, or the empty string if the list is empty.
On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError
" DOMException
.
This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
Since path components are not permitted in filenames in the list of selected files, the "\fakepath\" cannot be mistaken for a path component.
The checked
IDL attribute allows scripts to manipulate the checkedness of an input
element. On getting, it must return the current checkedness of the element; and on setting, it must set the element's checkedness to the new value and set the element's dirty checkedness flag to true.
The files
IDL attribute allows scripts to access the element's selected files.
On getting, if the IDL attribute applies, it must return a FileList
object that represents the current selected files. The same object must be returned until the list of selected files changes. If the IDL attribute does not apply, then it must instead return null. [FILEAPI]
On setting, it must run these steps:
If the IDL attribute does not apply or the given value is null, then return.
Replace the element's selected files with the given value.
The valueAsDate
IDL attribute represents the value of the element, interpreted as a date.
On getting, if the valueAsDate
attribute does not apply, as defined for the input
element's type
attribute's current state, then return null. Otherwise, run the algorithm to convert a string to a Date
object defined for that state to the element's value; if the algorithm returned a Date
object, then return it, otherwise, return null.
On setting, if the valueAsDate
attribute does not apply, as defined for the input
element's type
attribute's current state, then throw an "InvalidStateError
" DOMException
; otherwise, if the new value is not null and not a Date
object throw a TypeError
exception; otherwise, if the new value is null or a Date
object representing the NaN time value, then set the value of the element to the empty string; otherwise, run the algorithm to convert a Date
object to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.
The valueAsNumber
IDL attribute represents the value of the element, interpreted as a number.
On getting, if the valueAsNumber
attribute does not apply, as defined for the input
element's type
attribute's current state, then return a Not-a-Number (NaN) value. Otherwise, run the algorithm to convert a string to a number defined for that state to the element's value; if the algorithm returned a number, then return it, otherwise, return a Not-a-Number (NaN) value.
On setting, if the new value is infinite, then throw a TypeError
exception. Otherwise, if the valueAsNumber
attribute does not apply, as defined for the input
element's type
attribute's current state, then throw an "InvalidStateError
" DOMException
. Otherwise, if the new value is a Not-a-Number (NaN) value, then set the value of the element to the empty string. Otherwise, run the algorithm to convert a number to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.
The stepDown(n)
and stepUp(n)
methods, when invoked, must run the following algorithm:
If the stepDown()
and stepUp()
methods do not apply, as defined for the input
element's type
attribute's current state, then throw an "InvalidStateError
" DOMException
.
If the element has no allowed value step, then throw an "InvalidStateError
" DOMException
.
If the element has a minimum and a maximum and the minimum is greater than the maximum, then return.
If the element has a minimum and a maximum and there is no value greater than or equal to the element's minimum and less than or equal to the element's maximum that, when subtracted from the step base, is an integral multiple of the allowed value step, then return.
If applying the algorithm to convert a string to a number to the string given by the element's value does not result in an error, then let value be the result of that algorithm. Otherwise, let value be zero.
Let valueBeforeStepping be value.
If value subtracted from the step base is not an integral multiple of the allowed value step, then set value to the nearest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than value if the method invoked was the stepDown()
method, and more than value otherwise.
Otherwise (value subtracted from the step base is an integral multiple of the allowed value step):
Let n be the argument.
Let delta be the allowed value step multiplied by n.
If the method invoked was the stepDown()
method, negate delta.
Let value be the result of adding delta to value.
If the element has a minimum, and value is less than that minimum, then set value to the smallest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is more than or equal to minimum.
If the element has a maximum, and value is greater than that maximum, then set value to the largest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than or equal to maximum.
If either the method invoked was the stepDown()
method and value is greater than valueBeforeStepping, or the method invoked was the stepUp()
method and value is less than valueBeforeStepping, then return.
Let value as string be the result of running the algorithm to convert a number to a string, as defined for the input
element's type
attribute's current state, on value.
Set the value of the element to value as string.
The list
IDL attribute must return the current suggestions source element, if any, or null otherwise.
Support in all current engines.
The HTMLInputElement
showPicker()
and HTMLSelectElement
showPicker()
method steps are:
If this is not mutable, then throw an "InvalidStateError
" DOMException
.
If this's relevant settings object's origin is not same origin with this's relevant settings object's top-level origin, and this is a select
element, or this's type
attribute is not in the File Upload state or Color state, then throw a "SecurityError
" DOMException
.
File and Color inputs are exempted from this check for historical reason: their input activation behavior also shows their pickers, and has never been guarded by an origin check.
If this's relevant global object does not have transient activation, then throw a "NotAllowedError
" DOMException
.
If this is a select
element, and this is not being rendered, then throw a "NotSupportedError
" DOMException
.
To show the picker, if applicable for an input
or select
element element:
If element's relevant global object does not have transient activation, then return.
If element is not mutable, then return.
Consume user activation given element's relevant global object.
If element is an input
element and element's type
attribute is in the File Upload state, then run these steps in parallel:
Optionally, wait until any prior execution of this algorithm has terminated.
Display a prompt to the user requesting that the user specify some files. If the multiple
attribute is not set on element, there must be no more than one file selected; otherwise, any number may be selected. Files can be from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the user's device.
Wait for the user to have made their selection.
If the user dismissed the prompt without changing their selection, then queue an element task on the user interaction task source given element to fire an event named cancel
at element, with the bubbles
attribute initialized to true.
Otherwise, update the file selection for element.
As with all user interface specifications, user agents have a good deal of freedom in how they interpret these requirements. The above text implies that a user either dismisses the prompt or changes their selection; exactly one of these will be true. But the mapping of these possibilities to specific user interface elements is not mandated by the standard. For example, a user agent might interpret clicking the "Cancel" button when files were previously selected as a change of selection to select zero files, thus firing input
and change
. Or it might interpret such a click as a dismissal that leaves the selection unchanged, thus firing cancel
. Similarly, it's up to the user agent whether re-selecting the same files as were previously selected counts as a dismissal, or as a change of selection.
Otherwise, the user agent should show any relevant user interface for selecting a value for element, in the way it normally would when the user interacts with the control. (If no such UI applies to element, then this step does nothing.)
If such a user interface is shown, it must respect the requirements stated in the relevant parts of the specification for how element behaves given its type
attribute state. (For example, various sections describe restrictions on the resulting value string.)
This step can have side effects, such as closing other pickers that were previously shown by this algorithm. (If this closes a file selection picker, then per the above that will lead to firing either input
and change
events, or a cancel
event.)
As of the time of this writing, typical browser implementations show such picker UI for:
input
elements whose type
attributes are in the Date, Month, Week, Time, Local Date and Time, and Color states;
input
elements in various states that have a suggestions source element;
input
elements whose type
attribute is in the File Upload state (although those are handled via the special case above, instead of by this step); and
select
elements.
However, the intent of this step is to trigger any picker UI implementation. So for example, if a user agent implemented a password picker UI for the Password state, then this method would be expected to show that picker UI when called on a password input.
When the input
and change
events apply (which is the case for all input
controls other than buttons and those with the type
attribute in the state), the events are fired to indicate that the user has interacted with the control. The input
event fires whenever the user has modified the data of the control. The change
event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. In all cases, the input
event comes before the corresponding change
event (if any).
When an input
element has a defined input activation behavior, the rules for dispatching these events, if they apply, are given in the section above that defines the type
attribute's state. (This is the case for all input
controls with the type
attribute in the Checkbox state, the Radio Button state, or the File Upload state.)
For input
elements without a defined input activation behavior, but to which these events apply, and for which the user interface involves both interactive manipulation and an explicit commit action, then when the user changes the element's value, the user agent must queue an element task on the user interaction task source given the input
element to fire an event named input
at the input
element, with the bubbles
and composed
attributes initialized to true, and any time the user commits the change, the user agent must queue an element task on the user interaction task source given the input
element to set its user validity to true and fire an event named change
at the input
element, with the bubbles
attribute initialized to true.
An example of a user interface involving both interactive manipulation and a commit action would be a Range controls that use a slider, when manipulated using a pointing device. While the user is dragging the control's knob, input
events would fire whenever the position changed, whereas the change
event would only fire when the user let go of the knob, committing to a specific value.
For input
elements without a defined input activation behavior, but to which these events apply, and for which the user interface involves an explicit commit action but no intermediate manipulation, then any time the user commits a change to the element's value, the user agent must queue an element task on the user interaction task source given the input
element to first fire an event named input
at the input
element, with the bubbles
and composed
attributes initialized to true, and then fire an event named change
at the input
element, with the bubbles
attribute initialized to true.
An example of a user interface with a commit action would be a Color control that consists of a single button that brings up a color wheel: if the value only changes when the dialog is closed, then that would be the explicit commit action. On the other hand, if manipulating the control changes the color interactively, then there might be no commit action.
Another example of a user interface with a commit action would be a Date control that allows both text-based user input and user selection from a drop-down calendar: while text input might not have an explicit commit step, selecting a date from the drop down calendar and then dismissing the drop down would be a commit action.
For input
elements without a defined input activation behavior, but to which these events apply, any time the user causes the element's value to change without an explicit commit action, the user agent must queue an element task on the user interaction task source given the input
element to fire an event named input
at the input
element, with the bubbles
and composed
attributes initialized to true. The corresponding change
event, if any, will be fired when the control loses focus.
Examples of a user changing the element's value would include the user typing into a text control, pasting a new value into the control, or undoing an edit in that control. Some user interactions do not cause changes to the value, e.g., hitting the "delete" key in an empty text control, or replacing some text in the control with text from the clipboard that happens to be exactly the same text.
A Range control in the form of a slider that the user has focused and is interacting with using a keyboard would be another example of the user changing the element's value without a commit step.
In the case of tasks that just fire an input
event, user agents may wait for a suitable break in the user's interaction before queuing the tasks; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.
When the user agent is to change an input
element's value on behalf of the user (e.g. as part of a form prefilling feature), the user agent must queue an element task on the user interaction task source given the input
element to first update the value accordingly, then fire an event named input
at the input
element, with the bubbles
and composed
attributes initialized to true, then fire an event named change
at the input
element, with the bubbles
attribute initialized to true.
These events are not fired in response to changes made to the values of form controls by scripts. (This is to make it easier to update the values of form controls in response to the user manipulating the controls, without having to then filter out the script's own changes to avoid an infinite loop.)
These events are also not fired when the browser changes the values of form controls as part of state restoration during navigation.