1. 4.10 フォーム
      1. 4.10.1 導入
        1. 4.10.1.1 フォームのユーザーインターフェイスを記述する
        2. 4.10.1.2 フォームに対するサーバー側処理の実装
        3. 4.10.1.3 サーバーと通信するためのフォームの設定
        4. 4.10.1.4 クライアント側のフォーム検証
        5. 4.10.1.5 フォームコントロールのクライアント側オートフィルを有効にする
        6. 4.10.1.6 モバイルデバイス上のユーザーエクスペリエンスを向上させる
        7. 4.10.1.7 フィールドタイプ、オートフィルのフィールド名、および入力モダリティーの違い
        8. 4.10.1.8 日付、時刻、数値の形式
      2. 4.10.2 カテゴリー
      3. 4.10.3 form要素
      4. 4.10.4 label要素
      5. 4.10.5 input要素
        1. 4.10.5.1 type属性の状態
          1. 4.10.5.1.1 Hidden状態(type=hidden
          2. 4.10.5.1.2 Text(type=text)状態とSearch状態(type=search
          3. 4.10.5.1.3 Telephone状態(type=tel
          4. 4.10.5.1.4 URL状態(type=url
          5. 4.10.5.1.5 E-mail状態(type=email
          6. 4.10.5.1.6 Password状態(type=password
          7. 4.10.5.1.7 Date状態(type=date
          8. 4.10.5.1.8 Month状態(type=month
          9. 4.10.5.1.9 Week状態(type=week
          10. 4.10.5.1.10 Time状態(type=time
          11. 4.10.5.1.11 Local Date and Time状態(type=datetime-local
          12. 4.10.5.1.12 Number状態(type=number
          13. 4.10.5.1.13 Range状態(type=range
          14. 4.10.5.1.14 Color state (type=color)
          15. 4.10.5.1.15 Checkbox状態(type=checkbox
          16. 4.10.5.1.16 Radio Button状態(type=radio
          17. 4.10.5.1.17 File Upload状態(type=file
          18. 4.10.5.1.18 Submit Button状態(type=submit
          19. 4.10.5.1.19 Image Button状態(type=image
          20. 4.10.5.1.20 Reset Button状態(type=reset
          21. 4.10.5.1.21 Button状態(type=button
        2. 4.10.5.2 Implementation notes regarding localization of form controls
        3. 4.10.5.3 共通input要素属性
          1. 4.10.5.3.1 maxlengthおよびminlength属性
          2. 4.10.5.3.2 size属性
          3. 4.10.5.3.3 readonly属性
          4. 4.10.5.3.4 required属性
          5. 4.10.5.3.5 multiple属性
          6. 4.10.5.3.6 pattern属性
          7. 4.10.5.3.7 minおよびmax属性
          8. 4.10.5.3.8 step属性
          9. 4.10.5.3.9 list属性
          10. 4.10.5.3.10 placeholder属性
        4. 4.10.5.4 共通input要素API
        5. 4.10.5.5 Common event behaviors
      6. 4.10.6 button要素
      7. 4.10.7 select要素
      8. 4.10.8 datalist要素
      9. 4.10.9 optgroup要素
      10. 4.10.10 option要素
      11. 4.10.11 textarea要素
      12. 4.10.12 output要素
      13. 4.10.13 progress要素
      14. 4.10.14 meter要素
      15. 4.10.15 fieldset要素
      16. 4.10.16 legend要素
      17. 4.10.17 フォームコントロールのインフラストラクチャー
        1. 4.10.17.1 フォームコントロールの値
        2. 4.10.17.2 可変性
        3. 4.10.17.3 制御とフォームの関連付け
      18. 4.10.18 フォーム制御の共通属性
        1. 4.10.18.1 名前フォーム制御:name属性
        2. 4.10.18.2 要素の方向を送信する:dirname属性
        3. 4.10.18.3 ユーザー入力長さの制限:maxlength属性
        4. 4.10.18.4 最小入力長の要件を設定する:minlength属性
        5. 4.10.18.5 フォーム制御の有効化および無効化:disabled属性
        6. 4.10.18.6 フォームの送信
          1. 4.10.18.6.1 フォームコントロールを自動フォーカスする:autofocus属性
        7. 4.10.18.7 入力モダリティー:inputmode属性
        8. 4.10.18.8 オートフィル
          1. 4.10.18.8.1 オートフィルフォームコントロール:autocomplete属性
          2. 4.10.18.8.2 Processing model
      19. 4.10.19 APIs for the text control selections
      20. 4.10.20 制約
        1. 4.10.20.1 定義
        2. 4.10.20.2 制約検証
        3. 4.10.20.3 制約検証API
        4. 4.10.20.4 セキュリティー
      21. 4.10.21 フォームの送信
        1. 4.10.21.1 導入
        2. 4.10.21.2 Implicit submission
        3. 4.10.21.3 Form submission algorithm
        4. 4.10.21.4 Constructing the form data set
        5. 4.10.21.5 Selecting a form submission encoding
        6. 4.10.21.6 URLエンコードフォームデータ
        7. 4.10.21.7 マルチパートフォームデータ
        8. 4.10.21.8 プレーンテキストのフォームデータ
      22. 4.10.22 フォームをリセットする
    2. 4.11 インタラクティブ要素
      1. 4.11.1 details要素
      2. 4.11.2 summary要素
      3. 4.11.3 menu要素
      4. 4.11.4 menuitem要素
      5. 4.11.5 コンテキストメニュー
        1. 4.11.5.1 コンテキストメニューを宣言する
        2. 4.11.5.2 Processing model
        3. 4.11.5.3 RelatedEventインターフェイス
      6. 4.11.6 コマンド
        1. 4.11.6.1 ファセット
        2. 4.11.6.2 Using the a element to define a command
        3. 4.11.6.3 Using the button element to define a command
        4. 4.11.6.4 Using the input element to define a command
        5. 4.11.6.5 Using the option element to define a command
        6. 4.11.6.6 Using the menuitem element to define a command
        7. 4.11.6.7 Using the accesskey attribute on a label element to define a command
        8. 4.11.6.8 Using the accesskey attribute on a legend element to define a command
        9. 4.11.6.9 Using the accesskey attribute to define a command on other elements
      7. 4.11.7 dialog要素

4.10 フォーム

Spec bugs: 12271

Support: formsChrome for Android (limited) 57+Chrome (limited) 4+UC Browser for Android 11.4+iOS Safari (limited) 4.0+Firefox (limited) 4+IE (limited) 10+Samsung Internet (limited) 4+Opera Mini NoneAndroid Browser (limited) 4.4+Edge (limited) 12+Safari (limited) 4+Opera (limited) 15+

Source: caniuse.com

4.10.1 導入

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

A form is a component of a Web page that has form controls, such as text, buttons, checkboxes, range, or color picker controls. さらなる処理(たとえば、検索または計算結果を返す)に対してサーバーに送信できるデータを提供して、ユーザーはそのようなフォームで情報を交換できる。スクリプトがユーザーエクスペリエンスを補強するか、またはサーバーにデータを送信する以外の意義に対してフォームを使用できるようなAPIが利用可能であるが、多くの場合クライアント側のスクリプトは必要ない。

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

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

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

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

すべてのフォームは、内部にコントロールを配置されたform要素で始まる。Most controls are represented by the input element, which by default provides a text control. コントロールをラベル付けするために、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>

The textarea element can be used to provide a multiline text control. この文脈において、配送指示を与えるために顧客に対してスペースを提供するために要素を使用しようとしている:

<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構文は属性を指定するための等価で妥当な様々な方法を可能にする。

For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their telephone number, did not specify an e-mail address, asked for a medium-sized pizza, selected the Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery instructions text control blank, the user agent would submit the following to the online Web service:

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

Support: form-validationChrome for Android 57+Chrome 10+UC Browser for Android 11.4+iOS Safari 10.3+Firefox 4+IE 10+Samsung Internet 4+Opera Mini (limited) all+Android Browser 4.4.3+Edge 12+Safari 10.1+Opera 10.0+

Source: caniuse.com

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

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

最も簡単な注釈は、値が指定されるまでフォームが送信されないことを示すために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属性は、ユーザーエージェントがフィールドを公開するために使用するコントロールの種類を決定する。Choosing between different values of this attribute is the same choice as choosing whether to use an input element, a textarea element, a select element, etc.

対照的に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である。However, there could be a number of different form controls used for the purpose: a text control (<input type=text>), a drop-down list (<select>), radio buttons (<input type=radio>), etc. これは、どの種類のインターフェイスが望まれているかのみに依存する。

The inputmode decides what kind of input modality (e.g. keyboard) to use, when the control is a text control.

名前を考えてみよう。ページが単にユーザーから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>Romanized 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 IDL属性を持つ。

送信可能要素

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

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

リセット可能要素

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

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

4.10.3 form要素

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

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

  void submit();
  [CEReactions] void reset();
  boolean checkValidity();
  boolean reportValidity();
};

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

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

form . length

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

form[index]

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

form[name]

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

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

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

form . submit()

フォームを送信する。

form . reset()

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

form . checkValidity()

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

form . reportValidity()

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

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

name IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

acceptCharset IDL属性は、accept-charsetコンテンツ属性を反映しなければならない。


The elements IDL attribute must return an HTMLFormControlsCollection rooted at the form 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.

To determine the value of an indexed property for a form element, 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:

    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:

    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.

To determine the value of a named property name for a form element, 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, whose form owner is the form element, 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="https://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://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要素でないを除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
for — フォームコントロールとラベルを関連付ける
DOMインターフェイス
[HTMLConstructor]
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

labelは、ユーザーインターフェイスでのキャプションを表す。キャプションは、for属性を使用する、またはlabel要素自身の内部にフォームコントロールを設置することによってのいずれかで、label要素のラベル付けされたコントロールとして知られる特定のフォームコントロールに関連付けることができる。

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

for属性は、キャプションが関連付けされることになっているフォームコントロールを示すために指定されてもよい。この属性が指定される場合、属性値は、label要素と同じツリーラベル付け可能要素IDでなければならない。この属性が指定され、かつfor属性の値と同じツリーIDで要素が存在し、かつツリー順でそのような要素の最初がラベル付け可能な要素である場合、その要素はlabel要素のラベル付けされたコントロールである。

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 a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to fire a click event at 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.

次の例は、ラベルを伴う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

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

label . form

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

存在しない場合nullを返す。

htmlFor IDL属性は、forコンテンツ属性を反映しなければならない。

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 must run the following steps:

  1. If the label element has no labeled control, then return null.

  2. If the label element's labeled control is not a form-associated element, then return null.

  3. Return the label element's labeled control's form owner (which can still be null).

The form IDL attribute on the label element is different from the form IDL attribute on listed form-associated elements, and the label element does not have a form content attribute.


control . labels

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

Labelable elements and all input elements have a live 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 and input elements, on getting, must return that NodeList object, and that same value must always be returned, unless this element is an input element whose type attribute is in the Hidden state, in which case it must instead return null.

This (non-conforming) example shows what happens to the NodeList and what labels returns when an input element has its type attribute changed.

<!doctype html>
<p><label><input></label></p>
<script>
 const input = document.querySelector('input');
 const labels = input.labels;
 console.assert(labels.length === 1);

 input.type = 'hidden';
 console.assert(labels.length === 0); // the input is no longer the label's labeled control
 console.assert(input.labels === null);

 input.type = 'checkbox';
 console.assert(labels.length === 1); // the input is once again the label's labeled control
 console.assert(input.labels === labels); // same value as returned originally
</script>

4.10.5 input要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
type属性がHidden状態でない場合:インタラクティブコンテンツ
type属性がHidden状態でない場合:列挙されたラベル付け可能送信可能、およびリセット可能フォーム関連要素
type属性がHidden状態である場合:列挙された送信可能、およびリセット可能フォーム関連要素
type属性がHidden状態でない場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
acceptファイルアップロードコントロールで予期されるファイルタイプに対するヒント
alt — 画像が利用不可である場合に使用する置換テキスト
autocomplete — フォームオートフィル機能に対するヒント
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
checked — コマンドまたはコントロールがチェックされているかどうか
dirname — Name of form control to use for sending the element's directionality in form submission
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
formactionフォーム送信に使用するURL
formenctypeフォーム送信に使用するエンコーディングタイプを設定するフォームデータ
formmethodフォーム送信に使用するHTTPメソッド
formnovalidateフォーム送信のためのフォームコントロール検証を回避する
formtargetフォーム送信に対するブラウジングコンテキスト
height — 縦の次元
inputmode — 入力モダリティーを選択するためのヒント
list — オートコンプリートオプションのリスト
max — 最大値
maxlength — 値の最大長さ
min — 最小値
minlength — 値の最小長さ
multiple — 複数の値を許可するかどうか
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
pattern — フォームコントロールの値でマッチするパターン
placeholder — フォームコントロール内に配置されるユーザー可視ラベル
readonly — ユーザーによって編集される値を許可するかどうか
required — コントロールがフォーム送信に要求されるかどうか
size — コントロールのサイズ
src — リソースのアドレス
step — フォームコントロールの値でマッチする粒度
type — フォームコントロールの種類
value — フォームコントロールの値
width — 横の次元
また、title属性はこの要素で特別なセマンティックスを持つ:パターンの説明(pattern属性とともに使用する場合)。
DOMインターフェイス
[HTMLConstructor]
interface HTMLInputElement : HTMLElement {
  [CEReactions] attribute DOMString accept;
  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute boolean defaultChecked;
  attribute boolean checked;
  [CEReactions] attribute DOMString dirName;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
  [CEReactions] attribute USVString formAction;
  [CEReactions] attribute DOMString formEnctype;
  [CEReactions] attribute DOMString formMethod;
  [CEReactions] attribute boolean formNoValidate;
  [CEReactions] attribute DOMString formTarget;
  [CEReactions] attribute unsigned long height;
  attribute boolean indeterminate;
  [CEReactions] attribute DOMString inputMode;
  readonly attribute HTMLElement? list;
  [CEReactions] attribute DOMString max;
  [CEReactions] attribute long maxLength;
  [CEReactions] attribute DOMString min;
  [CEReactions] attribute long minLength;
  [CEReactions] attribute boolean multiple;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString pattern;
  [CEReactions] attribute DOMString placeholder;
  [CEReactions] attribute boolean readOnly;
  [CEReactions] attribute boolean required;
  [CEReactions] attribute unsigned long size;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString step;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  [CEReactions] attribute [TreatNullAs=EmptyString] DOMString value;
  attribute object? valueAsDate;
  attribute unrestricted double valueAsNumber;
  [CEReactions] 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 テキスト 改行なしのテキスト A text control
search Search 改行なしのテキスト Search control
tel 電話番号 改行なしのテキスト A text control
url URL 絶対URL A text control
email 電子メール 電子メールアドレス(のリスト) A text control
パスワード Password 改行なしのテキスト(センシティブな情報) A text control that obscures data entry
date 日付 タイムゾーンを伴わない日付(年、月、日) 日付のコントロール
month タイムゾーンを伴わない年と月から成る日付 月のコントロール
week Week タイムゾーンを伴わない週番号と週数から成る日付 週のコントロール
time Time タイムゾーンを伴わない時刻(時間、分、秒、秒の小数) 時刻のコントロール
datetime-local Local Date and Time タイムゾーンを伴わない日付と時刻(年、月、日、時間、分、秒、秒の小数) 日付および時刻のコントロール
number Number 数値 A text control or spinner control
range Range 正確な値が重要ではない追加のセマンティックを持つ数値 スライダーコントロールまたは類似のもの
color Color 8ビットの赤、緑、青色コンポーネントをもつRGB色 A color picker
checkbox Checkbox 定義済みリストからの0個以上の値のセット チェックボックス
radio Radio Button 列挙値 ラジオボタン
file File Upload MIMEタイプをもつ0個以上のファイルと任意でファイル名 ラベルとボタン
submit Submit Button 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ列挙値 ボタン
image Image Button 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ、特定の画像のサイズを基準とする座標 クリック可能な画像、またはボタンのいずれか
reset Reset Button 該当なし ボタン
button Button 該当なし ボタン

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

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

次の表は、非規範的であり、これらのコンテンツ属性、IDL属性、メソッド、およびイベントのいずれかが各状態に適用するかをまとめたものである:

非表示 Text, Search URL, Telephone 電子メール Password Date, Month, Week, Time Local Date and Time Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
コンテンツ属性
accept · · · · · · · · · · · Yes · · ·
alt · · · · · · · · · · · · · Yes ·
autocomplete Yes Yes 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 Yes · · · · ·
max · · · · · Yes Yes Yes Yes · · · · · ·
maxlength · Yes Yes Yes Yes · · · · · · · · · ·
min · · · · · Yes Yes Yes Yes · · · · · ·
minlength · Yes Yes Yes Yes · · · · · · · · · ·
multiple · · · Yes · · · · · · · Yes · · ·
pattern · Yes Yes Yes Yes · · · · · · · · · ·
placeholder · Yes Yes Yes Yes · · Yes · · · · · · ·
readonly · Yes Yes Yes Yes Yes Yes Yes · · · · · · ·
required · Yes Yes Yes Yes Yes Yes Yes · · Yes Yes · · ·
size · Yes Yes Yes Yes · · · · · · · · · ·
src · · · · · · · · · · · · · Yes ·
step · · · · · Yes Yes Yes Yes · · · · · ·
width · · · · · · · · · · · · · Yes ·
IDL属性とメソッド
checked · · · · · · · · · · Yes · · · ·
files · · · · · · · · · · · Yes · · ·
value default value value value value value value value value value default/on filename default default default
valueAsDate · · · · · Yes · · · · · · · · ·
valueAsNumber · · · · · Yes Yes Yes Yes · · · · · ·
list · Yes Yes Yes · Yes Yes Yes Yes Yes · · · · ·
select() · Yes Yes Yes† Yes Yes† Yes† Yes† · Yes† · Yes† · · ·
selectionStart · Yes Yes · Yes · · · · · · · · · ·
selectionEnd · Yes Yes · Yes · · · · · · · · · ·
selectionDirection · Yes Yes · Yes · · · · · · · · · ·
setRangeText() · Yes Yes · Yes · · · · · · · · · ·
setSelectionRange() · Yes Yes · Yes · · · · · · · · · ·
stepDown() · · · · · Yes Yes Yes Yes · · · · · ·
stepUp() · · · · · Yes Yes Yes Yes · · · · · ·
イベント
inputイベント · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·
changeイベント · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·

† If the control has no selectable text, the select() method results in a no-op, with no "InvalidStateError" DOMException.

Some states of the type attribute define a value sanitization algorithm.

Each input element has a value, which is exposed by the value IDL attribute. Some states define an algorithm to convert a string to a number, an algorithm to convert a number to a string, an algorithm to convert a string to a Date object, and an algorithm to convert a Date object to a string, which are used by max, min, step, valueAsDate, valueAsNumber, and stepUp().

An input element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the value. (It is also set to true when the value is programmatically changed, as described in the definition of the value IDL attribute.)

valueコンテンツ属性はinput要素のデフォルトのを示す。valueコンテンツ属性が追加、設定、または削除される際、コントロールの汚い値フラグがfalseである場合、存在するかどうか、ユーザーエージェントは要素のvalueコンテンツ属性に設定しなければならず、そうでなければ空文字列である場合、定義されるかどうか、現在の値サニタイズアルゴリズムを実行する。

Each input element has a checkedness, which is exposed by the checked IDL attribute.

Each input element has a boolean dirty checkedness flag. When it is true, the element is said to have a dirty checkedness. The dirty checkedness flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the checkedness.

checkedコンテンツ属性は、input要素のデフォルトのcheckednessを与える真偽属性である。checkedコンテンツ属性が追加される際、コントロールがdirty checkednessを持たない場合、ユーザーエージェントは要素のcheckednessをtrueに設定しなければならない。checkedコンテンツ属性が削除される際、コントロールがdirty checkednessを持たない場合、ユーザーエージェントは要素のcheckednessを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.

The activation behavior for input elements are these steps:

  1. If this element is not mutable, then abort these steps.

  2. Run this element's input activation behavior, if any, and do nothing otherwise.

The legacy-pre-activation behavior for input elements are these steps:

  1. If this element is not mutable, then abort these steps.

  2. If this element's type attribute is in the Checkbox state, then set this element's checkedness to its opposite value (i.e. true if it is false, false if it is true) and set this element's indeterminate IDL attribute to false.

  3. If this element's type attribute is in the Radio Button state, then get a reference to the element in this element's radio button group that has its checkedness set to true, if any, and then set this element's checkedness to true.

The legacy-canceled-activation behavior for input elements are these steps:

  1. If the element is not mutable, then abort these steps.

  2. If the element's type attribute is in the Checkbox state, then set the element's checkedness and the element's indeterminate IDL attribute back to the values they had before the legacy-pre-activation behavior was run.

  3. If this element's type attribute is in the Radio Button state, then if the element to which a reference was obtained in the legacy-pre-activation behavior, if any, is still in what is now this element's radio button group, if it still has one, and if so, setting that element's checkedness to true; or else, if there was no such element, or that element is no longer in this element's radio button group, or if this element no longer has a radio button group, setting this element's checkedness to false.


When an input element is first created, the element's rendering and behavior must be set to the rendering and behavior defined for the type attribute's state, and the value sanitization algorithm, if one is defined for the type attribute's state, must be invoked.

When an input element's type attribute changes state, the user agent must run the following steps:

  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. Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode other than the filename mode, and the new state of the element's type attribute puts the value IDL attribute in the filename mode, then set the value of the element to the empty string.

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

  5. Signal a type change for the element. (The Radio Button state uses this, in particular.)

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

Support: indeterminate-checkboxChrome for Android 57+Chrome 28+UC Browser for Android NoneiOS Safari NoneFirefox 3.6+IE 6+Samsung Internet 4+Opera Mini NoneAndroid Browser 4.4+Edge 12+Safari 6+Opera 11.6+

Source: caniuse.com

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.

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The 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

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属性を省略しなければならない。

The autocomplete content attribute applies to this element.

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

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

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

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

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

Support: input-searchChrome for Android 57+Chrome 15+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 4+IE 10+Samsung Internet 4+Opera Mini all+Android Browser 2.3+Edge 12+Safari 5.1+Opera 11.6+

Source: caniuse.com

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

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

The difference between the Text state and the Search state is primarily stylistic: on platforms where search controls are distinguished from regular text controls, the Search state might result in an appearance consistent with the platform's search controls rather than appearing like a regular text control.

If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.

If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:

  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 an event named input at the input element, with the bubbles attribute initialized to true.

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

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

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

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

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

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

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

4.10.5.1.3 Telephone状態(type=tel

Support: input-email-tel-urlChrome for Android 57+Chrome 5+UC Browser for Android 11.4+iOS Safari 3.2+Firefox 4+IE 10+Samsung Internet 4+Opera Mini NoneAndroid Browser 3+Edge 12+Safari 5+Opera 9.5+

Source: caniuse.com

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

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

If the element is mutable, its value should be editable by the user. User agents may change the spacing and, with care, the punctuation of values that the user enters. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.

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

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

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

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

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

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

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

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

4.10.5.1.4 URL状態(type=url

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

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

If the element is mutable, the user agent should allow the user to change the URL represented by its value. User agents may allow the user to set the value to a string that is not a valid absolute URL, but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface). User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.

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

The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.

Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.

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

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

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

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

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

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

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

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

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

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

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

4.10.5.1.5 E-mail状態(type=email

Spec bugs: 15489

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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value. User agents may transform the value for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.

Constraint validation: While the user interface is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.

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

The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.

Constraint validation: While the value of the element is neither the empty string nor a single valid 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 COMMA (,), U+000A LINE FEED (LF), or U+000D CARRIAGE RETURN (CR) characters. User agents should allow the user to remove all the addresses in the element's values. User agents may transform the values for display and editing; in particular, user agents should convert punycode in the domain labels of the value to IDN in the display and vice versa.

Constraint validation: While the user interface describes a situation where an individual value contains a U+002C COMMA (,) or is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.

Whenever the user changes the element's values, the user agent must run the following steps:

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

  2. Strip leading and trailing ASCII 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 COMMA 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 ASCII whitespace from each resulting token, if any, and let the element's values be the (possibly empty) resulting list of (possibly empty) tokens, maintaining the original order.

  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 COMMA 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, an implementation must split the string on commas.

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown() and stepUp() methods.

4.10.5.1.6 Password状態(type=password

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

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

If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.

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

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

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

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

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

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

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

4.10.5.1.7 Date状態(type=date

Spec bugs: 15114

Support: input-datetimeChrome for Android 57+Chrome 20+UC Browser for Android 11.4+iOS Safari (limited) 5.0+Firefox NoneIE NoneSamsung Internet 4+Opera Mini NoneAndroid Browser 4.4+Edge 13+Safari NoneOpera 9+

Source: caniuse.com

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

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

If the element is mutable, the user agent should allow the user to change the date represented by its value, as obtained by parsing a date from it. User agents must not allow the user to set the value to a non-empty string that is not a valid date string. If the user agent provides a user interface for selecting a date, then the value must be set to a valid date string representing the user's selection. User agents should allow the user to set the value to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid date string, the control is suffering from bad input.

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

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

step属性は日単位で表される。The step scale factor is 86,400,000 (which converts the days to milliseconds, as used in the other algorithms). デフォルトのステップは1日である。

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest date for which the element would not suffer from a step mismatch.

The algorithm to convert a string to a number, given a string input, is as follows: If parsing a date from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the parsed date, ignoring leap seconds.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid date string that represents the date that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").

The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a date from input results in an error, then return an error; otherwise, return a new Date object representing midnight UTC on the morning of the parsed date.

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid date string that represents the date current at the time represented by input in the UTC time zone.

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

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

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.

4.10.5.1.8 Month状態(type=month

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

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

If the element is mutable, the user agent should allow the user to change the month represented by its value, as obtained by parsing a month from it. User agents must not allow the user to set the value to a non-empty string that is not a valid month string. If the user agent provides a user interface for selecting a month, then the value must be set to a valid month string representing the user's selection. User agents should allow the user to set the value to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid month string, the control is suffering from bad input.

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid month string, then set it to the empty string instead.

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

step属性は月単位で表される。The step scale factor is 1 (there is no conversion needed as the algorithms use months). デフォルトのステップは1ヶ月である。

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest month for which the element would not suffer from a step mismatch.

The algorithm to convert a string to a number, given a string input, is as follows: If parsing a month from input results in an error, then return an error; otherwise, return the number of months between January 1970 and the parsed month.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid month string that represents the month that has input months between it and January 1970.

The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a month from input results in an error, then return an error; otherwise, return a new Date object representing midnight UTC on the morning of the first day of the parsed month.

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid month string that represents the month current at the time represented by input in the UTC time zone.

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.

4.10.5.1.9 Week状態(type=week

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

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

If the element is mutable, the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it. User agents must not allow the user to set the value to a non-empty string that is not a valid week string. If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection. User agents should allow the user to set the value to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid week string, the control is suffering from bad input.

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid week string, then set it to the empty string instead.

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

step属性は週単位で表される。The step scale factor is 604,800,000 (which converts the weeks to milliseconds, as used in the other algorithms). デフォルトのステップは1週間である。The default step base is −259,200,000 (the start of week 1970-W01).

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week for which the element would not suffer from a step mismatch.

The algorithm to convert a string to a number, given a string input, is as follows: If parsing a week string from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the Monday of the parsed week, ignoring leap seconds.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid week string that represents the week that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").

The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a week from input results in an error, then return an error; otherwise, return a new Date object representing midnight UTC on the morning of the Monday of the parsed week.

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid week string that represents the week current at the time represented by input in the UTC time zone.

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.

4.10.5.1.10 Time状態(type=time

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

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

If the element is mutable, the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid time string. If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection. User agents should allow the user to set the value to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid time string, the control is suffering from bad input.

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid time string, then set it to the empty string instead.

The form control has a periodic domain.

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

step属性は秒単位で表される。The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). デフォルトのステップは60秒である。

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.

The algorithm to convert a string to a number, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes.

The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return a new Date object representing the parsed time in UTC on 1970-01-01.

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid time string that represents the UTC time component that is represented by input.

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; setRangeText(), and setSelectionRange() methods.

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

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

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

If the element is mutable, the user agent should allow the user to change the date and time represented by its value, as obtained by parsing a date and time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid normalized local date and time string. If the user agent provides a user interface for selecting a local date and time, then the value must be set to a valid normalized local date and time string representing the user's selection. User agents should allow the user to set the value to the empty string.

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid normalized local date and time string, the control is suffering from bad input.

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

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

The value sanitization algorithm is as follows: If the value of the element is a valid local date and time string, then set it to a valid normalized local date and time string representing the same date and time; otherwise, set it to the empty string instead.

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

step属性は秒単位で表される。The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). デフォルトのステップは60秒である。

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest local date and time for which the element would not suffer from a step mismatch.

The algorithm to convert a string to a number, given a string input, is as follows: If parsing a date and time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0") to the parsed local date and time, ignoring leap seconds.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid normalized local date and time string that represents the date and time that is input milliseconds after midnight on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0").

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

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; setRangeText(), and setSelectionRange() methods.

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

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

Support: input-numberChrome for Android (limited) 57+Chrome 6+UC Browser for Android (limited) 11.4+iOS Safari (limited) 3.2+Firefox 29+IE 10+Samsung Internet (limited) 4+Opera Mini NoneAndroid Browser (limited) 4+Edge 12+Safari 5+Opera 9+

Source: caniuse.com

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

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

If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating-point number. User agents should allow the user to set the value to the empty string.

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

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

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

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

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.

The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input.

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; setRangeText(), and setSelectionRange() methods.

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

<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

Support: input-rangeChrome for Android 57+Chrome 4+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 23+IE 10+Samsung Internet 4+Opera Mini NoneAndroid Browser 4.2+Edge 12+Safari 3.1+Opera 9+

Source: caniuse.com

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

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

If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating-point number. User agents must not allow the user to set the value to the empty string.

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

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

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the best representation, as a floating-point number, of the default value.

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

When the element is suffering from an underflow, the user agent must set the element's value to the best representation, as a floating-point number, of the minimum.

When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating-point number that represents the maximum.

When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum, if there is a number that matches these constraints. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.

For example, the markup <input type="range" min=0 max=100 step=20 value=50> results in a range control whose initial value is 60.

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

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

以下のスタイルシートが適用されるとして:

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

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

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

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

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

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

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

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

As a dial.

あるいは:

As a long horizontal slider with tick marks.

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

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

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

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

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

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

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

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

The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.

The algorithm to convert a number to a string, given a number input, is as follows: Return the best representation, as a floating-point number, of input.

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

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

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

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

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

4.10.5.1.14 Color state (type=color)

Support: input-colorChrome for Android 57+Chrome 20+UC Browser for Android 11.4+iOS Safari NoneFirefox 29+IE NoneSamsung Internet 4+Opera Mini NoneAndroid Browser 4.4+Edge 14+Safari TP+Opera 17+

Source: caniuse.com

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およびvalue IDL属性、select()メソッド。

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

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

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

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate and, valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.

4.10.5.1.15 Checkbox状態(type=checkbox

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

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

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

The input activation behavior is to fire an event named input at the element, with the bubbles attribute initialized to true, and then fire an event named change at the element, with the bubbles attribute initialized to true.

Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.

input . indeterminate [ = value ]

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

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

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

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

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

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

4.10.5.1.16 Radio Button状態(type=radio

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:

The input activation behavior is to fire an event named input at the element, with the bubbles attribute initialized to true, and then fire an event named change at the element, with the bubbles attribute initialized to true.

Constraint validation: If an element in the radio button group is required, and all of the input elements in the radio button group have a checkedness that is false, then the element is suffering from being missing.

The following example, for some reason, has specified that puppers are both required and disabled:

<form>
 <p><label><input type="radio" name="dog-type" value="pupper" required disabled> Pupper</label>
 <p><label><input type="radio" name="dog-type" value="doggo"> Doggo</label>
 <p><button>Make your choice</button>
</form>

If the user tries to submit this form without first selecting "Doggo", then both input elements will be suffering from being missing, since an element in the radio button group is required (viz. the first element), and both of the elements in the radio button group have a false checkedness.

On the other hand, if the user selects "Doggo" and then submits the form, then neither input element will be suffering from being missing, since while one of them is required, not all of them have a false checkedness.

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

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

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

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

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

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

4.10.5.1.17 File Upload状態(type=file

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 REVERSE SOLIDUS character (\) characters.

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

The element's input activation behavior is to run the following steps:

  1. If the algorithm is not triggered by user activation, then abort these steps without doing anything else.

  2. Return, but continue running these steps in parallel.

  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 an event named input at the input element, with the bubbles attribute initialized to true, and finally fire an event named change at the input element, with the bubbles attribute initialized to true.

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 an event named input at the input element, with the bubbles attribute initialized to true, and finally fire an event named change at the input element, with the bubbles attribute initialized to true.

If the element is not mutable, 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属性は、どのファイルタイプが受け入れられるかのヒントとともにユーザーエージェントを提供するために指定されてもよい。

Support: input-file-acceptChrome for Android (limited) 57+Chrome 26+UC Browser for Android NoneiOS Safari (limited) 8+Firefox 37+IE 10+Samsung Internet (limited) 4+Opera Mini NoneAndroid Browser NoneEdge NoneSafari (limited) 6+Opera 15+

Source: caniuse.com

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

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

トークンは、他のトークンのいずれかと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コンテンツ属性、filesvalue IDL属性、select()メソッド。

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

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

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

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

The following IDL attributes and methods do not apply to the element: checked, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods.

4.10.5.1.18 Submit Button状態(type=submit

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

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

The element's input activation behavior is as follows: if the element has a form owner, and the element's node document is fully active, submit the form owner from the input element; otherwise, do nothing.

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

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

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

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

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

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

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

4.10.5.1.19 Image Button状態(type=image

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 these events occur

then unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches images on demand, or the src attribute's value is the empty string, the user agent must parse the value of the src attribute value, relative to the element's node document, and if that is successful, then:

  1. Let request be a new request whose url is the resulting URL record, client is the element's node document's relevant settings object, type is "image", destination is "image", credentials mode is "include", and whose use-URL-credentials flag is set.

  2. Fetch request.

Fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.

The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

User agents must not support non-image resources with the input element. User agents must not run executable code embedded in the image resource. User agents must only display the first page of a multipage resource. User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource.

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 an 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 an 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 input activation behavior is as follows: if the element has a form owner, and the element's node 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; the element's input activation behavior is as follows: if the element has a form owner, and the element's node 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 has no form owner or the element's node document is not fully active, then its input activation behavior must be to do nothing..

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属性とメソッドは、要素に適用しないcheckedfileslistselectionStartselectionEndselectionDirectionvalueAsDatevalueAsNumber IDL属性、select()setRangeText()setSelectionRange()stepDown()stepUp()メソッド。

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

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

次のフォームを取ると:

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

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

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

4.10.5.1.20 Reset Button状態(type=reset

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. 要素はボタンである。 (This is a fingerprinting vector.)

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

The element's input activation behavior, if the element has a form owner and the element's node document is fully active, is to reset the form owner; otherwise, it is to do nothing.

Constraint validation: The element is barred from constraint validation.

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

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

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

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

4.10.5.1.21 Button状態(type=button

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

input要素は、デフォルトの動作をもたないボタンを表す。要素が空文字列であるかもしれないが、ボタンのラベルは、value属性で指定されなければならない。If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be the empty string. 要素はボタンである。

The element has no input activation behavior.

Constraint validation: The element is barred from constraint validation.

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

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

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

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

4.10.5.2 Implementation 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 maxlengthおよびminlength属性

Support: input-minlengthChrome for Android 57+Chrome 40+UC Browser for Android NoneiOS Safari 10.3+Firefox 51+IE NoneSamsung Internet NoneOpera Mini NoneAndroid Browser 56+Edge NoneSafari 10.1+Opera 27+

Source: caniuse.com

The maxlength attribute, when it applies, is a form control maxlength attribute.

Support: maxlengthChrome for Android 57+Chrome 4+UC Browser for Android (limited) 11.4+iOS Safari 9.0+Firefox 4+IE 10+Samsung Internet 4+Opera Mini (limited) all+Android Browser 2.3+Edge 12+Safari 5.1+Opera 15+

Source: caniuse.com

The minlength attribute, when it applies, is a form control minlength attribute.

If the input element has a maximum allowed value length, then the JavaScript string length of the value of the element's value attribute must be equal to or less than the element's maximum allowed value length.

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

<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属性は、ユーザーがフォームコントロールを編集できるかどうかを制御する真偽属性である。指定される場合、要素はmutableでない。

Support: readonly-attrChrome for Android 57+Chrome 26+UC Browser for Android 11.4+iOS Safari 7.0+Firefox 4+IE 6+Samsung Internet 4+Opera Mini all+Android Browser 2.3+Edge 12+Safari 5.1+Opera 15+

Source: caniuse.com

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

The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. This is spelled out in more detail elsewhere in this specification with normative requirements that refer to the disabled concept (for example, the element's activation behavior, whether or not it is a focusable area, or when constructing the form data set). Any other behavior related to user interaction with disabled controls, such as whether text can be selected or copied, is not defined in this specification.

Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

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

<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属性は、ユーザーに複数の値を指定することを許可するかどうかを示す真偽属性である。

Support: input-file-multipleChrome for Android (limited) 57+Chrome 5+UC Browser for Android NoneiOS Safari 6.0+Firefox 3.6+IE 10+Samsung Internet NoneOpera Mini NoneAndroid Browser NoneEdge 12+Safari 4+Opera 10.6+

Source: caniuse.com

The following extract shows how an e-mail client's "To" field could accept multiple e-mail addresses.

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

If the user had, amongst many friends in their user contacts database, two friends "Spider-Man" (with address "spider@parker.example.net") and "Scarlet Witch" (with address "scarlet@avengers.example.net"), then, after the user has typed "s", the user agent might suggest these two e-mail addresses to the user.

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

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

Suppose the user had entered "bob@example.net" into this text control, and then started typing a second e-mail address starting with "s". The user agent might show both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in the datalist element.

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

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

Support: input-patternChrome for Android 57+Chrome 10+UC Browser for Android 11.4+iOS Safari 10.3+Firefox 4+IE 10+Samsung Internet 4+Opera Mini NoneAndroid Browser 4.4.3+Edge 12+Safari 10.1+Opera 9.5+

Source: caniuse.com

pattern属性は、コントロールのすなわち、multiple属性が適用されて設定される場合、コントロールのがチェックされる対象となる正規表現を指定する。

指定された場合、属性値は、JavaScriptパターン生成規則にマッチしなければならない。

If an input element has a pattern attribute specified, and the attribute's value, when compiled as a JavaScript regular expression with only the "u" flag specified, 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. [JAVASCRIPT]

If the value doesn't compile successfully, user agents are encouraged to log this fact in a developer console, to aid debugging.

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属性を含めるべきである。存在する場合、パターンが一致しないことをユーザーに通知する、またはツールチップでまたはコントロールがフォーカスを取得する際に支援技術によって読み出されるなど、他の任意の適切な時点で、ユーザーエージェントは、この属性のコンテンツを使用してもよい。

たとえば、次の断片で:

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

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

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

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

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

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

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

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

Constraint validation: When the element has a minimum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is less than the minimum, the element is suffering from an underflow.

Constraint validation: When the element has a maximum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum, the element is suffering from an overflow.

Constraint validation: When an element has a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum and less than the minimum, the element is simultaneously suffering from an underflow and suffering from an overflow.

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

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

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

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

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

<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">
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属性が指定される場合、0より大きい数値に解析する妥当な浮動小数点数である値を持たなければならない、または文字列"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 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.

  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.

Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.

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

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

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

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

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

4.10.5.3.9 list属性

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

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

The suggestions source element is the first element in the tree in tree order to have an ID equal to the value of the list attribute, if that element is a datalist element. If there is no list attribute, or if there is no element with that ID, or if the first element with that ID is not a datalist element, then there is no suggestions source element.

If there is a suggestions source element, then, when the user agent is allowing the user to edit the input element's value, the user agent should offer the suggestions represented by the suggestions source element to the user in a manner suitable for the type of control used. If appropriate, the user agent should use the suggestion's label and value to identify the suggestion to the user.

User agents are encouraged to filter the suggestions represented by the suggestions source element when the number of suggestions is large, including only the most relevant ones (e.g. based on the user's input so far). No precise threshold is defined, but capping the list at four to seven values is reasonable. If filtering based on the user's input, user agents should use substring matching against both the suggestions' label and value.

This text field allows you to choose a type of JavaScript function.

<input type="text" list="function-types">
<datalist id="function-types">
  <option value="function">function</option>
  <option value="async function">async function</option>
  <option value="function*">generator function</option>
  <option value="=>">arrow function</option>
  <option value="async =>">async arrow function</option>
  <option value="async function*">async generator function</option>
</datalist>

For user agents that follow the above suggestions, both the label and value would be shown:

A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.

Then, typing "arrow" or "=>" would filter the list to the entries with labels "arrow function" and "async arrow function". Typing "generator" or "*" would filter the list to the entries with labels "generator function" and "async generator function".

As always, user agents are free to make user interface decisions which are appropriate for their particular requirements and for the user's particular circumstances. However, this has historically been an area of confusion for implementers, web developers, and users alike, so we've given some "should" suggestions above.

How user selections of suggestions are handled depends on whether the element is a control accepting a single value only, or whether it accepts multiple values:

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

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 themself added an entry with that value, or edited an existing entry to be that value. Which behavior is to be applied depends on the user interface in 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="https://www.google.com/" label="Google">
 <option value="https://www.reddit.com/" label="Reddit">
</datalist>

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

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

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

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

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

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

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

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

4.10.5.3.10 placeholder属性

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

Support: input-placeholderChrome for Android 57+Chrome 4+UC Browser for Android 11.4+iOS Safari 3.2+Firefox 4+IE 10+Samsung Internet 4+Opera Mini all+Android Browser 4.2+Edge 12+Safari 5+Opera 11.5+

Source: caniuse.com

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

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

User agents should present this hint to the user, after having stripped newlines from it, when the element's value is the empty string, especially if the control is not focused.

If a user agent normally doesn't show this hint to the user when the control is focused, then the user agent should nonetheless show the hint for the control if it was focused as a result of the autofocus attribute, since in that case the user will not have had an opportunity to examine the control before focusing it.

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

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

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

<input name=t1 type=tel placeholder="&#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" DOMExceptionを投げる。

input . checked [ = value ]

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

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

input . files

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

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

input . valueAsDate [ = value ]

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

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

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

input . valueAsNumber [ = value ]

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

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

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

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

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

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

input . list

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

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, return the current value of the element.

On setting:

  1. Let oldValue be the element's value.

  2. Set the element's value to the new value.

  3. Set the element's dirty value flag to true.

  4. Invoke the value sanitization algorithm, if the element's type attribute's current state defines one.

  5. If the element's value (after applying the value sanitization algorithm) is different from oldValue, and the element has a text entry cursor position, move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none".

default

On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the empty string.

On setting, set the value of the element's value content attribute to the new value.

default/on

On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the string "on".

On setting, set the value of the element's value content attribute to the new value.

filename

On getting, return the string "C:\fakepath\" followed by the name of the first file in the list of selected files, if any, or the empty string if the list is empty.

On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError" DOMException.

This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.

Since path components are not permitted in 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" DOMException; otherwise, if the new value is not null and not a Date object throw a TypeError exception; otherwise if the new value is null or a Date object representing the NaN time value, then set the value of the element to the empty string; otherwise, run the algorithm to convert a Date object to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.


The valueAsNumber IDL attribute represents the value of the element, interpreted as a number.

On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value. Otherwise, run the algorithm to convert a string to a number defined for that state to the element's value; if the algorithm returned a number, then return it, otherwise, return a Not-a-Number (NaN) value.

On setting, if the new value is infinite, then throw a TypeError exception. Otherwise, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then throw an "InvalidStateError" DOMException. Otherwise, if the new value is a Not-a-Number (NaN) value, then set the value of the element to the empty string. Otherwise, run the algorithm to convert a number to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.


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

  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" DOMException, and abort these steps.

  2. If the element has no allowed value step, then throw an "InvalidStateError" DOMException, 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. Let valueBeforeStepping be value.

  7. If value subtracted from the step base is not an integral multiple of the allowed value step, then set value to the nearest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than value if the method invoked was the stepDown() method, and more than value otherwise.

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

    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.

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

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

  10. If either the method invoked was the stepDown() method and value is greater than valueBeforeStepping, or the method invoked was the stepUp() method and value is less than valueBeforeStepping, then abort these steps.

    This ensures that invoking the stepUp() method on the input element in the following example does not change the value of that element:

    <input type=number value=1 max=0>
  11. 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.

  12. 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 input activation behavior, the rules for dispatching these events, if they apply, are given in the section above that defines the type attribute's state. (This is the case for all input controls with the type attribute in the Checkbox state, the Radio Button state, or the File Upload state.)

For input elements without a defined input activation behavior, but to which these events apply, and for which the user interface involves both interactive manipulation and an explicit commit action, then when the user changes the element's value, the user agent must queue a task to fire an event named input at the input element, with the bubbles attribute initialized to true, and any time the user commits the change, the user agent must queue a task to fire an event named change at the input element, with the bubbles attribute initialized to true.

An example of a user interface involving both interactive manipulation and a commit action would be a Range controls that use a slider, when manipulated using a pointing device. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.

For input elements without a defined input activation behavior, but to which these events apply, and for which the user interface involves an explicit commit action but no intermediate manipulation, then any time the user commits a change to the element's value, the user agent must queue a task to first fire an event named input at the input element, with the bubbles attribute initialized to true, and then fire an event named change at the input element, with the bubbles attribute initialized to true.

An example of a user interface with a commit action would be a Color control that consists of a single button that brings up a color wheel: if the value only changes when the dialog is closed, then that would be the explicit commit action. On the other hand, if manipulating the control changes the color interactively, then there might be no commit action.

Another example of a user interface with a commit action would be a Date control that allows both text-based user input and user selection from a drop-down calendar: while text input might not have an explicit commit step, selecting a date from the drop down calendar and then dismissing the drop down would be a commit action.

For input elements without a defined input activation behavior, but to which these events apply, any time the user causes the element's value to change without an explicit commit action, the user agent must queue a task to fire an event named input at the input element, with the bubbles attribute initialized to true. The corresponding change event, if any, will be fired when the control loses focus.

Examples of a user changing the element's value would include the user typing into a text control, pasting a new value into the control, or undoing an edit in that control. Some user interactions do not cause changes to the value, e.g., hitting the "delete" key in an empty text control, or replacing some text in the control with text from the clipboard that happens to be exactly the same text.

A Range control in the form of a slider that the user has focused and is interacting with using a keyboard would be another example of the user changing the element's value without a commit step.

In the case of tasks that just fire an input event, user agents may wait for a suitable break in the user's interaction before queuing the tasks; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.

When the user agent is to change an input element's value on behalf of the user (e.g. as part of a form prefilling feature), the user agent must queue a task to first update the value accordingly, then fire an event named input at the input element, with the bubbles attribute initialized to true, then fire an event named change at the input element, with the bubbles attribute initialized to true.

These events are not fired in response to changes made to the values of form controls by scripts. (This is to make it easier to update the values of form controls in response to the user manipulating the controls, without having to then filter out the script's own changes to avoid an infinite loop.)

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

4.10.6 button要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしインタラクティブコンテンツの子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
formactionフォーム送信に使用するURL
formenctypeフォーム送信に使用するエンコーディングタイプを設定するフォームデータ
formmethodフォーム送信に使用するHTTPメソッド
formnovalidateフォーム送信のためのフォームコントロール検証を回避する
formtargetフォーム送信に対するブラウジングコンテキスト
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
type — ボタンの種類
valueフォーム送信に対して使用される値
DOMインターフェイス
[HTMLConstructor]
interface HTMLButtonElement : HTMLElement {
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute USVString formAction;
  [CEReactions] attribute DOMString formEnctype;
  [CEReactions] attribute DOMString formMethod;
  [CEReactions] attribute boolean formNoValidate;
  [CEReactions] attribute DOMString formTarget;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString type;
  [CEReactions] 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;
};

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

要素はボタンである。

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

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

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

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

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

A button element's activation behavior is to run the steps defined in the following list for the current state of this element's type attribute, if this element is not disabled, and do nothing otherwise:

Submit Button

If the element has a form owner and the element's node 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 node document is fully active, the element must reset the form owner.

Button

Do nothing.

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

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

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

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

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


value IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

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

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。autofocusdisabledformおよびname IDL属性は要素のフォーム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要素

Spec bugs: 25027

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能resettable フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
0個以上のoptionoptgroup、およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
multiple — 複数の値を許可するかどうか
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
required — コントロールがフォーム送信に要求されるかどうか
size — コントロールのサイズ
DOMインターフェイス
[HTMLConstructor]
interface HTMLSelectElement : HTMLElement {
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute boolean multiple;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute boolean required;
  [CEReactions] attribute unsigned long size;

  readonly attribute DOMString type;

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

  [SameObject] 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要素は、プレースホルダーのラベルオプションを持たなければならない。

In practice, the requirement stated in the paragraph above can only apply when a select element does not have a size attribute with a value greater than 1.

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 user agent must run the first applicable set of steps from the following list:

If 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

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 two or more option elements in the select element's list of options have their selectedness set to true

Set the selectedness of all but the last option element with its selectedness set to true in the list of options in tree order to false.

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, using the user interaction task source, to run these steps:

  1. Fire an event named input at the select element, with the bubbles attribute initialized to true.

  2. Fire an event named change at the select element, with the bubbles attribute initialized to true.

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はリストの最後に加えられるだろう。

elementに挿入された要素が親要素である場合、このメソッドは"HierarchyRequestError" DOMExceptionを投げる。

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 or set the value of an existing indexed property for a select element, it must instead run the corresponding algorithm on the select element's 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.

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。autofocusdisabledformおよびname IDL属性は要素のフォーム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要素

Support: datalistChrome for Android 57+Chrome (limited) 20+Firefox (limited) 4+IE (limited) 10+Samsung Internet 4+Opera Mini NoneAndroid Browser 4.4.3+Edge (limited) 12+Opera (limited) 15+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
いずれか:フレージングコンテンツ
Or: Zero or more option and script-supporting elements.
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLDataListElement : HTMLElement {
  [SameObject] readonly attribute HTMLCollection options;
};

datalist要素は、他のコントロール用にあらかじめ定義されたオプションを表すoption要素のセットを表す。レンダリングにおいて、datalist要素は何もないことを表し、子と一緒に非表示にされるべきである。

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

datalistoption要素の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およびスクリプトサポート要素。
text/htmlにおけるタグ省略
optgroup要素が別のoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、optgroup要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
DOMインターフェイス
[HTMLConstructor]
interface HTMLOptGroupElement : HTMLElement {
  [CEReactions] attribute boolean disabled;
  [CEReactions] 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属性を持つ場合:Nothing
要素がlabel属性を持つがvalue属性を持たない場合:テキスト
要素がlabel属性を持たず、かつdatalist要素の子でない場合:要素内の空白文字でないテキスト
要素がlabel属性を持たず、かつdatalist要素の子である場合:テキスト
text/htmlにおけるタグ省略
option要素が別のoption要素またはoptgroup要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、option要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
label — ユーザー可視ラベル
selected — デフォルトでオプションが選択されるかどうか
valueフォーム送信に対して使用される値
DOMインターフェイス
[HTMLConstructor, NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString label;
  [CEReactions] attribute boolean defaultSelected;
  attribute boolean selected;
  [CEReactions] attribute DOMString value;

  [CEReactions] 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であっても、要素は選択されない。

disabled IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。The defaultSelected IDL attribute must reflect the selected content attribute.

The label IDL attribute, on getting, if there is a label content attribute, must return that attribute's value; otherwise, it 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 ASCII 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 or SVG script elements.

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. そうでなければ、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, the constructor must perform the following steps:

  1. Let document be the current global object's associated Document.

  2. Let option be the result of creating an element given document, option, and the HTML namespace.

  3. If text is not the empty string, then append to option a new Text node whose data is text.

  4. If value is given, then set an attribute value for option using "value" and value.

  5. If defaultSelected is true, then set an attribute value for option using "selected" and the empty string.

  6. If selected is true, then set option's selectedness to true; otherwise set its selectedness to false (even if defaultSelected is true).

  7. Return option.

4.10.11 textarea要素

Spec bugs: 15291

カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストlabelable提出可能resettable フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Text
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
autocomplete — フォームオートフィル機能に対するヒント
autofocus — ページが読み込まれた際にフォームコントロールに自動的にフォーカスする
cols — 行あたりの最大文字数
dirname — Name of form control to use for sending the element's directionality in form submission
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
inputmode — 入力モダリティーを選択するためのヒント
maxlength — 値の最大長さ
minlength — 値の最小長さ
nameフォーム送信およびform.elements APIで使用するフォームコントロール名
placeholder — フォームコントロール内に配置されるユーザー可視ラベル
readonly — ユーザーによって編集される値を許可するかどうか
required — コントロールがフォーム送信に要求されるかどうか
rows — 表示する行数
wrap — どのようにフォームコントロール値がフォーム送信に対して包まれるか
DOMインターフェイス
[HTMLConstructor]
interface HTMLTextAreaElement : HTMLElement {
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute unsigned long cols;
  [CEReactions] attribute DOMString dirName;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString inputMode;
  [CEReactions] attribute long maxLength;
  [CEReactions] attribute long minLength;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString placeholder;
  [CEReactions] attribute boolean readOnly;
  [CEReactions] attribute boolean required;
  [CEReactions] attribute unsigned long rows;
  [CEReactions] attribute DOMString wrap;

  readonly attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  [CEReactions] attribute [TreatNullAs=EmptyString] 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);
};

textarea要素は、要素の生の値に対する複数行のプレーンテキスト編集コントロールを表す。コントロールのコンテンツは、コントロールのデフォルトの値を表す。

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

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

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

In this example, a text control is marked read-only because it represents a read-only file:

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 U+000A LINE FEED (LF) characters. Any time the user causes the element's raw value to change, the user agent must queue a task to fire an event named input at the textarea element, with the bubbles attribute initialized to true. 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's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the raw value.

The cloning steps for textarea elements must propagate the raw value and dirty value flag from the node being cloned to the copy.

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 dirty value flag back to false, and set the raw value of element to the value of the element's textContent IDL attribute.

When a textarea element is popped off the stack of open elements of an HTML parser or XML parser, then the user agent must invoke the element's reset algorithm.

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 an event named input at the textarea element, with the bubbles attribute initialized to true.

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 normalized 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, textLength IDL attribute, and by the maxlength and minlength content attributes. It is normalized so that line breaks use U+000A LINE FEED (LF) characters. Finally, there is the value, as used in form submission and other processing models in this specification. It is normalized so that line breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 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 algorithm for obtaining the element's API value is to return the element's raw value with the textarea line break normalization transformation applied. The textarea line break normalization transformation is the following algorithm, as applied to a string:

  1. Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair with a single U+000A LINE FEED (LF) character.

  2. Replace every remaining U+000D CARRIAGE RETURN character with a single U+000A LINE FEED (LF) 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 U+000D CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character, and every occurrence of a U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR) character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.

  2. If the element's wrap attribute is in the Hard state, insert U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 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 U+000A LINE FEED (CRLF) character pairs.

The maxlength attribute is a form control maxlength attribute.

If the textarea element has a maximum allowed value length, then the element's children must be such that the JavaScript string length of the value of the element's textContent IDL attribute with the textarea line break normalization transformation applied is equal to or less than the element's maximum allowed value length.

The minlength attribute is a form control minlength attribute.

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の代替として使用すべきでない。ヒントや他の助言テキストについては、title属性がより適切である。

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

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 U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) 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 IDL 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 with fallback. The cols IDL attribute's default value is 20. The rows IDL 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 IDL attribute must, on getting, return the element's API value. On setting, it must perform the following steps:

  1. Let oldAPIValue be this element's API value.

  2. Set this element's raw value to the new value.

  3. Set this element's dirty value flag to true.

  4. If the new API value is different from oldAPIValue, then move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none".

The textLength IDL attribute must return the JavaScript string length of the element's API value.

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。The select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The 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 output要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
リストlabelableresettableフォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
for — 出力が計算されたコントロールフォームを指定する
formform要素とコントロールを関連付ける
nameform.elements APIで使用するフォームコントロール名
DOMインターフェイス
[HTMLConstructor]
interface HTMLOutputElement : HTMLElement {
  [SameObject, PutForwards=value] readonly attribute DOMTokenList htmlFor;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString name;

  readonly attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  [CEReactions] 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属性を指定する場合は、それぞれが同じ<c7>ツリー</c7>で要素のIDの値を持たなければならない、大文字・小文字区別である一意なスペース区切りトークンの順不同のセットで構成される文字列を含まなければならない。

form属性は、フォームの所有者output要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。output要素はフォームに関連付けられ、その結果フォームコントロールのイベントハンドラーからより容易に参照することができる。フォームが送信される際に、要素の値自身は送信されない。

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

htmlFor IDL属性は、forコンテンツ属性を反映しなければならない。

willValidatevalidity、およびvalidationMessage IDL属性、checkValidity()reportValidity()およびsetCustomValidity()メソッドは、制約検証APIの一部である。labels IDL属性は、要素のlabelのリストを提供する。formおよびname IDL属性は要素のフォーム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.13 progress要素

Support: progressChrome for Android 57+Chrome 8+UC Browser for Android 11.4+iOS Safari (limited) 7.0+Firefox 6+IE 10+Samsung Internet 4+Opera Mini all+Android Browser 4.4+Edge 12+Safari 6+Opera 11+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしprogress要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
max — 範囲の上限
DOMインターフェイス
[HTMLConstructor]
interface HTMLProgressElement : HTMLElement {
  [CEReactions] attribute double value;
  [CEReactions] 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.14 meter要素

Support: meterChrome for Android 57+Chrome 8+UC Browser for Android 11.4+iOS Safari 10.3+Firefox 16+IE NoneSamsung Internet 4+Opera Mini all+Android Browser 4.4+Edge 13+Safari 6+Opera 11+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
ラベル付け可能要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしmeter要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 要素の現在値
min — 範囲の下限
max — 範囲の上限
low — 低域の上限
high — 高域の下限
optimum — ゲージにおける最適値
DOMインターフェイス
[HTMLConstructor]
interface HTMLMeterElement : HTMLElement {
  [CEReactions] attribute double value;
  [CEReactions] attribute double min;
  [CEReactions] attribute double max;
  [CEReactions] attribute double low;
  [CEReactions] attribute double high;
  [CEReactions] attribute double optimum;
  readonly attribute NodeList labels;
};

meter要素は既知の範囲内でスカラー量、または小数の値を表す。たとえば、ディスク使用量、クエリ結果の関連性、または特定の候補を選択するための投票人口の割合などである。

これはまた、ゲージとして知られる。

meter要素は、(進捗バーのように)進行状況を示すために使用すべきでない。その役割に対して、HTMLは独立してprogress要素を提供する。

meter要素はまた、任意の範囲のスカラー値を表すものでない―たとえば、既知の最大値が存在しない限り、重量、高さを報告するためにこれを使用することは誤りであろう。

要素によって表されるゲージのセマンティックスを決定する6つの属性がある。

min属性は範囲の下限を指定し、max属性は上限を指定する。value属性は、"測定された"値として示すゲージを持つ値を指定する。

他の3つの属性は、"最適"部分であるゲージの一部を示すために、ゲージの範囲を"低"、"中"、"高"の部分に分割して使用できる。low属性は"低"部分であると考えられる範囲を指定し、high属性は"高"部分であると考えられる範囲を指定する。optimumは、"最適"である位置を与える。それが"高"値より高い場合、より高い値がより良いことを示し、それが"低"マークよりも低い場合、より低い値がより良いことを示す。自然に間にある場合、高くも低くもない値が良いことを示す。

オーサリング要件value属性が指定されなければならない。valueminlowhighmax、およびoptimum属性が存在する場合、妥当な浮動小数点数の値を持たなければならない。

加えて、属性値はさらに制約される:

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.

ユーザーエージェントは、コンテキストヘルプまたは実際の値を記述するインラインテキストを提供するために、title属性と他の属性を結合してもよい。

たとえば、次の断片で:

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

次の例は、ゲージがローカライズされたまたは整形済みテキストにフォールバックする様子を示す。

<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.15 fieldset要素

Spec bugs: 25551

カテゴリー
フローコンテンツ
セクショニングルート
リストフォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツの後に続く、任意でlegend要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
disabled — フォームコントロールが無効であるかどうか
formform要素とコントロールを関連付ける
nameform.elements APIで使用するフォームコントロール名
DOMインターフェイス
[HTMLConstructor]
interface HTMLFieldSetElement : HTMLElement {
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString name;

  readonly attribute DOMString type;

  [SameObject] readonly attribute HTMLCollection elements;

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

fieldset要素は、任意で共通の名前の下にグループ化されたフォームコントロールのセットを表す

グループの名前がもしあれば、fieldset要素の子である最初のlegend要素によって与えられる。子孫の残りの部分は、グループを形成する。

disabled属性は指定された場合、もしあれば、無効にするために、fieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。

Support: fieldset-disabledChrome for Android 57+Chrome 20+UC Browser for Android 11.4+iOS Safari 6.0+Firefox 4+IE (limited) 6+Samsung Internet 4+Opera Mini (limited) all+Android Browser 4.4+Edge 12+Safari 6+Opera 10.0+

Source: caniuse.com

次の条件のいずれかにマッチする場合にfieldset要素は無効フィールドである:

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

fieldset . type

文字列"fieldset"を返す。

fieldset . elements

要素内のフォームコントロールのHTMLCollectionを返す。

disabled IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

The type IDL attribute must return the string "fieldset".

The elements IDL attribute must return an HTMLCollection 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が有効であるかどうかを制御する、凡例内でチェックボックスを持つフィールドセットを示す。The contents of the fieldset consist of two required text controls and an optional year/month control.

<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.16 legend要素

カテゴリー
なし。
この要素を使用できるコンテキスト
As the first child of a fieldset element.
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLLegendElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
};

legend要素は、もしあれば、legend要素の親fieldset要素に属する残りのコンテンツのキャプションを表す

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. そうでなければ、nullを返す。

4.10.17 フォームコントロールのインフラストラクチャー

4.10.17.1 フォームコントロールの値

多くのフォームコントロールは、checkednessを持つ。(後者は、input要素によってのみ使用される。)これらは、ユーザーがコントロールと対話する方法を記述するために使用される。

コントロールのはそのコントロールの初期状態である。それ自体は、ユーザーの現在の入力と一致しないかもしれない。

たとえば、ユーザーが数字を期待する数値フィールドに単語"three"を入力する場合、ユーザーの入力は文字列"three"であるがコントロールのは変わらないままとなる。また、ユーザーがeメールフィールドに(先頭の空白文字とともに)電子メールアドレス"  awesome@example.com"を入力する場合、ユーザーの入力は文字列"  awesome@example.com"であるが、eメールフィールドに対するブラウザーのUIは(先頭の空白文字なしで)"awesome@example.com"のに直すかもしれない。

input and textarea elements have a dirty value flag. This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.

To define the behavior of constraint validation in the face of the input element's multiple attribute, input elements can also have separately defined values.

To define the behavior of the maxlength and minlength attributes, as well as other APIs specific to the textarea element, all form control with a value also have an algorithm for obtaining an API value. By default this algorithm is to simply return the control's value.

select要素はを持たない。そのoption要素のselectednessが代わりに使用されるものである。

4.10.17.2 可変性

フォームコントロールはmutableとして指定することができる。

これは、ユーザーがフォームコントロールのまたはcheckednessを変更できるかどうか、またはコントロールを自動的に事前入力できるかどうかを(要素が指定されようとなかろうと依存する本仕様での定義及び要件によって)判定する。

4.10.17.3 制御とフォームの関連付け

Spec bugs: 28800

フォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができる。フォーム関連要素form要素に関連付けられない場合、そのフォーム所有者はnullであると言われる。

デフォルトで、フォーム関連要素が(下記のように)その最も近い祖先form要素に関連付けらるが、listedである場合、これを上書きするためにform属性を指定されてもよい。

Support: form-attributeChrome for Android 57+Chrome 10+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 4+IE NoneSamsung Internet 4+Opera Mini all+Android Browser 3+Edge NoneSafari 5.1+Opera 9.5+

Source: caniuse.com

この機能は、著者がネストされたform要素に対するサポートの不足を回避することができる。

listedフォーム関連要素が指定されたform属性を持つ場合、その属性の値は、その要素のツリーform要素のIDでなければならない。

The rules in this section are complicated by the fact that although conforming documents or trees will never contain nested form elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate trees 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 initialized 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 becomes connected, 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 tree, then the user agent must reset the form owner of that form-associated element.

When a listed 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 listed form-associated element has a form attribute and the ID of any of the elements in the tree changes, then the user agent must reset the form owner of that form-associated element.

When a listed 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 element, it must run the following steps:

  1. If all of the following conditions are true

    then do nothing, and abort these steps.

  2. Set element's form owner to null.

  3. If element is listed, has a form content attribute, and is connected, then:

    1. If the first element in element's tree, in tree order, to have an ID that is case-sensitively equal to element's form content attribute's value, is a form element, then associate the element with that form element.

  4. Otherwise, if element has an ancestor form element, then associate element with the nearest such ancestor form element.

In the following non-conforming snippet:

...
 <form id="a">
  <div id="b"></div>
 </form>
 <script>
  document.getElementById('b').innerHTML =
     '<table><tr><td></form><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, and there is a parse error for the </form> tag.

element . form

要素のフォーム所有者を返す。

存在しない場合nullを返す。

Listed 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.18 フォーム制御の共通属性

4.10.18.1 名前フォーム制御:name属性

nameコンテンツ属性は、フォームの送信form要素のelementsオブジェクトで使用されるような、フォームコントロールの名前を与える。If the attribute is specified, its value must not be the empty string or isindex.

A number of user agents historically implemented special support for first-in-form text controls with the name isindex, and this specification previously defined related user agent requirements for it. However, some user agents subsequently dropped that special support, and the related requirements were removed from this specification. So, to avoid problematic reinterpretations in legacy user agents, the name isindex is no longer allowed.

Other than isindex, any non-empty value for name is allowed. The name _charset_ is special: if used as the name of a Hidden control with no value attribute, then during submission the value attribute is automatically given a value consisting of the submission character encoding.

name IDL属性は、nameコンテンツ属性を反映しなければならない。

4.10.18.2 要素の方向を送信する:dirname属性

The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. そのような属性が指定される場合、その値は空文字列であってはならない。

In this example, a form contains a text control and a submission button:

<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.18.3 ユーザー入力長さの制限:maxlength属性

A form control maxlength attribute, controlled by the dirty value flag, declares a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

要素がフォームコントロール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 JavaScript string length of the element's API 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 API value to be set to a value whose JavaScript string length is greater than the element's maximum allowed value length.

In the case of textarea elements, the API value and value differ. In particular, the textarea line break normalization transformation is applied before the maximum allowed value length is checked (whereas the textarea wrapping transformation is not applied).

4.10.18.4 最小入力長の要件を設定する:minlength属性

A form control minlength attribute, controlled by the dirty value flag, declares a lower bound on the number of characters a user can input. The "number of characters" is measured using JavaScript string length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

minlength属性はrequired属性を暗示しない。フォームコントロールがminlength属性を一切持たない場合、値は依然として省略できる。minlength属性は、ユーザーがすべて値を入力した後にのみ蹴る。空文字列が許可されない場合、required属性も設定する必要がある。

要素がフォームコントロールminlength属性を指定される場合、属性値は妥当な非負の整数でなければならない。属性が指定され、数をもたらすその値に非負整数を解析するための規則を適用する場合、その数は要素の最小許容値の長さである。属性を省略する、またはその値を解析しエラーとなる場合、最小許容値の長さは存在しない。

要素が最大許容値の長さ最小許容値の長さの両方を持つ場合、最小許容値の長さ最大許容値の長さ以下でなければならない。

Constraint validation: If an element has a minimum 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), its value is not the empty string, and the JavaScript string length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.

In this example, there are four text controls. 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.18.5 フォーム制御の有効化および無効化:disabled属性

disabledコンテンツ属性は、真偽属性である。

A form control is disabled if any of the following conditions are met:

  1. 要素がbuttoninputselect、またはtextarea要素であり、かつ(その値に関わらず)この要素にdisabled属性が指定される。
  2. 要素がdisabled属性が指定されるfieldset要素の子孫であり、かつもしあればそのfieldset要素の所有する最初のlegend要素の子に属する子孫でない

無効であるフォームコントロールは、要素に送出されていることからユーザーインタラクションタスクソース上のキューに入れられる任意のclickイベントを防がなければならない。

Constraint validation: If an element is disabled, it is barred from constraint validation.

disabled IDL属性は、disabledコンテンツ属性を反映しなければならない。

4.10.18.6 フォームの送信

フォーム送信のための属性は、form要素上と送信ボタン上(フォーム送信ボタンを表す要素、たとえば、type属性のinput要素がSubmit Button状態にある)の両方を指定できる。

Support: form-submit-attributesChrome for Android 57+Chrome 15+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 4+IE 10+Samsung Internet 4+Opera Mini all+Android Browser 4+Edge 12+Safari 5.1+Opera 10.6+

Source: caniuse.com

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 element's node document's URL 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 element's node document's URL 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.18.6.1 フォームコントロールを自動フォーカスする:autofocus属性

Support: autofocusChrome for Android 57+Chrome 5+UC Browser for Android NoneiOS Safari NoneFirefox 4+IE 10+Samsung Internet 4+Opera Mini NoneAndroid Browser 3+Edge 12+Safari 5+Opera 9.5+

Source: caniuse.com

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 node 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 node 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 they do not wish focus to be changed, then optionally abort these steps.

  9. Queue a task that runs the focusing steps for the 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 has to focus the browser window if it has lost focus.

autofocus IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

次の断片において、文書が読み込まれるとき、テキストコントロールにフォーカスされる。

<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">
4.10.18.7 入力モダリティー:inputmode属性

Support: input-inputmodeChrome for Android NoneChrome NoneUC Browser for Android NoneiOS Safari NoneFirefox NoneIE NoneSamsung Internet NoneOpera Mini NoneAndroid Browser NoneEdge NoneSafari NoneOpera None

Source: caniuse.com

inputmodeコンテンツ属性は、ユーザーがフォームコントロールに内容を入力するための最も参考になる入力機構の種類を指定する列挙属性である。

User agents must recognize 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 behavior 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"のようなドメイン名の中で見つかった文字列を簡単に入力するための、URLの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力。Rarely necessary; use "<input type=url>" instead.

専用の入力コントロールが(上記の表に記載される)通常のユースケースのために存在するように、上記の最後3つのキーワードは、完全を期すためだけに提供され、めったに必要ない。

ユーザーエージェントは、ユーザーエージェントのデフォルト入力モダリティーに対応する、Defaultの入力モード状態をすべてサポートしなければならない。この仕様は、ユーザーエージェントのデフォルトのモダリティーが動作する方法を定義しない。欠損値のデフォルト値デフォルトの入力モード状態である。

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.18.8 オートフィル

Support: input-autocomplete-onoffChrome for Android 57+Chrome (limited) 27+UC Browser for Android 11.4+iOS Safari 5.0+Firefox (limited) 30+IE (limited) 11+Samsung Internet 4+Opera Mini all+Android Browser 2.1+Edge (limited) 12+Safari (limited) 7+Opera 9+

Source: caniuse.com

4.10.18.8.1 オートフィルフォームコントロール:autocomplete属性

ユーザーエージェントは、たとえば以前のユーザー入力に基づくユーザーのアドレスを事前に入力するなど、ユーザーにフォームの記入を助けるための機能を持つこともある。autocompleteコンテンツ属性は、ユーザーエージェントへのヒントの手段に、または実際にそのような機能を提供するかどうかに使用できる。

この属性が使用される2つの状態が存在する。オートフィル予想マントの着用時、autocomplete属性は、入力がユーザーから予想されるものについて説明する。オートフィルアンカーマントの着用時、autocomplete属性は、指定された値の意味を説明する。

type属性がHidden状態にあるinput要素では、autocomplete属性は、オートフィルアンカーマントを着用する。他のすべての場合で、オートフィル予想マントを着用する。

オートフィル予想マントを着用時、autocomplete属性が指定される場合、文字列"off"とマッチするASCII大文字・小文字不区別である単一のトークン、または文字列"on"とマッチするASCII大文字・小文字不区別である単一のトークン、またはオートフィル詳細トークンののいずれかから成る順序付きスペースで区切りトークンの集合である値を持たなければならない。

オートフィルアンカーマントを着用時、autocomplete属性が指定される場合、ちょうどオートフィル詳細トークンから成る順序付きスペースで区切りトークンの集合の値を持たなければならない(すなわち、"on"と"off"キーワードが許可されない)。

オートフィルの詳細トークンは下記の順序で、次のとおり:

  1. 任意で、フィールドが名前グループに属することを意味する、最初の8文字が文字列"section-"とASCII大文字・小文字不区別で一致するトークン。

    たとえば、フォームで2つの配送先住所がある場合、次のようにマークアップできる:

    <fieldset>
     <legend>Ship the blue gift to...</legend>
     <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
     <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </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:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
     <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
     <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
    </fieldset>
  2. 任意で、以下の文字列のいずれかとASCII大文字・小文字不区別で一致するトークン:

  3. 次の2つのオプションについていずれか:

先に述べたように、属性およびそのキーワードの意味は属性が着用するマントに依存する。

オートフィル予想マント着用時は

"off"キーワードは、コントロールの入力データが特にセンシティブ(たとえば、核兵器のアクティベーションコード)である、またはキーワードが再利用されることのない値(たとえば、銀行のログインのためのワンタイムキー)であり、したがってユーザーは、値を事前入力するためにユーザーエージェントを当てにできる代わりに、明示的にデータを毎回入力する必要がある、または文書は独自のオートコンプリートのメカニズムを提供し、ユーザーエージェントに自動補完値を提供したくないことのいずれかを示す。

"on"キーワードは、ユーザーエージェントが、オートコンプリート値をユーザーに提供することを許可するが、ユーザーが入力すると予想されるだろうデータの種類についてのさらなる情報を提供しないことを示す。ユーザーエージェントは、自動補完が提案する値を決定するためにヒューリスティックを使用する必要があるだろう。

上記のオートフィルフィールドは、ユーザーエージェントがオートコンプリート値をユーザーに提供することができ、かつどの値の種類が期待されるかを指定することを示す。そのような各キーワードの意味は、以下の表に記載される。

autocomplete属性が省略される場合、要素のフォーム所有者autocomplete属性に関する状態に対応するデフォルト値が("on"または"off"のいずれか)の代わりに使用される。フォーム所有者が存在しない場合、値"on"が使用される。

オートフィルアンカーマントを着用時

上記のオートフィルフィールドは、指定される値の特定の種類の値が、この要素のために提供される値であることを示す。そのような各キーワードの意味は、以下の表に記載される。

この例において、ページは明示的にトランザクションの通貨と金額を指定している。フォームは、クレジットカードや他の請求の詳細を要求する。ユーザーエージェントは、十分なバランスを有し、関連する通貨をサポートしていることを知るクレジットカードを提示するためにこの情報を使用することができる。

<form method=post action="step2.cgi">
 <input type=hidden autocomplete=transaction-currency value="CHF">
 <input type=hidden autocomplete=transaction-amount value="15.00">
 <p><label>Credit card number: <input type=text inputmode=numeric autocomplete=cc-number></label>
 <p><label>Expiry Date: <input type=month autocomplete=cc-exp></label>
 <p><input type=submit value="Continue...">
</form>

以下の表に示すように、オートフィルフィールドキーワードは相互に関連する。このテーブルの行に記載された各フィールド名は、"意味"で分類される列で、その行のセルに与えられた意味に対応する。一部のフィールドは、他のフィールドのサブパーツに対応する。たとえば、クレジットカードの有効期限は、有効期限の年と月の両方を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-level3" 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 テキスト
"transaction-currency" ユーザーが使用よりトランザクションを好む通貨 ISO 4217通貨コード[ISO4217] GBP テキスト
"transaction-amount" (たとえば、ビッドまたは販売価格を入力する際に)ユーザーがトランザクションに望む金額 妥当な浮動小数点数 401.00 数値
"language" 優先言語 妥当なBCP 47言語タグ[BCP47] ja テキスト
"bday" 誕生日 妥当な日付文字列 1955-06-08 日付
"bday-day" 誕生日の日コンポーネント 1から31までの範囲で妥当な整数 8 数値
"bday-month" 誕生日の月コンポーネント 1から12までの範囲で妥当な整数 6 数値
"bday-year" 誕生日の年コンポーネント 0より大きい妥当な整数 1955 数値
"sex" 性別認識(たとえば、女性、ファファフィネ) 自由形式テキスト、改行なし Male テキスト
"url" ホームページや会社に対応する他のウェブページ、人、アドレス、またはこのフィールドに関連付けられる他のフィールドでの連絡先情報 Valid URL string https://www.w3.org/People/Berners-Lee/ URL
"photo" 写真、アイコン、会社に対応する他の画像、人、アドレス、またはこのフィールドに関連付けられる他のフィールドの連絡先情報 Valid URL string https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg URL
"tel" 国コードを含む完全な電話番号 ASCII数字およびU+0020 SPACE characters、接頭辞としてU+002B PLUS SIGN文字(+) +1 617 253 5702 Tel
"tel-country-code" 電話番号の国コードコンポーネント ASCII数字、接頭辞としてU+002B PLUS SIGN文字(+) +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") Valid URL string irc://example.org/timbl,isuser URL

次のようにグループがコントロールに対応する:

テキスト
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
textarea要素
select要素
複数行
Hidden状態のtype属性をもつinput要素
textarea要素
select要素
Password
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Password状態のtype属性をもつinput要素
textarea要素
select要素
URL
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がURL状態であるinput要素
textarea要素
select要素
電子メール
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がE-mail状態であるinput要素
textarea要素
select要素
Tel
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
type属性がTelephone状態であるinput要素
textarea要素
select要素
数値
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Number状態のtype属性をもつinput要素
textarea要素
select要素
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Month状態のtype属性をもつinput要素
textarea要素
select要素
日付
Hidden状態のtype属性をもつinput要素
type属性がText状態であるinput要素
type属性がSearch状態であるinput要素
Date状態のtype属性をもつinput要素
textarea要素
select要素

住所レベルaddress-level1" – "address-level4"フィールドは、住所の場所を記述するために使用される。異なるロケールは、異なるレベルの数を持つ。たとえば、アメリカは2つのレベル(州および町)を使用し、イギリスは、住所に応じて1つまたは2つ(郵便町、場合によっては地域)を使用しを使用し、中国は3つ(県、市、区)を使用することができる。"address-level1"フィールドは、最も広い行政区分を表す。異なるロケールは異なる方法でフィールドを順序づける。たとえば、アメリカの町(レベル2)は、州(レベル1)に先行して使用する。一方日本において都道府県(レベル1)は、地区(レベル3)に先行する市(レベル2)に先行する。著者は、(ユーザーが国を変えるのに応じてフィールドを隠す、表示するおよび再配置する)国の慣習と一致する方法で提示された形態を提供することを勧める。

4.10.18.8.2 Processing model

Each input element to which the autocomplete attribute applies, each select element, and each 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 whose information concerns the same subject, 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 ASCII whitespace.

  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
    "