input 要素

4.10.5 input 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
type 属性が Hidden 状態にない場合: インタラクティブ・コンテント
type 属性が Hidden 状態にない場合: リスト対象で、ラベル付け可能で、サブミット可能で、リセット可能で、再関連付け可能フォーム関連要素
type 属性が Hidden 状態にある場合: リスト対象で、サブミット可能で、リセット可能で、再関連付け可能フォーム関連要素
type 属性が Hidden 状態にない場合: パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
コンテント属性:
グローバル属性
accept - ファイルアップロード・コントロールで期待するファイルタイプのためのヒント
alt - 画像が利用できないときに使う置換テキスト
autocomplete - フォームのオートフィル機能のためのヒント
autofocus - ページがロードされた時に自動的にフォームコントロールにフォーカスを当てる
checked - コマンドまたはコントロールがチェックされるかどうか
dirname - フォームのサブミットでの要素の方向性を送信するために使うフォームのフィールド名
disabled - フォームコントロールを無効にするかどうか
form - form 要素にコントロールを関連付ける
formaction -フォームのサブミットに使う URL
formenctype - フォームのサブミットに使うフォームデータセットのエンコーディングタイプ
formmethod - フォームのサブミットに使う HTTP メソッド
formnovalidate - フォームのサブミットのフォームコントロールのバリデーションをバイパスする
formtarget - フォームのサブミットブラウジングコンテキスト
height - 垂直寸法
inputmode - 入力モダリティを選択するためのヒント
list - オートコンプリートの選択肢のリスト
max - 最大値
maxlength - 値の最大長
min - 最小値
minlength - 値の最短長
multiple - 複数の値を許すかどうか
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
pattern - フォームコントロールの値のパターンマッチに使われるパターン
placeholder - フォームコントロールの中に配置されるユーザーに見えるラベル
readonly - ユーザーが値を編集できるかどうか
required - フォームのサブミットでコントロールが必須かどうか
size - コントロールのサイズ
src - リソースのアドレス
step - フォームコントロールの値に適用される精度
type - フォームコントロールのタイプ
value - フォームコントロールの値
width - 水平寸法
また、title 属性は、pattern 属性とともに使われるとき、この要素では特別なセマンティクスを持ちます。
text/html におけるタグの省略:
終了タグはありません。
指定可能な ARIA role 属性 の値:
type 属性の状態に依存します。
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute unsigned long height;
           attribute boolean indeterminate;
  readonly attribute HTMLElement? list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute long minLength;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
           attribute Date? valueAsDate;
           attribute unrestricted double valueAsNumber;
           attribute unsigned long width;

  void stepUp(optional long n = 1);
  void stepDown(optional long n = 1);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;
  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

input 要素はタイプ付けされたデータフィールドを表します。通常は、ユーザーがデータを編集できるフォームコントロールを伴います。

type 属性は、この要素のデータのタイプ(そして対応したコントロール)を制御します。これは列挙属性です。次の表は、この属性に対するキーワードと状態を列挙しています。左の列にあるキーワードは、そのキーワードと同じ行の 2 列目にあるセルに書かれた状態に対応します。

キーワード 状態 データのタイプ コントロールのタイプ
hidden Hidden 任意の文字列 n/a
text Text 改行なしのテキスト テキストフィールド
search Search 改行なしのテキスト 検索フィールド
tel Telephone 改行なしのテキスト テキストフィールド
url URL 絶対 URL テキストフィールド
email E-mail メールアドレス、または、メールアドレスのリスト テキストフィールド
password Password 改行なしのテキスト (センシティブな情報) データ入力をわからないようにするテキストフィールド
date Date タイムゾーンなしの日付 (西暦、月、日) 日付コントロール
time Time タイムゾーンなしの時刻 (時、分、秒、小数の秒) 時刻コントロール
number Number 数値 テキストフィールド、または、スピナーコントロール
range Range 正確な値は重要ではないというセマンティクスが追加された数値 スライダーコントロールやそれに類似したもの
color Color 8 ビットの赤緑青コンポーネントを伴う sRGB 色 カラーウェル
checkbox Checkbox 定義済みリストからの 0 個以上の値のセット チェックボックス
radio Radio Button 列挙値 ラジオボタン
file File Upload 0 個以上のファイル。それぞれに MIME type と、オプションでファイルを名を伴う ラベルとボタン
submit Submit Button 最後に選択された値でなければならず、フォームのサブミットを開始しなければならない、というセマンティクスが追加された列挙値 ボタン
image Image Button 最後に選択された値でなければならず、フォームのサブミットを開始しなければならない、というセマンティクスが追加された座標で、特定の画像のサイズに対して相対的な座標 クリック可能な画像、または、ボタン
reset Reset Button n/a ボタン
button Button n/a ボタン

値が指定されなかった場合のデフォルトText 状態です。

どの accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width コンテント属性、checked, files, valueAsDate, valueAsNumber, list IDL 属性、select() メソッド、selectionStart, selectionEnd, selectionDirection, IDL 属性、setRangeText()setSelectionRange() メソッド、stepUp()stepDown() メソッド、そして、inputchange イベントが input 要素に適用できるかは、その type 属性に依存します。それぞれのタイプを定義しているセクションでは、規定の "bookkeeping" セクションの中で、それぞれのタイプに対して、どの機能が適用できるのか、どれが適用できないのか、も明確に定義されています。これらの機能のビヘイビアは、それらの様々なセクションの中で定義されているとおり、それらが適用できるかできないのかに依存します(コンテント属性APIイベントについても、そちらを参照のこと)。

次表は非規定です。これは、どのコンテント属性、IDL 属性、メソッド、イベントが、それぞれの状態に適用できるのかをまとめたものです:

Hidden Text, Search URL, Telephone E-mail Password Date, Time Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
コンテント属性
accept · · · · · · · · · · Yes · · ·
alt · · · · · · · · · · · · Yes ·
autocomplete · Yes Yes Yes Yes Yes Yes Yes Yes · · · · ·
checked · · · · · · · · · Yes · · · ·
dirname · Yes · · · · · · · · · · · ·
formaction · · · · · · · · · · · Yes Yes ·
formenctype · · · · · · · · · · · Yes Yes ·
formmethod · · · · · · · · · · · Yes Yes ·
formnovalidate · · · · · · · · · · · Yes Yes ·
formtarget · · · · · · · · · · · Yes Yes ·
height · · · · · · · · · · · · Yes ·
inputmode · Yes · · Yes · · · · · · · · ·
list · Yes Yes Yes · Yes Yes Yes Yes · · · · ·
max · · · · · Yes Yes Yes · · · · · ·
maxlength · Yes Yes Yes Yes · · · · · · · · ·
min · · · · · Yes Yes Yes · · · · · ·
minlength · Yes Yes Yes Yes · · · · · · · · ·
multiple · · · Yes · · · · · · Yes · · ·
pattern · Yes Yes Yes Yes · · · · · · · · ·
placeholder · Yes Yes Yes Yes · Yes · · · · · · ·
readonly · Yes Yes Yes Yes Yes Yes · · · · · · ·
required · Yes Yes Yes Yes Yes Yes · · Yes Yes · · ·
size · Yes Yes Yes Yes · · · · · · · · ·
src · · · · · · · · · · · · Yes ·
step · · · · · Yes Yes Yes · · · · · ·
width · · · · · · · · · · · · Yes ·
IDL 属性とメソッド
checked · · · · · · · · · Yes · · · ·
files · · · · · · · · · · Yes · · ·
value default value value value value value value value value default/on filename default default default
valueAsDate · · · · · Yes · · · · · · · ·
valueAsNumber · · · · · Yes Yes Yes · · · · · ·
list · Yes Yes Yes · Yes Yes Yes Yes · · · · ·
select() · 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 · · · · · ·
stepUp() · · · · · Yes Yes Yes · · · · · ·
イベント
input イベント · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·
change イベント · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·

type 属性のいくつかの状態は、値をサニタイズするアルゴリズムを定義します。

input 要素はそれぞれにを持ちます。それは value IDL 属性からアクセスできます。いくつかの状態は文字列を数字に変換するアルゴリズム数字を文字列に変換するアルゴリズム文字列を Date オブジェクトに変換するアルゴリズム、そして、Date オブジェクトを文字列に変換するアルゴリズムを定義します。これらは max, min, step, valueAsDate, valueAsNumber, stepDown(), stepUp() で使われます。

input 要素はそれぞれに真偽値となる汚染値フラグを持ちます。汚染値フラグは、要素が生成される当初は false にセットされなければいけません。しかし、ユーザーがを変更するような操作をコントロールにしたら true にセットされなければいけません。(値がプログラム的に変更された時も true にセットされます。これは value IDL 属性の定義にて説明されています。)

The value コンテント属性は、input 要素のデフォルトのを与えます。value コンテント属性が追加、値がセット、削除されるとき、このコントロールの汚染値フラグが false なら、ユーザーエージェントは、その要素のを、その value コンテント属性の値があればその値に、なければ空文字列にセットしなければいけません。そして、現在の値があれば、現在の値をサニタイズするアルゴリズムを実行しなければいけません。

input 要素はそれぞれにチェック状態を持ちます。これには、checked IDL 属性からアクセスできす。

input 要素はそれぞれに真偽値となる汚染チェック状態フラグを持ちます。それが true のとき、その要素のことを、汚染チェック状態を持つと言います。汚染チェック状態フラグは、要素が生成される初期の段階では false にセットされなければいけません。そして、ユーザーがチェック状態を変更するような操作をそのコントロールにしたときは、true にセットされなければいけません。

checked コンテント属性は、input 要素のデフォルトのチェック状態を与える論理属性です。checked コンテント属性が追加されるとき、そのコントロールが汚染チェック状態を持たないなら、ユーザーエージェントはその要素のチェック状態を true にセットしなければいけません。checked コンテント属性が削除されるとき、そのコントロールが汚染チェック状態を持たないなら、ユーザーエージェントはその要素のチェック状態を false にセットしなければいけません。

input 要素のリセット・アルゴリズムは、汚染値フラグ汚染チェック状態フラグを false に戻す形でセットしたり、要素のを、value コンテント属性の値があればその値に、なければ空文字列にセットしたり、要素が checked コンテント属性を持てば、要素のチェック状態を true にセットし、持たなければ false にセットしたり、選択済みファイルのリストを空にしたりすることです。それから、type 属性の現在の状態が値をサニタイズするアルゴリズムを定義しているなら、それを呼び出すことです。

input 要素はそれぞれミュータブルになることができます。他で指定がない限り、input 要素は常にミュータブルです。同様に、他で指定がない限り、ユーザーエージェントは、要素のチェック状態をユーザーが変更できるようにするべきではありません。

input 要素が無効のときはミュータブルではありません。

readonly 属性は、場合によっては(たとえば、Date 状態ではそうですが、Checkbox 状態ではそうではありません)、input 要素をミュータブルであることを抑止することもあります。

input 要素の複製手順は、汚染値フラグチェック状態汚染チェック状態フラグを、複製元のノードからコピー先に反映させます。


input 要素が生成されるとき、その要素のレンダリングとビヘイビアは、type 属性の状態に対して定義されたレンダリングとビヘイビアにセットされなければいけません。そして、該当の type 属性の状態に値をサニタイズするアルゴリズムが定義されているなら、それが呼び出されなければいけません。

input 要素の type 属性が状態を変更するとき、ユーザーエージェントは次の手順を実行しなければいけません:

  1. 要素の type 属性の前の状態が value IDL 属性を value モードにしており、その要素のが空文字列ではなく、その要素の type 属性の新たな状態が value IDL 属性を default モードか default/on モードのいずれかにするなら、その要素の value コンテント属性を、その要素のにセットします。

  2. そうでなければ、要素の type 属性の前の状態が value IDL 属性を value モード以外のモードにしており、その要素の type 属性の新たな状態が value IDL 属性を value モードにするなら、value コンテント属性の値があれば、要素のをそれにセットし、なければ空文字列にセットします。それから、そのコントロールの汚染値フラグを false にセットします。

  3. 要素のレンダリングとビヘイビアを新たな状態のものにアップデートします。

  4. type 属性の新たな状態に対して値をサニタイズするアルゴリズムが定義されているなら、それを呼び出します。


