4.10. Forms

4.10.1 Introduction

This section is non-normative.

A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.

Writing a form consists of several steps, which can be performed in any order: writing the user interface, implementing the server-side processing, and configuring the user interface to communicate with the server.

4.10.1.1 Writing a form's user interface

This section is non-normative.

For the purposes of this brief introduction, we will create a pizza ordering form.

Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:

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

To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons also use the input element, this time with a type attribute with the value radio. To make the radio buttons work as a group, they are given a common name using the name attribute. To group a batch of controls together, such as, in this case, the radio buttons, one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.

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

Changes from the previous step are highlighted.

To pick toppings, we can use checkboxes. These use the input element with a type attribute with the value checkbox:

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

The pizzeria for which this form is being written is always making mistakes, so it needs a way to contact the customer. For this purpose, we can use form controls specifically for telephone numbers (input elements with their type attribute set to tel) and e-mail 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>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>

We can use an input element with its type attribute set to time to ask for a delivery time. Many of these form controls have attributes to control exactly what values can be specified; in this case, three attributes of particular interest are min, max, and step. These set the minimum time, the maximum time, and the interval between allowed values (in seconds). This pizzeria only delivers between 11am and 9pm, and doesn't promise anything better than 15 minute increments, which we can mark up as follows:

<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 free-form text field. In this instance, we are going to use it to provide a space for the customer to give delivery instructions:

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

Finally, to make the form submittable we use the button element:

<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 Implementing the server-side processing for a form

This section is non-normative.

The exact details for writing a server-side processor are out of scope for this specification. For the purposes of this introduction, we will assume that the script at https://pizza.example.com/order.cgi is configured to accept submissions using the application/x-www-form-urlencoded format, expecting the following parameters sent in an HTTP POST body:

custname

Customer's name

custtel

Customer's telephone number

custemail

Customer's e-mail address

size

The pizza size, either small, medium, or large

toppings

The topping, specified once for each selected topping, with the allowed values being bacon, cheese, onion, and mushroom

delivery

The requested delivery time

comments

The delivery instructions

4.10.1.3 Configuring a form to communicate with a server

This section is non-normative.

Form submissions are exposed to servers in a variety of ways, most commonly as HTTP GET or POST requests. To specify the exact method used, the method attribute is specified on the form element. This doesn't specify how the form data is encoded, though; to specify that, you use the enctype attribute. You also have to specify the URL of the service that will handle the submitted data, using the action attribute.

For each form control you want submitted, you then have to give a name that will be used to refer to the data in the submission. We already specified the name for the group of radio buttons; the same attribute (name) also specifies the submission name. Radio buttons can be distinguished from each other in the submission by giving them different values, using the value attribute.

Multiple controls can have the same name; for example, here we give all the checkboxes the same name, and the server distinguishes which checkbox was checked by seeing which values are submitted with that name — like the radio buttons, they are also given unique values with the value attribute.

Given the settings in the previous section, this all becomes:

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

There is no particular significance to the way some of the attributes have their values quoted and others don't. The HTML syntax allows a variety of equally valid ways to specify attributes, as discussed in the syntax section.

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 field blank, the user agent would submit the following to the online Web service:

custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=

4.10.1.4 Client-side form validation

This section is non-normative.

Forms can be annotated in such a way that the user agent will check the user's input before the form is submitted. The server still has to verify the input is valid (since hostile users can easily bypass the form validation), but it allows the user to avoid the wait incurred by having the server be the sole checker of the user's input.

The simplest annotation is the required attribute, which can be specified on input elements to indicate that the form is not to be submitted until a value is given. By adding this attribute to the customer name, pizza size, and delivery time fields, we allow the user agent to notify the user when the user submits the form without filling in those fields:

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

It is also possible to limit the length of the input, using the maxlength attribute. By adding this to the textarea element, we can limit users to 1000 characters, preventing them from writing huge essays to the busy delivery drivers instead of staying focused and to the point:

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

4.10.1.5 Enabling client-side automatic filling of form controls

This section is non-normative.

Some browsers attempt to aid the user by automatically filling form controls rather than having the user reenter their information each time. For example, a field asking for the user's telephone number can be automatically filled with the user's phone number.

To help the user agent with this, we can tell it what the field is using the autocomplete attribute. In the case of this form, we have three fields that can be usefully annotated in this way: the information about who the pizza is to be delivered to. Adding this information looks like this:

<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 Improving the user experience on mobile devices

This section is non-normative.

Some devices, in particular those with on-screen keyboards and those in locales with languages with many characters (e.g. Japanese), can provide the user with multiple input modalities. For example, when typing in a credit card number the user may wish to only see keys for digits 0-9, while when typing in their name they may wish to see a form field that by default capitalises each word.

