4.10 フォーム

4.10.1 はじめに

この節は非規範的である。

フォームは、テキストフィールド、ボタン、チェックボックス、レンジコントロール、またはカラーピッカーなど、フォームコントロールを持つウェブページのコンポーネントである。さらなる処理(たとえば、検索または計算結果を返す)に対してサーバーに送信できるデータを提供して、ユーザーはそのようなフォームで情報を交換できる。スクリプトがユーザーエクスペリエンスを補強するか、またはサーバーにデータを送信する以外の意義に対してフォームを使用できるようなAPIが利用可能であるが、多くの場合クライアント側のスクリプトは必要ない。

フォームの記述は、ユーザーインターフェースを記述する、サーバー側の処理を実装する、そのサーバーと通信するためのユーザーインターフェースを構成するという、任意の順序で実行される複数のステップから成る。

4.10.1.1 フォームのユーザーインターフェースを記述する

この節は非規範的である。

この簡単な手引きの目的に対して、ピザを注文するフォームを作成する。

すべてのフォームは、内部にコントロールを配置されたform要素で始まる。ほとんどのコントロールは、デフォルトで1行のテキストフィールドを提供するinput要素によって表される。コントロールをラベル付けするために、label要素が使用される。ラベルテキストおよびコントロール自身は、label要素の中に入る。フォームの各部分は段落とみなされ、通常はp要素を使用して他の部分から分離される。これを一緒に置くと、これは顧客の名前を尋ねることができる方法の一つである:

<form>
 <p><label>Customer name: <input></label></p>
</form>

ユーザーにピザのサイズを選択させるために、ラジオボタンのセットを使用できる。ラジオボタンはまた、今回は値のradioとともにtype属性をもつ、input要素を使用する。グループとしてラジオボタンを動作させるために、それらはname属性を使用して、共通の名前を与えられる。この場合、ラジオボタンのように、一緒にコントロールのバッチをグループ化するために、fieldset要素を使用できる。コントロールのグループのようなタイトルは、fieldset内の最初の要素で与えられる。これは、legend要素である必要がある。

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
</form>

前のステップからの変更点が強調表示される。

トッピングを選ぶために、チェックボックスを使用できる。これらは、値checkboxをもつtype属性とともにinput要素を使用する。

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

このフォームで注文するピザ屋は、いつも間違いをするので、顧客に連絡する方法を必要とする。この目的のために、電話番号(telに設定されたtype属性をもつinput要素)、および電子メールアドレス(emailに設定されたtype属性をもつinput要素)に対してフォームコントロールを特別に使用できる:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

配達時間を尋ねるためにtimeに設定されたtype属性にinput要素を使用できる。フォームコントロールの多くは、値が指定できるものを正確に制御するための属性を持つ。この場合、特に関心のある3つの属性は、minmax、およびstepである。これらは、最小時間、最大時間、及び許可された値の間隔(秒単位で)を設定する。このピザは、午前11時と午後9時の間で配送され、15分刻み以上を約束するものでなく、次のようにマークアップできる:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

textarea要素は、自由形式のテキストフィールドを提供するために使用できる。この文脈において、配送指示を与えるために顧客に対してスペースを提供するために要素を使用しようとしている:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
</form>

最後に、フォームを投稿可能にするために、button要素を使用する:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
4.10.1.2 フォームに対するサーバー側処理の実装

この節は非規範的である。

サーバー側の処理機構の記述に対する正確な詳細は、この仕様書の範囲外である。この手引きの目的のために、HTTP POSTボディ内で以下のパラメータが送信されたと期待し、https://pizza.example.com/order.cgiでスクリプトがapplication/x-www-form-urlencoded形式を使用して投稿を受け付ける設定がされていると仮定する:

custname
顧客の名前
custtel
顧客の電話番号
custemail
顧客の電子メールアドレス
size
smallmedium、またはlargeのいずれかの、ピザのサイズ
topping
トッピングで、許可される値baconcheeseonion、およびmushroomをもつ、各選択されたトッピングに対して一度に指定される。
delivery
リクエストされた配達時刻
comments
配達指示
4.10.1.3 サーバーと通信するためのフォームの設定

この節は非規範的である。

フォームの送信は、最も一般的なHTTP GETまたはPOSTリクエストとして、種々の方法でサーバーに公開される。使用される正確な方法を指定するために、method属性はform要素で指定される。ただし、これはフォームデータがどのようにエンコードされるかを指定しない。指定するためには、enctype属性を使用する。また、action属性を使用して、送信されたデータを処理するサービスのURLを指定する必要がある。

提出したい各フォームコントロールについて、提出でのデータを参照するために使用される名前を付ける必要がある。すでに、ラジオボタンのグループの名前を指定している。同じ属性(name)も提出名を指定する。ラジオボタンはvalue属性を使用して、それぞれに異なる値を与えることにより提出で互いに区別できる。

複数のコントロールは、同じ名前を持つことができる。たとえば、すべてのチェックボックスに同じ名前を与え、サーバーは、どの値がその名前で提出されたかを見ることによって、どのチェックボックスがチェックされたかを区別する―ラジオボタンのように、これらはまた、value属性を持つ一意な値を与えられる。

前節の設定を考えれば、次のようになる:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

属性が引用符で囲まれた値を持ったり囲まれなかったりするが、特に意味はない。構文のセクションで説明されるように、HTML構文は属性を指定するための等価で妥当な様々な方法を可能にする。

たとえば、顧客が自分の名前として"Denise Lawrence"、電話番号として"555-321-8642"と入力し、電子メールアドレスを指定せず、中型ピザを求め、追加でチーズとキノコのトッピングを選択し、午後7時の配達時間を入力し、配送指示のテキストフィールドを空白のままにした場合、ユーザーエージェントは、オンラインウェブサービスに以下を送信するだろう:

custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
4.10.1.4 クライアント側のフォーム検証

この節は非規範的である。

フォームは、フォームが送信される前に、どのようにユーザーエージェントがユーザーの入力をチェックするかのような注釈を付けることができる。(悪意あるユーザーが簡単にフォームの検証を迂回することができるので)サーバは依然として入力が妥当であることを確認する必要があるが、ユーザーは、ユーザーの入力の独占的なチェッカーであるサーバーを持つことによって発生した待ち時間を回避できる。

最も簡単な注釈は、値が指定されるまでフォームが送信されないことを示すためにinput要素で指定できる、required属性である。顧客の名前と配達時間のフィールドにこの属性を追加することによって、ユーザーがフィールドに入力せずにフォームを送信する際に、ユーザーエージェントはユーザーに通知できる:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

maxlength属性を使用して、入力の長さを制限することも可能である。textarea要素にこれを追加することによって、ユーザーに1000文字の制限ができ、焦点を合わせて留まる代わりに忙しい配送ドライバーに対してユーザーが巨大なエッセイを書かないようにする。

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

フォームが送信される際、invalidイベントは無効な各フォームコントロールで発火し、その後form要素自身で発火する。典型的にブラウザ自体は一度に一つの問題を報告するので、これはフォームに関する問題の要約を表示するために有用でありうる。

4.10.1.5 フォームコントロールのクライアント側オートフィルを有効にする

この節は非規範的である。

一部のブラウザは、ユーザーに情報を毎回再入力させるのではなく、フォームコントロールを自動的に埋めることでユーザーを支援しようとする。たとえば、ユーザーの電話番号を要求するフィールドは、自動的にユーザーの電話番号を埋めることができる。

これとともにユーザーエージェントを助けるために、autocomplete属性はフィールドの目的を説明するために使用できる。次のフォームの場合、誰がピザに配信されるかに関する情報について、このように有用な注釈を付けることができる3つのフィールドを持つ。この情報を追加すると、次のようになる:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
4.10.1.6 モバイルデバイス上のユーザーエクスペリエンスを向上させる

この節は非規範的である。

一部のデバイスは、とりわけオンスクリーンキーボードのものおよび多数の文字を持つ言語(たとえば日本語)でロケールを使用するものは、複数の入力モダリティをユーザーに提供できる。たとえば、自分の名前を入力する際に、デフォルトで各単語を大文字にするフォームフィールドを見たいかもしれない一方で、クレジットカードの番号を入力する際にユーザーは0~9の数字キーのみを表示したいかもしれない。

適切な入力モダリティを選択できるinputmode属性を使用する:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name" inputmode="latin-name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000 inputmode="latin-prose"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
4.10.1.7 フィールドタイプ、オートフィルのフィールド名、および入力モダリティーの違い

この節は非規範的である。

typeautocomplete、およびinputmodeは、紛らわしいほど酷似しているように見えるだろう。たとえば、3つすべての場合において文字列"email"は妥当な値である。このセクションでは、3つの属性の違いについて説明を試み、どのように属性を使用するかを提案する助言を提供する。

input要素のtype属性は、ユーザーエージェントがフィールドを公開するために使用するコントロールの種類を決定する。この属性に属する異なる値の間の選択は、input要素、textarea要素、select要素、keygen要素などを使用するかどうかを選択するのと同じ選択肢である。

対照的にautocomplete属性は、ユーザーが実際に入力する値が何を表すかを記載する。この属性の異なる値の間で選択は、要素のラベルがどのようなものかを選択するのと同じ選択肢である。

まず、電話番号を考えてみよう。ページがユーザーから電話番号を求める場合、適切な使用すべきフォームコントロールは<input type=tel>である。しかし、どのautocomplete値を使用べきかは、ユーザーが国際形式または単にローカル形式の電話番号を期待するかどうかなど、ページがどの電話番号を求めるかに依存する。

たとえば、友人に出荷するギフトを購入する顧客に対してeコマースサイトで検査プロセスの一部を構成するページは、購入者の電話番号(支払いの問題の場合)と友人の電話番号(配達の問題の場合)の両方を必要とするかもしれない。サイトが(国コードプレフィックスを持つ)国際電話番号想定する場合、これはこのようになる:

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".

しかし、サイトがイギリスの顧客や受信者のみをサポートする場合、代わりに次のようになるだろう(telよりもむしろtel-nationalの仕様に注意する):

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
<p>Please enter complete UK phone numbers, as in "(01632) 960 123".

さて、ある人の優先言語を考えてみよう。正確なautocomplete値はlanguageである。しかし、目的に対して使用される異なるフォームコントロールが多数あるかもしれない:フリーテキストフィールド(<input type=text>)、ドロップダウンリスト(<select>)、ラジオボタン(<input type=radio>)など。これは、どの種類のインターフェースが望まれているかのみに依存する。

コントロールが自由形式のテキストフィールドである場合、inputmodeが使用する入力モダリティー(たとえばキーボード)の種類を決定する。

名前を考えてみよう。ページが単にユーザーから1つ名前を望む場合、該当するコントロールは<input type=text>である。ページがユーザーのフルネームを求めている場合、該当するautocomplete値はnameである。しかしユーザーが日本人であり、かつページがユーザーの日本語名とローマ字名を求めている場合、最初のフィールドが日本語入力モダリティーをデフォルトにし、一方で2番目のフィールドが(理想的には各単語を自動で大文字の)英数字入力モダリティーをデフォルトにする場合に、ユーザーに役立つだろう。以下はinputmode属性が援助可能な場所である:

<p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name" inputmode="kana"></label>
<label>Romanised name: <input name="e" type="text" autocomplete="section-en name" inputmode="latin-name"></label>

この例で、autocomplete属性値における"section-*"キーワードは、2つのフィールドが別の名前を期待することをユーザーエージェントに知らせる。キーワードなしで、ユーザーが最初のフィールドに値を与える際に、ユーザーエージェントは、最初のフィールドで与えられた値とともに2番目のフィールドを自動的に埋めることができる。

キーワードの"-jp"および"-en"部分は、ユーザーエージェントに対して不明瞭である。キーワードからユーザーエージェントは、2つの名前がそれぞれ日本語とおよび英語であることを期待されていると推測できない。

4.10.1.8 日付、時刻、数値の形式

この節は非規範的である。

このピザ配達の例において、時刻は、24時間形式で2桁の時間と2桁の分、形式"HH:MM"で指定される。(この例において必要ないが、秒もまた指定できる。)

しかし、ユーザーに提示される際、一部のロケールにおいて、時刻はしばしば異なった表現がなされる。たとえば、アメリカでは"2pm"のように、am/pm表示付きの12時間制を使用するのが一般的である。フランスでは"14h00"のように、"h"の文字を用いて時間と分を分離するのが一般的である。

コンポーネントの順序が常に一貫しないような複雑な関係を付加されるとともに、日付に同様の問題が存在する―たとえば、キプロスで2003年2月1日は一般に"1/2/03"と書かれ、一方で日本において同じ日付は一般に"2003年02月01日"のように書かれるだろう―数字と平行して、たとえば、どのような句読点が小数点記号や桁区切り記号として使用されるという点でロケールが異なる。

したがって、ブラウザでユーザーに提示され、ブラウザでユーザーからの入力として受け入れられる時刻、日付、および数値形式から、常に形式がこの仕様で定義される(およびコンピュータ可読の日付と時刻の形式に対して十分に確立されたISO 8601規格に基づく)場合、HTMLとフォームの送信で使用される時刻、日付、および数値形式を区別することが重要である。

形式は"ワイヤ上で"使用される。すなわち、HTMLマークアップとフォームの送信で、これはコンピュータ可読およびユーザーのロケールに関わらず、一貫性があることを意図する。たとえば、日付は常に"2003-02-01"のように、形式"YYYY-MM-DD"で記述される。ユーザーは、これまでにこの形式を参照することが期待されていない。

時刻、日付、またはワイヤ形式でページによって与えられた数字は、ユーザーに表示される前に、(ユーザー設定に基づくか、ページ自身のロケールに基づいて)ユーザーの好みの表現に変換される。同様に、ユーザーは、好みの形式を使用して、時刻、日付、または数値の入力する後に、ユーザーエージェントは、DOMに入れるまたは送信する前に、ワイヤ形式に戻って変換する。

依然としてユーザーのニーズをサポートする一方で、これは、ページ内やサーバー上のスクリプトに、多数の異なるフォーマットをサポートする必要なしに、一貫性のある方法で、時刻、日付、および数値を処理できる。

See also the implementation notes regarding localization of form controls.

4.10.2 カテゴリ

多くの歴史的な理由のために、この節における要素は、フローコンテンツフレージングコンテンツ、およびインタラクティブコンテンツのように通常のものに加えて、複数の(しかし微妙に異なる)カテゴリが重複して分類される。

要素の数は、フォーム所有者を持つことができることを意味する、フォーム関連要素である。

フォーム関連要素は、複数のサブカテゴリに分類される:

記載要素

form.elementsfieldset.elements APIに記載される要素を表す。

送信可能要素

form要素が送信された際に設定したフォームのデータを作成するために用いることのできる要素を示す。

一部の送信可能要素は、その属性ボタンに応じて存在できる。要素がボタンである場合、以下の文が定義される。一部のボタンは、特に送信ボタンである。

リセット可能要素

form要素がリセットされる際に影響を受けるだろう要素を示す。

再関連付け可能要素

formコンテンツ属性、および著者が明示的にフォーム所有者を指定できる、一致するformIDL属性を持つ要素を表す。

フォーム関連のすべてでなく、一部の要素がラベル付け可能要素として分類される。これは、label要素に関連付けることができる要素である。

4.10.3 form要素

カテゴリ
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしform要素の子孫を除く。
コンテンツ属性
グローバル属性
accept-charset - フォーム送信に使用する文字エンコーディング
action - フォーム送信に使用するURL
autocomplete - フォーム内のコントロールのオールフィル機能に対するデフォルト設定
enctype - フォーム送信に使用する文字エンコーディングを設定するフォームデータ
method - フォーム送信に使用するHTTPメソッド
name - document.forms APIで使用するためのフォーム名
novalidate - フォーム送信のためのフォームコントロール検証を回避する
target - フォーム送信に対するブラウジングコンテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
[OverrideBuiltins]
interface HTMLFormElement : HTMLElement {
           attribute DOMString acceptCharset;
           attribute DOMString action;
           attribute DOMString autocomplete;
           attribute DOMString enctype;
           attribute DOMString encoding;
           attribute DOMString method;
           attribute DOMString name;
           attribute boolean noValidate;
           attribute DOMString target;

  readonly attribute HTMLFormControlsCollection elements;
  readonly attribute long length;
  getter Element (unsigned long index);
  getter (RadioNodeList or Element) (DOMString name);

  void submit();
  void reset();
  boolean checkValidity();
  boolean reportValidity();

  void requestAutocomplete();
};

form要素は、処理のためにサーバーに送信できる編集可能な値を表すことができる一部で、フォーム関連要素のコレクションを表す

accept-charset属性は送信に対して使用される文字エンコーディングを提供する。指定した場合、値はASCII大文字・小文字不区別一意なスペース区切りトークンの順序付けられたセットでなければならず、各トークンはASCII互換文字エンコーディングラベルASCII大文字・小文字不区別で一致しなければならない。[ENCODING]

name属性はformsコレクション内のformの名前を表す。値は空文字列であってはならず、いかなる場合も、値はformsコレクションのform要素の中で一意でなければならない。

autocomplete属性は列挙属性である。この属性は2つの状態を持つ。onキーワードはon状態に対応し、offキーワードはoff状態に対応する。属性は省略されてもよい。欠損値のデフォルトon状態である。off状態は、デフォルトでフォーム内のフォームコントロールがオートフィルフィールド名を"off"に設定されることを示し、on状態は、デフォルトでフォーム内のフォームコントロールがオートフィルフィールド名を"on"に設定されることを示す。

actionenctypemethodnovalidate、およびtarget属性はフォーム送信に対する属性である。

form . elements

フォーム(歴史的な理由でイメージボタンを除く)でのフォームコントロールのHTMLCollectionを返す。

form . length

フォーム(歴史的な理由でイメージボタンを除く)におけるフォームコントロールの数を返す。

form[index]

フォーム(歴史的な理由でイメージボタンを除く)でindex番目の要素を返す。

form[name]

指定したIDまたはname(歴史的な理由でイメージボタンを除く)をもつフォームでフォームコントロール(または複数存在する場合、フォームコントロールのRadioNodeList)を返す。または、いずれも存在しない場合、与えられたIDとともにimg要素を返す。

一度要素が特定の名前を使用して参照されると、たとえ要素の実際のIDまたはnameを変更しても要素がDocumentに残る限り、その名前は、この方法でその要素を参照する方法として利用され続けるだろう。

複数のマッチするアイテムが存在する場合、それらの要素すべてを含むRadioNodeListオブジェクトが返される。

form . submit()

フォームを送信する。

form . reset()

フォームをリセットする。

form . checkValidity()

フォームのコントロールがすべて有効である場合はtrueを返す。そうでなければfalseを返す。

form . reportValidity()

フォームのコントロールがすべて有効である場合はtrueを返す。そうでなければfalseを返す。

form . requestAutocomplete()

"on"または"off"以外のオートフィルフィールド名を持つ任意のフィールドでユーザーが埋めるのに役立つユーザーエージェント固有の非同期ユーザーインターフェースを切り替える。

form要素は、あらかじめ埋められているフィールドを示すautocomplete、または(問題の汎用クラスがイベント上でreason IDL属性で記述される)何らかの問題が存在することを示す(AutocompleteErrorEventインタフェースを用いる)autocompleteerrorのいずれかのイベントを続いて受け取るだろう。

The autocomplete IDL attribute must reflect the content attribute of the same name, limited to only known values.

The requestAutocomplete() method is part of the autofill mechanism.