name 属性は要素の名前を表します。dirname 属性は、その要素の方向性がどのようにサブミットされるのかを制御します。disabled 属性は、コントロールを非インタラクティブにして、その値がサブミットされないようにするために使われます。form 属性は input 要素をそのフォームオーナーと明示的に関連付けるために使われます。autofocus 属性ははフォーカスを制御します。autocomplete 属性は、ユーザーエージェントがオートフィルの挙動をどのように提供するのかを制御します。

indeterminate IDL 属性は初期の段階では false にセットされなければいけません。取得時においては、それは最後にセットされた値を返さなければいけません。セット時においては、それは新たな値にセットされなければいけません。これは、チェックボックスのコントロールの見た目が変わることを除いては、何も影響を及ぼしません。

accept, alt, max, min, multiple, pattern, placeholder, required, size, src, step IDL 属性は、同じ名前のコンテント属性を反映しなければいけません。dirName IDL 属性は dirname コンテント属性を反映しなければいけません。readOnly IDL 属性は readonly コンテント属性を反映しなければいけません。defaultChecked IDL 属性は checked コンテント属性を反映しなければいけません。defaultValue IDL 属性は valueコンテント属性を反映しなければいけません。

type IDL 属性は、同じ名前のコンテント属性を反映しなければいけません。ただし、既知の値に限定されます。maxLength IDL 属性は、maxlength コンテント属性を反映しなければいけません。ただし、非負数のみに限定されます。minLength IDL 属性は、minlength コンテント属性を反映しなければいけません。ただし、非負数のみに限定されます。

IDL 属性 width and height は、画像がレンダリングされており、ビジュアルメディアにレンダリングされているなら、そのレンダリングされた画像の幅と高さを CSS ピクセルで返さなければいけません。画像は利用可能だけれども、それがビジュアルメディアにレンダリングされていないなら、その画像の本来の幅と高さを CSS ピクセルで返さなければいけません。利用可能な画像がなければ、0 を返さなければいけません。input 要素の type 属性が Image Button 状態にないなら、画像は利用可能ではありません。 [CSS]

セット時においては、それらは、同じ名前のコンテント属性を反映したかのように振る舞わなければいけません。

willValidate, validity, validationMessage IDL 属性、そして、checkValidity()setCustomValidity() メソッドは、制約バリデーション API の一部です。labels IDL 属性は、この要素の label のリストを提供します。select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), setSelectionRange() メソッドおよび IDL 属性は、この要素のテキストの選択範囲にアクセスすることができます。autofocus, disabled, form, name IDL 属性は、この要素の forms API の一部です。

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

input 要素の type 属性が Hidden 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、調べたり、ユーザーが操作することを目的としない値を表します。

制約バリデーション: input 要素の type 属性が Hidden 状態にあるなら、制約バリデーションから除外されます。

name 属性が存在し、文字列 "_charset_" に大文字と区別を区別して一致する値を持つなら、その要素の value 属性は省略されなければいけません。

value IDL 属性はこの要素に適用でき、モードは default です。

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp() メソッド

inputchange イベントは適用できません

4.10.5.1.2 Text (type=text) 状態と Search 状態 (type=search)
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要) または combobox.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Text 状態か Search 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、要素のを編集できる 1 行平文テキストコントロールを表します。

TextSearch 状態の違いは、主にスタイル的なものです。検索フィールドが通常のテキストフィールドと区別されるプラットフォームでは、Search 状態は、通常のテキストフィールドのように見えるのではなく、そのプラットフォームの検索フィールドに合わせた見せ方になるでしょう。

要素がミュータブルなら、そのをユーザーが編集できるようにするべきです。ユーザーエージェントは、この要素のに "LF" (U+000A) または "CR" (U+000D) 文字をユーザーに挿入させてはいけません。

要素がミュータブルなら、ユーザーエージェントは、ユーザーがその要素の書式方向を変更できるようにするべきです。つまり、それを左から右に向かう書式方向か、右から左に向かう書式方向のいずれかにセットできるようにします。ユーザーがそうしたなら、ユーザーエージェントは、次の手順を実行しなければいけません:

  1. ユーザーが左から右へ向かう書式方向を選択したら、要素の dir 属性を "ltr" にセットし、ユーザーが右から左へ向かう書式方向を選択したら、"rtl" にセットします。

  2. input 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングします。

value 属性は、指定されるなら、"LF" (U+000A) または "CR" (U+000D) 文字を含まない値を持たなければいけません。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, size コンテント属性; list, selectionStart, selectionEnd, selectionDirection, value IDL 属性; select(), setRangeText(), setSelectionRange() メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, src, step, width.

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, valueAsDate, valueAsNumber IDL 属性; stepDown(), stepUp() メソッド

4.10.5.1.3 Telephone 状態 (type=tel)
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要) または combobox.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Telephone 状態にあるとき、このセクションの規則が適用されます。

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

要素がミュータブルなら、そのをユーザーが編集できるようにするべきです。ユーザーエージェントはユーザーが入力するに、スペースを入れたり、注意は必要ですが、句読点を入れたりすることができます。ユーザーエージェントは、この要素のに "LF" (U+000A) または "CR" (U+000D) 文字をユーザーに挿入させてはいけません。

value 属性は、指定されるなら、"LF" (U+000A) または "CR" (U+000D) 文字を含まない値を持たなければけません。

URLE-mail タイプとは異なり、Telephone タイプは特定の構文を強要しません。これは国際的なものです。とりわけ、電話番号フィールドは、自由形式のフィールになりがちです。なぜなら、妥当な電話番号は非常に多くの種類があるからです。特定の形式を強要する必要があるシステムは、pattern 属性や setCustomValidity() を使って、クライアント側のバリデーションのメカニズムにて妥当性を確認することが推奨されます。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, sizeコンテント属性; list, selectionStart, selectionEnd, selectionDirection, value IDL 属性; select(), setRangeText(), setSelectionRange() メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, valueAsDate, valueAsNumber IDL 属性; stepDown(), stepUp()メソッド

4.10.5.1.4 URL 状態 (type=url)
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要) または combobox.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が URL 状態にあるとき、このセクションの規則が適用されます。

この input 要素は、その要素のに与えられた単一の絶対 URL を編集するためのコントロールを表します。

要素がミュータブルなら、そのによって表される URL をユーザーが編集できるようにするべきです。ユーザーエージェントは、ユーザーがその妥当絶対 URL でない文字列にセットできるようにすることができます。しかし、が常に妥当絶対 URL となるよう、ユーザーによって入力された文字を自動的にエスケープすることもできます(たとえ、それが、ユーザーインタフェースの中でユーザーに見える、または、編集される実際に値でなかったとしてもです)。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにするべきです。ユーザーエージェントは、この要素のに "LF" (U+000A) または "CR" (U+000D) 文字をユーザーに挿入させてはいけません。

value 属性は、指定され空でなければ、潜在的にスペースで囲まれた妥当な URL となる値を持たなければいけません。それは絶対 URL でもあります。

値をサニタイズするアルゴリズムは次のとおりです: から改行を取り除いてから、そのから最初と最後のホワイトスペースを取り除きます

制約バリデーション: 要素のが空文字列でも妥当絶対 URL でもないとき、その要素はタイプミスマッチに陥っています

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size コンテント属性; list, selectionStart, selectionEnd, selectionDirection, value IDL 属性; select(), setRangeText(), setSelectionRange() メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, src, step, 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="http://tools.ietf.org/html/rfc2045">
 <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
 <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
 <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
 <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>

ユーザーが "www.w3" と入力し、ユーザーエージェントは、そのユーザーがここ最近に http://www.w3.org/Consortium/#membershiphttp://www.w3.org/TR/XForms/ に訪れたことがあるということも分かっているなら、レンダリングはこのようになるでしょう:

A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drop down box, indicating further values are available.

このサンプルの最初の 4 つの URLは、オーサー指定リストのうち、ユーザーが入力したテキストに一致する 4 つの URL から構成されます。これらは、UA 定義の方法でソートされています(恐らく、ユーザーがこれらの URL を参照した頻度)。これらの値はユーザーがスキームの部分を省略できる URL であり、ドメイン一致を実行できるという認識を、UA がどのように使っているのかに注意してください。

最後の 2 つの URL(恐らくさらにたくさんあり、クロールバーを表示して、もっと多くの値が利用できることを示しています)は、ユーザーエージェントのセッション履歴データからの見つかったものです。このデータは、ページの DOM で利用できないようになっています。この例では、UA は、それらの値に付けるタイトルを持ちあわせていません。

4.10.5.1.5 E-mail 状態 (type=email)
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要) または combobox.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が E-mai 状態にあるとき、このセクションの規則が適用されます。

E-mail 状態がどのように動作するのかは、multiple 属性が指定されているかそうでないかに依存します。

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

この input 要素は、その要素のに与えられたメールアドレスを編集するためのコントロールを表します。

要素がミュータブルなら、そのによって表されるメールアドレスをユーザーが変更できるようにするべきです。ユーザーエージェントは、ユーザーが妥当なメールアドレスでない文字列にセットできるようにすることができます。ユーザーエージェントは、ユーザーがメールアドレスを 1 つだけ提供するものだと分かるような形で振る舞うべきです。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにするべきです。ユーザーエージェントは、この要素のに "LF" (U+000A) または "CR" (U+000D) 文字をユーザーに挿入させてはいけません。ユーザーエージェントは、表示と編集のために値を変換することができます。特に、ユーザーエージェントは、表示においては、の中にあるピュニコードを IDN に変換するべきです。その逆もしかりです。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントがピュニコードに変換できない入力を表している間は、そのコントロールは、不完全な入力に陥っています

value 属性は、指定され空でなければ、単一の妥当なメールアドレスとなる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: から改行を取り除いてから、そのから最初と最後のホワイトスペースを取り除きます

multiple 属性が削除されたとき、ユーザーエージェントは、値をサニタイズするアルゴリズムを実行しなければいけません。

制約バリデーション: 要素のが空文字列でも単一の妥当なメールアドレスでもない間は、その要素はタイプミスマッチに陥っています

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

この要素の(複数)は、その要素のカンマで区切った結果です。

この input 要素は、その要素の(複数)に与えられたメールアドレスを追加、削除、編集するためのコントロールを表します。

要素がミュータブルなら、その(複数)によって表されるメールアドレスをユーザーが追加、削除、編集できるようにするべきです。ユーザーエージェントは、ユーザーが(複数)のリストの個々の値を妥当なメールアドレスでない文字列にセットできるようにすることができます。しかし、ユーザーが個々の値を "," (U+002C), "LF" (U+000A), または "CR" (U+000D) 文字を含んだ文字列にセットできるようにしてはいけません。ユーザーエージェントは、ユーザーが要素の(複数)のすべてのアドレスを削除できるようにするべきです。ユーザーエージェントは、表示と編集のためにを変換することができます。特に、ユーザーエージェントは、表示においては、の中にあるピュニコードを IDN に変換するべきです。その逆もしかりです。

制約バリデーション: ユーザーインタフェースが、個々の値に "," (U+002C) が含まれている状況を示している、または、ユーザーエージェントがピュニコードを変換できない入力を表している間は、そのコントロールは不完全な入力に陥っています

ユーザーが要素の(複数)を変更するとき、ユーザーエージェントは、次の手順を実行しなければいけません:

  1. latest values を、要素の(複数)のコピーとします。

  2. latest values の中の個々の値から、最初と最後のホワイトスペースを取り除きます

  3. 要素のを、latest values のすべての値を連結した結果とします。個々の値の区切りには 1 つの "," (U+002C) 文字を使い、リストの順番は維持します。

value 属性は、指定されたら、妥当なメールアドレスのリストとなる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです:

  1. 要素のカンマで区切り、結果として得られたそれぞれのトークンの最初と最後にホワイトスペースがあれば、それらを取り除きます。そして、その要素の(複数)を、結果として得られたトークンのリスト(空の場合もある)とします。元の順番は維持します。

  2. 要素のを、その要素の(複数)を連結した結果とします。個々の値は 1 つの "," 文字で区切り、順番は維持します。

multiple 属性がセットされるとき、ユーザーエージェントは値をサニタイズするアルゴリズムを実行しなければいけません。

