[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