HTML Required Attribute

The HTML required attribute makes a form field mandatory. Users must provide a valid value or make a required selection before the browser allows normal form submission. This attribute is commonly used in registration forms, login pages, contact forms, surveys, and checkout pages.

What Is the HTML Required Attribute?

The required attribute is a Boolean attribute used with supported form controls. When it is present, the browser checks whether the field has an acceptable value before submitting the form.

For example, a registration form can require users to enter their name and email address before creating an account.

To understand how required fields work, explore HTML Forms and HTML Form Validation.

HTML Required Attribute Example

The following example demonstrates how to make form fields mandatory.

<form>
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>

  <br><br>

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>

  <br><br>

  <button type="submit">Register</button>
</form>

In this example:

• required makes the name field mandatory.
• required also makes the email field mandatory.
• type="email" checks the basic format of the email address.
• The browser prevents normal form submission if a required field is empty or its value is invalid.

The browser usually displays a validation message when the user attempts to submit an incomplete form.

Using Required with Different Input Types

The required attribute works with several supported input types, including text, email, password, number, date, radio buttons, checkboxes, and file inputs.

For example, you can require users to choose a course and agree to terms.

<form>
  <label for="course">Select a Course:</label>

  <select id="course" name="course" required>
    <option value="">Choose a course</option>
    <option value="java">Java</option>
    <option value="python">Python</option>
  </select>

  <br><br>

  <input type="checkbox" id="terms" name="terms" required>
  <label for="terms">I agree to the terms.</label>

  <br><br>

  <button type="submit">Continue</button>
</form>

The course dropdown requires a non-empty selection, and the checkbox must be checked before normal form submission.

For more information, read about HTML Form Elements and HTML Select.

Required Attribute with Radio Buttons

For a group of radio buttons sharing the same name, applying required to one or more radio buttons makes selecting an option from that group necessary.

<form>
  <p>Select Your Preferred Language:</p>

  <input type="radio" id="java" name="language" value="Java" required>
  <label for="java">Java</label>

  <input type="radio" id="python" name="language" value="Python">
  <label for="python">Python</label>

  <button type="submit">Submit</button>
</form>

Users must select Java or Python before the browser allows normal form submission.

Required Attribute vs Placeholder

The required attribute makes a field mandatory, while placeholder displays a hint inside an empty input field.

<label for="username">Username:</label>

<input
  type="text"
  id="username"
  name="username"
  placeholder="Enter your username"
  required
>

Here, the placeholder guides the user, while required ensures that a value is entered.

Can CSS Style Required Fields?

Yes. CSS provides the :required pseudo-class to select form controls that have the required attribute.

<style>
  input:required,
  select:required,
  textarea:required {
    border: 2px solid #007bff;
  }
</style>

This example gives required fields a blue border. In production forms, make sure the styling remains clear and accessible.

Important Limitations of the Required Attribute

The required attribute provides browser-side validation, but it does not replace server-side checks. Users can bypass browser validation, so applications should validate submitted data on the server.

Also, required checks whether a value is provided; it does not guarantee that the value is accurate or belongs to the user. For example, requiring an email address does not prove that the user owns that address.

Frequently Asked Questions

Is the required attribute a Boolean attribute?

Yes. Its presence enables the required constraint. Writing required="false" does not disable it; remove the attribute to make the field optional.

Can I use required with a textarea?

Yes. Add required to a <textarea> element to require users to enter text.

Does required work with checkboxes?

Yes. A required checkbox must be checked before normal form submission.

Can JavaScript bypass required validation?

JavaScript can disable browser validation or submit data through other mechanisms. Always validate important fields on the server as well.