23.05.2015 Views

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

SHOW MORE
SHOW LESS

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.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!