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.

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

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android

Placeholder ?

4+ 4+ 4+ 10+ 11.10+ 10+ 2.3+

Autofocus ?

4+ 5+ 5- 6+ 11+ 10+ 3+

Maxlength?

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

List (Datalist)?

4+ 7- 7- 20+ 9+ 10+ 4.3-

Autocomplete ?

4+ 5.2+ 6+ 14+ 10.6+ 11+ 4.4+

Required ?

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

Pattern ?

4+ 5+ 4+ 10+ 11+ 10+ 2.3+

Spellcheck ?

3.6+ 4+ 7+ 10+ 11+ 10+ 4.3-

Novalidate ?

4+ 7- 7- 10+ 10+ 10+ 4.2-

Formnovalidate ?

4+ 7- 7- 6+ 10.6+ 10+ 4.2-

Formaction ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 4.0+

Formmethod ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 4.0+

Formtarget ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 4.0+

Formenctype ?

4+ 5.2+ 5+ 10+ 10.6+ 10+ 4.0+

minlength ?

28- 7- 7- 33- 20- 11- 4.4-

readonly ?

All All All All All All All

disabled ?

All All All All All All All

size ?

All All All All All All All

name ?

All All All All All All All

height, width & source ?

All All All All All All All

checked ?

All All All All All All All

tabindex ?

All All All All All All All

form ?

4+ 5.1+ 5+ 10+ 9.5+ 11+ 4.0+

inputmode ?

FF OS 7- 7- 34- 20- 10- 4.4-

dirname ?

29- 6+ 6+ 16+ 10.6+ 11- 4.4+

Accept ?

11+ 5.2+ 7+ 10+ 10.6+ 10+ 4.2-

Multiple ?

3.6+ 5+ 7+ 6+ 11+ 10+ 4.?+

Min / Max / Step?

16+ 5+ 3.2 6+ 10.6+ 10+ 4+

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.3+

Option ?

All All All All All All All

Label ?

All All All All All All All

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 and test suites.

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!