Then we align the labels and the input fields and add a little styling to the
input fields.html5_forms/stylesheets/style.css
label{
float:left;
width:150px;
}input{ border:1px solid#333;}input:focus{background-color:#ffe;}Using the :focus pseudoclass, we can apply styling to the field that currently
has focus.This gives us a presentable and semantic web form. We could go even farther
and identify each of the field types using CSS.Chrome and Opera support most of these new controls, but when you open
the page in Firefox, Safari, or Internet Explorer, many of the fields will display
as regular text fields.Falling Back
Browsers that don’t understand these new types simply fall back to the text
type, so your forms will still be usable. At that point you can decide whether
you want to use a widget or another library. For example, you can check if
the browser supports the calendar control, and if it doesn’t, you could add
one using jQuery UI. Then as more browsers implement full-featured controls,
you can remove your fixes. Let’s go through the process by adding support
for the color picker. The process will be basically the same for any other
control for which we’d want to create a fallback.Replacing the Color Picker
Thanks to CSS3’s attribute selector, we can easily identify and replace the
color picker using jQuery and the jQuery-simple-color plug-in.^2 We locate
any <input> field with the type of color and apply the plug-in like this:$('input[type=color]').simpleColor();Since we used the new form types in our markup, we don’t have to add an
additional class name or other markup to identify the color pickers. CSS
attribute selectors and HTML5 go together quite well.Chapter 3. Creating User-Friendly Web Forms • 44
Download from Wow! eBook <www.wowebook.com> report erratum • discuss