Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) Trying to improve the forms tutorial a bit.
Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@7390 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Sep 21, 2012
1 parent 69e1fc0 commit c2f33ce
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 48 deletions.
38 changes: 22 additions & 16 deletions complete.html
Expand Up @@ -45800,6 +45800,12 @@ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

<p class=note>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 <span title=syntax-attribute>in the
syntax section.</span></p>

<p>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
Expand All @@ -45824,9 +45830,9 @@ <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side
<p>The simplest annotation is the <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute, which can be
specified on <code><a href=#the-input-element>input</a></code> elements to indicate that the form
is not to be submitted until a value is given. By adding this
attribute to the customer name and delivery time fields, we allow
the user agent to notify the user when the user submits the form
without filling in those fields:</p>
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:</p>

<pre>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
Expand All @@ -45836,9 +45842,9 @@ <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45867,9 +45873,9 @@ <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45909,9 +45915,9 @@ <h5 id=enabling-client-side-automatic-filling-of-form-controls><span class=secno
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" <strong>autocomplete="shipping email"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45949,9 +45955,9 @@ <h5 id=improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -46077,7 +46083,7 @@ <h5 id=input-author-notes><span class=secno>4.10.1.8 </span>Date, time, and numb
numbers, where locales differ, for example, in what punctuation is
used as the decimal separator and the thousands separator.</p>

<p>It therefore is important to distinguish the time, date, and
<p>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
Expand Down
38 changes: 22 additions & 16 deletions index
Expand Up @@ -45800,6 +45800,12 @@ the cell that corresponds to the values of the two dice.
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

<p class=note>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 <span title=syntax-attribute>in the
syntax section.</span></p>

<p>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
Expand All @@ -45824,9 +45830,9 @@ the cell that corresponds to the values of the two dice.
<p>The simplest annotation is the <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute, which can be
specified on <code><a href=#the-input-element>input</a></code> elements to indicate that the form
is not to be submitted until a value is given. By adding this
attribute to the customer name and delivery time fields, we allow
the user agent to notify the user when the user submits the form
without filling in those fields:</p>
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:</p>

<pre>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
Expand All @@ -45836,9 +45842,9 @@ the cell that corresponds to the values of the two dice.
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> required</strong> value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45867,9 +45873,9 @@ the cell that corresponds to the values of the two dice.
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45909,9 +45915,9 @@ the cell that corresponds to the values of the two dice.
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" <strong>autocomplete="shipping email"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -45949,9 +45955,9 @@ the cell that corresponds to the values of the two dice.
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
Expand Down Expand Up @@ -46077,7 +46083,7 @@ the cell that corresponds to the values of the two dice.
numbers, where locales differ, for example, in what punctuation is
used as the decimal separator and the thousands separator.</p>

<p>It therefore is important to distinguish the time, date, and
<p>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
Expand Down
38 changes: 22 additions & 16 deletions source
Expand Up @@ -53503,6 +53503,12 @@ the cell that corresponds to the values of the two dice.
&lt;p>&lt;button>Submit order&lt;/button>&lt;/p>
&lt;/form></pre>

<p class="note">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 <span title="syntax-attribute">in the
syntax section</a>.</p>

<p>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
Expand All @@ -53528,9 +53534,9 @@ the cell that corresponds to the values of the two dice.
title="attr-input-required">required</code> attribute, which can be
specified on <code>input</code> elements to indicate that the form
is not to be submitted until a value is given. By adding this
attribute to the customer name and delivery time fields, we allow
the user agent to notify the user when the user submits the form
without filling in those fields:</p>
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:</p>

<pre>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
Expand All @@ -53540,9 +53546,9 @@ the cell that corresponds to the values of the two dice.
&lt;p>&lt;label>E-mail address: &lt;input type=email name="custemail">&lt;/label>&lt;/p>
&lt;fieldset>
&lt;legend> Pizza Size &lt;/legend>
&lt;p>&lt;label> &lt;input type=radio name=size value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="large"> Large &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size<strong> required</strong> value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size<strong> required</strong> value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size<strong> required</strong> value="large"> Large &lt;/label>&lt;/p>
&lt;/fieldset>
&lt;fieldset>
&lt;legend> Pizza Toppings &lt;/legend>
Expand Down Expand Up @@ -53571,9 +53577,9 @@ the cell that corresponds to the values of the two dice.
&lt;p>&lt;label>E-mail address: &lt;input type=email name="custemail">&lt;/label>&lt;/p>
&lt;fieldset>
&lt;legend> Pizza Size &lt;/legend>
&lt;p>&lt;label> &lt;input type=radio name=size value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="large"> Large &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="large"> Large &lt;/label>&lt;/p>
&lt;/fieldset>
&lt;fieldset>
&lt;legend> Pizza Toppings &lt;/legend>
Expand Down Expand Up @@ -53613,9 +53619,9 @@ the cell that corresponds to the values of the two dice.
&lt;p>&lt;label>E-mail address: &lt;input type=email name="custemail" <strong>autocomplete="shipping email"</strong>>&lt;/label>&lt;/p>
&lt;fieldset>
&lt;legend> Pizza Size &lt;/legend>
&lt;p>&lt;label> &lt;input type=radio name=size value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="large"> Large &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="large"> Large &lt;/label>&lt;/p>
&lt;/fieldset>
&lt;fieldset>
&lt;legend> Pizza Toppings &lt;/legend>
Expand Down Expand Up @@ -53653,9 +53659,9 @@ the cell that corresponds to the values of the two dice.
&lt;p>&lt;label>E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email">&lt;/label>&lt;/p>
&lt;fieldset>
&lt;legend> Pizza Size &lt;/legend>
&lt;p>&lt;label> &lt;input type=radio name=size value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size value="large"> Large &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="small"> Small &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="medium"> Medium &lt;/label>&lt;/p>
&lt;p>&lt;label> &lt;input type=radio name=size required value="large"> Large &lt;/label>&lt;/p>
&lt;/fieldset>
&lt;fieldset>
&lt;legend> Pizza Toppings &lt;/legend>
Expand Down Expand Up @@ -53793,7 +53799,7 @@ the cell that corresponds to the values of the two dice.
numbers, where locales differ, for example, in what punctuation is
used as the decimal separator and the thousands separator.</p>

<p>It therefore is important to distinguish the time, date, and
<p>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
Expand Down

0 comments on commit c2f33ce

Please sign in to comment.