Building the User Interface by Using HTML5: Organization ... - server
Building the User Interface by Using HTML5: Organization ... - server
Building the User Interface by Using HTML5: Organization ... - server
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Building</strong> <strong>the</strong> <strong>User</strong> <strong>Interface</strong> <strong>by</strong> <strong>Using</strong> <strong>HTML5</strong>: <strong>Organization</strong>, Input, and Validation | 77<br />
EXPLORING FORM CREATION, INPUT ATTRIBUTES, AND VALUES<br />
To create a form, use <strong>the</strong> start and end tags. All of <strong>the</strong> form’s content and fields go<br />
between <strong>the</strong> two tags. Most forms also include <strong>the</strong> id attribute in <strong>the</strong> start tag, as follows:<br />
<br />
<br />
<br />
LICENSED PRODUCT NOT FOR RESALE<br />
The fieldset element is used with many forms to group related elements. The <br />
tag draws a box around individual elements and/or around <strong>the</strong> entire form, as shown in<br />
Figure 3-18.<br />
Figure 3-18<br />
The fieldset element<br />
groups related elements in a<br />
form and adds a border<br />
If <strong>the</strong> form is included in an HTML document with o<strong>the</strong>r items, you can use <strong>the</strong> tag<br />
at <strong>the</strong> beginning and end of <strong>the</strong> form to separate it from o<strong>the</strong>r content. <strong>Using</strong> <strong>the</strong> tag<br />
also lets you include inline formatting, if <strong>the</strong> form uses tags to align fields vertically short and<br />
simple and you don’t want to create a CSS style sheet. The tag uses <strong>the</strong> id attribute<br />
and appears before <strong>the</strong> first tag. The label element displays <strong>the</strong> label for each field.<br />
An example of <strong>the</strong> markup for a very simple form is:<br />
<br />
<br />
<br />
Name<br />
<br />
<br />
<br />
Email<br />
<br />
<br />
<br />
<br />
The form is shown in Figure 3-19.