Using the inputmode attribute we can select appropriate input modalities:

<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 The difference between the field type, the autofill field name, and the input modality

This section is non-normative.

The type, autocomplete, and inputmode attributes can seem confusingly similar. For instance, in all three cases, the string "email" is a valid value. This section attempts to illustrate the difference between the three attributes and provides advice suggesting how to use them.

The type attribute on input elements decides what kind of control the user agent will use to expose the field. Chosing between different values of this attribute is the same choice as chosing whether to use an input element, a textarea element, a select element, a keygen element, etc.

The autocomplete attribute, in contrast, describes what the value that the user will enter actually represents. Chosing between different values of this attribute is the same choice as chosing what the label for the element will be.

First, consider telephone numbers. If a page is asking for a telephone number from the user, the right form control to use is <input type=tel>. However, which autocomplete value to use depends on which phone number the page is asking for, whether they expect a telephone number in the international format or just the local format, and so forth.

For example, a page that forms part of a checkout process on an e-commerce site for a customer buying a gift to be shipped to a friend might need both the buyer's telephone number (in case of payment issues) and the friend's telephone number (in case of delivery issues). If the site expects international phone numbers (with the country code prefix), this could thus look like this:

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

But if the site only supports British customers and recipients, it might instead look like this (notice the use of tel-national rather than tel):

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

Now, consider a person's preferred languages. The right autocomplete value is language. However, there could be a number of different form controls used for the purpose: a free text field (<input type=text>), a drop-down list (<select>), radio buttons (<input type=radio>), etc. It only depends on what kind of interface is desired.

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

Consider names. If a page just wants one name from the user, then the relevant control is <input type=text>. If the page is asking for the user's full name, then the relevant autocomplete value is name. But if the user is Japanese, and the page is asking for the user's Japanese name and the user's romanized name, then it would be helpful to the user if the first field defaulted to a Japanese input modality, while the second defaulted to a Latin input modality (ideally with automatic capitalization of each word). This is where the inputmode attribute can help:

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

In this example, the "section-*" keywords in the autocomplete attributes' values tell the user agent that the two fields expect different names. Without them, the user agent could automatically fill the second field with the value given in the first field when the user gave a value to the first field.

The "-jp" and "-en" parts of the keywords are opaque to the user agent; the user agent cannot guess, from those, that the two names are expected to be in Japanese and English respectively.

4.10.1.8 Date, time, and number formats

This section is non-normative.

In this pizza delivery example, the times are specified in the format "HH:MM": two digits for the hour, in 24-hour format, and two digits for the time. (Seconds could also be specified, though they are not necessary in this example.)

In some locales, however, times are often expressed differently when presented to users. For example, in the United States, it is still common to use the 12-hour clock with an am/pm indicator, as in "2pm". In France, it is common to separate the hours from the minutes using an "h" character, as in "14h00".

Similar issues exist with dates, with the added complication that even the order of the components is not always consistent — for example, in Cyprus the first of February 2003 would typically be written "1/2/03", while that same date in Japan would typically be written as "2003年02月01�--�" — and even with numbers, where locales differ, for example, in what punctuation is used as the decimal separator and the thousands separator.

It is therefore important to distinguish the time, date, and number formats used in HTML and in form submissions, which are always the formats defined in this specification (and based on the well-established ISO 8601 standard for computer-readable date and time formats), from the time, date, and number formats presented to the user by the browser and accepted as input from the user by the browser.

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. Dates, for instance, are always written in the format "YYYY-MM-DD", as in "2003-02-01". Users are not expected to ever see this format.

The time, date, or number given by the page in the wire format is then translated to the user's preferred presentation (based on user preferences or on the locale of the page itself), before being displayed to the user. Similarly, after the user inputs a time, date, or number using their preferred format, the user agent converts it back to the wire format before putting it in the DOM or submitting it.

This allows scripts in pages and on servers to process times, dates, and numbers in a consistent manner without needing to support dozens of different formats, while still supporting the users' needs.

4.10.2 Categories

Mostly for historical reasons, elements in this section fall into several overlapping (but subtly different) categories in addition to the usual ones like flow content, phrasing content, and interactive content.

A number of the elements are form-associated elements, which means they can have a form owner and, to expose this, have a form content attribute with a matching form IDL attribute.

• button
• fieldset
• input
• keygen
• label
• object
• output
• select
• textarea

The form-associated elements fall into several subcategories:

Listed elements

Denotes elements that are listed in the form.elements and fieldset.elements APIs.

• button
• fieldset
• input
• keygen
• object
• output
• select
• textarea

Submittable elements

Denotes elements that can be used for constructing the form data set when a form element is submitted.

• button
• input
• keygen
• object
• select
• textarea

Some submittable elements can be, depending on their attributes, buttons. The prose below defines when an element is a button. Some buttons are specifically submit buttons.

Resettable elements

Denotes elements that can be affected when a form element is reset.

• input
• keygen
• output
• select
• textarea

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

• button
• input (if the type attribute is not in the Hidden state)
• keygen
• meter
• output
• progress
• select
• textarea

4.10.3 The form element

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Flow content, but with no form element descendants.

Content attributes:

Global attributes

accept-charset

action

autocomplete

enctype

method

name

novalidate

target

DOM interface:

[OverrideBuiltins]interface HTMLFormElement : HTMLElement {   attribute DOMString acceptCharset;   attribute DOMString action;   attribute DOMString autocomplete;   attribute DOMString enctype;   attribute DOMString encoding;   attribute DOMString method;   attribute DOMString name;   attribute boolean noValidate;   attribute DOMString target;  readonly attribute HTMLFormControlsCollection elements;  readonly attribute long length;  getter Element (unsigned long index);  getter object (DOMString name);  void submit();  void reset();  boolean checkValidity();};

The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

The accept-charset attribute gives the character encodings that are to be used for the submission. If specified, the value must be an ordered set of unique space-separated tokens that are ASCII case-insensitive, and each token must be an ASCII case-insensitive match for the preferred MIME name of an ASCII-compatible character encoding. [IANACHARSET]

The name attribute represents the form's name within the forms collection. The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any.

The autocomplete attribute is an enumerated attribute. The attribute has two states. The on keyword maps to the on state, and the off keyword maps to the off state. The attribute may also be omitted. The missing value default is the on state. The off state indicates that by default, form controls in the form will have their autofill field name set to "off"; the on state indicates that by default, form controls in the form will have their autofill field name set to "on".

The action, enctype, method, novalidate, and target attributes are attributes for form submission.

form . elements

Returns an HTMLCollection of the form controls in the form (excluding image buttons for historical reasons).

form . length

Returns the number of form controls in the form (excluding image buttons for historical reasons).

form[index]

form(index)

Returns the indexth element in the form (excluding image buttons for historical reasons).

form[name]

form(name)

Returns the form control (or, if there are several, a RadioNodeList of the form controls) in the form with the given ID or name (excluding image buttons for historical reasons); or, if there are none, returns the img element with the given ID.

Once an element has been referenced using a particular name, that name will continue being available as a way to reference that element in this method, even if the element's actual ID or name changes, for as long as the element remains in the Document.

If there are multiple matching items, then a RadioNodeList object containing all those elements is returned.

form . submit()

Submits the form.

form . reset()

Resets the form.

form . checkValidity()

Returns true if the form's controls are all valid; otherwise, returns false.

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

4.10.4 The fieldset element

Categories:

Flow content.

Sectioning root.

Listed form-associated element.

Palpable content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Optionally a legend element, followed by flow content.

Content attributes:

Global attributes

disabled

form

name

DOM interface:

interface HTMLFieldSetElement : HTMLElement {   attribute boolean disabled;  readonly attribute HTMLFormElement? form;   attribute DOMString name;  readonly attribute DOMString type;  readonly attribute HTMLFormControlsCollection elements;  readonly attribute boolean willValidate;  readonly attribute ValidityState validity;  readonly attribute DOMString validationMessage;  boolean checkValidity();  void setCustomValidity(DOMString error);};

The fieldset element represents a set of form controls optionally grouped under a common name.

The name of the group is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled.

The form attribute is used to explicitly associate the fieldset element with its form owner. The name attribute represents the element's name.

fieldset . type

Returns the string "fieldset".

fieldset . elements

Returns an HTMLFormControlsCollection of the form controls in the element.

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

4.10.5 The legend element

Categories:

None.

Contexts in which this element can be used:

As the first child of a fieldset element.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

interface HTMLLegendElement : HTMLElement {  readonly attribute HTMLFormElement? form;};

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.

legend . form

Returns the element's form element, if any, or null otherwise.

4.10.6 The label element

Categories:

Flow content.

Phrasing content.

Interactive content.

Form-associated element.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

Content attributes:

Global attributes

form

for

DOM interface:

interface HTMLLabelElement : HTMLElement {  readonly attribute HTMLFormElement? form;   attribute DOMString htmlFor;  readonly attribute HTMLElement? control;};

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

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

The form attribute is used to explicitly associate the label element with its form owner.

<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

Returns the form control that is associated with this element.

control . labels

Returns a NodeList of all the label elements that the form control is associated with.