html5/spec Overview.html,1.3800,1.3801

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv23804

Modified Files:
	Overview.html 
Log Message:
Add textarea, required, maxlength to the tutorial. (whatwg r4753)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.3800
retrieving revision 1.3801
diff -u -d -r1.3800 -r1.3801
--- Overview.html	17 Feb 2010 04:50:04 -0000	1.3800
+++ Overview.html	17 Feb 2010 05:07:55 -0000	1.3801
@@ -716,7 +716,8 @@
       <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>
@@ -24520,6 +24521,27 @@
   &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:<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
   <code><a href="#the-button-element">button</a></code> element:<pre>&lt;form&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
@@ -24539,6 +24561,7 @@
   &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><h5 id="implementing-the-server-side-processing-for-a-form"><span class="secno">4.10.1.2 </span>Implementing the server-side processing for a form</h5><p><i>This section is non-normative.</i><p>The exact details for writing a server-side processor are out of
   scope for this specification. For the purposes of this introduction,
@@ -24563,6 +24586,9 @@
    <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>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>
@@ -24601,13 +24627,73 @@
   &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:<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><h4 id="categories"><span class="secno">4.10.2 </span>Categories</h4><p>Mostly for historical reasons, elements in this section fall into
+  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:<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><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>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>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:<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:<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><h4 id="categories"><span class="secno">4.10.2 </span>Categories</h4><p>Mostly for historical reasons, elements in this section fall into
   several overlapping (but subtly different) categories in addition to
   the usual ones like <a href="#flow-content">flow content</a>, <a href="#phrasing-content">phrasing
   content</a>, and <a href="#interactive-content">interactive content</a>.<p>A number of the elements are <dfn id="form-associated-element" title="form-associated

Received on Wednesday, 17 February 2010 05:08:00 UTC