The Current State of HTML5 Forms

Browser support for the different features
of HTML5 forms is quite varied. Let's explore.

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.

Since HTML5 is fairly new and not all the details have been worked out yet, 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.

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+ 2.3-

Tel ?

4+ 5+ 3.1+ 6+ 10.6+ 10+ 2.3+

Url ?

4+ 5+ 3.1+ 6+/10+ 10.6+ 10+ 2.3-

Search ?

3.6/4+ 5+ 4+ 6+ 10.6+ 9/10+ 2.3-

Color ?

11- 5.2- 5- 20+ 11+ 10- 2.3-

Number ?

11- 4/5.2+ 4+ 9-/10+ 11+ 10- 2.3+

Range ?

11- 4+ 5+ 6+ 9+ 10+ 2.3-

Date ?

11- 5+ 5- 10/17/20+ 10.6+ 10- 2.3-

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

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android

Placeholder ?

4+ 4/5+ 4+ 10+ 11.10/11.50 10+ 2.3+

Autofocus ?

4+ 5+ 5- 6+ 11+ 10+ 2.3-

Maxlength?

3.6/4+ 5+ 4+ 6+ 11+ 9/10 2.3+

List (Datalist)?

4+ 5- 5- 20+ 10.6+ 10+ 2.3-

Autocomplete ?

4+ 5.2+ N/A 17+ 10.6+ 10- 2.3-

Required ?

6+ 5- 5- 6+ 10.6+ 10+ 2.3-

Pattern ?

4+ 5- 5- 6/10+ 10.6/11+ 10+ 2.3-

Spellcheck ?

3.6+ 4+ 5- 10+ 11+ 10+ N/A

Novalidate ?

4+ 5- 5- 6+ 10.6+ 10+ 2.3-

Formnovalidate ?

4+ 5.2- 5- 6+ 10.6+ 10+ 2.3-

Formaction ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3-

Formmethod ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3-

Formtarget ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 2.3-

Formenctype ?

? ? ? ? ? ? ?

Accept ?

11+ 5.2+ N/A 10+ 10.6+ 10+ 2.3-

Multiple ?

3.6+ 5+ N/A 6+ 11+ 10+ 2.3-

Min / Max / Step?

11- 5+ 5- 6+ 10.6+ 10+ 2.3-

Browser Support for New HTML5 Form Elements

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android

Meter ?

16+ 5.2+ 5- 6+ 11+ 10- 2.3-

Progress ?

6+ 5.2+ 5- 6+ 10.6+ 10+ 2.3-

Output ?

6+ 5.1+ 5+ 13+ 9.2+ 10+ 2.3+

Keygen ?

3.6+ 4+ 5- 6+ 10.6+ 10- 2.3+

About Browser Versions

In these charts, a version number like "4" means "the very first release of version 4 of this browser". As in, 4.0.0. The plus (+) sign means "this version and up", and the minus (-) sign means "this version and down". Only very rarely is there features which worked in older browsers but not newer, and in those rare cases it's noted on the informational page associated with the feature.

Where did this data come from?

The information on this page largely came from testing this example HTML5 form in different browsers and also the isolated examples on these informational pages.

Supported Supported
Kinda supported Kind of supported (see info page)
Not supported Not Supported

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. On the right 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 the 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.

::-webkit-input-placeholder {
  /* Style placeholder text */
}
:-moz-placeholder  {
  /* Style placeholder text */
}
[type=search] {
  -webkit-appearance: none;
}
::-webkit-validation-bubble-message {
     padding: 50px;
}

See an error?

Sorry about that. We're committed to keeping this information accurate. Report the error here and we'll get it fixed ASAP.


Try before you buy. Create an account today and build 3 forms for FREE!