HTML5 Forms Feature

Forms continue to provide an important way for users to interact with you and your site, and the HTML5 draft specification provides a significant number of new form input types, attributes, and other features for creating usable and extensible forms. Using these new features will transform how you enter, validate, process, and display user-inserted data—without the addition of scripts to your HTML markup.

HTML5 Forms

the expressive web

Minimum Browser Support:

HTML5 Forms

Internet Explorer
NA
Firefox
4.0 (Partial)
Safari
4.0 (Partial)
Chrome
2.0
Opera
10.5
Opera Mobile
10.0
iOS
4.0 (Partial)
Android
NA

36.92%

Percentage of users who can view this feature (source: caniuse.com)

Examples

WUFOO.com
Makes extensive use of the forms features in HTML5 to allow users to build online forms.
Wheels of Steels
Uses hidden HTML5 form elements to create an interactive turntable / mixer.

Reference and Documentation

Tutorials and Resources

Feature Detection

Modernizr.inputtypes[type]

Modernizr.input[attribute]

if(Modernizr.inputtypes.search){
   //the search input type is supported
}
if(Modernizr.input.autofocus){
   //the autofocus input attribute is supported
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

When specifying a new input type in a browser that does not support it, the input type will default to a regular text input. You can either provide the forms without the added functionality, or you can use a combination of CSS and JavaScript to replicate the functionality when running in browsers that do not support the new features.

Related Adobe Technologies

Adobe Dreamweaver