制約バリデーション: 要素の妥当なメールアドレスのリストでない間は、その要素はタイプミスマッチに陥っています

妥当なメールアドレスとは、次の ABNF の email プロダクションに、Unicode の文字セットで一致する文字列です。この 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 >

この要件は RFC 5322 に違反していますが、意図的なものです。RFC 5322 では、メールアドレスの構文がかなり厳密("@" 文字の前)に定義されている一方で、ここで実際に使うには、曖昧すぎるところ("@" 文字の後)や、緩すぎるところ(コメントやホワイトスペース文字が許されていたり、ほとんど誰も知らないような方法での文字列のクォートを許したりします)があります。

次の JavaScript と Perl 互換の正規表現は、上記定義の実装を表しています。

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

妥当なメールアドレスのリスト とは、カンマ区切りのトークンのセットで、それぞれのトークン自身が妥当なメールアドレスとなるものです。妥当なメールアドレスのリストからトークンのリストを取得するために、実装においては、カンマで文字列を区切らなければいけません。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, maxlength, minlength, multiple, pattern, placeholder, readonly, required, sizeコンテント属性; listvalue IDL 属性

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown() stepUp()メソッド

4.10.5.1.6 Password 状態 (type=password)
指定可能な ARIA role 属性 の値:
textbox (デフォルト - 指定不要).
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Password 状態にあるとき、このセクションの規則が適用されます。

この input 要素は、その要素のに対する 1 行の平文テキスト編集のコントロールを表します。ユーザーエージェントは、ユーザー以外の人がそれを見ることができないよう、その値が分からないようにするべきです。

要素がミュータブルなら、そのをユーザーが編集できるようにするべきです。ユーザーエージェントは、この要素のに "LF" (U+000A) または "CR" (U+000D) 文字をユーザーに挿入させてはいけません。

value 属性は、指定されるなら、"LF" (U+000A) または "CR" (U+000D) 文字を含まない値を持たなければいけません。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, maxlength, minlength, pattern, placeholder, readonly, required, size コンテント属性; selectionStart, selectionEnd, selectionDirection, value IDL 属性; select(), setRangeText(), setSelectionRange()メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, min, multiple, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, valueAsDate, and valueAsNumber IDL 属性; stepDown()stepUp()メソッド

4.10.5.1.7 Date 状態 (type=date)

input 要素の type 属性が Date 状態にあるとき、このセクションの規則が適用されます。

この input 要素は、要素のを特定の日付を表す文字列にセットするためのコントロールを表します。

要素がミュータブルなら、ユーザーエージェントは、値から日付をパースしたら、ユーザーがそのによって表される日付を変更できるようにするべきです。ユーザーエージェントは、ユーザーが妥当な日付文字列ではない空でない文字列にセットできないようにしなければいけません。ユーザーエージェントが日付を選択するユーザーインタフェースを提供するなら、そのは、ユーザーの選択を表す妥当な日付文字列にセットされなければいけません。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにするべきです。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントが妥当な日付文字列に変換できない入力を示している間は、そのコントロールは不完全な入力に陥っています

日付、時刻、数値のフォームコントロールに対する入力形式とサブミット形式の違いや、フォームコントロールのローカライゼーションについての実装の注意に関する議論は、イントロダクションのセクションを見てください。

value 属性は、指定され空文字列でないなら、妥当な日付文字列となる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: 要素の妥当な日付文字列でないなら、それを空の文字列にセットします。

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

step 属性は日数で表現されます。ステップ・スケール・ファクターは 86,400,000(日数をミリ秒に換算したもので、他のアルゴリズムで使われています)です。デフォルトのステップは 1 日です。

要素がステップミスマッチに陥っているとき、ユーザーエージェントは、その要素の値を、その要素がステップミスマッチに陥らないであろう直近の日付に丸めることができます。

文字列を数値に変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりですinput から日付をパースして得られた結果がエラーなら、エラーを返します。そうでなければ、1970-01-01 の午前零時の UTC(値 "1970-01-01T00:00:00.0Z" で表される時間)から、パースされた日付の午前零時の UTC までに経過したミリ秒数を返します。うるう秒は無視します。

数値を文字列に変換するアルゴリズムは、数値 input が与えられるとしたら、次のとおりです: UTC で 1970-01-01の午前零時(値 "1970-01-01T00:00:00.0Z" によって表される時間)から現在の input ミリ秒後となる日付を UTC で表した妥当な日付文字列を返します。

文字列を Date オブジェクトに変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりです: input から日付をパースして得られた結果がエラーなら、エラーを返します。そうでなければ、パースされた日付の午前零時を UTC で表した新たな Date オブジェクトを返します。

Date オブジェクトを文字列に変換するアルゴリズムは、Date オブジェクト input が与えられるとしたら、次のとおりです: UTC タイムゾーンで input によって表される時間における日付を表す妥当な日付文字列を返さなければいけません。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, max, min, readonly, required, stepコンテント属性; list, value, valueAsDate, valueAsNumber IDL 属性; stepDown()stepUp()メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, size, src, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, selectionStart, selectionEnd, selectionDirection IDL 属性; select(), setRangeText(), setSelectionRange()メソッド

4.10.5.1.8 Time 状態 (type=time)

input 要素の type 属性が Time 状態にあるとき、このセクションの規則が適用されます。

この input 要素は、その要素のを特定の時刻を表す文字列にセットするためのコントロールを表します。

要素がミュータブルなら、ユーザーエージェントは、値から時刻をパースしたら、ユーザーがそのによって表される時刻を変更できるようにするべきです。ユーザーエージェントは、ユーザーが妥当な時刻文字列ではない空でない文字列にセットできないようにしなければいけません。ユーザーエージェントが時刻を選択するユーザーインタフェースを提供するなら、そのは、ユーザーの選択を表す妥当な時刻文字列にセットされなければいけません。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにするべきです。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントが妥当な時刻文字列に変換できない入力を示している間は、そのコントロールは不完全な入力に陥っています

日付、時刻、数値のフォームコントロールに対する入力形式とサブミット形式の違いや、フォームコントロールのローカライゼーションについての実装の注意に関する議論は、イントロダクションのセクションを見てください。

value 属性は、指定され空文字列でないなら、妥当な時刻文字列となる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: 要素の妥当な時刻文字列でないなら、それを空の文字列にセットします。

このフォームコントロールは周期的領域を持ちます

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

step 属性は秒数で表現されます。ステップ・スケール・ファクター1000(秒数をミリ秒に換算したもので、他のアルゴリズムで使われています)です。デフォルトのステップは 60 秒です。

要素がステップミスマッチに陥っているとき、ユーザーエージェントは、その要素のを、その要素がステップミスマッチに陥らないであろう直近の時刻に丸めることができます。

文字列を数値に変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりですinput から時刻をパースして得られた結果がエラーなら、エラーを返します。そうでなければ、午前零時から、時刻変更がない日におけるパースされた時刻までの経過ミリ秒を返します。

数値を文字列に変換するアルゴリズムは、数値 input が与えられるとしたら、次のとおりです: 時刻変更がない日における午前零時から input ミリ秒後となる時刻を表す妥当な時刻文字列を返します。

文字列を Date オブジェクトに変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりです: input から時刻をパースして得られた結果がエラーなら、エラーを返します。そうでなければ、1970-01-01 におけるパースされた時刻を UTC で表した新たな Date オブジェクトを返します。

Date オブジェクトを文字列に変換するアルゴリズムは、Date オブジェクト input が与えられるとしたら、次のとおりです: input によって表される UTC 時刻コンポーネントを表す妥当な時刻文字列を返します。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, max, min, readonly, required, stepコンテント属性; list, value, valueAsDate, valueAsNumber IDL 属性; stepDown()stepUp()メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, size, src, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, selectionStart, selectionEnd, selectionDirection IDL 属性; select(), setRangeText(), setSelectionRange()メソッド

4.10.5.1.9 Number 状態 (type=number)
指定可能な ARIA role 属性 の値:
spinbutton (デフォルト - 指定不要).
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Number 状態にあるとき、このセクションの規則が適用されます。

この input 要素は、その要素のを数値を表す文字列にセットするためのコントロールを表します。

要素がミュータブルなら、ユーザーエージェントは、その値に浮動小数点数値をパースする規則を適用して得られたら、ユーザーがそのによって表された数値を変更することができるようにするべきです。

ユーザーエージェントは、ユーザーが妥当な浮動小数点数ではない空でない文字列にセットできないようにしなければいけません。ユーザーエージェントがユーザーに数値を選択するためのユーザーインタフェースを提供するなら、その値は、ユーザーの選択を浮動小数点数として表す数値の最適な表現にセットされなければいけません。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにするべきです。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントが妥当な浮動小数点数に変換できない入力を示している間は、そのコントロールは不完全な入力に陥っています

本仕様は、ユーザーエージェントがどんなユーザーインタフェースを使うべきかについて定義しません。ユーザーエージェントのベンダーは、何が最もユーザーのニーズを汲み取れるのかについて検討することが求められます。たとえば、ペルシア語やアラビア語の市場なら、ユーザーエージェントはペルシア語やアラビア語の数値入力(前述のとおり、サブミットに対して求められる形式に変換)をサポートするでしょう。同様に、ローマ人に対して設計されたユーザーエージェントなら、10 進数ではなく、ローマ数字で値を表示するでしょう。(もっと現実的に言えば)フランス語の市場に対して設計されたユーザーエージェントなら、1000 の桁区切りにアポストロフィを入れ、小数の前にはカンマを入れて、値を表示するでしょう。そして、ユーザーがその方法で値を入力できるようにするでしょう。内部的には、それを前述のサブミット形式に変換します。

value 属性は、指定され空でないなら、妥当な浮動小数点数となる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: 要素の妥当な浮動小数点数でないなら、それを空文字列にセットします。

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

ステップ・スケール・ファクターは 1 です。デフォルトのステップは 1 です(ステップ・ベースが非整数値を持たない限り、ユーザーが選択できるのは整数のみです)。

要素がステップミスマッチに陥っているとき、ユーザーエージェントは、そのを、その要素がステップミスマッチに陥らないであろう直近の数値に丸めることができます。該当する数値が 2 つあった場合は、ユーザーエージェントは正の無限大に最も近い方を採用することが推奨されます。

文字列を数値に変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりです: input浮動小数点数値をパースする規則に適用して得られた結果がエラーなら、エラーを返します。そうでなければ、結果として得られた数値を返します。

数値を文字列に変換するアルゴリズムは、数値 input が与えられるとしたら、次のとおりです: input を表す妥当な浮動小数点数を返します。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, max, min, placeholder, readonly, required, stepコンテント属性; list, value, valueAsNumber IDL 属性; stepDown()stepUp()メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, size, src, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate IDL 属性; select(), setRangeText(), setSelectionRange()メソッド

これは、数値入力コントロールを使った例です:

<label>いくらチャージしたいですか? $<input type=number min=0 step=0.01 name=price></label>

前述のとおり、ユーザーエージェントは、ユーザーのローカル形式に合わせた数値入力をサポートしても良いでしょう。それを、前述のサブミットに求められる形式に変換します。これは、桁区切りの扱い("872,000,000,000" など)や、異なる小数点("3,99" vs "3.99" など)や、ローカルの数字を使う(アラビア語、ペルシア語、タイ語の場合など)などを含みます。

type=number 状態は、数字のみから構成されるものの、厳密には数字を言っているわけではないような入力には適切ではありません。たとえば、クレジットカード番号や米国の郵便番号には不適切でしょう。type=number を使うべきかどうかを決めるには、それがスピンボックスのインタフェースを持つ入力コントロールで機能するかを考えるのが、もっとも簡単な方法です(たとえば、"up" と "down" 矢印など)。クレジットカード番号を最後の桁を 1 だけ間違って取得するのは小さなミスではなく、すべての桁を間違って取得するのと同じくらい問題があります。そのため、ユーザーが "up" と "down" ボタンを使ってクレジットカード番号を選択するのは、理にかなっているとはいえないでしょう。スピンボックスのインタフェースが適切でないときは、type=number は恐らく正しい選択となるでしょう(pattern 属性を使うこともできます)。

