HTML5 and CSS3, Second Edition

Tip 5

Describing Data with New Input Fields

HTML5 introduces several new input types that you can use to better describe

the type of data your users are entering. In addition to the standard text

fields, radio buttons, and checkbox elements, you can use elements such as

email fields, calendars, color pickers, spinboxes, and sliders. Browsers can

use these new fields to display better controls to the user without the need

for JavaScript. Mobile devices and virtual keyboards for tablets and touch

screens can use the field types to display different keyboard layouts. For

example, Safari on iOS displays alternate keyboard layouts when the user is

entering data into the URL and email types, making special characters like @,

., :, and / easily accessible.

AwesomeCo is working on creating a new project-management web application

to make it easier for developers and managers to keep up with the progress

of the many projects they have going on. Each project has a name, a contact

email address, and a staging URL so managers can preview the website as

it’s being built. There are also fields for the start date, priority, and estimated

number of hours the project should take to complete. Finally, the development

manager would like to give each project a color so he can quickly identify

projects when he looks at reports.

Let’s mock up a quick project preferences page using the new HTML5 fields.

When we’re done, our form will look something like this:

report erratum • discuss

Describing Data with New Input Fields • 39

Download from Wow! eBook <www.wowebook.com>