Skip to content

Commit

Permalink
[e] (0) Add textarea, required, maxlength to the tutorial.
Browse files Browse the repository at this point in the history 
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8933

git-svn-id: http://svn.whatwg.org/webapps@4753 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Feb 17, 2010
1 parent 815a1ba commit c3d9421
Show file tree
Hide file tree
Showing 3 changed files with 332 additions and 14 deletions.
116 changes: 111 additions & 5 deletions complete.html
View file
Expand Up @@ -544,7 +544,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<ol>
<li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
<li><a href=#configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</a></ol></li>
<li><a href=#configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</a></li>
<li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></ol></li>
<li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
<li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
<li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
Expand Down Expand Up @@ -30994,6 +30995,31 @@ <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writi
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
<strong> &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</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>

<pre>&lt;form&gt;
&lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=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&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;</strong>
&lt;/form&gt;</pre>

<p>Finally, to make the form submittable we use the
Expand All @@ -31017,6 +31043,7 @@ <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writi
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
<strong> &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;</strong>
&lt;/form&gt;</pre>

Expand Down Expand Up @@ -31050,6 +31077,9 @@ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10
<dt><code title="">delivery</code></dt>
<dd>The requested delivery time</dd>

<dt><code title="">comments</code></dt>
<dd>The delivery instructions</dd>

</dl><h5 id=configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</h5>

<p><i>This section is non-normative.</i></p>
Expand Down Expand Up @@ -31100,17 +31130,93 @@ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="mushroom"</strong>&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea<strong> name="comments"</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>

<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
Cheese and Mushroom toppings, and entered a delivery time of 7pm,
the user agent would submit the following to the online Web
service:</p>
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:</p>

<pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</pre>


<pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00</pre>

<h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</h5>

<p><i>This section is non-normative.</i></p>

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

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

<pre>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi"&gt;
&lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
&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;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>

<p>It is also possible to limit the length of the input, using the
<code title=attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute. By
adding this to the <code><a href=#the-textarea-element>textarea</a></code> 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:</p>

<pre>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi"&gt;
&lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
&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;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"<strong> maxlength=1000</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
&lt;/form&gt;</pre>



Expand Down

0 comments on commit c3d9421

Please sign in to comment.