The name IDL attribute must reflect the content attribute of the same name.

The acceptCharset IDL attribute must reflect the accept-charset content attribute.


The elements IDL attribute must return an HTMLFormControlsCollection rooted at the form element's home subtree's root element, whose filter matches listed elements whose form owner is the form element, with the exception of input elements whose type attribute is in the Image Button state, which must, for historical reasons, be excluded from this particular collection.

The length IDL attribute must return the number of nodes represented by the elements collection.

The supported property indices at any instant are the indices supported by the object returned by the elements attribute at that instant.

When a form element is indexed for indexed property retrieval, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its argument.


Each form element has a mapping of names to elements called the past names map. It is used to persist names of controls even when they change names.

The supported property names consist of the names obtained from the following algorithm, in the order obtained from this algorithm:

  1. Let sourced names be an initially empty ordered list of tuples consisting of a string, an element, a source, where the source is either id, name, or past, and, if the source is past, an age.

  2. For each listed element candidate whose form owner is the form element, with the exception of any input elements whose type attribute is in the Image Button state, run these substeps:

    1. If candidate has an id attribute, add an entry to sourced names with that id attribute's value as the string, candidate as the element, and id as the source.

    2. If candidate has a name attribute, add an entry to sourced names with that name attribute's value as the string, candidate as the element, and name as the source.

  3. For each img element candidate whose form owner is the form element, run these substeps:

    1. If candidate has an id attribute, add an entry to sourced names with that id attribute's value as the string, candidate as the element, and id as the source.

    2. If candidate has a name attribute, add an entry to sourced names with that name attribute's value as the string, candidate as the element, and name as the source.

  4. For each entry past entry in the past names map add an entry to sourced names with the past entry's name as the string, past entry's element as the element, past as the source, and the length of time past entry has been in the past names map as the age.

  5. Sort sourced names by tree order of the element entry of each tuple, sorting entries with the same element by putting entries whose source is id first, then entries whose source is name, and finally entries whose source is past, and sorting entries with the same element and source by their age, oldest first.

  6. Remove any entries in sourced names that have the empty string as their name.

  7. Remove any entries in sourced names that have the same name as an earlier entry in the map.

  8. Return the list of names from sourced names, maintaining their relative order.

The properties exposed in this way must be unenumerable.

When a form element is indexed for named property retrieval, the user agent must run the following steps:

  1. Let candidates be a live RadioNodeList object containing all the listed elements whose form owner is the form element that have either an id attribute or a name attribute equal to name, with the exception of input elements whose type attribute is in the Image Button state, in tree order.

  2. If candidates is empty, let candidates be a live RadioNodeList object containing all the img elements that are descendants of the form element and that have either an id attribute or a name attribute equal to name, in tree order.

  3. If candidates is empty, name is the name of one of the entries in the form element's past names map: return the object associated with name in that map.

  4. If candidates contains more than one node, return candidates and abort these steps.

  5. Otherwise, candidates contains exactly one node. Add a mapping from name to the node in candidates in the form element's past names map, replacing the previous entry with the same name, if any.

  6. Return the node in candidates.

If an element listed in a form element's past names map changes form owner, then its entries must be removed from that map.


The submit() method, when invoked, must submit the form element from the form element itself, with the submitted from submit() method flag set.

The reset() method, when invoked, must run the following steps:

  1. If the form element is marked as locked for reset, then abort these steps.

  2. Mark the form element as locked for reset.

  3. Reset the form element.

  4. Unmark the form element as locked for reset.

If the checkValidity() method is invoked, the user agent must statically validate the constraints of the form element, and return true if the constraint validation return a positive result, and false if it returned a negative result.

If the reportValidity() method is invoked, the user agent must interactively validate the constraints of the form element, and return true if the constraint validation return a positive result, and false if it returned a negative result.

この例は、2つの検索フォームを示す:

<form action="http://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="http://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

4.10.4 label要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
再関連付け可能フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただし要素のラベル付けされたコントロールでない場合、子孫ラベル付け可能な要素でない、および子孫label要素でないを除く。
コンテンツ属性
グローバル属性
form - form要素とコントロールを関連付ける
for - フォームコントロールとラベルを関連付ける
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

labelは、ユーザーインターフェースでのキャプションを表す。The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

Except where otherwise specified by the following rules, a label element has no labeled control.

for属性は、キャプションが関連付けされることになっているフォームコントロールを示すために指定されてもよい。この属性が指定される場合、属性値は、label要素と同じDocumentラベル付け可能要素IDでなければならない。If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

The label element's exact default presentation and behavior, in particular what its activation behavior might be, if anything, should match the platform's label behavior. The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing.

For example, on platforms where clicking or pressing a checkbox label checks the checkbox, clicking or pressing the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

On other platforms, the behavior might be just to focus the control, or do nothing.


注: コントロール上のイベントをトリガーするlabelをクリックするまたは押してできることは、コントロールを簡単にユーザーが操作できるようにすること、コントロールの当たり領域を大きくすることで、ユーザービリティーとアクセシビリティーの便益を提供する。label要素が、リンクのような独自の活性化挙動をもつ要素を含む場合、この便益は失うか減少するかもしれない。

  <!-- bad example - link inside label reduces checkbox activation area -->
  <label><input type=checkbox name=tac>I agree to <a href="tandc.html">the terms and conditions</a></label>
  
  <!-- bad example - all label text inside the link reduces activation area to checkbox only -->
  <label><input type=checkbox name=tac><a href="tandc.html">I agree to the terms and conditions</a></label>

ユーザービリティーとアクセシビリティーの利点は、label要素の外にそのような要素を配置することによって維持できる:

 <!-- good example - link outside label means checkbox activation area includes the checkbox and all the label text -->
 <label><input type=checkbox name=tac>I agree to the terms and conditions</label>
(read <a href="tandc.html">Terms and Conditions</a>)
 

form属性は、フォームの所有者label要素を明示的に関連付けるために使用される。

次の例は、ラベルを伴う3つのフォームコントロールであり、そのうちの2つが使用するユーザーに対して適切なフォーマットを示す小さなテキストを持つことを示す。

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>
label . control

この要素に関連付けられるフォームコントロールを返す。

The htmlFor IDL attribute must reflect the for content attribute.

The control IDL attribute must return the label element's labeled control, if any, or null if there isn't one.

The form IDL attribute is part of the element's forms API.


control . labels

フォームコントロールが関連付けられているすべてのlabel要素のNodeListを返す。

Labelable elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable elements, on getting, must return that NodeList object.

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 - 横の次元
また、pattern属性と組み合わせて使用する場合、title属性はこの要素で特別な意味を持つ
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
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;
           attribute DOMString inputMode;
  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 double valueLow;
           attribute double valueHigh;
           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();
  boolean reportValidity();
  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属性は、要素のデータ型(および関連するコントロール)を制御する。この属性は列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。

キーワード 状態 データ型 コントロール型
hidden 非表示 任意の文字列 該当なし
text テキスト 改行なしのテキスト テキストフィールド
search Search 改行なしのテキスト 検索フィールド
tel 電話番号 改行なしのテキスト テキストフィールド
url URL 絶対URL テキストフィールド
email 電子メール 電子メールアドレス(のリスト) テキストフィールド
password Password 改行なしのテキスト(センシティブな情報) データエントリを覆い隠したテキストフィールド
datetime Date and Time UTCに設定されたタイムゾーンを伴う日付および時刻(年、月、日、時間、分、秒、秒の小数) 日付および時刻のコントロール
date 日付 タイムゾーンを伴わない日付(年、月、日) 日付のコントロール
month タイムゾーンを伴わない年と月から成る日付 月のコントロール
week Week タイムゾーンを伴わない週番号と週数から成る日付 週のコントロール
time 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状態である。

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

The following table is non-normative and summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:

非表示 Text, Search URL, Telephone 電子メール Password Date and Time, Date, Month, Week, 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 · · 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* · · · · · ·
valueLow · · · · · · · · Yes** · · · · · ·
valueHigh · · · · · · · · 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 event · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·
change event · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·

* multiple属性が指定されない場合。

** multiple属性が指定される場合。

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, valueLow, valueHigh, stepDown(), and stepUp().

Each input element has a boolean dirty value flag. The dirty value 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 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要素のデフォルトのを示す。When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must 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 run the current value sanitization algorithm, if one is defined.

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.

checkedコンテンツ属性は、input要素のデフォルトのcheckednessを与える真偽属性である。When the checked content attribute is added, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to true; when the checked content attribute is removed, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to false.

The reset algorithm for input elements is to set the 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.


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:

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

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

  3. Update the element's rendering and behavior to the new state's.

  4. Invoke the value sanitization algorithm, if one is defined for the type attribute's new state.


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

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.

The accept, 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 type IDL attribute must reflect the respective content attribute of the same name, limited to only known values. The inputMode IDL attribute must reflect the inputmode content attribute, 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, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if an image is available but not being rendered to a visual medium; 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.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

4.10.5.1 type 属性の状態
4.10.5.1.1 Hidden状態(type=hidden
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

When an input element's type attribute is in the Hidden state, the rules in this section apply.

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

Constraint validation: If an input element's type attribute is in the Hidden state, it is barred from constraint validation.

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

valueIDL属性は、この要素に適用され、モードのデフォルトとなる。

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

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

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

4.10.5.1.2 Texttype=text)状態とSearch状態(type=search
許可されるARIAロール属性値:
textbox(デフォルト - 設定しない)またはcombobox
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

When an input element's type attribute is in the Text state or the Search state, the rules in this section apply.

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

SearchText状態および状態との違いは、主に文体である:検索フィールドが通常のテキストフィールドとは区別されるプラットフォームにおいて、Search状態は、通常のテキストフィールドのように表示されるよりも、プラットフォームの検索フィールドを持つ一貫した外観になるかもしれない。

If the element is mutable, its value should be editable by the user. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) 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:

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

  2. Queue a task to fire a simple event that bubbles named input at the input element.

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

The value sanitization algorithm is as follows: Strip line breaks from the value.

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

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

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

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

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

4.10.5.1.3 Telephone状態(type=tel
許可されるARIAロール属性値:
textbox(デフォルト - 設定しない)またはcombobox
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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 "LF" (U+000A) or "CR" (U+000D) characters into the element's value.

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

The value sanitization algorithm is as follows: Strip line breaks from the value.

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

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

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

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

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

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

4.10.5.1.4 URL状態(type=url
許可されるARIAロール属性値:
textbox(デフォルト - 設定しない)またはcombobox
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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 "LF" (U+000A) or "CR" (U+000D) characters into the value.

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

The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing 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属性、およびメソッドは要素に適用するautocompletelistmaxlengthminlengthpatternplaceholderreadonlyrequiredsizeコンテンツ属性、listselectionStartselectionEndselectionDirectionvalueIDL属性、select()setRangeText()setSelectionRange()メソッド。

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

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

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

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesvalueAsDatevalueAsNumbervalueLowvalueHighIDL属性、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/#membershipおよびhttp://www.w3.org/TR/XForms/を訪れたことを認められる場合、レンダリングはこのように見えるだろう:

右側のドロップダウンボタンで、テキスト&quot;www.w3&quot;とカーソルが続く左側にアイコンが付いたテキストボックス、右側のラベルをグレーアウトした最初の4つとともに、左に6つのURLのリストを含むドロップダウンボックス、ドロップダウンボックスの右側のスクロールバー、さらに値を示すものが利用可能である。

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

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

4.10.5.1.5 E-mail状態(type=email
許可されるARIAロール属性値:
textbox(デフォルト - 設定しない)またはcombobox
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

When an input element's type attribute is in the E-mail state, the rules in this section apply.

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

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

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

If the element is mutable, the user agent should allow the user to change the e-mail address represented by its value. User agents may allow the user to set the value to a string that is not a valid e-mail address. The user agent should act in a manner consistent with expecting the user to provide a single e-mail address. User agents should allow the user to set the value to the empty string. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the value. User agents may transform the value for display and editing; in particular, user agents should convert punycode in 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 line breaks from the value, then strip leading and trailing whitespace from the value.

Constraint validation: While the value of the element is neither the empty string nor a single valid e-mail 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 e-mail 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 e-mail address, but must not allow users to set any individual value to a string containing "," (U+002C), "LF" (U+000A), or "CR" (U+000D) 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 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) 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:

  1. Let latest values be a copy of the element's values.

  2. Strip leading and trailing whitespace from each value in latest values.

  3. 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) character, maintaining the list's order.

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

The value sanitization algorithm is as follows:

  1. Split on commas the element's value, strip leading and trailing 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.

  2. 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) character, maintaining the list's order.

Constraint validation: While the value of the element is not a valid e-mail 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 ]  ; RFC 1034 3.5節によって63文字の長さに制限される
atext         = < RFC 5322 3.2.3節で定義されるとおり >
let-dig       = < RFC 1034 3.5節で定義されるとおり >
ldh-str       = < RFC 1034 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 e-mail address list, and implementation must split the string on commas.

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

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

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

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

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

