The Current State of HTML5 Forms

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;
}