1. 4.10 Forms
      1. 4.10.1 Introduction
        1. 4.10.1.1 Writing a form's user interface
        2. 4.10.1.2 Implementing the server-side processing for a form
        3. 4.10.1.3 Configuring a form to communicate with a server
        4. 4.10.1.4 Client-side form validation
        5. 4.10.1.5 Enabling client-side automatic filling of form controls
        6. 4.10.1.6 Improving the user experience on mobile devices
        7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
        8. 4.10.1.8 Date, time, and number formats
      2. 4.10.2 Categories
      3. 4.10.3 The form element
      4. 4.10.4 The label element

4.10 Forms

Element#Forms

Support in all current engines.

Firefox4+Safari4+Chrome61+
Opera52+Edge79+
Edge (Legacy)16+Internet Explorer10+
Firefox Android5+Safari iOS3.2+Chrome Android61+WebView Android61+Samsung Internet8.0+Opera Android47+

4.10.1 Introduction

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

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 Writing a form's user interface

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

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

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

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

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

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

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

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

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

このフォームで注文するピザ屋は、いつも間違いをするので、顧客に連絡する方法を必要とする。For this purpose, we can use form controls specifically for telephone numbers (input elements with their type attribute set to tel) and email addresses (input elements with their type attribute set to email):

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

textarea要素は、複数行のテキストコントロールを提供するために使用できる。この文脈において、配送指示を与えるために顧客に対してスペースを提供するために要素を使用しようとしている:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email 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>Email 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 Implementing the server-side processing for a form

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

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

custname
顧客の名前
custtel
顧客の電話番号
custemail
Customer's email address
size
smallmedium、またはlargeのいずれかの、ピザのサイズ
topping
トッピングで、許可される値baconcheeseonion、およびmushroomをもつ、各選択されたトッピングに対して一度に指定される。
delivery
リクエストされた配達時刻
comments
配達指示
4.10.1.3 Configuring a form to communicate with a server

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

フォームの送信は、最も一般的な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>Email 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 email 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 Client-side form validation

Form_validation

Support in all current engines.

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

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

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

最も簡単な注釈は、値が指定されるまでフォームが送信されないことを示すために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>Email 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>Email 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>

When a form is submitted, invalid events are fired at each form control that is invalid. 典型的にブラウザー自体は一度に一つの問題を報告するので、これはフォームに関する問題の要約を表示するために有用でありうる。

4.10.1.5 Enabling client-side automatic filling of form controls

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

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

これとともにユーザーエージェントを助けるために、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>Email 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 Improving the user experience on mobile devices

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

一部のデバイス、特に仮想キーボードを備えたデバイスは、複数の入力モダリティーをユーザーに提供することができる。たとえば、自分の名前を入力する際に、デフォルトで各単語を大文字にするフォームフィールドを見たいかもしれない一方で、クレジットカードの番号を入力する際にユーザーは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"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Buzzer code: <input name="custbuzz" inputmode="numeric"></label></p>
 <p><label>Email 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.7 The difference between the field type, the autofill field name, and the input modality

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

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

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

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

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

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

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

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

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

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

Finally, consider names. ページが単にユーザーから1つ名前を望む場合、該当するコントロールは<input type=text>である。ページがユーザーのフルネームを求めている場合、該当するautocomplete値はnameである。

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

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

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

typeおよびautocompleteに関する選択肢とは別に、inputmode属性は、コントロールがテキストコントロールであるときに、どのような種類の入力モダリティー(たとえば、仮想キーボード)を使用するかを決定する。

クレジットカードの番号を考えてみよう。以下で説明するように、適切な入力タイプは<input type=number>ではない。代わりに<input type=text>となる。とにかく数字入力モダリティー(たとえば、数字のみを表示する仮想キーボード)を使用するようにユーザーエージェントに促すために、ページでは次のように使用する

<p><label>Credit card number:
                <input name="cc" type="text" inputmode="numeric" pattern="[0-9]{8,19}" autocomplete="cc-number">
</label></p>
4.10.1.8 Date, time, and number formats

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

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

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

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

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

The format used "on the wire", i.e., in HTML markup and in form submissions, is intended to be computer-readable and consistent irrespective of the user's locale. たとえば、日付は常に"2003-02-01"のように、形式"YYYY-MM-DD"で記述される。While some users might see this format, others might see it as "01.02.2003" or "February 1, 2003".

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

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

See also the implementation notes regarding localization of form controls.

4.10.2 Categories

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

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

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

Listed elements

form.elementsfieldset.elements APIに記載される要素を表す。この要素はまた、formコンテンツ属性、および著者が明示的にフォーム所有者を指定するのを可能にする、一致するform IDL属性を持つ。

Submittable elements

form要素が送信されたときにエントリーリストを構築するために用いることのできる要素を示す。

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

Resettable elements

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

Autocapitalize-and-autocorrect-inheriting elements

Denotes elements that inherit the autocapitalize and autocorrect attributes from their form owner.

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

4.10.3 The form element

Element/form

Support in all current engines.

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

HTMLFormElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしform要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
Global attributes
accept-charsetフォーム送信に使用する文字エンコーディング
actionフォーム送信に使用するURL
autocomplete — フォーム内のコントロールのオールフィル機能に対するデフォルト設定
enctypeEntry list encoding type to use for form submission
methodフォーム送信に使用する変形
namedocument.forms APIで使用するためのフォーム名
novalidateフォーム送信のためのフォームコントロール検証を回避する
targetNavigable for form submission
rel
Accessibility considerations:
For authors.
For implementers.
DOMインターフェイス
[Exposed=Window,
 LegacyOverrideBuiltIns,
 LegacyUnenumerableNamedProperties]