4.10.5.1.10 Range 状態 (type=range)
指定可能な ARIA role 属性 の値:
slider (デフォルト - 指定不要)
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Range 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、その要素のを数値を表す文字列にセットするためのコントロールを表します。しかし、正確な値は重要ではないという点に注意が必要です。UA には、Number 状態よりシンプルなインタフェースを提供させることになります。

この状態においては、ユーザーの入力の間ですら、範囲とステップの制約が行使されます。そして、この値を空文字列にセットする方法はありません。

要素がミュータブルなら、ユーザーエージェントは、その値に浮動小数点数値をパースする規則を適用して得られたら、ユーザーがそのによって表される数値を変更できるようにするべきです。ユーザーエージェントは、ユーザーがその妥当な浮動小数点数ではない文字列にセットできないようにしなければいけません。ユーザーエージェントが数値を選択するためのユーザーエージェントを提供するなら、そのは、ユーザーの選択を浮動小数点数として表す数値の最適な表現にセットされなければいけません。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにしてはいけません。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントが妥当な浮動小数点数に変換できない入力を示している間は、そのコントロールは不完全な入力に陥っています

value 属性は、指定されるなら、妥当な浮動小数点数となる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: 要素の妥当な浮動小数点数でないなら、それを、デフォルト値を表す妥当な浮動小数点数にセットします。

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

デフォルト値は、最小値に、最小値最大値との差の半分を足したものです。ただし、最大値最小値より小さくない場合に限ります。そうでない場合は、デフォルト値最小値となります。

要素がアンダーフローに陥っているとき、ユーザーエージェントは、その要素のを、最小値を表す妥当な浮動小数点数にセットしなければいけません。

要素がオーバーフローに陥っているとき、最大値最小値より小さくないなら、ユーザーエージェントは、その要素のを、最大値を表す妥当な浮動小数点数にセットしなければいけません。

ステップ・スケール・ファクターは 1 です。デフォルトのステップは 1 です(min 属性が非整数値を持たない限り、ユーザーが選択できるのは整数のみです)。

要素がステップミスマッチに陥っているとき、ユーザーエージェントは、その要素のを、その要素がステップミスマッチに陥らない、かつ、最小値より大きいか等しい、かつ、最大値最小値より小さくないなら最大値より小さいか等しい、のすべての制約を満たす数値あがれば、それらを満たす直近の数値に丸めなければいけません。もし 2 つの数値がこれらの制約を満たすなら、ユーザーエージェントは正の無限大に最も近い方を使わなければいけません。

たとえば、次のマークアップ <input type="range" min=0 max=100 step=20 value=50> は、初期値が 60 となるレンジコントロールになります。

文字列を数値に変換するアルゴリズムは、文字列 input が与えられるとしたら、次のとおりです: input浮動小数点数値をパースする規則に適用して得られた結果がエラーなら、エラーを返します。そうでなければ、結果として得られた数値を返します。

数値を文字列に変換するアルゴリズムは、数値 input が与えられるとしたら、次のとおりです: input を表す妥当な浮動小数点数を返します。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocomplete, list, max, min, stepコンテント属性; list, value, valueAsNumber IDL 属性; stepDown()stepUp()メソッド

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate IDL 属性; select(), setRangeText(), setSelectionRange()メソッド

