required

Learn how to enforce mandatory user input in HTML forms using the required attribute across various field types.

What it is

The required attribute is a boolean attribute that specifies whether an input field must be filled out before submitting the form. When present, the browser prevents submission if the field is empty or invalid. This applies to most input types, including text fields, email inputs, select dropdowns, and checkbox groups (where at least one must be checked). It does not apply to buttons or hidden inputs.

Why it matters

• Immediate Feedback: Users see validation errors instantly without waiting for server-side processing.
• Reduced Server Load: Prevents unnecessary requests with incomplete data.
• Accessibility: Screen readers announce required fields, helping users understand form expectations.
• Simplicity: Requires no JavaScript for basic validation logic.

Syntax or steps

Add the word required inside the opening tag of the form element. For checkboxes acting as a group, ensure they share the same name attribute; the browser will validate that at least one is checked if any have required.

Example

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

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

  <label for="country">Country:</label>
  <select id="country" name="country" required>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>

  <p>Terms and Conditions:</p>
  <input type="checkbox" id="terms" name="terms" required>
  <label for="terms">I agree to the terms</label>

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

Explanation: The username and email fields cannot be left blank. The select element requires a valid option other than the placeholder. The checkbox must be checked because it has the required attribute.

Common mistakes

• Using on Radio Groups Incorrectly: If you mark multiple radio buttons with required, the browser may behave inconsistently. Instead, mark only one radio button in the group as required, or rely on the fact that radios are mutually exclusive.
• Empty Select Options: Ensure your default "placeholder" option has an empty value="". If it has a non-empty value, the browser considers it selected and valid.
• Ignoring Custom Validation: required only checks for emptiness. It does not check format (e.g., phone numbers) unless combined with pattern or specific types like email.

When to use it

Use required for simple "must fill this out" scenarios. Use JavaScript when you need custom error messages, complex rules, or real-time formatting assistance.

Practice

Guided Exercise: Create a form with a password field that is required and has a minimum length of 8 characters using minlength.

Challenge: Add a set of three radio buttons for "Subscription Plan" where one must be selected. Hint: Apply required to just one radio button in the group.

Quick check

Question: Does the required attribute work on <input type="hidden">?
Answer: No, hidden inputs are ignored by validation constraints.

Summary

The required attribute provides a native, accessible way to ensure essential form data is provided. It works seamlessly with text, email, select, and checkbox elements, reducing the need for initial JavaScript validation while improving user experience through immediate feedback.