interface HTMLFormElement : HTMLElement {
  [HTMLConstructor] constructor();

  [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;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;

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

  undefined submit();
  undefined requestSubmit(optional HTMLElement? submitter = null);
  [CEReactions] undefined reset();
  boolean checkValidity();
  boolean reportValidity();
};

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

accept-charset属性は送信に対して使用される文字エンコーディングを提供する。属性が存在する場合、その値は"UTF-8"にマッチするASCII大文字・小文字不区別でなければならない。[ENCODING]

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

The autocomplete attribute is an enumerated attribute with the following keywords and states:

キーワード状態概要
ononForm controls will have their autofill field name set to "on" by default.
offoffForm controls will have their autofill field name set to "off" by default.

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

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

form要素のrel属性は、要素が作成するリンクの種類を制御する。その属性値は、スペース区切りのトークンの順不同セットでなければならない。許可されたキーワードとその意味は、後の節で定義される。

relサポートされるトークンは、form要素で許可されるHTMLリンクタイプで定義されるキーワードであり、処理モデルに影響を与え、ユーザーエージェントによってサポートされる。可能なサポートトークンは、noreferrernoopeneropenerである。relサポートされるトークンは、ユーザーエージェントが処理モデルを実装する、このリスト由来のトークンのみを含めなければならない。

form.elements

HTMLFormElement/elements

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

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

form.length

HTMLFormElement/length

Support in all current engines.

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

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

form[index]

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

form[name]

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

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

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

form.submit()

HTMLFormElement/submit

Support in all current engines.

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

Submits the form, bypassing interactive constraint validation and without firing a submit event.

form.requestSubmit([ submitter ])

HTMLFormElement/requestSubmit

Support in all current engines.

Firefox75+Safari16+Chrome76+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Requests to submit the form. Unlike submit(), this method includes interactive constraint validation and firing a submit event, either of which can cancel submission.

The submitter argument can be used to point to a specific submit button, whose formaction, formenctype, formmethod, formnovalidate, and formtarget attributes can impact submission. Additionally, the submitter will be included when constructing the entry list for submission; normally, buttons are excluded.

form.reset()

HTMLFormElement/reset

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

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

form.checkValidity()

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

form.reportValidity()

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

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

HTMLFormElement/name

Support in all current engines.

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

The name and rel IDL attributes must reflect the content attribute of the same name.

HTMLFormElement/acceptCharset

Support in all current engines.

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

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

The relList IDL attribute must reflect the rel content attribute.


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

  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 steps are to submit this from this, with submitted from submit() method set to true.

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

  1. If submitter is not null, then:

    1. If submitter is not a submit button, then throw a TypeError.

    2. If submitter's form owner is not this form element, then throw a "NotFoundError" DOMException.

  2. Otherwise, set submitter to this form element.

  3. Submit this form element, from submitter.

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

  1. If the form element is marked as locked for reset, then return.

  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 The label element

Element/label

Support in all current engines.

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

HTMLLabelElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただし要素のラベル付けされたコントロールでない場合、子孫ラベル付け可能な要素でない、および子孫label要素でないを除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
Global attributes
for — フォームコントロールとラベルを関連付ける
Accessibility considerations:
For authors.
For implementers.
DOMインターフェイス
[Exposed=Window]
interface HTMLLabelElement : HTMLElement {
  [HTMLConstructor] constructor();

  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.

Attributes/for

Support in all current engines.

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

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.

Form-associated custom elements are labelable elements, so for user agents where the label element's activation behavior impacts the labeled control, both built-in and custom elements will be impacted.

For example, on platforms where clicking a label activates the form control, 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>

Similarly, assuming my-checkbox was declared as a form-associated custom element (like in this example), then the code

<label><my-checkbox name=lost></my-checkbox> Lost</label>

would have the same behavior, firing a click event at the my-checkbox element.

On other platforms, the behavior in both cases might be just to focus the control, or to 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

HTMLLabelElement/control

Support in all current engines.

Firefox4+Safari5.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

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

label.form

HTMLLabelElement/form

Support in all current engines.

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

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

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

HTMLLabelElement/htmlFor

Support in all current engines.

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

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

label要素のform IDL属性は、リストされたフォーム関連要素form IDL属性とは異なり、label要素はformコンテンツ属性を持たない。


control.labels

HTMLButtonElement/labels

Support in all current engines.

Firefox56+Safari5.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

HTMLInputElement/labels

Support in all current engines.

Firefox56+Safari5+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

HTMLMeterElement/labels

Support in all current engines.

Firefox56+Safari6+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLOutputElement/labels

Support in all current engines.

Firefox56+Safari5.1+Chrome9+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

HTMLProgressElement/labels

Support in all current engines.

Firefox56+Safari6+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLSelectElement/labels

Support in all current engines.

Firefox56+Safari5.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

HTMLTextAreaElement/labels

Support in all current engines.

Firefox56+Safari5.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

フォームコントロールが関連付けられているすべての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 that are not form-associated custom elements, and the labels IDL attribute of 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.

ElementInternals/labels

Support in all current engines.

Firefox98+Safari16.4+Chrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Form-associated custom elements don't have a labels IDL attribute. Instead, their ElementInternals object has a labels IDL attribute. On getting, it must throw a "NotSupportedError" DOMException if the target element is not a form-associated custom element. Otherwise, it must return that NodeList object, and that same value must always be returned.

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>