[html5] r4753 - [e] (0) Add textarea, required, maxlength to the tutorial. Fixing http://www.w3. [...]

whatwg at whatwg.org whatwg at whatwg.org
Tue Feb 16 21:07:51 PST 2010


Author: ianh
Date: 2010-02-16 21:07:49 -0800 (Tue, 16 Feb 2010)
New Revision: 4753

Modified:
   complete.html
   index
   source
Log:
[e] (0) Add textarea, required, maxlength to the tutorial.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8933

Modified: complete.html
===================================================================
--- complete.html	2010-02-17 04:49:57 UTC (rev 4752)
+++ complete.html	2010-02-17 05:07:49 UTC (rev 4753)
@@ -544,7 +544,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>
@@ -30996,6 +30997,31 @@
 <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>
+
+  <pre><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>
+<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>
 
@@ -31017,6 +31043,7 @@
   <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>
 <strong> <p><button>Submit order</button><p></strong>
 </form></pre>
 
@@ -31050,6 +31077,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>
@@ -31100,21 +31130,97 @@
   <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
  </fieldset>
  <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><label>Delivery instructions: <textarea<strong> name="comments"</strong>></textarea></label></p>
  <p><button>Submit order</button><p>
 </form></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&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+  <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&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>
+
+  <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><form method="post"
+      enctype="application/x-www-form-urlencoded"
+      action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname"<strong> required</strong>></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"<strong> required</strong>></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></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><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 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" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"<strong> maxlength=1000</strong>></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+
+
+
   <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>
 
   <p>Mostly for historical reasons, elements in this section fall into

Modified: index
===================================================================
--- index	2010-02-17 04:49:57 UTC (rev 4752)
+++ index	2010-02-17 05:07:49 UTC (rev 4753)
@@ -551,7 +551,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>
@@ -30898,6 +30899,31 @@
 <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>
+
+  <pre><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>
+<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>
 
@@ -30919,6 +30945,7 @@
   <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>
 <strong> <p><button>Submit order</button><p></strong>
 </form></pre>
 
@@ -30952,6 +30979,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>
@@ -31002,21 +31032,97 @@
   <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
  </fieldset>
  <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><label>Delivery instructions: <textarea<strong> name="comments"</strong>></textarea></label></p>
  <p><button>Submit order</button><p>
 </form></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&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+  <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&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>
+
+  <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><form method="post"
+      enctype="application/x-www-form-urlencoded"
+      action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname"<strong> required</strong>></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"<strong> required</strong>></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></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><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 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" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"<strong> maxlength=1000</strong>></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+
+
+
   <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>
 
   <p>Mostly for historical reasons, elements in this section fall into

Modified: source
===================================================================
--- source	2010-02-17 04:49:57 UTC (rev 4752)
+++ source	2010-02-17 05:07:49 UTC (rev 4753)
@@ -34198,6 +34198,31 @@
 <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>
+
+  <pre><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>
+<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>
 
@@ -34219,6 +34244,7 @@
   <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>
 <strong> <p><button>Submit order</button><p></strong>
 </form></pre>
 
@@ -34256,6 +34282,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>
 
 
@@ -34310,21 +34339,98 @@
   <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
  </fieldset>
  <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><label>Delivery instructions: <textarea<strong> name="comments"</strong>></textarea></label></p>
  <p><button>Submit order</button><p>
 </form></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&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+  <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre>
 
 
 
+  <h5>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">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>
+
+  <pre><form method="post"
+      enctype="application/x-www-form-urlencoded"
+      action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname"<strong> required</strong>></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"<strong> required</strong>></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+  <p>It is also possible to limit the length of the input, using the
+  <code title="attr-fe-maxlength">maxlength</code> attribute. By
+  adding this to the <code>textarea</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><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 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" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments"<strong> maxlength=1000</strong>></textarea></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+
+
+
   <h4>Categories</h4>
 
   <p>Mostly for historical reasons, elements in this section fall into




More information about the Commit-Watchers mailing list