The Boolean required
attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required
attribute is supported by text
, search
, url
, tel
, email
, password
, date
, month
, week
, time
, datetime-local
, number
, checkbox
, radio
, file,
types along with the <input>
and <select>
form control elements. If present on any of these input types and elements, the <textarea>
pseudo class will match. If the attribute is not included, the :required
pseudo class will match.:optional
The attribute is not supported or relevant to range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image
.
Note color
and range
don't support required, but type color
defaults to #00000
, and range defaults to the midpoint between min
and max
-- with min
and max
defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value.
When an input has the required
attribute, the :required
pseudo-class also applies to it. Conversely, inputs that support the required
attribute but don't have the attribute set match the :optional
pseudo-class.
In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be check, though it doesn't have to be the one with the attribute is applied. For this reason, to improve code maintenance, it is recommened to either include the required
attribute in every same-named radio button in the group or none.
In the case of a same named group of checkbox input types, only the checkboxes with the required
attribute are required.
Note: Setting aria-required="true"
tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.
Attribute interactions
Because a read-only field cannot have a value, required
does not have any effect on inputs with the readonly
attribute also specified.
Usability
When including the required
attribute, provide a visible indication near the control informing the user that the input, select or textarea is required. In addition, target required form controls with the :required
pseudo-class, styling them in a way to indicate they are required. This improves usability for sited user. Assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true"
doesn't hurt, in case the browser / screen reader combination does not support required yet.
Constraint validation
If the element is required and the element's value is the empty string, then the element is suffering from
and the element will match the valueMissing
:invalid
pseudo class.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'required attribute' in that specification. |
Living Standard | |
HTML5 The definition of 'required attribute' in that specification. |
Recommendation | |
HTML 5.1 The definition of 'required attribute' in that specification. |
Recommendation |
Accessibility concerns
Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as thru text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.
Example
HTML
<form> <div class="group"> <input type="text"> <label>Normal</label> </div> <div class="group"> <input type="text" required="required"> <label>Required</label> </div> <input type="submit"> </form>
Result
Browser compatibility
No compatibility data found. Please contribute data for "html.elements.attributes.required" (depth: 1) to the MDN compatibility data repository.