これは、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 { height: 75px; width: 49px; background: #D5CCBB; color: black; }

... このようにレンダリングされるでしょう:

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

UA がスタイルシートに指定された height と width プロパティの比率から、どのように配置の方向を決定しているのかに注意してください。同様に、色も、スタイルシートによるものです。しかし、目盛は、マークアップによるものです。特に、step 属性は目盛の配置に影響を与えておらず、UA は、ウェブ制作者指定の完了値のみから決定しており、両端には長めの目盛を加えています。

また、妥当でない値 ++50 が完全に無視されている点にも注意してください。

別の例として、次のマークアップを考えてみましょう:

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

ユーザーエージェントは、さまざまな方法で表示することができるでしょう。たとえば:

As a dial.

他にも、たとえば:

As a long horizontal slider with tick marks.

ユーザーエージェントは、スタイルシートに与えられた寸法に基づいて何を表示するかを選択することができるでしょう。これによって、ユーザーエージェントは、幅に違いがあるにもかかわらず、目盛の精度を同じに保つことができるようになります。

最後に、これは、2 つのラベル付けされた値を伴うレンジコントロールの例です:

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

コントロールを垂直に描画させるスタイルを使うと、これは次のように見えるでしょう:

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

4.10.5.1.11 Color 状態 (type=color)

input 要素の type 属性が Color 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、その要素のシンプルな色を表す文字列にセットするためのカラーウェルコントロールを表します。

この状態においては、常に選択された色があり、値を空文字列にセットする方法はありません。

要素がミュータブルなら、ユーザーエージェントは、その値にシンプルな色の値をパースする規則を適用して得られたら、ユーザーがそのによって表される色を変更できるようにするべきです。ユーザーエージェントは、ユーザーが妥当な小文字のシンプルな色ではない文字列にセットできるようにしてはいけません。ユーザーエージェントが色を選択するためのユーザーインタフェースを提供するなら、そのは、ユーザーの選択にシンプルな色の値をシリアライズするための規則を使って得られた結果にセットされなければいけません。ユーザーエージェントは、ユーザーがを空文字列にセットできるようにしてはいけません。

制約バリデーション: ユーザーインタフェースが、ユーザーエージェントが妥当な小文字のシンプルな色に変換できない入力を示している間は、そのコントロールは不完全な入力に陥っています

value 属性は、指定され空でないなら、妥当なシンプルな色となる値を持たなければいけません。

値をサニタイズするアルゴリズムは次のとおりです: 要素の妥当なシンプルな色なら、それを ASCII 小文字に変換した要素のにセットします。そうでなければ、それを文字列 "#000000" にセットします。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: autocompletelistコンテント属性; listvalue IDL 属性

value IDL 属性のモードは value です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

4.10.5.1.12 Checkbox 状態 (type=checkbox)

input 要素の type 属性が Checkbox 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、その要素のチェック状態を表す 2 つの状態を持つコントロールを表します。要素のチェック状態が true なら、そのコントロールは正の選択を表し、それが false なら、負の選択です。この要素の indeterminate IDL 属性が true にセットされているなら、そのコントロールの選択は、そのコントロールが 3 つ目、つまり、未確定の状態だったかのように、はっきりしない状態になるべきです。

このコントロールは、たとえその要素の indeterminate IDL 属性が true にセットされていたとしても、決して 3 つの状態を持つコントロールになることはありません。indeterminate IDL 属性は、3 つ目の状態の見た目を与えるだけです。

要素がミュータブルの場合: プレクリック・アクティベーション手順は、要素のチェック状態を反対の値にセットすること(つまり、それが false なら true で、true なら false)、そして、要素の indeterminate IDL 属性を false にセットすることから構成されます。キャンセル・アクティベーション手順は、チェック状態とその要素の indeterminate IDL 属性を、それらがプレクリック・アクティベーション手順が実行される前に持っていた値に戻すことから、構成されます。アクティベーション・ビヘイビアは、その要素で input という名前のバブリングするシンプルなイベントを発出してから、その要素で change という名前のバブリングするシンプルなイベントを発出することです。

要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

制約バリデーション: 要素が必須で、そのチェック状態が false なら、その要素は未入力に陥っています

input . indeterminate [ = value ]

セットされると、現在の値が見えない形に、チェックボックスのコントロールのレンダリングが書き換えられます。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: checked, requiredコンテント属性; checkedvalue IDL 属性

value IDL 属性のモードは default/on です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

4.10.5.1.13 Radio Button 状態 (type=radio)
指定可能な ARIA role 属性 の値:
radio (デフォルト - 指定不要) または menuitemradio
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Radio Button 状態にあるなら、このセクションの規則が適用されます。

この要素は、他の input 要素と一緒に使われるとき、ラジオボタングループを形成するコントロールを表しますが、うち 1 つのコントロールのチェック状態だけを true にセットできます。要素のチェック状態が true なら、そのコントロールは、そのグループの中で選択済みコントロールを表し、それが false なら、未選択のグループの中のコントロールを表します。

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

ドキュメントは、ラジオボタングループに 1 つしかないような input 要素を含んではいけません。

次の現象が 1 つでも発生したとき、その発生後の要素のチェック状態が true なら、同じラジオボタングループにある他のすべての要素のチェック状態は、false にセットされなければいけません:

要素がミュータブルの場合: プレクリック・アクティベーション手順は、要素のチェック状態を true にセットすることから構成されます。キャンセル・アクティベーション手順は、要素のチェック状態を false にセットすることから構成されます。アクティベーション・ビヘイビアは、その要素で input という名前のバブリングするシンプルなイベントを発出してから、その要素で change という名前のバブリングするシンプルなイベントを発出することです。

要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

制約バリデーション: ラジオボタングループにある要素が必須で、そのラジオボタングループの中のすべての input 要素が false のチェック状態を持つなら、その要素は未入力に陥っています

ラジオボタングループにあるラジオボタンが、ドキュメントに挿入されたときに 1 つもチェックされていないなら、それらの 1 つが(ユーザーまたはスクリプトによって)チェックされるときまで、それらはすべて、当初はインタフェース上ではチェックされていない状態となります。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: checked and requiredコンテント属性; checkedvalue IDL 属性

value IDL 属性のモードは default/on です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp() メソッド

4.10.5.1.14 File Upload 状態 (type=file)

input 要素の type 属性が File Upload 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、選択ファイルのリストを表します。それぞれのファイルは、ファイル名、ファイルタイプ、ファイル本体(ファルのコンテンツ)から構成されます。

ファイル名は、パスに相当する部分を含んではいけません。たとえ、ユーザーがディレクトリ階層全体を選択したり、異なるディレクトリにある同じ名前のファイルを複数選択したとしてもです。

multiple 属性がセットされない限り、選択ファイルのリストに 1 しかファイルを入れてはいけません。

要素がミュータブルなら、その要素のアクティベーション・ビヘイビアは、次の手順を実行することです:

  1. アルゴリズムがポップアップの表示を許可されていないなら、何もせずにこれらの手順を中止します。

  2. 返ります。しかし、これらの手順を非同期に実行し続けます。

  3. オプションで、このアルゴリズムの前の実行が終了する前まで待ちます。

  4. ユーザーがファイルを指定するよう促すプロンプトをユーザーに表示します。multiple 属性がセットされていないなら、1 つしかファイルを選択させてはいけません。そうでなければ、いくつでも選択できます。ファイルは、ファイルシステムにあるものでも、動的に生成されたものでも構いません。たとえば、ユーザーのデバイスに接続されたカメラから撮った写真などです。

  5. ユーザーが選択し終わるまで待ちます。

  6. まず、ユーザーの選択を反映するよう、要素の選択ファイルをアップデートするタスクをキューイングしてから、その input 要素で input という名前のバブリングするシンプルなイベントを発出し、最後に、その input 要素で change という名前のバブリングするシンプルなイベントを発出します。

要素がミュータブルなら、ユーザーエージェントは、まず、ユーザーが他の方法でもリストのファイルを変更できるようにするべきです。たとえば、ドラッグ&ドロップでファイルを追加したり削除したりするなどです。ユーザーがそうしたとき、ユーザーエージェントは、ユーザーの新たな選択を反映するよう、その要素の選択ファイルをアップデートするタスクをキューイングしてから、その input 要素で input という名前のバブリングするシンプルなイベントを発出し、最後に、その input 要素で change という名前のバブリングするシンプルなイベントを発出します。

要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。ユーザーエージェントは、ユーザーがその要素の選択を変更できるようにしてはいけません。

制約バリデーション: 要素が必須で、選択ファイルのリストが空なら、その要素は未入力に陥っています


accept 属性を指定して、ユーザーエージェントにどんなファイルタイプを受け付けるのかについてのヒントを提供することができます。

指定されたら、この属性は、カンマ区切りのトークンのセットから構成されなければいけません。それぞれは、次の 1 つに対して、大文字と小文字を区別せずに一致しなければいけません:

文字列 audio/*
サウンドファイルが受け付けられることを示します。
文字列 video/*
ビデオファイルが受け付けられることを示します。
文字列 image/*
画像ファイルが受け付けられることを示します。
パラメータなしの妥当な MIME タイプ
指定されたタイプのファイルが受け付けられることを示します。
最初の文字が "." (U+002E) 文字となる文字列
指定されたファイル拡張子を持つファイルが受け付けられることを示します。

トークンは、大文字と小文字を区別せずに比較して他のトークンと一致してはいけません(つまり、重複は許されません)。この属性からトークンのリストを取得するために、ユーザーエージェントは、この属性の値をカンマで分割しなければいけません。

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

ユーザーエージェントは、これらトークンの 1 つ(またはそれ以上)でも受け付けないのであれば、そのようなファイルをユーザーが選択できないようにするべきです。

ウェブ制作者は、特定のフォーマットのデータを期待するとき、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); // モダンブラウザー
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // UNIXベースのパス
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windowsベースのパス
    return path.substr(x+1);
  return path; // ファイル名のみ
}

これは次のようにして使います:

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>選択したファイルの名前: <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コンテント属性; filesvalue IDL 属性

value IDL 属性のモードは filename です。

inputchange イベントが適用できます

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, pattern, placeholder, readonly, size, src, step, width

この要素の value 属性は省略されなければいけません。

次の IDL 属性とメソッドは、この要素に適用できません: checked, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp() メソッド

4.10.5.1.15 Submit Button 状態 (type=submit)
指定可能な ARIA role 属性 の値:
button (デフォルト - 指定不要).
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Submit Button 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、アクティベートされたら、フォームをサブミットするボタンを表します。この要素が value 属性を持っていたら、そのボタンのラベルはその属性の値でなければいけません。そうでなければ、"Submit" などの意味を持つ実装定義済みの文字列でなければいけません。この要素はボタンですが、とりわけ、サブミットボタンとなります。 (This is a fingerprinting vector.)

要素がミュータブルなら、その要素のアクティベーション・ビヘイビアは次のとおりです:要素がフォームオーナーを持っており、その要素の Document完全にアクティブなら、その input 要素からフォームオーナーサブミットします。そうでなければ、何もしません。

要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

formaction, formenctype, formmethod, formnovalidate, formtarget 属性は、フォームサブミット用の属性です。

formnovalidate 属性は、制約バリデーションを引き起こさないサブミットボタンを作るために使うことができます。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: formaction, formenctype, formmethod, formnovalidate, formtargetコンテント属性; value IDL 属性

value IDL 属性のモードは default です。

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, checked, dirname, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

inputchange イベントは適用できません

4.10.5.1.16 Image Button 状態 (type=image)

input 要素の type 属性が Image Button 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、ユーザーが座標を選択してフォームをサブミットすることができる画像、または、ユーザーがフォームをサブミットすることができる代替ボタンのいずれかを表します。この要素はボタンですが、とりわけ、サブミットボタンとなります。

座標は、フォームサブミットの際に、その要素に関するエントリーを 2 つ送信することでサーバーへ送信されます。それらはコントロールの名前から取り出せるのですが、その名前に ".x" と" .y" が加えられます。それぞれが xy 座標になります。


画像は src 属性によって与えられます。src 属性は必須で、潜在的にスペースで囲まれた空でない妥当な URL を含んでいなければいけません。ただし、それは、ページを構成するものでもなく、スクリプトが実行されるものでもない、非インタラクティブな画像のリソースを参照するものでなければいけません。その画像はアニメーション付きでも構いません。

次のどの事象が発生しても、ユーザーエージェントが画像をサポートできなかったり、画像のサポートが無効になっていたり、ユーザーエージェントが要求に応じて要素をフェッチするだけだったり、src 属性の値が空文字列だったりしない限り、ユーザーエージェントは、src 属性の値を、その要素に対して、解決しなければならず、それが成功したなら、その結果として得られた絶対 URLフェッチしなければいけません:

  • input 要素の type 属性が、最初に Image Button 状態にセットされており(要素が最初に生成されたときなど)、src 属性が存在している。
  • input 要素の type 属性が Image Button 状態に戻され、src 属性が存在し、その値が、最後に type 属性が Image Button 状態だったときから変更された。
  • input 要素の type 属性が Image Button 状態にあり、src 属性がセット、または、変更された。

画像をフェッチするなら、そのリソースがフェッチ(後に定義されています)されて、ネットワーキング・タスクソースによってキューイングされたタスクが実行されるまで、その要素のドキュメントの load イベントを遅らせなければいけません。

画像の取得がネットワークエラーなしに成功し、その画像のタイプがサポート対象の画像タイプで、その画像がそのタイプの妥当な画像なら、その画像は利用可能と言います。画像が完全にダウンロードされる前の時点で、これが true なら、その画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされるそれぞれのタスクは、その画像の表示を適切にアップデートしなければいけません。

ユーザーエージェントは、画像のタイプを決定するために、公式なタイプを与える画像に関連付けられた Content-Type ヘッダーとともに、画像スニッフィング規則を適用するべきです。これらの規則が適用できないなら、その画像のタイプは、その画像に関連付けられた Content-Type ヘッダーによって与えられるタイプでなければいけません。

ユーザーエージェントは、input 要素を使った非画像リソースをサポートしてはいけません。ユーザーエージェントは、画像リソースに組み込まれた実行コードを実行しては行けません。ユーザーエージェントは、複数リソースの場合は最初のページだけを表示しなければいけません。ユーザーエージェントは、リソースがインタラクティブであるかのように振る舞うのを許してはいけませんが、そのリソースのアニメーションは受け入れるべきです。

リソースがフェッチされてからネットワーキング・タスクソースによってキューイングされるタスクは、そのダウンロードが成功し、その画像が利用可能であれば、input 要素で load という名前のシンプルなイベントを発出するタスクをキューイングします。そうでなければ、そのフェッチ処理がリモートサーバーからの応答がなくて失敗した、または、完了したものの、その画像は妥当でないか、サポートされていない画像だったなら、その input 要素で error という名前のシンプルなイベントを発出するタスクをキューイングします。


The alt 属性は、画像を使うことができないユーザーやユーザーエージェントのために、ボタンにテキストのラベルを提供します。alt 属性は必須で、空でない文字列を含まなければいけません。それは、その画像が利用できなかったなら、同等のボタンとして適すであろうラベルを与えるものでなければいけません。

input 要素は、ディメンジョン属性をサポートします。


src 属性がセットされ、その画像が利用可能であり、ユーザーエージェントがその画像を表示するよう設定されているなら、その要素は、src 属性によって指定された画像から座標を選択するためのコントロールを表します。要素がミュータブルなら、ユーザーエージェントは、ユーザーがこの座標を選択できるようにするべきです。そして、その要素のアクティベーション・ビヘイビアは次の通りになります:要素がフォームオーナーを持ち、その要素の Document完全にアクティブなら、ユーザーが選択した座標を取り出し、その input 要素から、その input 要素のフォームオーナーサブミットします。ユーザーエージェントが、明示的に座標選択なしに、そのコントロールをアクティベートするなら、その座標は (0,0) だと想定しなければいけません。

そうでなければ、その要素は、ラベルが alt 属性の値によって与えられているサブミットボタンを表します。要素がミュータブルなら、その要素のアクティベーション・ビヘイビアは次のとおりとなります:要素がフォームオーナーを持ち、その要素の Document完全にアクティブなら、選択された座標を (0,0) にセットして、その input 要素から、その input 要素のフォームオーナーサブミットします。

いずれの場合においても、この要素がミュータブルながらもフォームオーナーを持たない、または、その要素の Document完全にアクティブでないなら、そのアクティベーション・ビヘイビアは、何もしないこと、となります。この要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

選択座標 は、x コンポーネントと y コンポーネントから構成されなければいけません。その座標は、画像の端からの相対位置を表します。その座標空間では、正の x は右方向となり、正の y は下方向となります。

x コンポーネントは妥当な整数でなければならず、それは、−(borderleft+paddingleft) ≤ xwidth+borderright+paddingright, の範囲の中における数値 x を表します。width は画像のレンダリングの横幅で、borderleft は画像の左のボーダーの幅で、paddingleft は画像の左のパッディングの幅で、borderright は画像の右のボーダーの幅で、paddingright は画像の右のパディングの幅で、すべての寸法は CSS ピクセルで与えられます。

y コンポーネントは妥当な整数でなければならず、それは、−(bordertop+paddingtop) ≤ yheight+borderbottom+paddingbottom の範囲の中における数値 y を表します。height は画像のレンダリングの高さで、bordertop は画像の上のボーダーの幅で、paddingtop は画像の上のパッディングの幅で、borderbottom は画像の下のボーダーの幅で、paddingbottom は画像の下のパッディングの幅で、すべての寸法は CSS ピクセルで与えられます。

ボーダーとパッディングがなければ、その幅は CSS ピクセルで 0 となります。


formaction, formenctype, formmethod, formnovalidate, formtarget 属性、フォームサブミット用の属性です。

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

これらの属性は、画像の実際にレンダリングされた寸法を返します。寸法が不明なら 0 となります。

値をセットして、対応するコンテント属性を変更することができます。

次の共通の input 要素のコンテント属性、IDL 属性、そしてメソッドがこの要素に適用できます: alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, src, widthコンテント属性; value IDL 属性

value IDL 属性のモードは default です。

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, autocomplete, checked, dirname, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, step

この要素の value 属性は省略されなければいけません。

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

inputchange イベントは適用できません

この状態の挙動の多くの側面は、img 要素の挙動に良く似ています。読者は、そのセクションを読むことが推奨されます。そこでは、同じ要件の多くがより詳しく説明されています。

次のフォームを取り上げます:

<form action="process.cgi">
 <input type=image src=map.png name=where alt="ロケーションのリストを表示する">
</form>

ユーザーが座標 (127,40) で画像をクリックしたら、フォームのサブミットに使われる URL は "process.cgi?where.x=127&where.y=40" となります。

(この例では、地図が見えておらず、"ロケーションのリストを表示する" とラベルが付けられたボタンしか見えていないユーザーに対して、ボタンをクリックしたら、地図から選択するロケーションのリストをサーバーから表示すると、想定しています。)

4.10.5.1.17 Reset Button 状態 (type=reset)
指定可能な ARIA role 属性 の値:
button (デフォルト - 指定不要)
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性

input 要素の type 属性が Reset Button 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、アクティベートされたら、フォームをリセットするボタンを表します。この要素が value 属性を持っていたら、そのボタンのラベルはその属性の値でなければいけません。そうでなければ、"Reset" などの意味を持つ実装定義済みの文字列でなければいけません。この要素はボタンです。 (This is a fingerprinting vector.)

要素がミュータブルなら、その要素のアクティベーション・ビヘイビアは、その要素がフォームオーナーを持ち、その要素の Document完全にアクティブなら、フォームオーナーリセットすることとなります。そうでなければ、それは何もしないこととなります。

この要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

制約バリデーション: この要素は、制約バリデーションから除外されます。

value IDL 属性は、この要素に適用でき、モードは default です。

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width.

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

inputchange イベントは適用できません

4.10.5.1.18 Button 状態 (type=button)

input 要素の type 属性が Button 状態にあるなら、このセクションの規則が適用されます。

この input 要素は、デフォルトビヘイビアを持たないボタンを表します。このボタンのラベルは、value 属性に提供されなければいけませんが、それは空文字列でも構いません。この要素が value 属性を持つなら、そのボタンのラベルは、その属性の値でなければいけません。そうでんかえれば、それは空文字列でなければいけません。この要素はボタンです。

要素がミュータブルなら、その要素のアクティベーション・ビヘイビアは、何もしないこととなります。

この要素がミュータブルでないなら、それはアクティベーション・ビヘイビアを持ちません。

制約バリデーション: この要素は、制約バリデーションから除外されます。

value IDL 属性は、この要素に適用でき、モードは default です。

次のコンテント属性は指定されてはいけません。そして、この要素に適用できません: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, width

次の IDL 属性とメソッドは、この要素に適用できません: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, valueAsNumber IDL 属性; select(), setRangeText(), setSelectionRange(), stepDown(), stepUp()メソッド

inputchange イベントは適用できません

4.10.5.2 フォームコントロールのローカライズに関する実装の注意

このセクションは非規定です。

日付、時刻、数値のコントロールでユーザーに見せる形式は、フォームサブミットに使われる形式に依存しません。

ブラウザーは、input 要素の言語、または、ユーザーの設定ロケールによって暗黙に定義されるロケールのいずれかの慣例に従って、日付、時刻、数値を提供するユーザーインタフェースを使うことが推奨されます。ページのロケールを使えば、確実にページ提供のデータと一貫性を保つことができるでしょう。

たとえば、もしアメリカ英語のページがシルク・ドゥ・ソレイユのショーが 02/03 に幕開けることになると公表したとしましょう。ブラウザーがイギリス英語のロケールを使うよう設定されており、チケット購入の日付ピッカーに日付 03/02 とだけ表示されたなら、ユーザーは混乱するでしょう。ページのロケールを使えば、どこでも少なくとも日付は確実に同じ形式で表示されたでしょう。(それでもなお、ユーザーが一ヶ月後に来てしまうリスクは残りますが、もちろん、そのような文化的な違いに関してできることには限りがあります...)

4.10.5.3 共通の input 要素の属性

これらの属性は、input 属性だけに適用できますが、その type 属性の定義にて適用できると言っている状態にある場合に限られます。属性が input 要素に適用できないとき、ユーザーエージェントは、以下の要件と定義に関わらず、その属性を無視しなければいけません。

4.10.5.3.1 maxlengthminlength 属性

maxlength 属性は、それが適用できるとき、input 要素の汚染値フラグによって制御されるフォームコントロールの maxlength 属性です。

minlength 属性は、それが適用できるとき、input 要素の汚染値フラグによって制御されるフォームコントロールの minlength 属性です。

input 要素が最大許容値長を持つなら、その要素の value 属性の値のコードユニット長は、その要素の最大許容値長に等しいか少なくなければいけません。

次の例は、メッセージングのクライアントのテキストエントリーが、どのようにして、任意に固定文字長に制限できるのかを示しています。こうすることで、このメディアを通した会話は簡潔にならざるを得なくなり、高度で難しい会話ができないようにしています。

<label>あなたは何をしていますか? <input name=status maxlength=140></label>

ここでは、パスワードに最短長が指定されています:

<p><label>ユーザー名: <input name=u required></label>
<p><label>パスワード: <input name=p required minlength=12></label>
4.10.5.3.2 size 属性

size 属性は、ビジュアルレンダリングにおいて、ユーザーがその要素のを編集する際に、ユーザーエージェントがユーザーに見えるようにする文字長を与えます。

size 属性は、指定されたら、0 より大きい妥当な非負整数となる値を持たなければいけません。

この属性が存在するなら、その値は、非負整数をパースする規則を使ってパースされなければいけません。そして、その結果が 0 より大きい数値なら、ユーザーエージェントは、少なくとも、その文字数分だけは確実に見えるようにするべきです。

size IDL 属性は 0 より大きい非負数に限定され、そのデフォルト値は 20 となります。

4.10.5.3.3 readonly 属性

readonly 属性は、ユーザーがフォームコントロールを編集できるかどうかを制御する論理属性です。指定されたら、その要素はミュータブルではありません。

制約バリデーション: readonly 属性が input 要素に指定されたら、その要素は制約バリデーションから除外されます。

disabledreadonly の違いは、読み取り専用のコントロールはフォーカス可能で、ユーザーはそのテキストを選択することもできますし、操作することもできます。一方、無効なコントロールは、完全に非インタラクティブです。(この理由から、テキストコントロールだけが読み取り専用にすることができます。チェックボックスやボタンではそうはいきません。)

次の例では、既存の商品の識別子は修正できませんが、それでもなお、フォームの一部として表示され、新製品(識別子はまだ埋められていません)を表す行と一貫性を保っています。

<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> 製品 ID <th> 製品名 <th> 価格 <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">削除</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">削除</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">削除</button>
 </table>
 <p> <button formnovalidate="formnovalidate" name="action" value="add">追加</button> </p>
 <p> <button name="action" value="update">保存</button> </p>
</form>
4.10.5.3.4 required 属性

The required 属性は論理属性です。指定されたら、その要素は必須です。

制約バリデーション: 要素が必須で、その value IDL 属性が適用でき、そのモードが value で、その要素がミュータブルで、その要素のが空文字列なら、その要素は未入力に陥っています

次のフォームには、2 つの必須のフィールド、1 つのメールアドレス用のフィールド、そして、1 つのパスワード用のフィールドがあります。さらに、3 つ目のフィールドがあります。これは、ユーザーがパスワードのフィールドと、この 3 つ目のフィールドに、同じパスワードを入力したらときにだけ妥当となります。

<h1>新規にアカウントを作る</h1>
<form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'パスワードが一致しません。' : '')">
 <p>
  <label for="username">メールアドレス:</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">・パスワード:</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">パスワード確認:</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="アカウントを作る">
</form>

ラジオボタンの場合、required 属性は、そのグループにあるラジオボタンが 1 つでも選択されれば、満たされます。ゆえに、次の例では、必須としてマークされたラジオボタンだけでなく、どれがチェックされても大丈夫です:

<fieldset>
 <legend>この映画はベクデル・テストをパスしましたか??</legend>
 <p><label><input type="radio" name="bechdel" value="no-characters"> いいえ、この映画には 2 人の女性の登場人物すらいません。 </label>
 <p><label><input type="radio" name="bechdel" value="no-names"> いいえ、女性の登場人物はお互いにまったく話し合うことがありません。 </label>
 <p><label><input type="radio" name="bechdel" value="no-topic"> いいえ、女性の登場人物が会話するときは必ず男性の登場人物についてです。 </label>
 <p><label><input type="radio" name="bechdel" value="yes" required> はい。 </label>
 <p><label><input type="radio" name="bechdel" value="unknown"> 分かりません。 </label>
</fieldset>

ラジオボタングループが必須か否かについての混乱を避けるために、ウェブ制作者は、この属性を、そのグループのすべてのラジオボタンに指定することが推奨されます。実に、一般的に、ウェブ制作者は、最初の時点で、始めからチェック済みのコントロールが 1 つもないラジオボタン・グループを避けることが推奨されます。なぜなら、ユーザーは、その状態に戻すことができないゆえに、一般的には、それはダメなユーザーインタフェースと考えられているからです。

4.10.5.3.5 multiple 属性

multiple 属性は、ユーザーが 1 つ以上の値を指定できるようにするのかを指示する論理属性です。

次の例は、メールクライアントの "Cc" フィールドが複数のメールアドレスをどのように受け入れるのかを示しています。

<label>Cc: <input type=email multiple name=cc></label>

ユーザーのアドレス帳データベースにある数ある友達の中に、"Arthur Dent" (アドレスは "art@example.net") と "Adam Josh" (アドレスは "adamjosh@example.net") という 2 人の友達がいるなら、ユーザーエージェントは、ユーザーが "a" とタイプしたら、ユーザーにその 2 つのメールアドレスをサジェストすることができるでしょう。

Form control group containing 'Send', 
   'Save now' and 'Discard' buttons, a 'To:' combo box with an 'a' displayed in the text box and 2 list items below.

このページは、サイトのユーザーのアドレス帳データベースと連携することもできるでしょう:

<label>Cc: <input type=email multiple name=cc 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" を入れてから、"a" で始まる 2 つ目のメールアドレスを入力し始めたとしましょう。ユーザーエージェントは、前述の 2 人の友達だけでなく、datalist 要素の中に与えられている "astrophy" と "astronomy" という値も表示するでしょう。

Form control group containing 'send', 
   'save now' and 'discard' buttons and a 'To:' combo box with 'bob@example.net,a' displayed in the text box and 4 list items below.

次の例は、メールクライアントの "Attachments" フィールドが、どのようにして、アップロード用に複数のファイルを受け入れるかを示しています。

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

pattern 属性は正規表現を指定します。コントロールの、または、multiple 属性が適用できセットされていれば、コントロールの(複数)がチェックされることになります。

指定されるなら、この属性の値は、JavaScript の Pattern プロダクションに一致しなければいけません。 [ECMA262]

input 要素に pattern 属性が指定され、その属性の値が、global, ignoreCase, multiline フラグが無効になった状態で JavaScript の正規表現としてコンパイルしたときに (ECMA262 第 5 版のセクション 15.10.7.2 から 15.10.7.4 をご覧ください)、コンパイルに成功するなら、その結果として得られた正規表現は、その要素のコンパイル済みパターン正規表現となります。要素にそのような属性がない、または、その値のコンパイルが成功しないなら、その要素には、コンパイル済みパターン正規表現はありません。 [ECMA262]

制約バリデーション: 要素のが空文字列ではない、かつ、要素の multiple 属性が指定されていないか、指定の type 属性の現在の状態ではその input 要素に適用できない、かつ、要素がコンパイル済みパターン正規表現を持つけれども、その正規表現が要素のの全体に一致しないなら、その要素はパターン不一致に陥っています

制約バリデーション: 要素のが空文字列ではない、かつ、要素の multiple 属性が指定され、その input 要素に適用できる、かつ、要素がコンパイル済みパターン正規表現を持つけれども、その正規表現がその要素の(複数)それぞれで全体に一致しないなら、その要素はパターン不一致に陥っています

コンパイル済みパターン正規表現は、文字列との一致を評価するとき、その文字列の最初に先頭アンカー、その文字列の最後に末尾アンカーを持たなければいけません。

これは、この属性に使われる正規表現言語は JavaScript で使われるのと同じなのですが、pattern 属性は、値の一部分だけではなく、全体に対して一致が評価されることを意味します(パターンの最初に ^(?: を、最後に )$ を入れたみたいなものです)。

input 要素に pattern 属性を指定するとき、ウェブ制作者は、そのコントロールの近くにテキストでそのパターンの説明を提供するべきです。ウェブ制作者は、title 属性を入れて、そのパターンの説明を与えることもできます。ユーザーエージェントは、title 属性が存在するなら、そのパターンに一致しないことをユーザーに知らせるときなどに、そのコンテンツを使うことができます。その他の適切なタイミングとしては、たとえば、そのコントロールにフォーカスが当たったときに、ツールチップの中に表示したり、支援技術であればそれを読み上げることができます。

title 属性だけに頼るのは今のところ推奨されません。なぜなら、多くのユーザーエージェントは、本仕様で求められているとおりのアクセシブルな方法で、この属性を見えるようにしていないからです(たとえば、マウスなどのポインティングデバイスでないとツールチップが表示されず、キーボードしかないユーザーや、近年の電話やタブレットのようにタッチしかできないユーザーを排除してしまいます)。

たとえば、次の例では、input の下のテキストにパターンの説明が入れられています。そのパターンの説明は、title 属性にも入れられています:

<label> パートナンバー:
        <input pattern="[0-9][A-Z]{3}" name="part"
        data-x="パートナンバーは 1 つの数字につづいて 3 つ小文字です。"/>
        </label>
        <p>パートナンバーは 1 つの数字につづいて 3 つ小文字です。</p>

テキストにパターンの説明が存在することで、デバイスに関わらずどんなユーザーにもアドバイスを届けられます。

title 属性にパターンの説明が存在することで、input がフォーカスを受けたときに、スクリーンリーダーなどの支援技術によって、その説明を読み上げてもらえることになります。

ユーザーが間違った情報でフォームをサブミットしようとしたら、title 属性のテキストが存在すれば UA は次のようなアラートを表示することもできるでしょう:

パートナンバーは 1 つの数字につづいて 3 つ小文字です。
    フィールドが正しくない場合は、このフォームをサブミットすることはできません。

この例では、パターンの説明が input の下のテキストにありますが、title 属性にはありません。aria-describedby 属性を使って、明示的にテキストの説明をコントロールに関連付けているため、その説明は、input がフォーカスを受けたときに、スクリーンリーダーなどの支援技術によって読み上げられます:

<label> パートナンバー:
        <input pattern="[0-9][A-Z]{3}" name="part" aria-describedby="description">
        </label>
        <p id="description">パートナンバーは 1 つの数字につづいて 3 つ小文字です。</p>

コントロールが pattern 属性を持つとき title 属性が使われるなら、それは、そのパターンを説明するものでなければいけません。追加の情報も入れることができますが、ユーザーがコントロールに入力するために役立つものに限ります。そうしないと、支援技術は正常に機能できなくなってしまいます。

たとえば、title 属性がコントロールのキャプションを含んでいると、支援技術は、入力されたテキストは必要なパターンに一致していません。誕生日 と言うことになってしまうでしょうが、これでは使いものになりません。

UA は、エラーでない状況でも title を表示することができます(たとえば、コントロール上をホバリングしたときにツールチップとして)ので、ウェブ制作者は、エラーが必ず発生するかのように title の文言を用意しないよう気をつけるべきです。

4.10.5.3.7 minmax 属性

フォームコントロールには、ユーザーが提供できる値の許容範囲に限定して適用される明示的な制約を持てるものがあります。通常は、そのような範囲は、線形で連続的になるでしょう。フォームコントロールは周期的領域を持つことができますが、フォームコントロールの最大可能範囲が無限大になる場合、ウェブ制作者は、その中に境界で区切った明示的な範囲を指定することができます。

とりわけ、type=time コントロールの最大範囲は、午前零時から午前零時(24 時間)になりますが、ウェブ制作者は、連続的な線形の範囲(たとえば午後 9 時から午後 11 時まで)と、午前零時をまたいだ非連続的な範囲(たとえば午後 11 時から午前 1 時)の両方をセットすることができます。

minmax 属性は、その要素に対して値の許容範囲を示します。

これらの構文は、type 属性の現在の状態を定義しているセクションで定義されています。

要素が min 属性を持ち、その min 属性の値に文字列を数値に変換するアルゴリズムを適用した結果が数値なら、その数値がその要素の最小値になります。そうでなく、type 属性の現在の状態がデフォルト最小値を定義するなら、それが 最小値になります。そうでなければ、その要素は最小値を持ちません。

min 属性はステップ・ベースも定義します。

要素が max 属性を持ち、その max 属性の値に文字列を数値に変換するアルゴリズムを適用した結果が数値なら、その数値がその要素の最大値になります。そうでなく、type 属性の現在の状態がデフォルト最大値を定義するなら、それが最大値になります。そうでなければ、その要素は最大値を持ちません。

要素が周期的領域を持たないなら、max 属性の値(最大値)は、min 属性の値(その最小値)より小さくあってはなりません。

周期的領域を持たない要素が最小値より小さい最大値を持つなら、その要素は、を持つ限り、アンダーフローに陥っているか、オーバーフローに陥っている、のいずれかとなります。

要素が周期的領域を持ち、その最大値最小値より小さいなら、その要素は反転範囲を持ちます

要素が定義済み最小値または定義済み最大値を持つなら、その要素は範囲制限を持ちます

制約バリデーション: 要素が最小値を持ち、反転範囲を持たず、その要素のによって与えられた文字列に文字列を数値に変換するアルゴリズムを適用した結果が数値となり、そのアルゴリズムから得られた数値が最小値より小さいなら、その要素はアンダーフローに陥っています

制約バリデーション: 要素が最大値を持ち、反転範囲を持たず、その要素のによって与えられた文字列に文字列を数値に変換するアルゴリズムを適用した結果が数値となり、そのアルゴリズムから得られた数値が最大値より大きいなら、その要素はオーバーフローに陥っています

制約バリデーション: 要素が反転範囲を持ち、その要素のによって与えられた文字列に文字列を数値に変換するアルゴリズムを適用した結果が数値となり、そのアルゴリズムから得られた数値が最大値より大きく、最小値より小さいなら、その要素はアンダーフローに陥っている一方、同時にオーバーフローにも陥っています

次の日付コントロールは、1980 年代より前の日付に入力を限定します:

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

次の数値コントロールは、0 より大きい数値すべてに入力を限定します:

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

次の時刻コントロールは、午後 9 時から午前 6 時の間に発生する時刻に入力を限定し、デフォルトは午前零時です:

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

step 属性は、許容値を限定することで、に期待(そして要求)される精度を示します。type 属性の現在の状態を定義しているセクションでも、デフォルト・ステップステップ・スケール・ファクター、そして、いくつかの場合においてはデフォルト・ステップ・ベースを定義していますが、これらは後述のとおり、この属性の処理において使われます。

step 属性は、指定されたら、0 より大きい数値にパースできる妥当な浮動小数点数となる値を持つ、または、文字列 "any" に大文字と小文字を区別せず一致する値を持つ、のいずれかでなければいけません。

この属性は、次のとおり、要素に対して許容値ステップを与えます:

  1. この属性がなければ、許容値ステップは、デフォルト・ステップステップ・スケール・ファクターを掛けたものとなります。
  2. そうでなければ、この属性の値が大文字と小文字を区別せずに文字列 "any" に一致するなら、許容値ステップはありません。
  3. そうでなければ、浮動小数点数値をパースする規則をこの要素の値に適用したとき、エラーか 0 か 0 より小さい数値が返されるなら、許容値ステップは、デフォルト・ステップステップ・スケール・ファクターを掛けたものとなります。
  4. そうでなければ、許容値ステップは、浮動小数点数値をパースする規則をこの要素の値に適用して返された数値に、ステップ・スケール・ファクターを掛けたものとなります。

ステップ・ベースは、次のアルゴリズムによって返される値です:

  1. 要素が min コンテント属性を持ち、文字列を数値に変換するアルゴリズムmin コンテント属性の値に適用した結果がエラーでないなら、その結果を返し、これらの手順を中止します。

  2. 要素が value コンテント属性を持ち、文字列を数値に変換するアルゴリズムvalue コンテント属性の値に適用した結果がエラーでないなら、その結果を返し、これらの手順を中止します。

  3. デフォルト・ステップ・ベースがこの要素の type 属性の状態に対して定義されているなら、それを返し、これらの手順を中止します。

  4. 0 を返します。

制約バリデーション: 要素が許容値ステップを持ち、その要素のによって与えられた文字列に文字列を数値に変換するアルゴリズムを適用して得られた結果が数値であり、その数値のステップ・ベースからの差が許容値ステップの整数倍でないなら、その要素はステップ不一致に陥っています

次のレンジコントロールは 0..1 の範囲の値のみを受け付け、その範囲の中では 256 個のステップが許されます:

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

次のコントロールは、一日の中で任意の時刻を選択でき、精度も任意です(たとえば、1000 分の 1 秒の精度や、それ以上):

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

通常、時刻コントロールは 1 分の精度に限定されます。

4.10.5.3.9 list 属性

list 属性は、ユーザーにサジェストする事前定義の選択肢をリスト表示する要素を特定するために使われます。

存在するなら、その値は、同じドキュメントにある datalist 要素の ID でなければいけません。

サジェスト・ソース要素とは、ドキュメントの中で list 属性の値に等しい ID を持つ要素のうちツリー順で最初の要素です。list 属性がない、または、その ID を持つ要素がない、または、その ID を持つ最初の要素が datalist 要素でないなら、サジェスト・ソース要素はありません。

サジェスト・ソース要素があるなら、ユーザーエージェントがユーザーに input 要素のの編集を許しているとき、ユーザーエージェントは、使われているコントロールのタイプに合わせる形で、サジェスト・ソース要素によって表されるサジェストをユーザーに提供するべきです。ユーザーエージェントは、必要に応じて、サジェストのラベルを使って、サジェストを特定できようにすることができます。

ユーザーがサジェストを選択したときの処理方法は、その要素が単一の値のみを受け付けるのか、複数の値を受け付けるのかに依存します:

要素が multiple 属性を持たない、または、multiple 属性が適用できない場合

ユーザーがサジェストを選択したとき、その input 要素のは、あたかもユーザーが自分でその値を書いたかのように、選択されたサジェストのにセットされなければいけません。

要素に multiple 属性が指定されており、その multiple 属性が適用できる場合

ユーザーがサジェストを選択したら、ユーザーエージェントは、input 要素の(複数)に新たなエントリー、つまり、選択されたサジェストのを追加するか、または、input 要素の(複数)にある既存のエントリーを、あたかもユーザーが自分でエントリーを追加したかのように、選択されたサジェストのによって与えられた値を持つよう変更するか、または、既存のエントリーをその値になるよう編集しなければいけません。どの挙動が適用されるべきかは、ユーザーエージェント定義の方法で表示されたユーザーインタフェースに依存します。


list 属性が適用できないなら、サジェスト・ソース要素はありません。

この URL フィールドはいくつかのサジェストを提供します。

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

ユーザーの履歴の他の URL も表示されるかもしれません。これはユーザーエージェント次第です。

この例は、オートコンプリートリスト機能を使うフォームを、古いユーザーエージェントでも使えるようにデグレードしながらも、どのように設計するのかを見せています。

オートコンプリートリストが単に補助でしかなく、コンテンツには重要でないなら、単に datalist 要素を使い、子に option 要素を入れれば十分です。古いユーザーエージェントで値がレンダリングされないようにするために、それらをインラインではなく、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>

しかし、値を古い UA でも表示させる必要があるなら、次のように、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 をサポートしていない UA でしか表示されません。一方、選択肢は、datalist 要素の子でなくても、すべての UA に検知されます。

datalist の中で使われている option 要素が選択されたら、それは古い UA によってデフォルトで選択されます(なぜなら、それは select に影響を与えるからです)が、datalist をサポートしている UA では、input 要素では何も影響を与えない点に注意してください。

4.10.5.3.10 placeholder 属性

placeholder 属性は短いヒント(単語か短いフレーズ)を表しますが、これは、コントロールに値がないときに、ユーザーのデータ入力を助けることを目的としています。ヒントは、サンプルと成る値や、期待される形式の簡単な説明になるでしょう。この属性は、指定されるなら、"LF" (U+000A) や "CR" (U+000D) 文字を含まない値を持たなければいけません。

placeholder 属性は、ラベルの代替として使われるべきではありません。より長いヒントや助言的なテキストなら、コントロールの隣にテキストを配置するべきです。

placeholder 属性を label の代替として使うことは、高齢のユーザーや、認識機能障害、運動障害、微細運動能力障害、視覚障害を持つユーザーなど、広範なユーザーにとって、アクセシビリティとユーザービリティを損なう可能性があります。コントロールの label によって与えられたヒントはいつでも表示されるのに対し、placeholder 属性の中に与えられた短いヒントは、ユーザーが値を入力するまでしか表示されません。さらに、placeholder のテキストは、始めから入力されていた値と間違えられる可能性があります。一般的な実装としては、プレースホルダーのデフォルトの色のコントラストは不十分ですし、別に label が表示されていないと、コントロールにフォーカスをセットするのに使えるヒット領域のサイズが小さくなってしまいます。

ユーザーエージェントは、要素のが空文字列で、そのコントロールにフォーカスが当たっていないときは、このヒントを、改行を取り除いたうえで、ユーザーに提供するべきです(つまり、空でフォーカスが当たっていないコントロールの中にそれを表示します)。

これは、placeholder 属性を使ったメール設定のユーザーインタフェースの例です:

<fieldset>
 <legend>メールアカウント</legend>
 <p><label>名前: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
 <p><label>アドレス: <input type="email" name="address" placeholder="john@example.net"></label></p>
 <p><label>パスワード: <input type="password" name="password"></label></p>
 <p><label>説明: <input type="text" name="desc" placeholder="My Email Account"></label></p>
</fieldset>

コントロールのコンテンツが 1 つの方向性を持つけれども、そのプレースホルダーは違う方向性を持つ必要があるような状況では、Unicode の双方向性アルゴリズム書式文字を、この属性の値の中で使うことができます:

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

もう少し分かりやすくするために、これは、同じサンプルに、インラインのアラビア語ではなく、数値の文字参照を使っています:

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

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

値をセットして変更することができます。

コントロールがファイルアップロードのコントロールの場合、空文字列以外の値にセットされたら InvalidStateError 例外を投げます。

input . checked [ = value ]

フォームコントロールの現在のチェック状態を返します。

チェック状態をセットして変更することができます。

input . files

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

コントロールがファイルコントロールでないなら null を返します。

input . valueAsDate [ = value ]

適切ならフォームコントロールのを表す Date オブジェクトを返します。そうでなければ null を返します。

値をセットして変更することができます。

コントロールが日付または時刻ベースでないなら、InvalidStateError 例外を投げます。

input . valueAsNumber [ = value ]

適切ならフォームコントロールのを表す数値を返します。そうでなければ NaN を返します。

値をセットして変更することができます。これを NaN にセットすると、もととなる値を空文字列にセットします。

コントロールが日付または時刻ベースでも数値でもないなら InvalidStateError 例外を投げます。

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

フォームコントロールのを、step 属性に与えられた値の n 倍の値を使って、変更します。n のデフォルト値は 1 です。

コントロールが日付や時刻ベースでも数値でもない、または、step 属性の値が "any" なら、InvalidStateError 例外を投げます。

input . list

list 属性が指している datalist 要素を返します。

value IDL 属性は、スクリプトから input 要素のを操作できるようにします。この属性は、次のモードの 1 つに属しますが、その挙動は次のとおりです:

value

取得の際には、要素の現在のを返さなければいけません。セットの際には、要素のを新たな値にセットし、要素の汚染値フラグを true にセットし、要素の type 属性の現在の状態がこれをを定義しているなら、値をサニタイズするアルゴリズムを呼びださなければいけません。それから、要素がテキスト入力カーソル位置を持つなら、そのテキスト入力カーソル位置を、そのテキストフィールドの最後に移動するべきです。その際には、選択テキストがあればそれを解除し、選択方向を none にリセットします。

default

取得の際には、要素が value 属性を持っていれば、その属性の値を返さなければいけません。そうでないなら、空文字列を返さなければいけません。セットの際には、要素の value 属性を新たな値にセットしなければいけません。

default/on

取得の際には、要素が value 属性を持っていれば、その属性の値を返さなければいけません。そうでなければ、文字列 "on" を返さなければいけません。セットの際には、要素の value 属性を新たな値にセットしなければいけません。

filename

取得の際には、選択ファイルがあれば、"C:\fakepath\" の後ろに、選択ファイルのリストの最初のファイルの名前をつなげた文字列を返さなければいけません。リストが空なら、空文字列を返さなければいけません。セットにおいては、新たな値が空文字列なら、選択ファイルのリストを空にしなければいけません。そうでなければ、InvalidStateError 例外を投げなければいけません。

"fakepath" 要件は、歴史上の残念な事故です。詳細は File Upload 状態のセクションの例をご覧ください。


checked IDL 属性は、スクリプトから input 要素のチェック状態を操作できるようにします。取得の際には、要素の現在のチェック状態を返さなければいけません。セットの際には、要素のチェック状態を新たな値にセットし、要素の汚染チェック状態フラグを true にセットしなければいけません。


The files IDL 属性は、スクリプトから要素の選択ファイルにアクセスできるようにします。取得の際には、この IDL 属性が適用できるなら、現在の選択ファイルを表す FileList オブジェクトを返さなければいけません。選択ファイルのリストが変更されるまでは、同じオブジェクトが返されなければいけません。この IDL 属性が適用できないなら、null を返さなければいけません。 [FILEAPI]


valueAsDate IDL 属性は、要素のを表しますが、それを日付として解釈します。

取得の際には、valueAsDate 属性が適用できないなら、input 要素の type 属性の現在の状態に定義されているとおり、null を返します。そうでなければ、その状態に定義されている文字列を Date オブジェクトに変換するアルゴリズムを実行します。このアルゴリズムが Date オブジェクトを返したら、それを返し、そうでなければ、null を返します。

セットの際には、valueAsDate 属性が適用できないなら、input 要素の type 属性の現在の状態に定義されているとおり、InvalidStateError 例外を投げます。そうでなければ、新たな値が null、または、NaN 時刻値を表す Date オブジェクトなら、要素のを空文字列にセットします。そうでなければ、その状態に定義されているとおり、その新たな値で Date オブジェクトを文字列に変換するアルゴリズムを実行し、要素のを、結果として得られた文字列にセットします。


valueAsNumber IDL 属性は、要素のを表しますが、それを数値として解釈します。

取得の際には、valueAsNumber 属性が適用できないなら、input 要素の type 属性の現在の状態に定義されているとおり、非数値 (NaN) を返します。そうでなければ、valueAsDate 属性が適用できるなら、その状態に定義されている文字列を Date オブジェクトに変換するアルゴリズムを実行します。このアルゴリズムが Date オブジェクトを返したら、そのオブジェクトの time value (1970-01-01 の UTC 午前零時から、Date オブジェクトによって表される時刻までを、ミリ秒で表した数値) を返し、そうでなければ、非数値 (NaN) を返します。上記に該当しないなら、その状態に定義されている文字列を数値に変換するアルゴリズムを実行します。このアルゴリズムが数値を返したなら、それを返し、そうでなければ、非数値 (NaN) を返します。

セットの際には、新たな値が無限大なら、TypeError 例外を投げます。そうでなければ、valueAsNumber 属性が適用できないなら、input 要素の type 属性の現在の状態に定義されているとおり、InvalidStateError 例外を投げます。そうでなければ、新たな値が非数値 (NaN) なら、要素のを空文字列にセットします。そうでなければ、valueAsDate 属性が適用できるなら、その状態に定義されている Date オブジェクトを文字列に変換するアルゴリズムを実行します。その際に、time value が新たな値となる Date オブジェクトを引き渡します。そして、要素のを、結果として得られた文字列にセットします。上記に該当しないなら、その状態に定義されているとおり、新たな値で、数値を文字列に変換するアルゴリズムを実行し、要素のを、結果として得られた文字列にセットします。


stepDown(n)stepUp(n) メソッドは、呼び出されたら、次のアルゴリズムを実行しなければいけません:

  1. stepDown()stepUp() メソッドが適用できないなら、input 要素の type 属性の現在の状態に定義されているとおり、InvalidStateError 例外を投げ、これらの手順を中止します。

  2. 要素が許容値ステップを持たないなら、InvalidStateError 例外を投げ、これらの手順を中止します。

  3. 要素が最小値最大値を持ち、最小値最大値より大きければ、これらの手順を中止します。

  4. 要素が最小値最大値を持ち、要素の最小値より大きいか等しい、かつ、要素の最大値より小さいか等く、ステップ・ベースとの差が許容値ステップの整数倍となる値がなければ、これらの手順を中止します。

  5. 文字列を数値に変換するアルゴリズムを要素のに適用した結果がエラーでなければ、value を、そのアルゴリズムの結果とします。そうでなければ、value を 0 とします。

  6. ステップ・ベースvalue の差が許容値ステップの整数倍でなければ、value を、ステップ・ベースとの差が許容値ステップの整数倍となり、かつ、呼び出されたメソッドが stepDown() なら value より小さく、そうでなければ value より大きくなるような値のうち、最も近い値にセットします。

    そうでなければ (ステップ・ベースvalue の差が許容値ステップの整数倍なら)、次の副手順を実行します:

    1. n を、引数とします。

    2. delta を、許容値ステップn の積とします。

    3. 呼び出されたメソッドが stepDown() メソッドなら、delta を無効にします。

    4. value を、deltavalue に加えた結果とします。

  7. 要素が最小値を持ち、value がその最小値より小さいなら、value を、ステップ・ベースからの差が許容値ステップの整数倍となり、かつ、minimum より大きいか等しくなる最も小さい値にセットします。

  8. 要素が最大値を持ち、value がその最大値より大きいなら、value を、ステップ・ベースからの差が許容値ステップの整数倍となり、かつ、maximum より小さいか等しくなる最も大きな値にセットします。

  9. value as string を、value での数値を文字列に変換するアルゴリズムを実行した結果とします。これは input 要素の type 属性の現在の状態に定義されているとおりです。

  10. 要素のを、value as string にセットします。


list IDL 属性は、現在のサジェスト・ソース要素があれば、それを返し、なければ null を返さなければいけません。

4.10.5.5 共通のイベントの挙動

inputchange イベントが適用できるとき(ボタンでなく、type 属性が Hidden 状態でもない input 要素の場合)、これらのイベントは、ユーザーがコントロールを操作したことを表すために発出されます。input イベントは、ユーザーがコントロールのデータを修正したときは必ず発生します。change イベントは、値が確定したときに発生しますが、それがそのコントロールにとって相応しい場合や、そのコントロールがフォーカスを失ったときです。いずれの場合でも、input イベントは、それに関連する change イベント(もしあれば)より前に来ることになります。

input 要素がアクティベーション・ビヘイビアを持つとき、これらのイベントを送出する規則は、それらが適用できるなら、type 属性の状態を定義している前述のセクションに書かれています。(これは、Checkbox 状態、Radio Button 状態、File Upload 状態にある type 属性を持つ input コントロールの場合です。)

定義されたアクティベーション・ビヘイビアを持たないけれども、これらのイベントが適用でき、ユーザーインタフェースが対話操作も明示的な確定アクションも伴うような input 要素に対しては、ユーザーが要素のを変更するとき、ユーザーエージェントは、その input 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしなければいけません。そして、ユーザーが変更を確定するときは必ず、ユーザーエージェントは、その input 要素で change という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしなければいけません。

対話操作も確定アクションも伴うユーザーインタフェースの例として、スライダーを使う Range コントロールがポインティング・デバイスを使って操作されたときが挙げられます。ユーザーがそのコントロールのつまみをドラッグしている間、位置が変更される都度に input イベントが発出し、一方で、change イベントは、ユーザーがつまみを放したときだけに発出し、特定の値に確定します。

定義されたアクティベーション・ビヘイビアを持たないけれども、これらのイベントが適用でき、ユーザーインタフェースが明示的な確定アクションは伴うけれども対話操作は伴わないような input 要素に対しては、ユーザーが要素のを変更するとき、ユーザーエージェントは、まず、その input 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしてから、その input 要素で change という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしなければいけません。

確定アクションを持つユーザーインタフェースの例としては、カラーホイールを表示するボタンが 1 つある Color コントロールが挙げられます。そのダイアログが閉じられたときにが変更されるだけなら、それが明示的な確定アクションになるでしょう。一方、そのコントロールをフォーカスでき、そのコントロールを操作したらインタラクティブに色を変更できるなら、確定アクションはないでしょう。

確定アクションを持つユーザーインタフェースのもうひとつの例としては、テキストベースのユーザー入力と、ドロップダウン・カレンダーからのユーザー選択の両方を許す Date コントロールが挙げられます。テキスト入力は明示的な確定手順を持たないでしょうが、ドロップダウン・カレンダーから日付を選択し、そのドロップダウンを閉じたら、それが確定アクションになるでしょう。

定義されたアクティベーション・ビヘイビアを持たないけれども、これらのイベントが適用できinput 要素に対しては、ユーザーが明示的な確定アクションなしに要素のを変更するとき、ユーザーエージェントは、その input 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしなければいけません。それに関連する change イベントがあれば、そのコントロールがフォーカスを失ったときに発出されなければいけません。

ユーザーが要素のを変更する例としては、ユーザーがテキストフィールドに入力する方法として、新たな値をそのテキストフィールドにペーストしたり、そのフィールドでの編集を取り消すことが挙げられます。ユーザーの操作によっては値が変更されない場合もあります。たとえば、空のテキストフィールドで "delete" キーを押したり、テキストフィールの一部のテキストをクリップボードにあるテキストで置き換えたら、まったく同じテキストになってしまった場合です。

Range コントロールはスライダーの形をとり、ユーザーがフォーカスしたり、キーボードを使って操作しますが、これも、ユーザーが確定手順なしに要素のを変更する例のひとつになるでしょう。

input イベントしか発出しないタスクの場合では、ユーザーエージェントは、タスクをキューイングする前に、ユーザーの操作における適切な中断を待つことができます。ユーザーエージェントは、キーストロークのたびに連続的にイベントを発出するのではなく、たとえば、ユーザーが 100ms の間キーを打たないのを待つことで、ユーザーが中断したときだけにイベントを発出することができます。

ユーザーエージェントがユーザーの代わりに input 要素のを変更することになったとき(たとえば、フォームのオートフィル機能の一環で)、ユーザーエージェントはそれに応じて、そのをアップデートするタスクをキューイングしてから、その input 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングし、それから、その input 要素で change という名前のバブリングするシンプルなイベントを発出するタスクをキューイングしなければいけません。

これらのイベントは、スクリプトによってフォームコントロールの値に変更が加えられたときの応答として発出されません。 (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.)

これらのタスクに対するタスクソースは、ユーザーインタラクション・タスクソースです。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-input-element