The introduction

HTML5 is the newest specification for HTML, the language that web browsers read to display web pages. HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms.

Support for HTML5 web form features is improving, but not all web browsers support HTML5 features the same way. This page is intended to explore those new new features and help you understand which browsers are supporting which features and to what degree. As a whole, this represents the current state of HTML5 forms. But, even if you still need to support older browsers which don’t support all the new features, realize HTML5 Web Forms are an enhancement: you can use all the new attribute and input types, and your form will still work in archaic browsers.

The charts below list the most current version of each major browser. The individual pages (e.g. page for placeholder) shows past browser support.

Browser Support for New HTML5 Input Types



Firefox

Safari

Safari

Chrome

Opera

IE

Android Email 4+ 5+ 3.1+ 6+ / 10+ 10.6+ 10+ 4+ Tel 4+ 5+ 3.1+ 6+ 10.6+ 10+ 2.3+ Url 4+ 5+ 3.1+ 6+ / 10+ 10.6+ 10+ 2.3+ Search 4+ 5+ 4+ 6+ 10.6+ 9 / 10+ 4+ Color 29+ 8+ 8- 20+ 11+ 11- 4.4+ Number 29+ 5+ 3.2+ 7+ 9+ 10+ 2.3+ Range 23+ 4+ 5+ 6+ 11+ 10+ 4.2+ Date 32- 7- 5+ 20+ 9+ 11+ 4.4+ Text All All All All All All All Button All All All All All All All Hidden All All All All All All All Password All All All All All All All Checkbox All All All All All All All Radio All All All All All All All File All All All All All All All Submit All All All All All All All Reset All All All All All All All

All the new input types are supported in all browsers in that they will submit their data as if it were a “text” input. These valuations are based on if they do anything above and beyond and/or validate against the type of data relevant to them.

Browser Support for New HTML5 Input Attributes

Browser Support for New HTML5 Form Elements



Firefox

Safari

Safari

Chrome

Opera

IE

Android Meter 16+ 5.2+ 8- 8+ 11+ 11- 4.4+ Progress 6+ 5.2+ 7+ 6+ 10.6+ 10+ 4.4+ Output 4+ 5.1+ 5+ 10+ 11+ 10+ 2.3+ Keygen 3.6+ 4+ 7- 6+ 10.6+ 11- 2.3+ Datalist 4+ 8- 8- 20+ 9+ 10+ 4.4+ Option All All All All All All All Label All All All All All All All

JavaScript and HTML5 Forms

Testing for Support

If you intended to write JavaScript to mimic the functionality of HTML5 forms, you may want to first test the current browsers capability and write the JavaScript as a fallback. Below is how you might test for attribute support. More accurate feature testing can be done through the excellent JavaScript library Modernizr.

// Function to test for attribute support function elSupportsAttr(el, attr) { return attr in document.createElement(el); }

// Usage if (!elSupportsAttr("textarea", "placeholder")) { // your custom fallback }

Custom Validity Messages

You can override default validity error messages through JavaScript

var emailField = document.getElementById("emailField"); emailField.setCustomValidity("testing");

More JavaScript Fun

HTML5 has a number of useful JavaScript methods for manipulating forms.

// increase value by n input.stepUp(n) // decrease value by n input.stepDown(n) // return value as number instead of string input.valueAsNumber // return value in date format instead of string input.valueAsDate

CSS and HTML5 Forms

Pseudo classes

CSS3 has a number of new pseudo classes that can select form elements that are in particular states.

The :not() selector isn’t specific to forms, but is useful for selectors like :not([type=submit]) for selecting all inputs other than submit buttons.

The :valid pseudo selector will select the legend element of a fieldset that contains a valid input in Safari 5.

:required { } :optional { } :valid { } :invalid { } :default { } :in-range { } :out-of-range { } :not()

Attribute selectors

Attribute selectors help select elements that contain specific attributes. Since HTML5 forms have many new input attributes, this can be useful in targeting them.

[autofocus] { } [autocomplete] { } [list] { } [placeholder] { } [type=range] { /* and other types */ } [multiple]

Vendor Specific Stylings

There are a few visual aspects of HTML5 forms that may not be obvious how to style with CSS. For instance placeholder text, or how to fight against the default WebKit styling of a search for. A few snips of that nature to the right.