The required Attribute

Live Demo

Firefox 6+	Safari 5+	Safari 4+	Chrome 6+	Opera 10.6+	IE 10+	Android 2.3

The Low Down

The Boolean required attribute marks any form control as being required to have a value before the form can be submitted. In browsers supporting constraint validation, any fields with this attribute which lack a value will prevent the form from being submitted.

• Any field with the required attribute must also have a name attribute. Fields without names are not a part of submission, so are ignored in validation.
• Upon form submission, the first invalid field will be forced into focus. If this is a required field with no value, the browsers like a “hint” to fill it out).
• Relevant for the text, search, url, tel, radio, checkbox, email, password, number, file, and the date/time input types. The range and color input types have default values, so requiring them would be redundant. The user can not interact with the hidden input type, so that type can’t be required. Also, the button input types can’t be required.
• Possibly not as user friendly as JavaScript solutions which can check validation on blur (as you fill out the form), and display hints for more than one field at a time.
• There is a CSS pseudo class selector for matching elements that are required:

:required:focus {
  box-shadow: 0  0 3px rgba(255,0,0,0.5); 
}

• If you put required on a radio button, one radio button of the same named group of radio buttons will be required, though not necessarily the one with the required attribute on it. On checkboxes, each individual checkbox with the required attribute is required, and must be checked.
• Safari, iOS and Android browsers do not validate on submission. While the :required UI pseudoclass is supported in these browsers, requiring a field for page sumbission is not supported.