Attribute required

The required attribute is added to required fields of a form. If a field with this attribute is not filled in, the browser will show a warning and prevent the form submission.

In the example below, the phone field is required:

        
          
          <form>  <label>    Your name:    <input type="text">  </label>  <label>    Your phone number (required):    <input type="tel" required>  </label>  <button type="submit">Submit application</button></form>
          <form>
  <label>
    Your name:
    <input type="text">
  </label>
  <label>
    Your phone number (required):
    <input type="tel" required>
  </label>
  <button type="submit">Submit application</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

It is enough to write the required attribute without a value since it is boolean: if it is present — the field is required, and if not — it is not required. If for some reason you cannot use boolean attributes (for example, in XML markup), write required="required".

The required attribute can be used for <select>, <textarea>, as well as for <input> with the following types:

• text,
• search,
• url,
• tel,
• email,
• password,
• date,
• month,
• week,
• time,
• datetime-local,
• number,
• checkbox,
• radio,
• file.

If in a group of radio buttons with the same name attribute value at least one has the required attribute specified, the entire group will be considered required. Therefore, it is better to explicitly set required for all radio buttons in the group. This does not work for checkboxes with the same names. Only the checkbox that has the attribute specified will be required.

The attribute will not work for any buttons, as well as for input fields with types color and range. The reason is that such fields have a default value, even if it is not explicitly specified in the value attribute. For <input type="color">, it is #000000, and for <input type="range">, it is the average value between min and max. So the browser will consider them filled in any case and will not show a warning.

Additionally, the required attribute does not work for hidden fields type="hidden" and for fields with the readonly attribute.

At the moment of form submission, the browser performs validation of the entered data. If a field that has the required attribute is not filled in, the browser will not allow the form to be submitted and will show a message. The appearance and text of the message may differ in different browsers. The message in Google Chrome:

💡 Fields with the required attribute can be styled using the pseudo-class :required. Fields that do not have this attribute are styled with the pseudo-class :optional.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 It is necessary to visually highlight the required fields in the form. Historically, it has been that asterisk is placed next to the label for the field. Previously, an explanation was written below the form stating that the asterisk means a required field. However, over time, even the explanation has disappeared.

The asterisk is a bad pattern. At the very least, because a screen reader will simply read it as "asterisk." It is better to explicitly write in parentheses "(required)." Then the user, regardless of the tool they are using, will definitely know that the field needs to be filled out.

+ Open