4.10.5.1.6 Password状態(type=password
許可されるARIAロール属性値:
textbox (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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 "LF" (U+000A) or "CR" (U+000D) characters into the value.

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

The value sanitization algorithm is as follows: Strip line breaks from the value.

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

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

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

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

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

4.10.5.1.7 Date and Time状態(type=datetime
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

When an input element's type attribute is in the Date and Time state, the rules in this section apply.

input要素は、特定のグローバルな日付および時刻を表す、要素のを設定する文字列に対するコントロールを表すUser agents may display the date and time in whatever time zone is appropriate for the user.

If the element is mutable, the user agent should allow the user to change the global date and time represented by its value, as obtained by parsing a global 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 normalised forced-UTC global date and time string, though user agents may allow the user to set and view the time in another time zone and silently translate the time to and from the UTC time zone in the value. If the user agent provides a user interface for selecting a global date and time, then the value must be set to a valid normalised forced-UTC global 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 normalised forced-UTC global date and time string, the control is suffering from bad input.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.

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

The value sanitization algorithm is as follows: If the value of the element is a valid global date and time string, then adjust the time so that the value represents the same point in time but expressed in the UTC time zone as a valid normalized forced-UTC global date and time string, 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). The default step is 60 seconds.

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest global 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 global date and time 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 the parsed global 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 normalised forced-UTC global date and time string that represents the global date and time that is 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 global date and time from input results in an error, then return an error; otherwise, return a new Date object representing the parsed global date and time, expressed in UTC.

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid normalised forced-UTC global date and time string that represents the global date and time that is represented by input.

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

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

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

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

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

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

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

次の断片は、カレンダーアプリケーションの一部を示す。(おそらくローカルタイムゾーンで、ユーザーエージェントがユーザーに変更を許可するが)ユーザーは会議の日付と時刻を指定でき、送信されたデータはタイムゾーンオフセットを含むので、アプリケーションは会議がすべての関係者によって使用されるタイムゾーンに関係なく正しい時刻で表示することを保証できる。

<fieldset>
 <legend>Add Meeting</legend>
 <p><label>Meeting name: <input type=text name="meeting.label"></label>
 <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

代わりにアプリケーションがdateおよび/またはtime型を使用することで、カレンダーアプリケーションがユーザーが意図したタイムゾーンを明示的に決定するかもしれない。

(たとえば"新年を祝う"など)ユーザーが旅行する際に正確な時間が異なるイベントに対して、および(たとえば"学校に子供を連れてくる"など)その場所がサマータイムを出入りするにもかかわらず、特定の正確な時間に対して同時に滞在している定期的なイベントに対して、dateおよび/またはtime型はより適切だろう時間に固定する固有の地理的な位置を選択するためのselect要素(または他の類似のコントロール)と組み合わせる。

4.10.5.1.8 Date状態(type=date
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

When an input element's type attribute is in the Date state, the rules in this section apply.

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

日付値は、"浮動小数"時間を表し、かつタイムゾーン情報を含まない。JavaScriptおよび他のプログラミング言語で日付型からまたは日付型へこの型の値に変換する場合に注意が必要である。多くの場合、暗黙の時刻およびタイムゾーンは、グローバル("増分")時刻(ある任意のエポック時間からのオフセットを表す整数値)を作成するために使用される。特にタイムゾーンをまたがるこの値の処理または変換は、日付そのものの値を変更することができる。[TIMEZONES]

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.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.

指定されてかつ空でない場合、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). The default step is 1 day.

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 and Time状態の節における歴史的な日付の注意を参照のこと。

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

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

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

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

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

4.10.5.1.9 Month状態(type=month
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

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.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.

指定されてかつ空でない場合、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). The default step is 1 month.

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属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumberIDL属性、stepDown()およびstepUp()メソッド。

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

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

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

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

4.10.5.1.10 Week状態(type=week
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

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.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.

指定されてかつ空でない場合、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). The default step is 1 week. 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属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumberIDL属性、stepDown()およびstepUp()メソッド。

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

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

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

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

4.10.5.1.11 Time状態(type=time
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

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.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.

指定されてかつ空でない場合、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). The default step is 60 seconds.

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属性、およびメソッドは要素に適用するautocompletelistmaxminreadonlyrequired、およびstepコンテンツ属性、listvaluevalueAsDate、およびvalueAsNumberIDL属性、stepDown()およびstepUp()メソッド。

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

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

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

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

4.10.5.1.12 Number状態(type=number
許可されるARIAロール属性値:
spinbutton (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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. The default step is 1 (allowing only integers to be selected by the user, unless the step base has a non-integer value).

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属性、およびメソッドは要素に適用するautocompletelistmaxminplaceholderreadonlyrequiredおよびstepコンテンツ属性、listvalueおよびvalueAsNumberIDL属性、stepDown()およびstepUp()メソッド。

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

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

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

以下のIDL属性とメソッドは、要素に適用しないcheckedfilesselectionStartselectionEndselectionDirectionvalueAsDatevalueLowvalueHighIDL属性、select()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はおそらく正しい選択である(おそらくpattern属性を持つ)。

4.10.5.1.13 Range状態(type=range
許可されるARIAロール属性値:
slider (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

When an input element's type attribute is in the Range state, the rules in this section apply.

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

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

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

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

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

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

無効な値+50は、完全に無視される様子にも注意する。

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

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

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

As a dial.

あるいは:

As a long horizontal slider with tick marks.

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

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

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

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

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

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

input要素は、数値を表す文字列に要素の複数のを設定するためのコントロールを表すが、正確な値が重要ではないという通知とともに、ユーザーに直接数値入力するように要求するよりもむしろグラフィカルインターフェースを提供するユーザーエージェントを可能にする。

If the element is mutable, the user agent should allow the user to change either the first or second number represented by its values, as obtained from applying the rules for parsing floating-point number values to them, and ensuring that the first value is never larger than the second value. User agents must not allow the user to set either the first or second of the values to a string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then these values must be set to the best representations of the numbers representing the user's selections as floating-point numbers. User agents must not allow the user to set the values to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a pair of valid floating-point numbers, the control is suffering from bad input.

value属性が指定された場合、単一の","(U+0002C)文字で区切られた妥当な浮動小数点数となる値を持たなければならない。

The value sanitization algorithm is as follows:

  1. Split on commas the element's value.

  2. If there are not exactly two values, or if either value is not a valid floating-point number, then let the element's values be a pair of values consisting of a best representation, as a floating-point number, of the element's minimum and the element's maximum, with the smaller value first.

  3. Othwerwise, let the element's values be the two values, with the smaller value first.

  4. Let the element's value be the result of concatenating the element's values, separating them by a single "," (U+002C) character, with the lower value coming first.

Whenever the user changes the element's values, the user agent must set the element's value to the result of concatenating the element's values, separating them by a single "," (U+002C) character, with the lower value coming first.

When the element is suffering from an underflow, the user agent must set either of the element's values that represent values less than the minimum 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 either of the element's values that represent values greater than the maximum 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 values represented by the element's values to, in each case, 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.

Whenever the user agent changes the element's values according to the three previous paragraphs, the user agent must set the element's value to the result of concatenating the element's values, separating them by a single U+002C COMMA character (,), with the lower value coming first.

出発および到着時刻で可能なフライトをフィルタするユーザーインターフェースを考えてみる:

<form ...>
 <fieldset>
  <legend>Outbound flight time</legend>
  <select ...>
   <option>Departure
   <option>Arrival
  </select>
  <p><output name=o1>00:00</output> – <output name=o2>24:00</output></p>
  <input type=range multiple min=0 max=24 value=0,24 step=1.0 ...
         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
 </fieldset>
 ...
</form>

適切なスタイルとともに、これはこのように見えるかもしれない:

A control group with the label 'Outbound flight time', showing a drop-down that lets you select Departure vs Arrival, a two-handled range control that lets you set the start and end time of the range, and a label showing the currently selected times.

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

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

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

The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).

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属性、およびメソッドは要素に適用するautocompletelistmaxminmultiplestepコンテンツ属性、listvaluevalueAsNumberIDL属性、stepDown()stepUp()メソッド。

multipleコンテンツ属性が指定されない場合に、以下の共通input要素IDL属性は要素に適用するvalueAsNumber

multipleコンテンツ属性が指定される場合に、以下の共通input要素IDL属性は要素に適用するvalueLowvalueHigh

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

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

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

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

multipleコンテンツ属性が指定されない場合に、以下の共通input要素IDL属性は要素に適用するvalueLowvalueHigh

multipleコンテンツ属性が指定される場合に、以下の共通input要素IDL属性は要素に適用するvalueAsNumber

4.10.5.1.14 Color状態(type=color
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

When an input element's type attribute is in the Color state, the rules in this section apply.

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

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

If the element is mutable, the user agent should allow the user to change the color represented by its value, as obtained from applying the rules for parsing simple color values to it. User agents must not allow the user to set the value to a string that is not a valid lowercase simple color. If the user agent provides a user interface for selecting a color, then the value must be set to the result of using the rules for serializing simple color values to the user's selection. 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 lowercase simple color, the control is suffering from bad input.

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

The value sanitization algorithm is as follows: If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

以下の共通input要素のコンテンツ属性およびIDL属性は要素に適用するautocompleteおよびlistコンテンツ属性、listおよびvalueIDL属性。

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

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

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

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

4.10.5.1.15 Checkbox状態(type=checkbox
許可されるARIAロール属性値:
checkbox(デフォルト - 設定しない)またはmenuitemcheckbox
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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の状態である、不確定であったかのように、コントロールの選択を隠すべきである。

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

If the element is mutable, then: The pre-click activation steps consist of setting the element's checkedness to its opposite value (i.e. true if it is false, false if it is true), and of setting the element's indeterminate IDL attribute to false. The canceled activation steps consist of setting the checkedness and the element's indeterminate IDL attribute back to the values they had before the pre-click activation steps were run. The activation behavior is to fire a simple event that bubbles named input at the element and then fire a simple event that bubbles named change at the element.

If the element is not mutable, it has no activation behavior.

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およびvalueIDL属性。

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

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

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

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

4.10.5.1.16 Radio Button状態(type=radio
許可されるARIAロール属性値:
radio(デフォルト - 設定しない)またはmenuitemradio
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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要素を含めてはならない。

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:

If the element is mutable, then: The pre-click activation steps consist of setting the element's checkedness to true. The canceled activation steps consist of setting the element's checkedness to false. The activation behavior is to fire a simple event that bubbles named input at the element and then fire a simple event that bubbles named change at the element.

If the element is not mutable, it has no activation behavior.

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.

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

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

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

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

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

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

4.10.5.1.17 File Upload状態(type=file
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性

When an input element's type attribute is in the File Upload state, the rules in this section apply.

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

File names 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 file names that are separated by "\" (U+005C) character characters.

Unless the multiple attribute is set, there must be no more than one file in the list of selected files.

If the element is mutable, then the element's activation behavior is to run the following steps:

  1. If the algorithm is not allowed to show a popup, then abort these steps without doing anything else.

  2. Return, but continue running these steps asynchronously.

  3. Optionally, wait until any prior execution of this algorithm has terminated.

  4. Display a prompt to the user requesting that the user specify some files. If the multiple attribute is not set, 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.

  5. Wait for the user to have made their selection.

  6. Queue a task to first update the element's selected files so that it represents the user's selection, then fire a simple event that bubbles named input at the input element, and finally fire a simple event that bubbles named change at the input 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 queue a task to first update the element's selected files so that it represents the user's new selection, then fire a simple event that bubbles named input at the input element, and finally fire a simple event that bubbles named change at the input element.

If the element is not mutable, it has no activation behavior and the user agent must not allow the user to change the element's selection.

Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.


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

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

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

トークンは、他のトークンのいずれかと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 file name
}

これは次のように使用できる:

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

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

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

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

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

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

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

4.10.5.1.18 Submit Button状態(type=submit
許可されるARIAロール属性値:
button (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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. The element is a button, specifically a submit button. (This is a fingerprinting vector.)

If the element is mutable, then the element's activation behavior is as follows: if the element has a form owner, and the element's Document is fully active, submit the form owner from the input element; otherwise, do nothing.

If the element is not mutable, it has no activation behavior.

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

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

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

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

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

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

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

4.10.5.1.19 Image Button状態(type=image
許可されるARIAロール属性値:
button (デフォルト - 設定しない)、linkmenuitemmenuitemcheckboxmenuitemradioまたはradio
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

When an input element's type attribute is in the Image Button state, the rules in this section apply.

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

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


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

When any of the following events occur, unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches elements on demand, or the src attribute's value is the empty string, the user agent must resolve the value of the src attribute, relative to the element, and if that is successful, must fetch the resulting absolute URL:

Fetching the image must delay the load event of the element's 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.

The task that is queued by the networking task source once the resource has been fetched, must, if the download was successful and the image is available, queue a task to fire a simple event named load at the input element; and 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, queue a task to fire a simple event named error on the input element.


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

input要素は、寸法属性をサポートする。


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; if the element is mutable, the user agent should allow the user to select this coordinate, and the element's activation behavior is as follows: if the element has a form owner, and the element's Document is fully active, take the user's selected coordinate, and submit the input element's form owner from the input element. If the user activates the control without explicitly selecting a coordinate, then the coordinate (0,0) must be assumed.

Otherwise, the element represents a submit button whose label is given by the value of the alt attribute; if the element is mutable, then the element's activation behavior is as follows: if the element has a form owner, and the element's Document is fully active, set the selected coordinate to (0,0), and submit the input element's form owner from the input element.

In either case, if the element is mutable but has no form owner or the element's Document is not fully active, then its activation behavior must be to do nothing. If the element is not mutable, it has no activation behavior.

The selected coordinate must consist of an x-component and a y-component. The coordinates represent the position relative to the edge of the 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) ≤ xwidth+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) ≤ yheight+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.


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

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

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

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

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

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

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

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

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

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

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

次のフォームを取ると:

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

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

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

4.10.7.1.20 Reset Button状態(type=reset
許可されるARIAロール属性値:
button (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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. The element is a button. (This is a fingerprinting vector.)

If the element is mutable, then the element's activation behavior, if the element has a form owner and the element's Document is fully active, is to reset the form owner; otherwise, it is to do nothing.

If the element is not mutable, it has no activation behavior.

Constraint validation: The element is barred from constraint validation.

valueIDL属性は、この要素に適用され、モードのデフォルトとなる。

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

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

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

4.10.7.1.21 Button状態(type=button
許可されるARIAロール属性値:
button (デフォルト - 設定しない)、linkmenuitemmenuitemcheckboxmenuitemradioまたはradio
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。

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 is a button.

If the element is mutable, the element's activation behavior is to do nothing.

If the element is not mutable, it has no activation behavior.

Constraint validation: The element is barred from constraint validation.

valueIDL属性は、この要素に適用され、モードのデフォルトとなる。

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

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

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

4.10.5.2 Implemention notes regarding localization of form controls

この節は非規範的である。

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

4.10.5.3 共通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.

4.10.5.3.1 minおよびmax属性

The maxlength attribute, when it applies, is a form control maxlength attribute controlled by the input element's dirty value flag.

The minlength attribute, when it applies, is a form control minlength attribute controlled by the input element's dirty value flag.

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

次の抜粋は、簡潔であるようなこの媒体を通した任意の会話を強制してインテリジェントな談話に反対するような、メッセージングクライアントのテキスト入力が任意に固定文字数に制限できる方法を示す。

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

ここでは、パスワードが最小の長さを与えられる:

<p><label>Username: <input name=u required></label>
<p><label>Password: <input name=p required minlength=12></label>
4.10.5.3.2 size属性

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

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

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 non-negative numbers greater than zero and has a default value of 20.

4.10.5.3.3 readonly属性

readonly属性は、ユーザーがフォームコントロールを編集できるかどうかを制御する真偽属性である。When specified, the element is not mutable.

Constraint validation: If the readonly attribute is specified on an input element, the element is barred from constraint validation.

disabledreadonlyとの違いは、無効なコントロールに非対話型であるのに対し、読み取り専用コントロールは、依然としてフォーカス可能であるので、ユーザーはまだテキストを選択し対話できる。(このような理由から、テキストのみのコントロールは読み取り専用にできる。たとえば、チェックボックスやボタンの意味をなさないだろう。)

次の例において、既存の製品識別子は変更できないが、(識別子がまだ入力されていない場所で)新製品を表す行との一貫性を保つために、それらは依然としてフォームの一部として表示される。

<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> Product ID <th> Product name <th> Price <th> Action
  <tr>
   <td> <input readonly="readonly" name="1.pid" value="H412">
   <td> <input required="required" name="1.pname" value="Floor lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">Delete</button>
  <tr>
   <td> <input readonly="readonly" name="2.pid" value="FG28">
   <td> <input required="required" name="2.pname" value="Table lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">Delete</button>
  <tr>
   <td> <input required="required" name="3.pid" value="" pattern="[A-Z0-9]+">
   <td> <input required="required" name="3.pname" value="">
   <td> $<input required="required" type="number" min="0" step="0.01" name="3.pprice" value="">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">Delete</button>
 </table>
 <p> <button formnovalidate="formnovalidate" name="action" value="add">Add</button> </p>
 <p> <button name="action" value="update">Save</button> </p>
</form>
4.10.5.3.4 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">E-mail address:</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="Create account">
</form>

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

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

ラジオボタングループが必須とされるかどうかにかかわらず、混乱を避けるために、著者は、グループ内のすべてのラジオボタンで属性を指定することが推奨される。実際一般に、これはユーザーが戻ることができない状態であるため、著者は、最初の場所で任意の最初にチェックするコントロールを持たないラジオボタングループを回避することが推奨されており、したがって一般に貧弱なユーザーインターフェースと見なされる。

4.10.5.3.5 multiple属性

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

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

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

ユーザーの連絡先データベースで多くの友人の間で、ユーザーが、2人の友人"Arthur Dent"(アドレス"art@example.net")と"Adam Josh"(アドレス"adamjosh@example.net")持っていた場合、ユーザーが"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パターン生成規則にマッチしなければならない。[ECMA262]

If an input element has a pattern attribute specified, and the attribute's value, when compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled (see ECMA262 Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles successfully, then the resulting regular expression is the element's compiled pattern regular expression. If the element has no such attribute, or if the value doesn't compile successfully, then the element has no compiled pattern regular expression. [ECMA262]

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 entirety of 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 the entirety of each of the element's values, then the element is suffering from a pattern mismatch.

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

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

テキストコンテンツの視覚的表示のためのtitle属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない(たとえば、ツールチップを出現させるマウスなどのポインティングデバイスが必要になり、これは近代的な携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す)。

たとえば、次の断片はinputの下にあるテキストでパターンの説明を含み、パターン記述もまたtitle属性に含まれてる:

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

テキスト内のパターン記述の存在は、デバイスにかかわらず任意のユーザーに利用可能なアドバイスを行う。

title属性でのパターン記述の存在は、入力がフォーカスを受ける際にスクリーンリーダーのような支援技術によって披露されている説明となる。

ユーザーが誤った情報でフォームを送信しようとする場合、title属性のテキストの存在もまた、ユーザーエージェントに以下のような警告を表示させるかもしれない:

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

この例において、パターン記述はtitle属性のテキストでなく、inputの下のテキストである。aria-describedby属性は、明示的にコントロールと説明テキストを関連付けるために使用され、inputがフォーカスを受け取る際にスクリーンリーダーなどの支援技術によって説明は披露される。

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

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

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

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

4.10.5.3.7 minおよびmax属性

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

具体的に、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.

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

How these range limitations apply depends on whether the element has a multiple attribute.

If the element does not have a multiple attribute specified or if the multiple attribute does not apply

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.

If the element does have a multiple attribute specified and the multiple attribute does apply

Constraint validation: When the element has a minimum, and the result of applying the algorithm to convert a string to a number to any of the strings in the element's values is a number that is less than the minimum, the element is suffering from an underflow.

Constraint validation: When the element has a maximum, and the result of applying the algorithm to convert a string to a number to any of the strings in the element's values is a number that is more than the maximum, the element is suffering from an overflow.

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

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

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

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

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

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

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

The attribute provides the allowed value step for the element, as follows:

  1. If the attribute is absent, then the allowed value step is the default step multiplied by the step scale factor.
  2. Otherwise, if the attribute's value is an ASCII case-insensitive match for the string "any", then there is no allowed value step.
  3. 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.
  4. 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:

  1. 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 and abort these steps.

  2. If the element does not have a multiple attribute specified or if the multiple attribute does not apply, then: 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 and abort these steps.

    Otherwise, the element's type attribute is in the Range state and the element has a multiple attribute specified: run these substeps:

    1. If the element does not have a value content attribute, skip these substeps.

    2. Split on commas the value of the value content attribute.

    3. If the result of the previous step was not exactly two values, or if either gets an error when you apply the algorithm to convert a string to a number, then skip these substeps.

    4. Return the lower of the two numbers obtained in the previous step, and abort these steps.

  3. If a default step base is defined for this element given its type attribute's state, then return it and abort these steps.

  4. Return zero.

How these range limitations apply depends on whether the element has a multiple attribute.

If the element does not have a multiple attribute specified or if the multiple attribute does not apply

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.

If the element does have a multiple attribute specified and the multiple attribute does apply

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 any of the strings in the element's values is a number that, when 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分の精度に制限される。

4.10.5.3.9 list属性

list属性は、ユーザーに提案済みオプションの一覧を示す要素を識別するために使用される。

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

The suggestions source element is the first element in the document 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. The user agent may use the suggestion's label to identify the suggestion if appropriate.

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:

If the element does not have a multiple attribute specified or if the multiple attribute does not apply

When 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 himself.

If the element's type attribute is in the Range state and the element has a multiple attribute specified

When the user selects a suggestion, the user agent must identify which value in the element's values the user intended to update, and must then update the element's values so that the relevant value is changed to the value given by the selected suggestion's value, as if the user had himself set it to that value.

If the element's type attribute is in the Email state and the element has a multiple attribute specified

When 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 himself 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 a user-agent-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="http://www.google.com/" label="Google">
 <option value="http://www.reddit.com/" label="Reddit">
</datalist>

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

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

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

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

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

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

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

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

4.10.5.3.10 placeholder属性

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

placeholder属性は、labelの代替として使用すべきでない。ヒントや他の助言テキストについては、コントロールの次にテキストを置く。

labelの代替としてのplaceholder属性の使用は、高齢ユーザーおよび認知、モビリティー、微細な運動技能や視覚に障害を持つユーザーを含む幅広いユーザーのコントロールのアクセシビリティーおよびユーザービリティーを減らすことがある。コントロールのlabelによって与えられるヒントは毎回表示される一方で、placeholder属性に与えられた短いヒントは、ユーザーが値を入力する前にのみ表示される。さらに、placeholderテキストは予め埋められた値と間違われるかもしれず、一般に実装されるプレースホルダーテキストのデフォルト色が不十分なコントラストを提供し、そして別の可視labelの欠如は、コントロールのフォーカスを設定するために利用可能なヒット領域のサイズを小さくする。

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string or the control is not focused (or both), e.g. by displaying it inside a blank unfocused control and hiding it otherwise.

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

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

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

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

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

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

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

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

コントロールがファイルアップロードコントロールである際に、空文字列以外の任意の値に設定される場合、InvalidStateError例外を投げる。

input . checked [ = value ]

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

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

input . files

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

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

input . valueAsDate [ = value ]

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

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

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

input . valueAsNumber [ = value ]

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

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

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

input . valueLow [ = value ]
input . valueHigh [ = value ]

該当する場合、フォームコントロールのの低いおよび高いコンポーネントを表す数値をそれぞれ返す。そうでなければ、NaNを返す。

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

コントロールが2つのハンドル範囲コントロールでない場合、InvalidStateError例外を投げる。

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

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

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

input . list

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

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:

value

On getting, it must return the current value of the element. On setting, it must 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, and then, if the element has a text entry cursor position, should move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to none.

default

On getting, if the element has a value attribute, it must return that attribute's value; otherwise, it must return the empty string. On setting, it must set the element's value attribute to the new value.

default/on

On getting, if the element has a value attribute, it must return that attribute's value; otherwise, it must return the string "on". On setting, it must set the element's value attribute to the new value.

filename

On getting, it must 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, it must empty the list of selected files; otherwise, it must throw an InvalidStateError exception.

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 file names 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]


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 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, if the valueAsDate attribute applies, 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 the time value of the object (the number of milliseconds from midnight UTC the morning of 1970-01-01 to the time represented by the Date object), otherwise, 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 exception. Otherwise, if the new value is a Not-a-Number (NaN) value, then set the value of the element to the empty string. Otherwise, if the valueAsDate attribute applies, run the algorithm to convert a Date object to a string defined for that state, passing it a Date object whose time value is the new value, and set the value of the element to the resulting 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 valueLow and valueHigh IDL attributes represent the value of the element, interpreted as a comma-separated pair of numbers.

On getting, if the attributes do not apply, as defined for the input element's type attribute's current state, then return zero; otherwise, run the following steps:

  1. Let values be the values of the element, interpreted according to the algorithm to convert a string to a number, as defined by the input element's type attribute's current state.

  2. If the attribute in question is valueLow, return the lowest of the values in values; otherwise, return the highest of the values in values.

On setting, if the attributes do not apply, as defined for the input element's type attribute's current state, then throw an InvalidStateError exception. Otherwise, run the following steps:

  1. Let values be the values of the element, interpreted according to the algorithm to convert a string to a number, as defined by the input element's type attribute's current state.

  2. Let new value be the result of running the algorithm to convert a number to a string, as defined for that state, on the new value.

  3. If the attribute in question is valueLow, replace the lower value in values with new value; otherwise, replace the higher value in values with new value.

  4. Sort values in increasing numeric order.

  5. Let values be the result of running the algorithm to convert a number to a string, as defined by the input element's type attribute's current state, to the values in values.

  6. Set the element's value to the concatenation of the strings in in values, separating each value from the next by a "," (U+002C) character.


The stepDown(n) and stepUp(n) methods, when invoked, must run the following algorithm:

  1. 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 exception, and abort these steps.

  2. If the element has no allowed value step, then throw an InvalidStateError exception, and abort these steps.

  3. If the element has a minimum and a maximum and the minimum is greater than the maximum, then abort these steps.

  4. 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 abort these steps.

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

  6. 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() and more than value otherwise.

    Otherwise (value subtracted from the step base is an integral multiple of the allowed value step), run the following substeps:

    1. Let n be the argument.

    2. Let delta be the allowed value step multiplied by n.

    3. If the method invoked was the stepDown() method, negate delta.

    4. Let value be the result of adding delta to value.

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

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

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

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

4.10.5.5 Common event behaviors

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 Hidden 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 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 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 a task to fire a simple event that bubbles named input at the input element, and any time the user commits the change, the user agent must queue a task to fire a simple event that bubbles named change at the input element.

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 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 a task to first fire a simple event that bubbles named input at the input element, and then fire a simple event that bubbles named change at the input element.

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 the control can be focused and 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 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 a task to fire a simple event that bubbles named input at the input element. 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 field, pasting a new value into the field, or undoing an edit in that field. Some user interactions do not cause changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text in the field 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 a task to first update the value accordingly, then fire a simple event that bubbles named input at the input element, then fire a simple event that bubbles named change at the input element.

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

The task source for these tasks is the user interaction task source.

4.10.6 button要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能、および再関連付け可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしインタラクティブコンテンツの子孫が存在してはならない。
コンテンツ属性
グローバル属性
autofocus - ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled - フォームコントロールが無効であるかどうか
form - form要素とコントロールを関連付ける
formaction - フォーム送信に使用するURL
formenctype - フォーム送信に使用する文字エンコーディングを設定するフォームデータ
formmethod - フォーム送信に使用するHTTPメソッド
formnovalidate - フォーム送信のためのフォームコントロール検証を回避する
formtarget - フォーム送信に対するブラウジングコンテキスト
menu - 要素の指定されたポップアップメニューを指定する
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
type - ボタンの種類
value - フォーム送信に対して使用される値
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
button (デフォルト - 設定しない)、linkmenuitemmenuitemcheckboxmenuitemradioまたはradio
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLButtonElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute DOMString name;
           attribute DOMString type;
           attribute DOMString value;
           attribute HTMLMenuElement? menu;

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

  readonly attribute NodeList labels;
};

button要素は要素のコンテンツによって分類されるボタンを表す

要素はボタンである。

type属性は、アクティブ時のボタンの振る舞いを制御する。この属性は列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。

キーワード 状態 概要
submit Submit Button フォームを送信する。
reset Reset Button フォームをリセットする。
button Button 何もしない。
menu Menu メニューを表示する。

欠損値のデフォルトは、Submit Button状態である。

type属性がSubmit Button状態にある場合、要素は具体的にsubmit buttonである。

Constraint validation: If the type attribute is in the Reset Button state, the Button state, or the Menu state, the element is barred from constraint validation.

When a button element is not disabled, its activation behavior element is to run the steps defined in the following list for the current state of the element's type attribute:

Submit Button

If the element has a form owner and the element's Document is fully active, the element must submit the form owner from the button element.

Reset Button

If the element has a form owner and the element's Document is fully active, the element must reset the form owner.

Button

何もしない。

Menu

The element must follow these steps:

  1. If the button is not being rendered, abort these steps.

  2. If the button element's Document is not fully active, abort these steps.

  3. Let menu be the element's designated pop-up menu, if any. If there isn't one, then abort these steps.

  4. Fire a trusted event with the name show at menu, using the RelatedEvent interface, with the relatedTarget attribute initialised to the button element. The event must be cancelable.

  5. If the event is not canceled, then construct and show the menu for menu, with the button element as the subject.

form属性は、フォームの所有者button要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。autofocus属性はフォーカスを制御する。formactionformenctypeformmethodformnovalidateformtarget属性は、フォーム送信用の属性である。

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

要素のtype属性がSubmit Button状態でない場合、formactionformenctypeformmethodformnovalidateformtargetは指定されてはならない。

value属性はフォーム送信の目的のために要素の値を与える。存在する場合、要素のは要素のvalue属性の値であり、そうでなければ空文字列である。

ボタン自体がフォームの送信を開始するために使用された場合、ボタン(およびその値)はフォームの送信にのみ含まれる。


要素のtype属性がMenu状態である場合、menu属性は要素のメニューを与えるために指定されなければならない。値は、type属性がpopup menu状態にある同じホームサブツリーmenu要素のIDでなければならない。要素のtype属性がMenu状態でない場合、属性を指定してはならない。

A button element's designated pop-up menu is the first element in the button's home subtree whose ID is that given by the button element's menu attribute, if there is such an element and its type attribute is in the popup menu state; otherwise, the element has no designated pop-up menu.


The value and menu IDL attributes must reflect the content attributes of the same name.

typeIDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

次のボタンは、アクティブ時に、"Show hint"のラベルをもち、ダイアログボックスがポップアップ表示される:

<button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

4.10.7 select要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および再関連付け可能フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
0個以上のoptionoptgroup、およびスクリプトサポート要素。
コンテンツ属性
グローバル属性
autofocus - ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled - フォームコントロールが無効であるかどうか
form - form要素とコントロールを関連付ける
multiple - 複数の値を許可するかどうか
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
required - コントロールがフォーム送信に要求されるかどうか
size - コントロールのサイズ
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
listbox(デフォルト - 設定しない)またはmenu
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLSelectElement : HTMLElement {
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute boolean multiple;
           attribute DOMString name;
           attribute boolean required;
           attribute unsigned long size;

  readonly attribute DOMString type;

  readonly attribute HTMLOptionsCollection options;
           attribute unsigned long length;
  getter Element? item(unsigned long index);
  HTMLOptionElement? namedItem(DOMString name);
  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  void remove(); // ChildNode overload
  void remove(long index);
  setter creator void (unsigned long index, HTMLOptionElement? option);

  readonly attribute HTMLCollection selectedOptions;
           attribute long selectedIndex;
           attribute DOMString value;

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

  readonly attribute NodeList labels;
};

select要素は、オプション一式の中で選択するためのコントロールを表す。

multiple属性は真偽属性である。属性が存在する場合、select要素は、オプションのリストから0個以上のオプションを選択するためのコントロールを表す。属性が存在しない場合、select要素は、オプションのリストから1つのオプションを選択するためのコントロールを表す

size属性は、ユーザーに表示するためのオプションの数を与える。size属性が指定される場合、0より大きい妥当な負でない整数である値を持たなければならない。

The display size of a select element is the result of applying the rules for parsing non-negative integers to the value of element's size attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.

select要素のオプションのリストは、ツリー順で、select要素のすべてのoption子要素、およびselect要素のすべてのoptgroup要素に属するすべてのoption子要素で構成される。

required属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を選択する必要がある。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、および(もしあれば)select要素のオプションのリストで最初のoptionが空文字列であり、そのoption要素の親ノードがselect要素(かつoptgroup要素でない)場合、そのoptionは、select要素のプレースホルダーのラベルオプションである。

select要素がrequired属性を指定され、multiple属性を指定されず、1である表示サイズを持つ場合、そのselect要素は、プレースホルダーのラベルオプションを持たなければならない。

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

If the multiple attribute is absent, and the element is not disabled, then the user agent should allow the user to pick an option element in its list of options that is itself not disabled. Upon this option element being picked (either through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of the picked option element to true, set its dirtiness to true, and then send select update notifications.

If the multiple attribute is absent, whenever an option element in the select element's list of options has its selectedness set to true, and whenever an option element with its selectedness set to true is added to the select element's list of options, the user agent must set the selectedness of all the other option elements in its list of options to false.

If the multiple attribute is absent and the element's display size is greater than 1, then the user agent should also allow the user to request that the option whose selectedness is true, if any, be unselected. Upon this request being conveyed to the user agent, and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of that option element to false, set its dirtiness to true, and then send select update notifications.

If nodes are inserted or nodes are removed causing the list of options to gain or lose one or more option elements, or if an option element in the list of options asks for a reset, then, if the select element's multiple attribute is absent, the select element's display size is 1, and no option elements in the select element's list of options have their selectedness set to true, the user agent must set the selectedness of the first option element in the list of options in tree order that is not disabled, if any, to true.

If the multiple attribute is present, and the element is not disabled, then the user agent should allow the user to toggle the selectedness of the option elements in its list of options that are themselves not disabled. Upon such an element being toggled (either through a click, or through a menu command, or any other mechanism), and before the relevant user interaction event is queued (e.g. before a related click event), the selectedness of the option element must be changed (from true to false or false to true), the dirtiness of the element must be set to true, and the user agent must send select update notifications.

When the user agent is to send select update notifications, queue a task to first fire a simple event that bubbles named input at the select element, and then fire a simple event that bubbles named change at the select element, using the user interaction task source as the task source.

The reset algorithm for select elements is to go through all the option elements in the element's list of options, set their selectedness to true if the option element has a selected attribute, and false otherwise, set their dirtiness to false, and then have the option elements ask for a reset.

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

disabledでないselect要素はmutableである。

select . type

要素がmultiple属性を持つ場合、"select-multiple"を返し、そうでなければ"select-one"を返す。

select . options

オプションのリストHTMLOptionsCollectionを返す。

select . length [ = value ]

オプションのリストの要素数を返す。

より小さい数に設定する場合、selectでのoption要素数は切り捨てられる。

より大きい数に設定する場合、selectに新しい空白のoption要素を追加する。

element = select . item(index)
select[index]

オプションのリストからのインデックスindexとともにアイテムを返す。アイテムはツリー順にソートされる。

element = select . namedItem(name)

オプションのリストからのIDまたはname nameとともに最初のアイテムを返す。

IDをもつ要素が見つからない場合、nullを返す。

select . add(element [, before ] )

beforeによって与えられるノードの前の要素を挿入する。

before引数は数字でもよく、その場合elementはその数字をもつアイテムの前に挿入され、またはオプションのリストからの要素でもよい。その場合elementはその要素の前に挿入される。

beforeが省略された、null、または範囲外の数字の場合、elementはリストの最後に加えられるだろう。

要素に挿入された要素が親要素の場合、このメソッドはHierarchyRequestError例外を投げるだろう。

select . selectedOptions

選択されたオプションのリストHTMLOptionsCollectionを返す。

select . selectedIndex [ = value ]

もしあるならば、最初に選ばれたアイテムのインデックスを、または選択したアイテムが存在しない場合−1を返す。

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

select . value [ = value ]

もしあれば、最初に選択されたアイテムのを返し、選択されたアイテムが存在しない場合、空文字列を返す。

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

The type IDL attribute, on getting, must return the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple attribute is present.

The options IDL attribute must return an HTMLOptionsCollection rooted at the select node, whose filter matches the elements in the list of options.

The options collection is also mirrored on the HTMLSelectElement object. The supported property indices at any instant are the indices supported by the object returned by the options attribute at that instant.

The length IDL attribute must return the number of nodes represented by the options collection. On setting, it must act like the attribute of the same name on the options collection.

The item(index) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.

The namedItem(name) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.

When the user agent is to set the value of a new indexed property for a given property index index to a new value value, it must instead set the value of a new indexed property with the given property index index to the new value value on the options collection.

Similarly, the add() method must act like its namesake method on that same options collection.

The remove() method must act like its namesake method on that same options collection when it has arguments, and like its namesake method on the ChildNode interface implemented by the HTMLSelectElement ancestor interface Element when it has no arguments.

The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node, whose filter matches the elements in the list of options that have their selectedness set to true.

The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.

On setting, the selectedIndex attribute must set the selectedness of all the option elements in the list of options to false, and then the option element in the list of options whose index is the given new value, if any, must have its selectedness set to true and its dirtiness set to true.

This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.

The value IDL attribute, on getting, must return the value of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return the empty string.

On setting, the value attribute must set the selectedness of all the option elements in the list of options to false, and then the first option element in the list of options, in tree order, whose value is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.

This can result in no element having a selectedness set to true even in the case of the select element having no multiple attribute and a display size of 1.

The multiple, required, and size IDL attributes must reflect the respective content attributes of the same name. The size IDL attribute has a default value of zero.

For historical reasons, the default value of the size IDL attribute does not return the actual size used, which, in the absence of the size content attribute, is either 1 or 4 depending on the presence of the multiple attribute.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

オプションのセットからユーザーが1つのオプションを選択できるselect要素が使用される様子を次に示す。デフォルトのオプションはあらかじめ選択されている。

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

デフォルトのオプションが存在しない場合、プレースホルダーが代わりに使用される:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

ここでは、ユーザーがオプションのセットから任意の数を選択できる。デフォルトで、5つすべてのオプションが選択されている。

<p>
 <label for="allowedunits">Select unit types to enable on this map:</label>
 <select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> Miner </option>
  <option value="2" selected> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4" selected> Max </option>
  <option value="5" selected> Firebot </option>
 </select>
</p>

ときには、ユーザーは1つ以上の項目を選択する必要がある。次の例はそのようなインターフェースを示す。

<p>Select the songs from that you would like on your Act II Mix Tape:</p>
<select multiple required name="act2">
 <option value="s1">It Sucks to Be Me (Reprise)
 <option value="s2">There is Life Outside Your Apartment
 <option value="s3">The More You Ruv Someone
 <option value="s4">Schadenfreude
 <option value="s5">I Wish I Could Go Back to College
 <option value="s6">The Money Song
 <option value="s7">School for Monsters
 <option value="s8">The Money Song (Reprise)
 <option value="s9">There's a Fine, Fine Line (Reprise)
 <option value="s10">What Do You Do With a B.A. in English? (Reprise)
 <option value="s11">For Now
</select>

4.10.8 datalist要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
以下のいずれか:(0個以上のoption要素子孫をもつ)フレージングコンテンツ
または:0個以上のoption要素。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
listbox (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLDataListElement : HTMLElement {
  readonly attribute HTMLCollection options;
};

datalist要素は、他のコントロール用にあらかじめ定義されたオプションを表すoption要素のセットを表す。In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

datalist要素は2つの方法で使用される。最も単純な場合、datalist要素はoption要素の子のみを持つ。

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

より手の込んだ場合、datalist要素はdatalistをサポートしないダウンレベルクライアントに対して表示されるコンテンツを与えられる。この場合、option要素はdatalist要素の内側のselect要素の内側で提供される。

<label>
 Sex:
 <input name=sex list=sexes>
</label>
<datalist id=sexes>
 <label>
  or select from the list:
  <select name=sex>
   <option value="">
   <option>Female
   <option>Male
  </select>
 </label>
</datalist>

datalist要素はinput要素でlist属性を使用するinput要素に接続される。

そのが空文字列でない文字列である、無効でない、datalist要素の子孫である各option要素は、提案を表す。各提案は、ラベルを持つ。

datalist . options

datalistoptions要素のHTMLCollectionを返す。

The options IDL attribute must return an HTMLCollection rooted at the datalist node, whose filter matches option elements.

Constraint validation: If an element has a datalist element ancestor, it is barred from constraint validation.

4.10.9 optgroup要素

カテゴリ
なし。
この要素を使用できるコンテキスト
select要素の子として。
コンテンツモデル
0個以上のoptionおよびスクリプトサポート要素。
コンテンツ属性
グローバル属性
disabled - フォームコントロールが無効であるかどうか
label - ユーザー可視ラベル
text/htmlにおけるタグ省略
optgroup要素が別のoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、optgroup要素の終了タグは省略してもよい。
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLOptGroupElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString label;
};

optgroup要素は、共通のラベルをもつoption要素のグループを表す

option要素の要素のグループは、optgroup要素の子であるoption要素で構成する。

When showing option elements in select elements, user agents should show the option elements of such groups as being related to each other and separate from other option elements.

disabled属性は真偽属性であり、一緒にoption要素のグループを無効にするために使用できる。

label属性を指定しなければならない。その値は、ユーザーインターフェースの目的に対して、グループの名前を与える。User agents should use this attribute's value when labeling the group of option elements in a select element.

The disabled and label attributes must reflect the respective content attributes of the same name.

optgroup要素を選択する方法は存在しない。option要素を選択することができるだけである。optgroup要素は単にoption要素のグループに対するラベルを提供するだけである。

次の断片は、selectドロップダウンウィジェットで3つのコースからレッスンのセットが提供される様子を示す:

<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="▶ Play">
</form>

4.10.10 option要素

カテゴリ
なし。
この要素を使用できるコンテキスト
select要素の子として。
datalist要素の子として。
optgroup要素の子として。
コンテンツモデル
要素がlabel属性およびvalue属性を持つ場合:空。
要素がlabel属性を持つがvalue属性を持たない場合:テキスト
要素がlabel属性を持たない場合:要素内の空白文字でないテキスト
コンテンツ属性
グローバル属性
disabled - フォームコントロールが無効であるかどうか
label - ユーザー可視ラベル
selected - デフォルトでオプションが選択されるかどうか
value - フォーム送信に対して使用される値
text/htmlにおけるタグ省略
option要素が別のoption要素またはoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、option要素の終了タグは省略してもよい。
許可されるARIAロール属性値:
option(デフォルト - 設定しない)、menuitemmenuitemradioまたはseparator
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
[NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString label;
           attribute boolean defaultSelected;
           attribute boolean selected;
           attribute DOMString value;

           attribute DOMString text;
  readonly attribute long index;
};

option要素は、select要素でまたはdatalist要素で提案のリストの一部としてオプションを表す

selectの定義で記載されるある特定の状況において、option要素は、select要素のプレースホルダーのラベルオプションとなることができる。プレースホルダーのラベルオプションは、実際のオプションを表さないが、selectコントロールのラベルを表す。

disabled属性は、真偽属性である。要素のdisabled属性が存在する場合、またはdisabled属性であるoptgroup要素の子が存在する場合、option要素は無効である。

An option element that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

label属性は、要素のラベルを提供する。属性が存在する場合、optionラベルlabelコンテンツ属性の値であり、存在しない場合、要素のtext IDL属性の値となる。

labelコンテンツ属性が指定される場合、空であってはならない。

value属性は、その要素の値を提供する。属性が存在する場合、optionvalueコンテンツ属性の値であり、存在しない場合、要素のtext IDL属性の値となる。

selected属性は、真偽属性である。これは、要素のデフォルトselectednessを表す。

The dirtiness of an option element is a boolean state, initially false. It controls whether adding or removing the selected content attribute has any effect.

The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, if its dirtiness is false, its selectedness must be set to true. Whenever an option element's selected attribute is removed, if its dirtiness is false, its selectedness must be set to false.

The Option() constructor, when called with three or fewer arguments, overrides the initial state of the selectedness state to always be false even if the third argument is true (implying that a selected attribute is to be set). The fourth argument can be used to explicitly set the initial selectedness state when using the constructor.

multiple属性が指定されないselect要素は、そのselected属性設定を持つ複数の子孫option要素を持ってはならない。

An option element's index is the number of option elements that are in the same list of options but that come before it in tree order. If the option element is not in a list of options, then the option element's index is zero.

option . selected

要素が選択される場合trueを返し、そうでなければfalseを返す。

要素の現在の状態を上書きする設定が可能である。

option . index

そのselect要素のoptionsリストで要素のインデックスを返す。

option . form

存在するならば、要素のform要素を返し、またはそうでなければnullを返す。

option . text

スペースが相殺されscript要素がスキップされる場合を除き、textContentと同じ。

option = new Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )

新しいoption要素を返す。

text引数は要素のコンテンツを設定する。

value引数はvalue属性を設定する。

defaultSelected引数はselected属性を設定する。

selected引数は要素が選択されるかどうかを設定する。省略される場合、たとえdefaultSelected引数がtrueであっても、要素は選択されない。

The disabled IDL attribute must reflect the content attribute of the same name. The defaultSelected IDL attribute must reflect the selected content attribute.

The label IDL attribute, on getting, must return the element's label. On setting, the element's label content attribute must be set to the new value.

The value IDL attribute, on getting, must return the element's value. On setting, the element's value content attribute must be set to the new value.

The selected IDL attribute, on getting, must return true if the element's selectedness is true, and false otherwise. On setting, it must set the element's selectedness to the new value, set its dirtiness to true, and then cause the element to ask for a reset.

The index IDL attribute must return the element's index.

The text IDL attribute, on getting, must return the result of stripping and collapsing whitespace from the concatenation of data of all the Text node descendants of the option element, in tree order, excluding any that are descendants of descendants of the option element that are themselves script elements in the HTML namespace or script elements in the SVG namespace.

On setting, the text attribute must act as if the textContent IDL attribute on the element had been set to the new value.

The form IDL attribute's behavior depends on whether the option element is in a select element or not. If the option has a select element as its parent, or has an optgroup element as its parent and that optgroup element has a select element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that select element. Otherwise, it must return null.

A constructor is provided for creating HTMLOptionElement objects (in addition to the factory methods from DOM such as createElement()): Option(text, value, defaultSelected, selected). When invoked as a constructor, it must return a new HTMLOptionElement object (a new option element). If the first argument is not the empty string, the new object must have as its only child a Text node whose data is the value of that argument. Otherwise, it must have no children. If the value argument is present, the new object must have a value attribute set with the value of the argument as its value. If the defaultSelected argument is true, the new object must have a selected attribute set with no value. If the selected argument is true, the new object must have its selectedness set to true; otherwise the selectedness must be set to false, even if the defaultSelected argument is true. The element's document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found.

4.10.11 textarea要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および再関連付け可能フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Text
コンテンツ属性
グローバル属性
autocomplete - フォームオートフィル機能に対するヒント
autofocus - ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
cols - 行あたりの最大文字数
dirname - フォーム送信で、要素の方向を送信するために使用するフォームフィールドの名前
disabled - フォームコントロールが無効であるかどうか
form - form要素とコントロールを関連付ける
inputmode - 入力モダリティーを選択するためのヒント
maxlength - 値の最大長さ
minlength - 値の最小長さ
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
placeholder - フォームコントロール内に配置されるユーザー可視ラベル
readonly - ユーザーによって編集される値を許可するかどうか
required - コントロールがフォーム送信に要求されるかどうか
rows - 表示する行数
wrap - どのようにフォームコントロール値がフォーム送信に対して包まれるか
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
textbox (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLTextAreaElement : HTMLElement {
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute unsigned long cols;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString inputMode;
           attribute long maxLength;
           attribute long minLength;
           attribute DOMString name;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long rows;
           attribute DOMString wrap;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  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);
};

The textarea element represents a multiline plain text edit control for the element's raw value. コントロールのコンテンツは、コントロールのデフォルトの値を表す。

The raw value of a textarea control must be initially the empty string.

This element has rendering requirements involving the bidirectional algorithm.

readonly属性は、テキストがユーザーによって編集できるかどうかを制御するために使用される真偽属性である。

この例において、テキストフィールドは読み取り専用ファイルを表すので、読み取り専用としてマークされる:

Filename: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return

...</textarea>

Constraint validation: If the readonly attribute is specified on a textarea element, the element is barred from constraint validation.

A textarea element is mutable if it is neither disabled nor has a readonly attribute specified.

When a textarea is mutable, its raw value should be editable by the user: the user agent should allow the user to edit, insert, and remove text, and to insert and remove line breaks in the form of "LF" (U+000A) characters. Any time the user causes the element's raw value to change, the user agent must queue a task to fire a simple event that bubbles named input at the textarea element. User agents may wait for a suitable break in the user's interaction before queuing the task; 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.

A textarea element has a dirty value flag, which must be initially set to false, and must be set to true whenever the user interacts with the control in a way that changes the raw value.

When the textarea element's textContent IDL attribute changes value, if the element's dirty value flag is false, then the element's raw value must be set to the value of the element's textContent IDL attribute.

The reset algorithm for textarea elements is to set the element's raw value to the value of the element's textContent IDL attribute.

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:

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

  2. Queue a task to fire a simple event that bubbles named input at the textarea element.

cols属性は行あたりの予想最大文字数を指定する。cols属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.

The user agent may use the textarea element's character width as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.

rows属性は、表示する行数を指定する。rows属性が指定される場合、その値は0より大きい妥当な非負整数でなければならない。If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.

Visual user agents should set the height of the control to the number of lines given by character height.

wrap属性は、2つのキーワードと状態をもつ真偽属性である。softキーワードはSoft状態に対応し、hardキーワードはHard状態に対応する。欠損値のデフォルトは、Soft状態である。

Soft状態は、テキストが送信される際、(レンダリングにおいてテキストが依然として包まれることはできるが)textareaでテキストが包まれないことを示す。

Hard状態は、textareaでテキストがユーザーエージェントによって追加される改行を持つので、テキストが送信される際にテキストが包まれることを示す。

要素のwrap属性がHard状態にある場合、cols属性を指定しなければならない。

For historical reasons, the element's value is normalised in three different ways for three different purposes. The raw value is the value as it was originally set. It is not normalized. The API value is the value used in the value IDL attribute. It is normalised so that line breaks use "LF" (U+000A) characters. Finally, there is the value, as used in form submission and other processing models in this specification. It is normalised so that line breaks use U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs, and in addition, if necessary given the element's wrap attribute, additional line breaks are inserted to wrap the text at the given width.

The element's API value is defined to be the element's raw value with the following transformation applied:

  1. Replace every U+000D CARRIAGE RETURN "CRLF" (U+000A) character pair from the raw value with a single "LF" (U+000A) character.

  2. Replace every remaining U+000D CARRIAGE RETURN character from the raw value with a single "LF" (U+000A) character.

The element's value is defined to be the element's raw value with the textarea wrapping transformation applied. The textarea wrapping transformation is the following algorithm, as applied to a string:

  1. Replace every occurrence of a "CR" (U+000D) character not followed by a "LF" (U+000A) character, and every occurrence of a "LF" (U+000A) character not preceded by a "CR" (U+000D) character, by a two-character string consisting of a U+000D CARRIAGE RETURN "CRLF" (U+000A) character pair.

  2. If the element's wrap attribute is in the Hard state, insert U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs into the string using a UA-defined algorithm so that each line has no more than character width characters. For the purposes of this requirement, lines are delimited by the start of the string, the end of the string, and U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs.

maxlength属性は、textarea要素の汚い値フラグによって制御されるフォームコントロールmaxlength属性である。

textarea要素が最大許容値の長さを持つ場合、その要素の子は、テキストエリアラッピング変形をもつ要素のtextContentIDL属性値に属するコード単位の長さに等しいか、または要素の最大許容値の長さよりも小さくなるようにしなければならない。

minlength属性は、textarea要素の汚い値フラグによって制御されるフォームコントロールminlength属性である。

required属性は真偽属性である。指定される場合、ユーザーがフォームを送信する前に値を入力する必要がある。

Constraint validation: If the element has its required attribute specified, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.

コントロールが値を持たない場合、placeholder属性は、データ入力を伴うユーザーの支援を意図する短いヒント(単語や短いフレーズ)を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。

placeholder属性は、labelの代替として使用すべきでない。ヒントや他の助言テキストについては、コントロールの次にテキストを置く。

labelの代替としてのplaceholder属性の使用は、高齢ユーザーおよび認知、モビリティー、微細な運動技能や視覚に障害を持つユーザーを含む幅広いユーザーのコントロールのアクセシビリティーおよびユーザービリティーを減らすことがある。コントロールのlabelによって与えられるヒントは毎回表示される一方で、placeholder属性に与えられた短いヒントは、ユーザーが値を入力する前にのみ表示される。さらに、placeholderテキストは予め埋められた値と間違われるかもしれず、一般に実装されるプレースホルダーテキストのデフォルト色が不十分なコントラストを提供し、そして別の可視labelの欠如は、コントロールのフォーカスを設定するために利用可能なヒット領域のサイズを小さくする。

User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other "CR" (U+000D) and "LF" (U+000A) characters in the hint, must be treated as line breaks when rendering the hint.

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

textarea . type

文字列"textarea"を返す。

textarea . value

要素の現在の値を返す。

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

The cols, placeholder, required, rows, and wrap attributes must reflect the respective content attributes of the same name. The cols and rows attributes are limited to only non-negative numbers greater than zero. The cols attribute's default value is 20. The rows attribute's default value is 2. The dirName IDL attribute must reflect the dirname content attribute. The inputMode IDL attribute must reflect the inputmode content attribute, 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 readOnly IDL attribute must reflect the readonly content attribute.

The type IDL attribute must return the value "textarea".

The defaultValue IDL attribute must act like the element's textContent IDL attribute.

The value attribute must, on getting, return the element's API value; on setting, it must set the element's raw value to the new value, set the element's dirty value flag to true, and should then move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to none.

The textLength IDL attribute must return the code-unit length of the element's API value.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

ここで、フォームで無制限の自由形式のテキスト入力に対して使用されるtextareaの例は次のとおり:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>

コメントの最大長を指定するために、maxlength属性を使用できる:

<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>

デフォルト値を与えるために、テキストを要素内に含むことができる:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>

また、最小の長さを与えることもできる。ここで、文字はユーザーによって記入される必要がある。テンプレート(これは最小の長さよりも短くなっている)が設けられているが、フォームを送信するには不十分である。

<textarea required minlength="500">Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...</textarea>

プレースホルダーは明示的なテンプレートを提供することなく、ユーザーへの基本的な形を提案するために同様に与えることができる。

<textarea placeholder="Dear Francine,

They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?

Love,
Daddy"></textarea>

ブラウザが値とともに要素の方向を送信させる場合、dirnameに属性を指定できる:

<p>If you have any comments, please let us know (you may use either English or Hebrew for your comments):
<textarea cols=80 name=comments dirname=comments.dir></textarea></p>

4.10.12 keygen要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
記載ラベル付け可能送信可能リセット可能および再関連付け可能フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
autofocus - ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
challenge - 生成され署名される公開鍵とともにパッケージ化する文字列
disabled - フォームコントロールが無効であるかどうか
form - form要素とコントロールを関連付ける
keytype - 生成する暗号鍵の種類
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
text/htmlにおけるタグ省略
終了タグなし。
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLKeygenElement : HTMLElement {
           attribute boolean autofocus;
           attribute DOMString challenge;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString keytype;
           attribute DOMString name;

  readonly attribute DOMString type;

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

  readonly attribute NodeList labels;
};

keygen要素は、鍵ペアジェネレーターコントロールを表す。コントロールのフォームが送信されると、秘密鍵はローカルキーストアに保存され、公開鍵はパッケージ化されてサーバに送信される。

challenge属性を指定してもよい。その値は送信鍵と一緒にパッケージにされる。

keytype属性は、列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。ユーザーエージェントは、これらの値をサポートする必要はないが、サポートするアルゴリズムに対応する値を単に認識しなければならない。

キーワード 状態
rsa RSA

無効値のデフォルトは、unknown状態である。サポートされる場合、欠損値のデフォルトRSA状態であり、そうでなければunknown状態である。

この仕様は、ユーザーエージェントがサポートすべき鍵の種類を指定しない―ユーザーエージェントが鍵の種類をまったくサポートしないことも可能である。

The user agent may expose a user interface for each keygen element to allow the user to configure settings of the element's key pair generator, e.g. the key length.

The reset algorithm for keygen elements is to set these various configuration settings back to their defaults.

The element's value is the string returned from the following algorithm:

  1. Use the appropriate step from the following list:

    If the keytype attribute is in the RSA state

    Generate an RSA key pair using the settings given by the user, if appropriate, using the md5WithRSAEncryption RSA signature algorithm (the signature algorithm with MD5 and the RSA encryption algorithm) referenced in section 2.2.1 ("RSA Signature Algorithm") of RFC 3279, and defined in RFC 2313. [RFC3279] [RFC2313]

    Otherwise, the keytype attribute is in the unknown state

    The given key type is not supported. Return the empty string and abort this algorithm.

    Let private key be the generated private key.

    Let public key be the generated public key.

    Let signature algorithm be the selected signature algorithm.

  2. If the element has a challenge attribute, then let challenge be that attribute's value. Otherwise, let challenge be the empty string.

  3. Let algorithm be an ASN.1 AlgorithmIdentifier structure as defined by RFC 5280, with the algorithm field giving the ASN.1 OID used to identify signature algorithm, using the OIDs defined in section 2.2 ("Signature Algorithms") of RFC 3279, and the parameters field set up as required by RFC 3279 for AlgorithmIdentifier structures for that algorithm. [X690] [RFC5280] [RFC3279]

  4. Let spki be an ASN.1 SubjectPublicKeyInfo structure as defined by RFC 5280, with the algorithm field set to the algorithm structure from the previous step, and the subjectPublicKey field set to the BIT STRING value resulting from ASN.1 DER encoding the public key. [X690] [RFC5280]

  5. Let publicKeyAndChallenge be an ASN.1 PublicKeyAndChallenge structure as defined below, with the spki field set to the spki structure from the previous step, and the challenge field set to the string challenge obtained earlier. [X690]

  6. Let signature be the BIT STRING value resulting from ASN.1 DER encoding the signature generated by applying the signature algorithm to the byte string obtained by ASN.1 DER encoding the publicKeyAndChallenge structure, using private key as the signing key. [X690]

  7. Let signedPublicKeyAndChallenge be an ASN.1 SignedPublicKeyAndChallenge structure as defined below, with the publicKeyAndChallenge field set to the publicKeyAndChallenge structure, the signatureAlgorithm field set to the algorithm structure, and the signature field set to the BIT STRING signature from the previous step. [X690]

  8. Return the result of base64 encoding the result of ASN.1 DER encoding the signedPublicKeyAndChallenge structure. [RFC4648] [X690]

The data objects used by the above algorithm are defined as follows. These definitions use the same "ASN.1-like" syntax defined by RFC 5280. [RFC5280]

PublicKeyAndChallenge ::= SEQUENCE {
    spki SubjectPublicKeyInfo,
    challenge IA5STRING
}

SignedPublicKeyAndChallenge ::= SEQUENCE {
    publicKeyAndChallenge PublicKeyAndChallenge,
    signatureAlgorithm AlgorithmIdentifier,
    signature BIT STRING
}

Constraint validation: The keygen element is barred from constraint validation.

form属性は、フォームの所有者keygen要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。disabled属性は、コントロールが非インタラクティブにするためおよびその値を送信するのを防ぐために使用される。autofocus属性はフォーカスを制御する。

keygen . type

文字列"keygen"を返す。

The challenge IDL attribute must reflect the content attribute of the same name.

The keytype IDL attribute must reflect the content attribute of the same name, limited to only known values.

The type IDL attribute must return the value "keygen".

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

この仕様は、生成された秘密鍵を使用する方法を指定しない。SignedPublicKeyAndChallenge(SPKAC)構造を受信した後、サーバはクライアント証明書を生成し、ダウンロードに対してユーザーに戻って証明書を提供することが期待される。この証明書は、一度ダウンロードして、秘密鍵と一緒に鍵ストアに格納されてから、TLSおよび証明書による認証を使用するサービスへの認証に使用できる。詳細については、MDNの文書などを参照のこと。

鍵ペアを生成するには、ユーザーの鍵ストアに秘密鍵を追加して、サーバーへ公開鍵を送信し、次のようなマークアップを使用できる:

<form action="processkey.cgi" method="post" enctype="multipart/form-data">
 <p><keygen name="key"></p>
 <p><input type=submit value="Submit key..."></p>
</form>

その後、サーバは"key"の値としてパッケージ化されたRSA公開鍵をもつフォームの送信を受信する。上記のように、クライアント証明書を生成するなど、これはさまざまな目的に使用できる。

4.10.13 output要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
記載ラベル付け可能リセット可能、および再関連付け可能フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
コンテンツ属性
グローバル属性
for - 出力が計算されたコントロールフォームを指定する
form - form要素とコントロールを関連付ける
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
status(デフォルト - 設定しない)、 任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLOutputElement : HTMLElement {
  [PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
  readonly attribute HTMLFormElement? form;
           attribute DOMString name;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;

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

  readonly attribute NodeList labels;
};

output要素は、アプリケーションによって実行された計算の結果、またはユーザーアクションの結果を表す

この要素は、前もって実行した他のプログラムの出力を引用するための適切な要素である、samp要素と対比することができる。

forコンテンツ属性は、計算に参加したまたは別の方法で計算に影響を与えた値を表す、計算と要素の結果の間で作られた明示的な関係を与える。for属性を指定する場合は、それぞれが同じDocumentで要素のIDの値を持たなければならない、大文字・小文字区別である一意なスペース区切りトークンの順不同のセットで構成される文字列を含まなければならない。

form属性は、フォームの所有者output要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。

The element has a value mode flag which is either value or default. Initially, the value mode flag must be set to default.

The element also has a default value. Initially, the default value must be the empty string.

When the value mode flag is in mode default, the contents of the element represent both the value of the element and its default value. When the value mode flag is in mode value, the contents of the element represent the value of the element only, and the default value is only accessible using the defaultValue IDL attribute.

Whenever the element's descendants are changed in any way, if the value mode flag is in mode default, the element's default value must be set to the value of the element's textContent IDL attribute.

The reset algorithm for output elements is to set the element's value mode flag to default and then to set the element's textContent IDL attribute to the value of the element's default value (thus replacing the element's child nodes).

output . value [ = value ]

要素の現在の値を返す。

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

output . defaultValue [ = value ]

要素の現在のデフォルト値を返す。

デフォルト値を変更する設定が可能である。

output . type

文字列"output"を返す。

The value IDL attribute must act like the element's textContent IDL attribute, except that on setting, in addition, before the child nodes are changed, the element's value mode flag must be set to value.

The defaultValue IDL attribute, on getting, must return the element's default value. On setting, the attribute must set the element's default value, and, if the element's value mode flag is in the mode default, set the element's textContent IDL attribute as well.

The type attribute must return the string "output".

The htmlFor IDL attribute must reflect the for content attribute.

The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The labels IDL attribute provides a list of the element's labels. The form and name IDL attributes are part of the element's forms API.

シンプルな電卓は、計算結果の表示に対してoutputを使用できる:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output name=o for="a b"></output>
</form>

この例において、結果が入ってくるように、output要素は、リモートサーバからの結果を報告するために使用される:

<output id="result"></output>
<script>
 var primeSource = new WebSocket('ws://primes.example.net/');
 primeSource.onmessage = function (event) {
   document.getElementById('result').value = event.data;
 }
</script>

4.10.14 progress要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしprogress要素の子孫が存在してはならない。
コンテンツ属性
グローバル属性
value - 要素の現在値
max - 範囲の上限
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
progressbar (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLProgressElement : HTMLElement {
           attribute double value;
           attribute double max;
  readonly attribute double position;
  readonly attribute NodeList labels;
};

progress要素は、タスクの完了の進捗を表す。進捗は、進捗が進行しているが(たとえば、タスクが応答するリモートホストを待っているためなど)タスクが完了する前にどの程度作業が残っているのかが明らかでないことを指す不確定であるか、進捗がこれまでに完了している作業率を与える0から最大の範囲における数値であるかのいずれかである。

要素によって表される現行のタスク完了を決定する2つの属性がある。value属性はどの程度タスクが完了しているかを指定し、max属性は、タスクが合計でどの程度のタスクが必要かを指定する。単位は任意であり、指定されない。

有限の進捗バーを作成するためには、現在の進行状況(max属性が指定されている場合は0.0〜1.0の数、または0からmax属性値までの数のいずれか)でvalue属性を追加する。無限の進捗バーを作成するためには、value属性を削除する。

著者はまた、進捗がレガシーユーザーエージェントのユーザーに使用可能になるよう、要素内のテキストとして現在の値と最大値をインラインで含むよう推奨される。

これは自動進行状況を表示するウェブアプリケーションの断片である:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

(この例においてupdateProgress()メソッドは、タスクが進行するにつれて、実際の進捗バーを更新するためにページに他のコードによって呼び出される。)

valueおよびmax属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。value属性が存在する場合、0個以上の値をもたなければならず、かつ存在する場合max属性の値以下を持たなければならない。そうでなければ1.0でなければならない。max属性が存在する場合、ゼロより大きい値を持たなければならない。

progress要素は、タスクの進行状況とは対照的に、適切なゲージである何かのために使用する間違った要素である。たとえば、progressを使用してディスク領域の使用状況を示すことは不適切であろう。代わりに、meter要素は、このようなユースケースで利用可能である。

User agent requirements: If the value attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a determinate progress bar.

If the progress bar is a determinate progress bar and the element has a max attribute, the user agent must parse the max attribute's value according to the rules for parsing floating-point number values. If this does not result in an error, and if the parsed value is greater than zero, then the maximum value of the progress bar is that value. Otherwise, if the element has no max attribute, or if it has one but parsing it resulted in an error, or if the parsed value was less than or equal to zero, then the maximum value of the progress bar is 1.0.

If the progress bar is a determinate progress bar, user agents must parse the value attribute's value according to the rules for parsing floating-point number values. If this does not result in an error, and if the parsed value is less than the maximum value and greater than zero, then the current value of the progress bar is that parsed value. Otherwise, if the parsed value was greater than or equal to the maximum value, then the current value of the progress bar is the maximum value of the progress bar. Otherwise, if parsing the value attribute's value resulted in an error, or a number less than or equal to zero, then the current value of the progress bar is zero.

UA requirements for showing the progress bar: When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.

progress . position

有限の進捗バー(既知の現在値と最大値を持つもの)について、最大値で現在値を除算した結果を返す。

無限の進捗バーは、-1を返す。

If the progress bar is an indeterminate progress bar, then the position IDL attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.

If the progress bar is an indeterminate progress bar, then the value IDL attribute, on getting, must return 0. Otherwise, it must return the current value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.

Setting the value IDL attribute to itself when the corresponding content attribute is absent would change the progress bar from an indeterminate progress bar to a determinate progress bar with no progress.

The max IDL attribute must reflect the content attribute of the same name, limited to numbers greater than zero. The default value for max is 1.0.

The labels IDL attribute provides a list of the element's labels.

4.10.15 meter要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしmeter要素の子孫が存在してはならない。
コンテンツ属性
グローバル属性
value - 要素の現在値
min - 範囲の下限
max - 範囲の上限
low - 低域の上限
high - 高域の下限
optimum - ゲージにおける最適値
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLMeterElement : HTMLElement {
           attribute double value;
           attribute double min;
           attribute double max;
           attribute double low;
           attribute double high;
           attribute double optimum;
  readonly attribute NodeList labels;
};

meter要素は既知の範囲内でスカラー量、または小数の値を表す。たとえば、ディスク使用量、クエリ結果の関連性、または特定の候補を選択するための投票人口の割合などである。

これはまた、ゲージとして知られる。

meter要素は、(進捗バーのように)進行状況を示すために使用すべきでない。その役割に対して、HTMLは独立してprogress要素を提供する。

meter要素はまた、任意の範囲のスカラー値を表すものでない―たとえば、既知の最大値が存在しない限り、重量、高さを報告するためにこれを使用することは誤りであろう。

要素によって表されるゲージの意味を決定する6つの属性がある。

min属性は範囲の下限を指定し、max属性は上限を指定する。value属性は、"測定された"値として示すゲージを持つ値を指定する。

他の3つの属性は、"最適"部分であるゲージの一部を示すために、ゲージの範囲を"低"、"中"、"高"の部分に分割して使用できる。low属性は"低"部分であると考えられる範囲を指定し、high属性は"高"部分であると考えられる範囲を指定する。optimumは、"最適"である位置を与える。それが"高"値より高い場合、より高い値がより良いことを示し、それが"低"マークよりも低い場合、より低い値がより良いことを示す。自然に間にある場合、高くも低くもない値が良いことを示す。

Authoring requirements: The value attribute must be specified. The value, min, low, high, max, and optimum attributes, when present, must have values that are valid floating-point numbers.

加えて、属性値はさらに制約される:

valuevalue属性の数とする。

min属性が指定される場合、minimumをその属性値とする。そうでなければ0とする。

max属性が指定される場合、maximumをその属性値とする。そうでなければ1.0とする。

次の不等式は、必要に応じて保持しなければならない:

最小または最大を指定しない場合、範囲は0~1であると仮定され、したがって値はその範囲内にする必要がある。

著者は、meter要素をサポートしないユーザーエージェントのユーザーのために、要素のコンテンツでゲージの状態のテキスト表現を含むよう推奨される。

マイクロデータとともに使用される場合、meter要素のvalue属性は、要素の機械可読な値を提供する。

次の例は、すべて3/4で満たされる3つのゲージを示す:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>

範囲を与えるものでない(そしてデフォルトの最大値は1であるため、両方のゲージが最大限に達している)ため、次の例は、要素の誤った用法である:

<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->

代わりに、meter要素を含まないか、他のパイに比べてコンテキスト内の寸法を与えるために定義された範囲でmeter要素を使用するかのいずれかだろう。

<p>The grapefruit pie had a radius of 12cm and a height of
2cm.</p>
<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

meter要素内の単位を指定する明示的な方法はないが、単位は自由形式のテキストでtitle属性において指定してもよい。

上記の例は、単位を言及するように拡張できる:

<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>

User agent requirements: User agents must parse the min, max, value, low, high, and optimum attributes using the rules for parsing floating-point number values.

User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)

The minimum value

If the min attribute is specified and a value could be parsed out of it, then the minimum value is that value. Otherwise, the minimum value is zero.

The maximum value

If the max attribute is specified and a value could be parsed out of it, then the candidate maximum value is that value. Otherwise, the candidate maximum value is 1.0.

If the candidate maximum value is greater than or equal to the minimum value, then the maximum value is the candidate maximum value. Otherwise, the maximum value is the same as the minimum value.

The actual value

If the value attribute is specified and a value could be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate actual value is zero.

If the candidate actual value is less than the minimum value, then the actual value is the minimum value.

Otherwise, if the candidate actual value is greater than the maximum value, then the actual value is the maximum value.

Otherwise, the actual value is the candidate actual value.

The low boundary

If the low attribute is specified and a value could be parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low boundary is the same as the minimum value.

If the candidate low boundary is less than the minimum value, then the low boundary is the minimum value.

Otherwise, if the candidate low boundary is greater than the maximum value, then the low boundary is the maximum value.

Otherwise, the low boundary is the candidate low boundary.

The high boundary

If the high attribute is specified and a value could be parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high boundary is the same as the maximum value.

If the candidate high boundary is less than the low boundary, then the high boundary is the low boundary.

Otherwise, if the candidate high boundary is greater than the maximum value, then the high boundary is the maximum value.

Otherwise, the high boundary is the candidate high boundary.

The optimum point

If the optimum attribute is specified and a value could be parsed out of it, then the candidate optimum point is that value. Otherwise, the candidate optimum point is the midpoint between the minimum value and the maximum value.

If the candidate optimum point is less than the minimum value, then the optimum point is the minimum value.

Otherwise, if the candidate optimum point is greater than the maximum value, then the optimum point is the maximum value.

Otherwise, the optimum point is the candidate optimum point.

All of which will result in the following inequalities all being true:

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.

UA requirements for showing the gauge: When representing a meter element to the user, the UA should indicate the relative position of the actual value to the minimum and maximum values, and the relationship between the actual value and the three regions of the gauge.

次のマークアップは:

<h3>Suggested groups</h3>
<menu type="toolbar">
 <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
</menu>
<ul>
 <li>
  <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
     <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
 </li>
 <li>
  <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
     <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
  <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
 </li>
 <li>
  <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
     <a href="/group/mozilla.dev.general/subscribe">join</a></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
 </li>
</ul>

このようにレンダリングされるだろう:

With the <meter> elements rendered as inline green bars of varying lengths.

User agents may combine the value of the title attribute and the other attributes to provide context-sensitive help or inline text detailing the actual values.

たとえば、次の断片で:

<meter min=0 max=60 value=23.2 title=seconds></meter>

1行目に"Value: 23.2 out of 60."、2行目に"seconds"というツールチップを伴うケージをユーザーエージェントに表示させるかもしれない。

The value IDL attribute, on getting, must return the actual value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the value content attribute must be set to that string.

The min IDL attribute, on getting, must return the minimum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the min content attribute must be set to that string.

The max IDL attribute, on getting, must return the maximum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the max content attribute must be set to that string.

The low IDL attribute, on getting, must return the low boundary. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the low content attribute must be set to that string.

The high IDL attribute, on getting, must return the high boundary. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the high content attribute must be set to that string.

The optimum IDL attribute, on getting, must return the optimum value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then the optimum content attribute must be set to that string.

The labels IDL attribute provides a list of the element's labels.

The following example shows how a gauge could fall back to localised or pretty-printed text.

<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
out of 233 257 824 bytes available</meter></p>

4.10.16 fieldset要素

カテゴリ
フローコンテンツ
セクショニングルート
記載および再関連付け可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツの後に続く、任意でlegend要素。
コンテンツ属性
グローバル属性
disabled - フォームコントロールが無効であるかどうか
form - form要素とコントロールを関連付ける
name - フォーム送信およびform.elements APIで使用するフォームコントロール名
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
group(デフォルト - 設定しない)またはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLFieldSetElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString name;

  readonly attribute DOMString type;

  readonly attribute HTMLFormControlsCollection elements;

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

fieldset要素は、任意で共通の名前の下にグループ化されたフォームコントロールのセットを表す

グループの名前がもしあれば、fieldset要素の子である最初のlegend要素によって与えられる。子孫の残りの部分は、グループを形成する。

disabled属性は指定された場合、もしあれば、無効にするために、fieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。

form属性は、フォームの所有者fieldset要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。

fieldset . type

文字列"fieldset"を返す。

fieldset . elements

要素内のフォームコントロールのHTMLFormControlsCollectionを返す。

The disabled IDL attribute must reflect the content attribute of the same name.

The type IDL attribute must return the string "fieldset".

The elements IDL attribute must return an HTMLFormControlsCollection rooted at the fieldset element, whose filter matches listed elements.

The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The form and name IDL attributes are part of the element's forms API.

この例は、関連するコントロールのセットをグループ化するために使用されているfieldset要素を示す:

<fieldset>
 <legend>Display</legend>
 <p><label><input type=radio name=c value=0 checked> Black on White</label>
 <p><label><input type=radio name=c value=1> White on Black</label>
 <p><label><input type=checkbox name=g> Use grayscale</label>
 <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>

次の断片は、fieldsetが有効であるかどうかを制御する、凡例内でチェックボックスを持つフィールドセットを示す。fieldset要素のコンテンツは、必須のテキストフィールドと任意の年/月コントロールで構成される。

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

fieldset要素はまたネストできる。前のものの拡張例は次のとおり:

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

この例において、外側の"Use Club Card"チェックボックスがチェックされない場合、2つのネストされたfieldsetのlegendで2つのラジオボタンを含む、外側のfieldset内部のすべては無効になる。しかし、チェックボックスがチェックされる場合、ラジオボタンが両方とも有効に設定され、有効にするよう2つの内部fieldsetのどちらが選択できるようになる。

4.10.17 legend要素

カテゴリ
なし。
この要素を使用できるコンテキスト
fieldset要素の最初の子として。
コンテンツモデル
フレージングコンテンツ
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLLegendElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
};

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.

legend . form

存在するならば、要素のform要素を返し、またはそうでなければnullを返す。

The form IDL attribute's behavior depends on whether the legend element is in a fieldset element or not. If the legend has a fieldset element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that fieldset element. Otherwise, it must return null.

4.10.18 フォームコントロールのインフラストラクチャ

4.10.18.1 フォームコントロールの値

多くのフォームコントロールは、checkednessを持つ。(後者は、input要素によってのみ使用される。)これらは、ユーザーがコントロールと対話する方法を記述するために使用される。

input要素のmultiple属性に直面する制約バリデーションの動作を定義するために、input要素はまた、別々に定義された複数のを持つことができる。

select要素はを持たない。そのoption要素のselectednessが代わりに使用されるものである。

4.10.18.2 可変性

フォームコントロールはmutableとして指定することができる。

これは、ユーザーがフォームコントロールのまたはcheckednessを変更できるかどうか、またはコントロールを自動的に事前入力できるかどうかを(要素が指定されようとなかろうと依存する本仕様での定義及び要件によって)判定する。

4.10.18.3 制御とフォームの関連付け

フォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができる。フォーム関連要素form要素に関連付けられない場合、そのフォーム所有者はnullであると言われる。

A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but, if it is reassociateable, may have a form attribute specified to override this.

この機能は、著者がネストされたform要素に対するサポートの不足を回避することができる。

再関連付け可能フォーム関連要素が指定されたform属性を持つ場合、その属性の値は、その要素の所有者Documentform要素のIDでなければならない。

The rules in this section are complicated by the fact that although conforming documents will never contain nested form elements, it is quite possible (e.g. using a script that performs DOM manipulation) to generate documents that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a form-associated element being associated with a form element that is not its ancestor.

When a form-associated element is created, its form owner must be initialised to null (no owner).

When a form-associated element is to be associated with a form, its form owner must be set to that form.

When a form-associated element or one of its ancestors is inserted into a Document, then the user agent must reset the form owner of that form-associated element. The HTML parser overrides this requirement when inserting form controls.

When an element changes its parent node resulting in a form-associated element and its form owner (if any) no longer being in the same home subtree, then the user agent must reset the form owner of that form-associated element.

When a reassociateable form-associated element's form attribute is set, changed, or removed, then the user agent must reset the form owner of that element.

When a reassociateable form-associated element has a form attribute and the ID of any of the elements in the Document changes, then the user agent must reset the form owner of that form-associated element.

When a reassociateable form-associated element has a form attribute and an element with an ID is inserted into or removed from the Document, then the user agent must reset the form owner of that form-associated element.

When the user agent is to reset the form owner of a form-associated element, it must run the following steps:

  1. If the element's form owner is not null, and either the element is not reassociateable or its form content attribute is not present, and the element's form owner is its nearest form element ancestor after the change to the ancestor chain, then do nothing, and abort these steps.

  2. Let the element's form owner be null.

  3. If the element is reassociateable, has a form content attribute, and is itself in a Document, then run these substeps:

    1. If the first element in the Document to have an ID that is case-sensitively equal to the element's form content attribute's value is a form element, then associate the form-associated element with that form element.

    2. Abort the "reset the form owner" steps.

  4. Otherwise, if the form-associated element in question has an ancestor form element, then associate the form-associated element with the nearest such ancestor form element.

  5. Otherwise, the element is left unassociated.

In the following non-conforming snippet:

...
 <form id="a">
  <div id="b"></div>
 </form>
 <script>
  document.getElementById('b').innerHTML =
     '<table><tr><td><form id="c"><input id="d"></table>' +
     '<input id="e">';
 </script>
...

The form owner of "d" would be the inner nested form "c", while the form owner of "e" would be the outer form "a".

This happens as follows: First, the "e" node gets associated with "c" in the HTML parser. Then, the innerHTML algorithm moves the nodes from the temporary document to the "b" element. At this point, the nodes see their ancestor chain change, and thus all the "magic" associations done by the parser are reset to normal ancestor associations.

This example is a non-conforming document, though, as it is a violation of the content models to nest form elements.

element . form

要素のフォーム所有者を返す。

存在しない場合nullを返す。

Reassociateable form-associated elements have a form IDL attribute, which, on getting, must return the element's form owner, or null if there isn't one.

4.10.19 フォーム制御の共通属性

4.10.19.1 名前フォーム制御:name属性

nameコンテンツ属性は、フォームの送信form要素のelementsオブジェクトで使用されるような、フォームコントロールの名前を与える。属性が指定される場合、その値は空の文字列であってはならない。

nameに対して任意の空でない値が許可されるが、名前"_charset_"と"isindex"は特別である:

isindex

application/x-www-form-urlencodedメカニズムを使用して送信されるフォームの最初のコントロールでTextコントロールの名前として使用される場合、この値は、名前なしで、このコントロールの値をのみを含む送信を引き起こす。

_charset_

value属性のないHiddenコントロールの名前として使用される場合、この値は、送信文字エンコーディングから成る送信の間の値を自動的に与えられる。

The name IDL attribute must reflect the name content attribute.

4.10.19.2 要素の方向を送信する:dirname属性

dirname属性は要素の方向の送信を有効にし、フォーム送信の間にこの値を含むフィールド名を与える。そのような属性が指定される場合、その値は空文字列であってはならない。

この例において、フォームはテキストフィールドと送信ボタンを含む:

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

ユーザーがフォームを送信する際、ユーザーエージェントは、"comment"、"comment.dir"、"mode"と呼ばれる3つのフィールドを含む。よって、ユーザーが"Hello"を打ち込んだ場合、送信ボディはこのようになるかもしれない:

comment=Hello&comment.dir=ltr&mode=add

ユーザーが手動で右から左へ記述方向に切り替え、"مرحبًا"を入力した場合、送信本体はこのようになるかもしれない:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add
4.10.19.3 ユーザー入力長さの制限:maxlength属性

dirty value flagによって制御される、フォームコントロールmaxlength属性は、ユーザーが入力できる文字数の制限を宣言する。

要素がフォームコントロールmaxlength属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最大許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最大許容値の長さは存在しない。

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

User agents may prevent the user from causing the element's value to be set to a value whose code-unit length is greater than the element's maximum allowed value length.

In the case of textarea elements, this is the value, not the raw value, so the textarea wrapping transformation is applied before the maximum allowed value length is checked.

4.10.19.4 最小入力長の要件を設定する:minlength属性

dirty value flagによって制御されるフォームコントロールminlength属性は、ユーザーが入力できる文字数の下限を宣言する。

minlength属性はrequired属性を暗示しない。フォームコントロールが一切minlength属性を持たない場合、値は依然として省略できる。minlength属性は、ユーザーがすべて値を入力した後にのみ蹴る。空文字列が許可されない場合、required属性も設定する必要がある。

要素がフォームコントロールminlength属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最小許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最小許容値の長さは存在しない。

要素が最大許容値の長さ最小許容値の長さの両方を持つ場合、最小許容値の長さ最大許容値の長さ以下でなければならない。

Constraint validation: If an element has a minimum allowed value length, its value is not the empty string, and the code-unit length of the element's value is less than the element's minimum allowed value length, then the element is suffering from being too short.

この例において、4つのテキストフィールドが存在する。1つめは必須であり、少なくとも5文字である必要がある。他の3つは任意だが、ユーザーは1つを記入する場合、ユーザーは少なくとも10文字を入力する必要がある。

<form action="/events/menu.cgi" method="post">
 <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
 <p><label>Describe what you would like for breakfast, if anything:
    <textarea name="breakfast" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for lunch, if anything:
    <textarea name="lunch" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for dinner, if anything:
    <textarea name="dinner" minlength="10"></textarea></label></p>
 <p><input type=submit value="Submit Request"></p>
</form>
4.10.19.5 フォーム制御の有効化および無効化:disabled属性

disabledコンテンツ属性は、真偽属性である。

フォームコントロールのdisabled属性が設定される場合、またはフォームコントロールがdisabled属性を設定されるfieldset要素の子孫であり、かつもしあればそのfieldset要素の所有する最初のlegend要素の子に属する子孫でない場合、フォームコントロールは無効である。

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Constraint validation: If an element is disabled, it is barred from constraint validation.

The disabled IDL attribute must reflect the disabled content attribute.

4.10.19.6 フォームの送信

フォーム送信のための属性は、form要素上と送信ボタン上(フォーム送信ボタンを表す要素、たとえば、type属性のinput要素がSubmit Button状態にある)の両方を指定できる。

form要素で指定されてもよいフォーム送信のための属性は、actionenctypemethodnovalidatetargetである。

送信ボタンで指定されてもよい対応するフォーム送信のための属性は、formactionformenctypeformmethodformnovalidateformtargetである。省略した場合、これらはform要素の対応する属性で指定された値をデフォルトとする。


指定される場合、actionおよびformactionコンテンツ属性は、潜在的にスペースで囲まれた妥当な空でないURLである値を持たなければならない。

要素が送信ボタンでありかつそのような属性を持つ場合、要素のactionはその要素のformaction属性値である。すなわちactionがそのような属性を持つ場合、そのフォーム所有者action属性値であり、そうでなければ空文字列である。


methodおよびformmethodコンテンツ属性以下のキーワードおよび状態をもつ列挙属性である:

これら属性に対する無効値のデフォルトは、GET状態である。method属性の対する欠損値のデフォルトもまたGET状態である。(formmethod属性に対する欠損値のデフォルトは存在しない。)

要素のメソッドはこれらの状態のいずれかである。要素が送信ボタンでありかつformmethod属性を持つ場合、要素のメソッドはその属性の状態である。そうでなければ、フォーム所有者method属性状態である。

ここで検索クエリがURLに提出されるように、method属性は明示的にデフォルト値"get"を指定するために使用される:

<form method="get" action="/search.cgi">
 <p><label>Search terms: <input type=search name=q></label></p>
 <p><input type=submit></p>
</form>

一方で、ユーザーのメッセージがHTTPリクエストのボディに送信されるように、ここでmethod属性は、値"post"を指定するために使用される:

<form method="post" action="/post-message.cgi">
 <p><label>Message: <input type=text name=m></label></p>
 <p><input type=submit value="Submit message"></p>
</form>

この例において、formdialogとともに使用される。フォームの送信時に、method属性の"dialog" キーワードは、自動的に閉じるダイアログを持つために使用される。

<dialog id="ship">
 <form method=dialog>
  <p>A ship has arrived in the harbour.</p>
  <button type=submit value="board">Board the ship</button>
  <button type=submit value="call">Call to the captain</button>
 </form>
</dialog>
<script>
 var ship = document.getElementById('ship');
 ship.showModal();
 ship.onclose = function (event) {
   if (ship.returnValue == 'board') {
     // ...
   } else {
     // ...
   }
 };
</script>

enctypeおよびformenctypeコンテンツ属性以下のキーワードおよび状態をもつ列挙属性である:

これら属性に対する無効値のデフォルトは、application/x-www-form-urlencoded状態である。enctype属性に対する欠損値のデフォルトはまた、application/x-www-form-urlencoded状態である。(formenctype属性に対する欠損値のデフォルトは存在しない。)

要素のenctypeはこれらの状態のいずれかである。要素が送信ボタンでありかつformenctype属性を持つ場合、要素のenctypeはその属性の状態である。そうでなければ、フォーム所有者enctype属性状態である。


指定される場合、targetおよびformtargetコンテンツ属性は、妥当なコンテンツ名またはキーワードである値を持たなければならない。

要素が送信ボタンでありそのような属性を持つ場合、要素のターゲットは要素のformtarget属性の値である。それがそのような属性を持つ場合、または、そのフォーム所有者target属性の値である。またはDocumenttarget属性をもつbase要素を含む場合、最初のそのようなbase要素のtarget属性の値である。そのような要素が存在しない場合、空文字列である。


novalidateおよびformnovalidate属性は真偽属性である。存在する場合、フォームが送信時に検証されないことを示す。

要素が送信ボタンでありかつ要素のformnovalidate属性が存在する場合、または要素のフォーム所有者novalidate属性が存在する場合、要素のno-validate stateはtrueである。そうでなければfalseである。

属性がフォームでデータを完全に入力していないにもかかわらず、ユーザーが自分の進捗状況を保存できるように、この属性は検証の制約を持つフォーム上のボタン"保存"を含めると便利である。次の例は、2つの必須フィールドを持つ単純なフォームを示す。3つのボタンがある。1つは、両方のフィールドに値が入力されている必要があるフォームを提出するためのもの、1つはユーザーが戻ってきて、後で埋めることができるようにフォームを保存するためのもの、1つは完全にフォームをキャンセルするためのものである。

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the document's address must be returned instead. The target IDL attribute must reflect the content attribute of the same name. The method and enctype IDL attributes must reflect the respective content attributes of the same name, limited to only known values. The encoding IDL attribute must reflect the enctype content attribute, limited to only known values. The noValidate IDL attribute must reflect the novalidate content attribute. The formAction IDL attribute must reflect the formaction content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the document's address must be returned instead. The formEnctype IDL attribute must reflect the formenctype content attribute, limited to only known values. The formMethod IDL attribute must reflect the formmethod content attribute, limited to only known values. The formNoValidate IDL attribute must reflect the formnovalidate content attribute. The formTarget IDL attribute must reflect the formtarget content attribute.

4.10.19.6.1 フォームコントロールを自動フォーカスする:autofocus属性

autofocusコンテンツ属性は、ページが読み込まれるとすぐに、または自身を見つけてその中でdialogを表示されるとすぐに、コントロールをフォーカスすることを著者に許可し、ユーザーが手動でメインコントロールにフォーカスすることなしに入力をすぐに開始できるようにする。

autofocus属性は真偽属性である。

要素の直近の祖先オートフォーカス範囲のルート要素は、その要素がdialog要素である場合、要素そのものであり、そうでなければ、もしあれば要素の直近の祖先dialog要素であり、そうでなければ要素のルート要素である。

両方がautofocus属性を指定される同じ直近の祖先オートフォーカス範囲のルート要素をもつ2つの要素が存在してはならない。

When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:

  1. Let target be the element's Document.

  2. If target has no browsing context, abort these steps.

  3. If target's browsing context has no top-level browsing context (e.g. it is a nested browsing context with no parent browsing context), abort these steps.

  4. If target's active sandboxing flag set has the sandboxed automatic features browsing context flag, abort these steps.

  5. If target's origin is not the same as the origin of the Document of the currently focused element in target's top-level browsing context, abort these steps.

  6. If target's origin is not the same as the origin of the active document of target's top-level browsing context, abort these steps.

  7. If the user agent has already reached the last step of this list of steps in response to an element being inserted into a Document whose top-level browsing context's active document is the same as target's top-level browsing context's active document, abort these steps.

  8. If the user has indicated (for example, by starting to type in a form control) that he does not wish focus to be changed, then optionally abort these steps.

  9. Queue a task that checks to see if the element is focusable, and if so, runs the focusing steps for that element. User agents may also change the scrolling position of the document, or perform some other action that brings the element to the user's attention. The task source for this task is the user interaction task source.

This handles the automatic focusing during document load. The show() and showModal() methods of dialog elements also processes the autofocus attribute.

Focusing the control does not imply that the user agent must focus the browser window if it has lost focus.

The autofocus IDL attribute must reflect the content attribute of the same name.

次の断片において、文書が読み込まれるとき、テキストコントロールにフォーカスされる。

<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">
4.10.19.7 入力モダリティ:inputmode属性

inputmodeコンテンツ属性は、ユーザーがフォームコントロールに内容を入力するための最も参考になる入力機構の種類を指定する列挙属性である。

User agents must recognise all the keywords and corresponding states given below, but need not support all of the corresponding states. If a keyword's state is not supported, the user agent must act as if the keyword instead mapped to the given state's fallback state, as defined below. This fallback behaviour is transitive.

For example, if a user agent with a QWERTY keyboard layout does not support text prediction and automatic capitalization, then it could treat the latin-prose keyword in the same way as the verbatim keyword, following the chain Latin ProseLatin TextLatin Verbatim.

属性に対して可能なキーワードと状態を以下の表に示す。キーワードが最初の列に示される。そのキーワードの行に属する2列目のセルで与えられる状態、およびその行の3列目のセルに示すフォールバック状態をもつ状態にそれぞれ対応する。

キーワード 状態 フォールバック状態 説明
verbatim 逐語ラテン デフォルト 非散文コンテンツの英数字ラテン文字入力、たとえばユーザー名、パスワード、製品コードなど。
latin ラテンテキスト 逐語ラテン 一部のタイピング補助対応(たとえばテキスト予測など)をともなう、ユーザーの優先言語でラテンスクリプトを入力する。自由形式テキスト検索フィールドなど、人間とコンピュータのコミュニケーションを意図する。
latin-name ラテン名 ラテンテキスト (各単語でユーザーの連絡先リストと自動大文字化からのテキスト予測など)有効な人間の名前の入力を意図されるタイピング補助とともに、ユーザーの優先言語でラテン文字を入力する。顧客名フィールドなどの状況のために意図される。
latin-prose ラテン文 ラテンテキスト (文の最初でテキスト予測と自動大文字化など)有効な人間同士のコミュニケーションを意図されるタイピング補助とともに、ユーザーの優先言語でラテン文字を入力する。電子メールやインスタントメッセージなどの状況のために意図される。
full-width-latin 全角ラテン ラテン文 (文の最初でテキスト予測と自動大文字化など)有効な人間同士のコミュニケーションを意図されるタイピング補助とともに、ユーザーの第二言語でラテン文字を入力する。CJKテキストの内側に埋め込まれるラテンテキストに意図される。
kana かな デフォルト 漢字に変換するためのサポートとともに、全角文字を使用する、かなやローマ字入力、一般にひらがな入力。日本語テキスト入力を対象とする。
kana-name Kana Name かな 漢字に変換するためのサポートおよび人名の入力を意図する(たとえば、ユーザーの連絡先リストからのテキスト予測)目的を入力するとともに、全角文字を使用する、かなやローマ字入力、一般にひらがな入力。顧客名フィールドなどの状況のために意図される。
katakana カタカナ かな 漢字に変換するためのサポートとともに、全角文字を使用する、カタカナ入力。日本語テキスト入力を対象とする。
numeric 数値 デフォルト 0から9までの数字、ユーザーの好みの桁区切り文字、および負数を示す文字のためのキーを含む、数値入力。たとえクレジットカード番号などの、数値コードを意図する。(番号については、"<input type=number>"を優先する。)
tel 電話番号 数値 0から9までの数字、"#"文字、および"*"文字のためのキーを含む、電話番号入力。一部のロケールで、これはまた、アルファベットのニーモニックラベル(たとえば、米国で、"2"キーはまた、歴史的に文字A、B、およびCで標識されている)を含むことができる。まれに必要。"<input type=tel>"を代わりに使用する。
email 電子メール デフォルト "@"文字および"."文字のような、電子メールアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。まれに必要。"<input type=email>"を代わりに使用する。
url URL デフォルト "/"と"."文字、"www"や".co.uk"のようなドメイン名の中で見つかった文字列を簡単に入力するための、ウェブアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。まれに必要。"<input type=url>"を代わりに使用する。

専用の入力コントロールが(上記の表に記載される)通常のユースケースのために存在するように、上記の最後3つのキーワードは、完全を期すためだけに提供され、めったに必要ない。

User agents must all support the Default input mode state, which corresponds to the user agent's default input modality. This specification does not define how the user agent's default modality is to operate. The missing value default is the default input mode state.

User agents should use the input modality corresponding to the state of the inputmode attribute when exposing a user interface for editing the value of a form control to which the attribute applies. An input modality corresponding to a state is one designed to fit the description of the state in the table above. This value can change dynamically; user agents should update their interface as the attribute changes state, unless that would go against the user's wishes.

4.10.19.8 オートフィル
4.10.19.8.1 オートフィルフォームコントロール:autocomplete属性

ユーザーエージェントは、たとえば以前のユーザー入力に基づくユーザーのアドレスを事前に入力するなど、ユーザーにフォームの記入を助けるための機能を持つこともある。autocompleteコンテンツ属性は、ユーザーエージェントへのヒントの手段に、または実際にそのような機能を提供するかどうかに使用できる。

属性が存在する場合は、文字列"off"にASCII大文字・小文字不区別で一致する単一トークン、または文字列"on"にASCII大文字・小文字不区別で一致する単一トークン、または下記の順序でのいずれかからなるスペース区切りトークンのセットである値を持たなければならない:

  1. 任意で、フィールドが名前グループに属することを意味する、最初の8文字が文字列"section-"とASCII大文字・小文字不区別で一致するトークン。

    たとえば、フォームで2つの配送先住所がある場合、次のようにマークアップできる:

    <fieldset>
     <legend>Ship the blue gift to...</legend>
     <p> <label> Address:     <input name=ba autocomplete="section-blue shipping street-address"> </label>
     <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level1"> </label>
     <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
    </fieldset>
    <fieldset>
     <legend>Ship the red gift to...</legend>
     <p> <label> Address:     <input name=ra autocomplete="section-red shipping street-address"> </label>
     <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level1"> </label>
     <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
    </fieldset>
  2. 任意で、以下の文字列のいずれかとASCII大文字・小文字不区別で一致するトークン:

  3. 次の2つのオプションについていずれか:

"off"キーワードは、コントロールの入力データが特にセンシティブ(たとえば、核兵器のアクティベーションコード)である、またはキーワードが再利用されることのない値(たとえば、銀行のログインのためのワンタイムキー)であり、したがってユーザーは、値を事前入力するためにユーザーエージェントを当てにできる代わりに、明示的にデータを毎回入力する必要がある、または文書は独自のオートコンプリートのメカニズムを提供し、ユーザーエージェントに自動補完値を提供したくないことのいずれかを示す。

"on"キーワードは、ユーザーエージェントが、オートコンプリート値をユーザーに提供することを許可するが、ユーザーが入力すると予想されるだろうデータの種類についてのさらなる情報を提供しないことを示す。ユーザーエージェントは、自動補完が提案する値を決定するためにヒューリスティックを使用する必要があるだろう。

上記のオートフィルフィールド名は、ユーザーエージェントがオートコンプリート値をユーザに提供することができ、かつどの値の種類が期待されるかを指定することを示す。以下の表に記載されるようにキーワードは相互に関連する。このテーブルの行に記載された各フィールド名は、"意味"で分類される列で、その行のセルに与えられた意味に対応する。一部のフィールドは、他のフィールドのサブパーツに対応する。たとえば、クレジットカードの有効期限は、有効期限の年と月の両方を1つのフィールドに与える("cc-exp")、または月を与える("cc-exp-month")および年を与える("cc-exp-year")の2つのフィールドとして表すことができる。このような場合、より広いフィールドの名前は、より狭いフィールドを定義する複数行を取り扱う。

一般に、狭いフィールドは西洋バイアスを公開する傾向があるので、著者は狭いフィールドよりもむしろ広いフィールドを使用することを推奨する。たとえば、その順序(例として、しばしば最初に名前と呼ばれる)で、指定された名前と姓を持つように一部の欧米文化で一般的であるが、多くの文化では、最初の家族の名前を入れて、与えられた名前2番目に、および他の多くは、単に一つの名前を(mononym)を持つ。したがって、単一のフィールドを持つことは、より柔軟性がある。

一部のフィールドは、特定のフォームコントロールに適している。コントロールが、次の表でオートフィルフィールドを記述した最初の行の5列目でオートフィルフィールドにリストされたグループに属していない場合、オートフィルフィールド名は、コントロールに不適切である。 どのようなコントロールが各グループに分類されるかは、下記の表に記載される。

フィールド名 意味 標準的なフォーマット 標準的なフォーマット例 コントロールグループ
"name" フルネーム 自由形式テキスト、改行なし Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA テキスト
"honorific-prefix" 敬称または爵位(たとえば、"Mr."、"Ms."、"Dr."、"Mlle") 自由形式テキスト、改行なし Sir テキスト
"given-name" Given name(一部の西洋文化において、first nameとして知られる) 自由形式テキスト、改行なし Timothy テキスト
"additional-name" Additional names(一部の西洋文化において、middle namesとして知られる) 自由形式テキスト、改行なし John テキスト
"family-name" Family name(一部の西洋文化において、last nameまたはsurnameとして知られる) 自由形式テキスト、改行なし Berners-Lee テキスト
"honorific-suffix" 接頭辞(たとえば、"Jr."、"B.Sc."、"MBASW"、"II") 自由形式テキスト、改行なし OM, KBE, FRS, FREng, FRSA テキスト
"nickname" ニックネーム、スクリーンネーム、ハンドル:フルネームの代わりに使用する一般的に短い名前 自由形式テキスト、改行なし Tim テキスト
"organization-title" 職種(たとえば"Software Engineer"、"Senior Vice President"、"Deputy Managing Director") 自由形式テキスト、改行なし Professor テキスト
"username" ユーザー名 自由形式テキスト、改行なし timbl テキスト
"new-password" 新しいパスワード(たとえば、アカウントの作成またはパスワードの変更の場合) 自由形式テキスト、改行なし GUMFXbadyrS3 Password
"current-password" usernameフィールドによって識別されるアカウントに対する現在のパスワード(たとえば、ログイン時) 自由形式テキスト、改行なし qwerty Password
"organization" 人、アドレス、またはこのフィールドに関連付けられた他のフィールドの連絡先情報に対応する会社名 自由形式テキスト、改行なし World Wide Web Consortium テキスト
"street-address" 所在地住所(複数行、改行を保持) 自由形式テキスト 32 Vassar Street
MIT Room 32-G524
複数行
"address-line1" 所在地住所(フィールドごとに1行) 自由形式テキスト、改行なし 32 Vassar Street テキスト
"address-line2" 自由形式テキスト、改行なし MIT Room 32-G524 テキスト
"address-line3" 自由形式テキスト、改行なし テキスト
"address-level4" 4つの行政レベルでのアドレスの中で、最もきめ細かい行政レベル自由形式テキスト、改行なし テキスト
"address-level2" 3つ以上の行政レベルの住所で、第3行政レベル 自由形式テキスト、改行なし テキスト
"address-level2" 2つ以上の管理レベルの住所で、第2管理レベル。2つの行政レベルをもつ国で、これは通常、関連する所在地住所が見つけられる、市、町、村、または他の地方になる 自由形式テキスト、改行なし Cambridge テキスト
"address-level1" 住所で最も広範な行政レベル、すなわち位置関係が発見される中の地方。たとえば、アメリカで、これは州(state)になる。スイスで州(canton)になる。英国で、郵便町(post town)になる。 自由形式テキスト、改行なし MA テキスト
"country" 国コード 妥当なISO 3166-1-alpha-2国コード [ISO3166] US テキスト
"country-name" 国名 自由形式テキスト、改行なし。一部の場合でcountry由来 US テキスト
"postal-code" 郵便番号、ZIPコード、CEDEXコード(CEDEXの場合、"CEDEX"を、関連する場合を、address-level2フィールドに追加する) 自由形式テキスト、改行なし 02139 テキスト
"cc-name" 決済手段に与えられるようなフルネーム 自由形式テキスト、改行なし Tim Berners-Lee テキスト
"cc-given-name" 決済手段に与えられるようなGiven name (一部の西洋文化において、first nameとして知られる) 自由形式テキスト、改行なし Tim テキスト
"cc-additional-name" 決済手段に与えられるようなAdditional names(一部の西洋文化において、middle namesとして知られる) 自由形式テキスト、改行なし テキスト
"cc-family-name" 決済手段に与えられるようなFamily name (一部の西洋文化において、last nameまたはsurnameとして知られる) 自由形式テキスト、改行なし Berners-Lee テキスト
"cc-number" 決済手段(たとえば、クレジットカード番号、銀行口座番号)を識別するコード ASCII数字 4114360123456785 テキスト
"cc-exp" 決済手段の有効期限 妥当な月文字列 2014-12
"cc-exp-month" 決済手段の有効期限の月コンポーネント 1から12までの範囲で妥当な整数 12 数値
"cc-exp-year" 決済手段の有効期限の年コンポーネント 0より大きい妥当な整数 2014 数値
"cc-csc" 決済手段のセキュリティーコード(カードのセキュリティーコード(CSC)、カード検証コード(CVC)、カード検証値(CVV)、署名欄コード(SPC)、クレジットカードID(CCID)などとして知られている) ASCII数字 419 テキスト
"cc-type" 決済手段の種類 自由形式テキスト、改行なし Visa テキスト
"language" 優先言語 妥当なBCP 47言語タグ[BCP47] en テキスト
"bday" 誕生日 妥当な日付文字列 1955-06-08 日付
"bday-day" 誕生日の日コンポーネント 1から31までの範囲で妥当な整数 8 数値
"bday-month" 誕生日の月コンポーネント 1から12までの範囲で妥当な整数 6 数値
"bday-year" 誕生日の年コンポーネント 0より大きい妥当な整数 1955 数値
"sex" 性別認識(たとえば、女性、ファファフィネ) 自由形式テキスト、改行なし Male テキスト
"url" ホームページや会社に対応する他のウェブページ、人、アドレス、またはこのフィールドに関連付けられる他のフィールドでの連絡先情報 妥当なURL http://www.w3.org/People/Berners-Lee/ URL
"photo" 写真、アイコン、会社に対応する他の画像、人、アドレス、またはこのフィールドに関連付けられる他のフィールドの連絡先情報 妥当なURL http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg URL
"tel" 国コードを含む完全な電話番号 ASCII数字およびU+0020 SPACE characters、接頭辞として"+"(U+002B)文字 +1 617 253 5702 Tel
"tel-country-code" 電話番号の国コードコンポーネント ASCII数字、接頭辞として"+"(U+002B)文字 +1 テキスト
"tel-national" 適用される場合は国の内部の接頭辞とともに、国コードコンポーネントなしの電話番号 ASCII数字およびU+0020 SPACE characters 617 253 5702 テキスト
"tel-area-code" 適用される場合は国の内部の接頭辞とともに、電話番号のエリアコードコンポーネント ASCII数字 617 テキスト
"tel-local" 国コードと市外局番コンポーネントなしの電話番号 ASCII数字 2535702 テキスト
"tel-local-prefix" 2つのコンポーネントに分割される場合、市外局番に続く電話番号のコンポーネントの最初の部分 ASCII数字 253 テキスト
"tel-local-suffix" 2つのコンポーネントに分割される場合、市外局番に続く電話番号のコンポーネントの2番目の部分 ASCII数字 5702 テキスト
"tel-extension" 電話番号の内部拡張コード ASCII数字 1000 テキスト
"email" 電子メールアドレス 妥当な電子メールアドレス timbl@w3.org 電子メール
"impp" インスタントメッセージングプロトコルのエンドポイントを表すURL(たとえば、"aim:goim?screenname=example"またはxmpp:fred@example.net") 妥当なURL irc://example.org/timbl,isuser URL

次のようにグループがコントロールに対応する:

テキスト
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
textarea要素
select要素
複数行
textarea要素
select要素
Password
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Password状態のtype属性であるinput要素
textarea要素
select要素
URL
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がURL状態であるinput要素
textarea要素
select要素
電子メール
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がE-mail状態であるinput要素
textarea要素
select要素
Tel
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がTelephone状態であるinput要素
textarea要素
select要素
数値
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がNumber状態であるinput要素
textarea要素
select要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がMonth状態であるinput要素
textarea要素
select要素
日付
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がDate状態であるinput要素
textarea要素
select要素

autocomplete属性が省略される場合、要素のフォーム所有者autocomplete属性に関する状態に対応するデフォルト値が("on"または"off"のいずれか)の代わりに使用される。フォーム所有者が存在しない場合、値"on"が使用される。


住所レベルaddress-level1" – "address-level4"フィールドは、住所の場所を記述するために使用される。異なるロケールは、異なるレベルの数を持つ。たとえば、アメリカは2つのレベル(州および町)を使用し、イギリスは、住所に応じて1つまたは2つ(郵便町、場合によっては地域)を使用しを使用し、中国は3つ(県、市、区)を使用することができる。"address-level1"フィールドは、最も広い行政区分を表す。異なるロケールは異なる方法でフィールドを順序づける。たとえば、アメリカの町(レベル2)は、州(レベル1)に先行して使用する。一方日本において都道府県(レベル1)は、地区(レベル3)に先行する市(レベル2)に先行する。著者は、(ユーザーが国を変えるのに応じてフィールドを隠す、表示するおよび再配置する)国の慣習と一致する方法で提示された形態を提供することを勧める。

4.10.19.8.2 Processing model

Each input, select, and textarea element has an autofill hint set, an autofill scope, an autofill field name, and an IDL-exposed autofill value.

The autofill field name specifies the specific kind of data expected in the field, e.g. "street-address" or "cc-exp".

The autofill hint set identifies what address or contact information type the user agent is to look at, e.g. "shipping fax" or "billing".

The autofill scope identifies the group of fields that are to be filled with the information from the same source, and consists of the autofill hint set with, if applicable, the "section-*" prefix, e.g. "billing", "section-parent shipping", or "section-child shipping home".

These values are defined as the result of running the following algorithm:

  1. If the element has no autocomplete attribute, then jump to the step labeled default.

  2. Let tokens be the result of splitting the attribute's value on spaces.

  3. If tokens is empty, then jump to the step labeled default.

  4. Let index be the index of the last token in tokens.

  5. If the indexth token in tokens is not an ASCII case-insensitive match for one of the tokens given in the first column of the following table, or if the number of tokens in tokens is greater than the maximum number given in the cell in the second column of that token's row, then jump to the step labeled default. Otherwise, let field be the string given in the cell of the first column of the matching row, and let category be the value of the cell in the third column of that same row.

    Token Maximum number of tokens カテゴリ
    "off" 1 Off
    "on" 1 Automatic
    "name" 3 Normal
    "honorific-prefix" 3 Normal
    "given-name" 3 Normal
    "additional-name" 3 Normal
    "family-name" 3 Normal
    "honorific-suffix" 3 Normal
    "nickname" 3 Normal
    "organization-title" 3 Normal
    "username" 3 Normal
    "new-password" 3 Normal
    "current-password" 3 Normal
    "organization" 3 Normal
    "street-address" 3 Normal
    "address-line1" 3 Normal
    "address-line2" 3 Normal
    "address-line3" 3 Normal
    "address-level4" 3 Normal
    "address-level3" 3 Normal
    "address-level2" 3 Normal
    "address-level1" 3 Normal
    "country" 3 Normal
    "country-name" 3 Normal
    "postal-code" 3 Normal
    "cc-name" 3 Normal
    "cc-given-name" 3 Normal
    "cc-additional-name" 3 Normal
    "cc-family-name" 3 Normal
    "cc-number" 3 Normal
    "cc-exp" 3 Normal
    "cc-exp-month" 3 Normal
    "cc-exp-year" 3 Normal
    "cc-csc" 3 Normal
    "cc-type" 3 Normal
    "language" 3 Normal
    "bday" 3 Normal
    "bday-day" 3 Normal
    "bday-month" 3 Normal
    "bday-year" 3 Normal
    "sex" 3 Normal
    "url" 3 Normal
    "photo" 3 Normal
    "tel" 4 Contact
    "tel-country-code" 4 Contact
    "tel-national" 4 Contact
    "tel-area-code" 4 Contact
    "tel-local" 4 Contact
    "tel-local-prefix" 4 Contact
    "tel-local-suffix" 4 Contact
    "tel-extension" 4 Contact
    "email" 4 Contact
    "impp" 4 Contact
  6. If category is Off, let the element's autofill field name be the string "off", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "off". Then, abort these steps.

  7. If category is Automatic, let the element's autofill field name be the string "on", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "on". Then, abort these steps.

  8. Let scope tokens be an empty list.

  9. Let hint tokens be an empty set.

  10. Let IDL value have the same value as field.

  11. If the indexth token in tokens is the first entry, then skip to the step labeled done.

  12. Decrement index by one.

  13. If category is Contact and the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    1. Let contact be the matching string from the list above.

    2. Insert contact at the start of scope tokens.

    3. Add contact to hint tokens.

    4. Let IDL value be the concatenation of contact, a U+0020 SPACE character, and the previous value of IDL value (which at this point will always be field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

  14. If the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    The substeps are:

    1. Let mode be the matching string from the list above.

    2. Insert mode at the start of scope tokens.

    3. Add mode to hint tokens.

    4. Let IDL value be the concatenation of mode, a U+0020 SPACE character, and the previous value of IDL value (which at this point will either be field or the concatenation of contact, a space, and field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

  15. If the indexth entry in tokens is not the first entry, then jump to the step labeled default.

  16. If the first eight characters of the indexth token in tokens are not an ASCII case-insensitive match for the string "section-", then jump to the step labeled default.

  17. Let section be the indexth token in tokens, converted to ASCII lowercase.

  18. Insert section at the start of scope tokens.

  19. Let IDL value be the concatenation of section, a U+0020 SPACE character, and the previous value of IDL value.

  20. Done: Let the element's autofill hint set be hint tokens.

  21. Let the element's autofill scope be scope tokens.

  22. Let the element's autofill field name be field.

  23. Let the element's IDL-exposed autofill value be IDL value.

  24. Abort these steps.

  25. Default: Let the element's IDL-exposed autofill value be the empty string, and its autofill hint set and autofill scope be empty.

  26. Let form be the element's form owner, if any, or null otherwise.

  27. If form is not null and form's autocomplete attribute is in the off state, then let the element's autofill field name be "off".

    Otherwise, let the element's autofill field name be "on".


For the purposes of autofill, a control's data depends on the kind of control:

An input element with its type attribute in the E-mail state and with the multiple attribute specified
The element's values.
Any other input element
A textarea element
The element's value.
A select element with its multiple attribute specified
The option elements in the select element's list of options that have their selectedness set to true.
Any other select element
The option element in the select element's list of options that has its selectedness set to true.

When an element's autofill field name is "off", the user agent should not remember the control's data, and should not offer past values to the user.

In addition, when an element's autofill field name is "off", values are reset when traversing the history.

Banks frequently do not want UAs to prefill login information:

<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>

When an element's autofill field name is not "off", the user agent may store the control's data, and may offer previously stored values to the user.

For example, suppose a user visits a page with this control:

<select name="country">
 <option>Afghanistan
 <option>Albania
 <option>Algeria
 <option>Andorra
 <option>Angola
 <option>Antigua and Barbuda
 <option>Argentina
 <option>Armenia
 <!-- ... -->
 <option>Yemen
 <option>Zambia
 <option>Zimbabwe
</select>

これは次のようにレンダリングされるだろう:

A drop-down control with a long alphabetical list of countries.

Suppose that on the first visit to this page, the user selects "Zambia". On the second visit, the user agent could duplicate the entry for Zambia at the top of the list, so that the interface instead looks like this:

The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top.

When the autofill field name is "on", the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element's name value, the position of the element in the document's DOM, what other fields exist in the form, and so forth.

オートフィルフィールド名が上記のオートフィルフィールドの名前のいずれかに該当する場合、ユーザーエージェントは、以前のこのセクションの表に示すようなフィールド名の意味と一致する提案を提供すべきである。オートフィルのヒントセットは複数の可能な提案の中で選択するために使用されるべきである。

たとえば、ユーザーが一度 "shipping"キーワードを使用するフィールドにアドレスを入力し、"billing" キーワードを使用するフィールドに別のアドレスを入力した場合、後続で、オートフィルヒントがキーワード"shipping"を含むフォームコントロールに提案されるだろう最初のアドレスのみを構成する。しかし、 両方のアドレスは、オートフィルヒントセットがいずれかのキーワードが含まないアドレスに関連したフォームコントロールに対して提案されるかもしれない。

When the user agent autofills form controls, elements with the same form owner and the same autofill scope must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills "country" and "country-name" fields with the same form owner and autofill scope, and the user agent has a value for the country" field(s), then the "country-name" field(s) must be filled using a human-readable name for the same country. When a user agent fills in multiple fields at once, all fields with the same autofill field name, form owner and autofill scope must be filled with the same value.

ユーザーエージェントが2つの電話番号、+1 555 123 1234および+1 555 666 7777を知っていると仮定する。値"123"をとともにautocomplete="shipping tel-local-prefix"を持つフィールド、および値"7777"とともにautocomplete="shipping tel-local-suffix"を持つ同じフォームの別のフィールドを埋めることはユーザエージェントbに対して適合しないだろう。前述の情報が指定される唯一の妥当な事前入力値は、それぞれ、"123"と"1234"、または"666"と"7777"となる。

同様に、ある理由でフォームがcc-exp"フィールドと"cc-exp-month"フィールドの両方を含む、およびユーザーエージェントがフォームを事前入力する場合、前者の月コンポーネントは後者と一致する必要があるだろう。

The "section-*" tokens in the autofill scope are opaque; user agents must not attempt to derive meaning from the precise values of these tokens.

For example, it would not be conforming if the user agent decided that it should offer the address it knows to be the user's daughter's address for "section-child" and the addresses it knows to be the user's spouses' addresses for "section-spouse".

The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the control's data, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing). ユーザーエージェントは、は、ユーザーが入力したかもしれない値を使用するコントロールのみを事前入力しなければならない。

たとえば、select要素が、値"Steve"、"Rebecca"、"Jay"、"Bob"をもつoption要素のみを持ち、かつオートフィルフィールド名"given-name"を持つが、フィールドを事前入力が"Evan"であるようなユーザエージェントのアイデアのみである場合、ユーザーエージェントは、フィールドを事前入力できない。ユーザーが自分自身を行っていることができなかったので、何らかの形で値"Evan"にselect要素を設定することは準拠しないだろう。

A user agent prefilling a form control's value must not cause that control to suffer from a type mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. Except when autofilling for requestAutocomplete(), a user agent prefilling a form control's value must not cause that control to suffer from a pattern mismatch either. Where possible given the control's constraints, user agents must use the format given as canonical in the aforementioned table. Where it's not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used.

たとえば、ユーザーエージェントがユーザーのミドルネームが"Ines"であり、フォームコントロールを事前入力しようとする試みる場合、このようになる:

<input name=middle-initial maxlength=1 autocomplete="additional-name">

ユーザーエージェントは"I"を"Ines"に変換し、このように事前入力できるだろう。

よち複雑な例では、月の値となる。ユーザーエージェントが、ユーザーの誕生日が2012年7月27日であることを知っている場合、わずかに異なる値を持つ以下のコントロールのすべてを事前入力しよう試み、この情報から駆動する。

<input name=b type=month autocomplete="bday">
2012-07 状態が月/年の組み合わせのみを受け入れるので、日は破棄される。
<select name=c autocomplete="bday">
 <option>Jan
 <option>Feb
 ...
 <option>Jul
 <option>Aug
 ...
</select>
July ユーザーエージェントは、12のオプションがあることを知らせて7を選ぶ、または文字列(改行とスペースに続く3文字"Jul")のいずれかユーザーエージェントのサポートされる言語のいずれかで月の名前(July)と一致する終わりを認識する、または一部の他の同様の機構を介するいずれかによって、列挙されたオプションから月を選ぶ。
<input name=a type=number min=1 max=12 autocomplete="bday-month">
7 ユーザーエージェントは、フィールドのように、範囲1から12の数字を"July"に変換する。
<input name=a type=number min=0 max=11 autocomplete="bday-month">
6 ユーザーエージェントは、フィールドのように、範囲0から11の数字を"July"に変換する。
<input name=a type=number min=1 max=11 autocomplete="bday-month">
フォームが期待するものとして良い推測ができないため、ユーザーエージェントはフィールドに入力しない。

ユーザーエージェントは、ユーザーが要素のオートフィルフィールド名を上書き可能にしてもよい。たとえばページの作成者の異議にもかかわらず記憶されるおよび事前に入力されるよう許可するために"off"から"on"に変更すること、または値を記憶しないよう常に"off"にするなど。しかし、サイトの環境設定にかかわらず、すべての値が常に記憶されるる場合、ユーザーに対して重要なセキュリティ上の影響があるため、ユーザーエージェントは、"off"から"on"または他の値にオートフィルフィールド名を簡単にユーザーに上書きさせるべきではない。

autocompleteIDL属性は、取得時に、要素のIDL公開オートフィル値を返さなければならず、設定時に、同じ名前のコンテンツ属性を反映しなければならない。

4.10.19.8.3 User interface for bulk autofill

When the requestAutocomplete() method on a form element is invoked, the user agent must run the following steps:

  1. Let form be the element on which the method was invoked.

  2. If any of the following conditions are met, then queue a task to fail the autofill request on form with the reason "disabled", and abort these steps:

    • the algorithm is not allowed to show a popup

    • form's Document is not fully active

    • form's autocomplete attribute is in the off state

    • the user has disabled this feature for this form's Document's origin

    • the user agent does not support this form's fields (e.g. the form has different fields whose autofill scope use different "section-*" tokens)

    • the form was obtained via unencrypted channels and the user agent does not support autofill in such situations

    • another instance of this algorithm is already being run for form

    User agents are encouraged to log the precise cause in a developer console, to aid debugging.

  3. Let pending autofills be an initially empty list of submittable elements, each annotated with a string known as the original autocomplete value.

  4. For each element that matches the following criteria, add the element to pending autofills, with the original autocomplete value annotation being the value of the element's autocomplete attribute:

  5. Return, but continue running these steps asynchronously.

  6. Provide an interface for the user to efficiently fill in some or all of the fields listed in pending autofills. Await the user's input.

  7. Queue a task to run the following steps:

    1. If any of the following conditions are met, then fail the autofill request on form with the reason "disabled", and abort these steps: