[html5] r7656 - [e] (0) Cleanup Affected topics: HTML
whatwg at whatwg.org
whatwg at whatwg.org
Fri Jan 25 17:12:27 PST 2013
Author: ianh
Date: 2013-01-25 17:12:25 -0800 (Fri, 25 Jan 2013)
New Revision: 7656
Modified:
complete.html
index
source
Log:
[e] (0) Cleanup
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2013-01-26 01:10:18 UTC (rev 7655)
+++ complete.html 2013-01-26 01:12:25 UTC (rev 7656)
@@ -44329,18 +44329,15 @@
<p><i>This section is non-normative.</i></p>
- <p>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.</p>
+ <p>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.</p>
- <p>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
+ <p>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.</p>
@@ -44348,34 +44345,25 @@
<p><i>This section is non-normative.</i></p>
- <p>For the purposes of this brief introduction, we will create a
- pizza ordering form.</p>
+ <p>For the purposes of this brief introduction, we will create a pizza ordering form.</p>
- <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
- are placed the controls. Most controls are represented by the
- <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
- text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
- used; the label text and the control itself go inside the
- <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
- <a href=#paragraph>paragraph</a>, and is typically separated from other parts
- using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
- one might ask for the customer's name:</p>
+ <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which are placed the controls. Most
+ controls are represented by the <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
+ text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is used; the label text and the
+ control itself go inside the <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
+ <a href=#paragraph>paragraph</a>, and is typically separated from other parts using <code><a href=#the-p-element>p</a></code> elements.
+ Putting this together, here is how one might ask for the customer's name:</p>
<pre><strong><form>
<p><label>Customer name: <input></label></p>
</form></strong></pre>
- <p>To let the user select the size of the pizza, we can use a set of
- radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
- element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
- attribute with the value <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">radio</a></code>. To make the radio
- buttons work as a group, they are given a common name using the
- <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
- of controls together, such as, in this case, the radio buttons, one
- can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
- of controls is given by the first element in the
- <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
- element.</p>
+ <p>To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons
+ also use the <code><a href=#the-input-element>input</a></code> element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">radio</a></code>. To make the radio buttons work as a group, they are
+ given a common name using the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one can use the
+ <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group of controls is given by the first element
+ in the <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code> element.</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44389,8 +44377,7 @@
<p class=note>Changes from the previous step are highlighted.</p>
- <p>To pick toppings, we can use checkboxes. These use the
- <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>
+ <p>To pick toppings, we can use checkboxes. These use the <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44409,11 +44396,12 @@
</fieldset></strong>
</form></pre>
- <p>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
- (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)">tel</a></code>) and e-mail addresses
- (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href="#e-mail-state-(type=email)">email</a></code>):</p>
+ <p>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 (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute set to <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)">tel</a></code>) and e-mail addresses
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to
+ <code title=attr-input-type-email><a href="#e-mail-state-(type=email)">email</a></code>):</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44434,15 +44422,13 @@
</fieldset>
</form></pre>
- <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href="#time-state-(type=time)">time</a></code> 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 <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
- <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. 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:</p>
+ <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute set to <code title=attr-input-type-time><a href="#time-state-(type=time)">time</a></code> 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 <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44464,9 +44450,9 @@
<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
</form></pre>
- <p>The <code><a href=#the-textarea-element>textarea</a></code> 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:</p>
+ <p>The <code><a href=#the-textarea-element>textarea</a></code> 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44489,8 +44475,7 @@
<strong> <p><label>Delivery instructions: <textarea></textarea></label></p></strong>
</form></pre>
- <p>Finally, to make the form submittable we use the
- <code><a href=#the-button-element>button</a></code> element:</p>
+ <p>Finally, to make the form submittable we use the <code><a href=#the-button-element>button</a></code> element:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44519,12 +44504,10 @@
<p><i>This section is non-normative.</i></p>
- <p>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 <code title="">https://pizza.example.com/order.cgi</code> is configured to
- accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
- format, expecting the following parameters sent in an HTTP POST
- body:</p>
+ <p>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 <code title="">https://pizza.example.com/order.cgi</code> is configured to accept submissions using the
+ <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> format,
+ expecting the following parameters sent in an HTTP POST body:</p>
<dl><dt><code title="">custname</code></dt>
<dd>Customer's name</dd>
@@ -44551,29 +44534,22 @@
<p><i>This section is non-normative.</i></p>
- <p>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 <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
- attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
- doesn't specify how the form data is encoded, though; to specify
- that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
- attribute. You also have to specify the <a href=#url>URL</a> of the
- service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
+ <p>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 <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
+ attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This doesn't specify how the form data is
+ encoded, though; to specify that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
+ attribute. You also have to specify the <a href=#url>URL</a> of the service that will handle the
+ submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
- <p>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 (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
- the submission name. Radio buttons can be distinguished from each
- other in the submission by giving them different values, using the
- <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
+ <p>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 (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies the submission name.
+ Radio buttons can be distinguished from each other in the submission by giving them different
+ values, using the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
- <p>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 <code title=attr-input-value><a href=#attr-input-value>value</a></code>
- attribute.</p>
+ <p>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 <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
<p>Given the settings in the previous section, this all becomes:</p>
Modified: index
===================================================================
--- index 2013-01-26 01:10:18 UTC (rev 7655)
+++ index 2013-01-26 01:12:25 UTC (rev 7656)
@@ -44329,18 +44329,15 @@
<p><i>This section is non-normative.</i></p>
- <p>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.</p>
+ <p>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.</p>
- <p>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
+ <p>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.</p>
@@ -44348,34 +44345,25 @@
<p><i>This section is non-normative.</i></p>
- <p>For the purposes of this brief introduction, we will create a
- pizza ordering form.</p>
+ <p>For the purposes of this brief introduction, we will create a pizza ordering form.</p>
- <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
- are placed the controls. Most controls are represented by the
- <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
- text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
- used; the label text and the control itself go inside the
- <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
- <a href=#paragraph>paragraph</a>, and is typically separated from other parts
- using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
- one might ask for the customer's name:</p>
+ <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which are placed the controls. Most
+ controls are represented by the <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
+ text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is used; the label text and the
+ control itself go inside the <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
+ <a href=#paragraph>paragraph</a>, and is typically separated from other parts using <code><a href=#the-p-element>p</a></code> elements.
+ Putting this together, here is how one might ask for the customer's name:</p>
<pre><strong><form>
<p><label>Customer name: <input></label></p>
</form></strong></pre>
- <p>To let the user select the size of the pizza, we can use a set of
- radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
- element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
- attribute with the value <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">radio</a></code>. To make the radio
- buttons work as a group, they are given a common name using the
- <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
- of controls together, such as, in this case, the radio buttons, one
- can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
- of controls is given by the first element in the
- <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
- element.</p>
+ <p>To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons
+ also use the <code><a href=#the-input-element>input</a></code> element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">radio</a></code>. To make the radio buttons work as a group, they are
+ given a common name using the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one can use the
+ <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group of controls is given by the first element
+ in the <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code> element.</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44389,8 +44377,7 @@
<p class=note>Changes from the previous step are highlighted.</p>
- <p>To pick toppings, we can use checkboxes. These use the
- <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>
+ <p>To pick toppings, we can use checkboxes. These use the <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44409,11 +44396,12 @@
</fieldset></strong>
</form></pre>
- <p>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
- (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)">tel</a></code>) and e-mail addresses
- (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href="#e-mail-state-(type=email)">email</a></code>):</p>
+ <p>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 (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute set to <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)">tel</a></code>) and e-mail addresses
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to
+ <code title=attr-input-type-email><a href="#e-mail-state-(type=email)">email</a></code>):</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44434,15 +44422,13 @@
</fieldset>
</form></pre>
- <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href="#time-state-(type=time)">time</a></code> 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 <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
- <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. 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:</p>
+ <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute set to <code title=attr-input-type-time><a href="#time-state-(type=time)">time</a></code> 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 <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44464,9 +44450,9 @@
<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
</form></pre>
- <p>The <code><a href=#the-textarea-element>textarea</a></code> 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:</p>
+ <p>The <code><a href=#the-textarea-element>textarea</a></code> 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44489,8 +44475,7 @@
<strong> <p><label>Delivery instructions: <textarea></textarea></label></p></strong>
</form></pre>
- <p>Finally, to make the form submittable we use the
- <code><a href=#the-button-element>button</a></code> element:</p>
+ <p>Finally, to make the form submittable we use the <code><a href=#the-button-element>button</a></code> element:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -44519,12 +44504,10 @@
<p><i>This section is non-normative.</i></p>
- <p>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 <code title="">https://pizza.example.com/order.cgi</code> is configured to
- accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
- format, expecting the following parameters sent in an HTTP POST
- body:</p>
+ <p>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 <code title="">https://pizza.example.com/order.cgi</code> is configured to accept submissions using the
+ <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> format,
+ expecting the following parameters sent in an HTTP POST body:</p>
<dl><dt><code title="">custname</code></dt>
<dd>Customer's name</dd>
@@ -44551,29 +44534,22 @@
<p><i>This section is non-normative.</i></p>
- <p>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 <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
- attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
- doesn't specify how the form data is encoded, though; to specify
- that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
- attribute. You also have to specify the <a href=#url>URL</a> of the
- service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
+ <p>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 <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
+ attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This doesn't specify how the form data is
+ encoded, though; to specify that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
+ attribute. You also have to specify the <a href=#url>URL</a> of the service that will handle the
+ submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
- <p>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 (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
- the submission name. Radio buttons can be distinguished from each
- other in the submission by giving them different values, using the
- <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
+ <p>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 (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies the submission name.
+ Radio buttons can be distinguished from each other in the submission by giving them different
+ values, using the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
- <p>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 <code title=attr-input-value><a href=#attr-input-value>value</a></code>
- attribute.</p>
+ <p>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 <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
<p>Given the settings in the previous section, this all becomes:</p>
Modified: source
===================================================================
--- source 2013-01-26 01:10:18 UTC (rev 7655)
+++ source 2013-01-26 01:12:25 UTC (rev 7656)
@@ -51922,18 +51922,15 @@
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
- <p>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.</p>
+ <p>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.</p>
- <p>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
+ <p>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.</p>
@@ -51941,35 +51938,27 @@
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
- <p>For the purposes of this brief introduction, we will create a
- pizza ordering form.</p>
+ <p>For the purposes of this brief introduction, we will create a pizza ordering form.</p>
- <p>Any form starts with a <code>form</code> element, inside which
- are placed the controls. Most controls are represented by the
- <code>input</code> element, which by default provides a one-line
- text field. To label a control, the <code>label</code> element is
- used; the label text and the control itself go inside the
- <code>label</code> element. Each part of a form is considered a
- <span>paragraph</span>, and is typically separated from other parts
- using <code>p</code> elements. Putting this together, here is how
- one might ask for the customer's name:</p>
+ <p>Any form starts with a <code>form</code> element, inside which are placed the controls. Most
+ controls are represented by the <code>input</code> element, which by default provides a one-line
+ text field. To label a control, the <code>label</code> element is used; the label text and the
+ control itself go inside the <code>label</code> element. Each part of a form is considered a
+ <span>paragraph</span>, and is typically separated from other parts using <code>p</code> elements.
+ Putting this together, here is how one might ask for the customer's name:</p>
<pre><strong><form>
<p><label>Customer name: <input></label></p>
</form></strong></pre>
- <p>To let the user select the size of the pizza, we can use a set of
- radio buttons. Radio buttons also use the <code>input</code>
- element, this time with a <code title="attr-input-type">type</code>
- attribute with the value <code
- title="attr-input-type-radio">radio</code>. To make the radio
- buttons work as a group, they are given a common name using the
- <code title="attr-fe-name">name</code> attribute. To group a batch
- of controls together, such as, in this case, the radio buttons, one
- can use the <code>fieldset</code> element. The title of such a group
- of controls is given by the first element in the
- <code>fieldset</code>, which has to be a <code>legend</code>
- element.</p>
+ <p>To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons
+ also use the <code>input</code> element, this time with a <code
+ title="attr-input-type">type</code> attribute with the value <code
+ title="attr-input-type-radio">radio</code>. To make the radio buttons work as a group, they are
+ given a common name using the <code title="attr-fe-name">name</code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one can use the
+ <code>fieldset</code> element. The title of such a group of controls is given by the first element
+ in the <code>fieldset</code>, which has to be a <code>legend</code> element.</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -51983,8 +51972,7 @@
<p class="note">Changes from the previous step are highlighted.</p>
- <p>To pick toppings, we can use checkboxes. These use the
- <code>input</code> element with a <code
+ <p>To pick toppings, we can use checkboxes. These use the <code>input</code> element with a <code
title="attr-input-type">type</code> attribute with the value <code
title="attr-input-type-checkbox">checkbox</code>:</p>
@@ -52005,15 +51993,12 @@
</fieldset></strong>
</form></pre>
- <p>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
- (<code>input</code> elements with their <code
- title="attr-input-type">type</code> attribute set to <code
- title="attr-input-type-tel">tel</code>) and e-mail addresses
- (<code>input</code> elements with their <code
- title="attr-input-type">type</code> attribute set to <code
- title="attr-input-type-email">email</code>):</p>
+ <p>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 (<code>input</code> elements with their <code title="attr-input-type">type</code>
+ attribute set to <code title="attr-input-type-tel">tel</code>) and e-mail addresses
+ (<code>input</code> elements with their <code title="attr-input-type">type</code> attribute set to
+ <code title="attr-input-type-email">email</code>):</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -52034,18 +52019,14 @@
</fieldset>
</form></pre>
- <p>We can use an <code>input</code> element with its <code
- title="attr-input-type">type</code> attribute set to <code
- title="attr-input-type-time">time</code> 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 <code title="attr-input-min">min</code>,
- <code title="attr-input-max">max</code>, and <code
- title="attr-input-step">step</code>. 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:</p>
+ <p>We can use an <code>input</code> element with its <code title="attr-input-type">type</code>
+ attribute set to <code title="attr-input-type-time">time</code> 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 <code title="attr-input-min">min</code>, <code
+ title="attr-input-max">max</code>, and <code title="attr-input-step">step</code>. 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -52067,9 +52048,9 @@
<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
</form></pre>
- <p>The <code>textarea</code> 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:</p>
+ <p>The <code>textarea</code> 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:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -52092,8 +52073,7 @@
<strong> <p><label>Delivery instructions: <textarea></textarea></label></p></strong>
</form></pre>
- <p>Finally, to make the form submittable we use the
- <code>button</code> element:</p>
+ <p>Finally, to make the form submittable we use the <code>button</code> element:</p>
<pre><form>
<p><label>Customer name: <input></label></p>
@@ -52122,14 +52102,11 @@
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
- <p>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 <code
- title="">https://pizza.example.com/order.cgi</code> is configured to
- accept submissions using the <code
- title="attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</code>
- format, expecting the following parameters sent in an HTTP POST
- body:</p>
+ <p>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 <code
+ title="">https://pizza.example.com/order.cgi</code> is configured to accept submissions using the
+ <code title="attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</code> format,
+ expecting the following parameters sent in an HTTP POST body:</p>
<dl>
@@ -52161,30 +52138,23 @@
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
- <p>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 <code title="attr-fs-method">method</code>
- attribute is specified on the <code>form</code> element. This
- doesn't specify how the form data is encoded, though; to specify
- that, you use the <code title="attr-fs-enctype">enctype</code>
- attribute. You also have to specify the <span>URL</span> of the
- service that will handle the submitted data, using the <code
- title="attr-fs-action">action</code> attribute.</p>
+ <p>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 <code title="attr-fs-method">method</code>
+ attribute is specified on the <code>form</code> element. This doesn't specify how the form data is
+ encoded, though; to specify that, you use the <code title="attr-fs-enctype">enctype</code>
+ attribute. You also have to specify the <span>URL</span> of the service that will handle the
+ submitted data, using the <code title="attr-fs-action">action</code> attribute.</p>
- <p>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 (<code title="attr-fe-name">name</code>) also specifies
- the submission name. Radio buttons can be distinguished from each
- other in the submission by giving them different values, using the
- <code title="attr-input-value">value</code> attribute.</p>
+ <p>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 (<code title="attr-fe-name">name</code>) also specifies the submission name.
+ Radio buttons can be distinguished from each other in the submission by giving them different
+ values, using the <code title="attr-input-value">value</code> attribute.</p>
- <p>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 <code title="attr-input-value">value</code>
- attribute.</p>
+ <p>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 <code
+ title="attr-input-value">value</code> attribute.</p>
<p>Given the settings in the previous section, this all becomes:</p>
More information about the Commit-Watchers
mailing list