HTML required Attribute

Introduction

The required attribute marks a form field as mandatory. If the user tries to submit while it is empty (or unchecked for checkboxes/radios), the browser blocks submission and shows a native validation message. Use it on <input>, <select>, and <textarea>. It is a boolean attribute — presence means required. Pair with pattern, minlength, or type="email" for richer rules. Set element.required in JavaScript. Always re-validate on the server — client checks can be bypassed.

What You’ll Learn

Purpose of required Attribute

Forms need essential data — usernames, emails, terms acceptance, shipping addresses. The required attribute gives you built-in browser validation without writing JavaScript. Users get immediate feedback when they miss a field.

It improves data quality at the point of entry and works alongside other constraint attributes like pattern and minlength. Disabled fields and forms with novalidate skip this validation.

📝 Syntax

Add required as a boolean attribute on a form control:

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">Choose…</option>
  <option value="us">United States</option>
</select>

Syntax Rules

• Boolean attribute — required or required="required".
• Valid on input (most types), select, and textarea.
• Not on input type="hidden", button, reset, or submit.
• Empty string fails validation for text inputs; checkbox/radio must be checked.
• JavaScript: input.required = true or removeAttribute("required").
• Disabled fields are not validated and not submitted.
• Overridden when the parent form has novalidate.

💎 Values

The required attribute is a boolean — no meaningful string values:

• required — Field is mandatory (most common).
• required="required" — XHTML-style equivalent.
• Attribute absent — Field is optional (default).
• element.required = true / false — JavaScript toggle.

<!-- Boolean presence -->
<input type="email" name="email" required>

<!-- Checkbox group — one must be checked -->
<input type="checkbox" name="terms" required> I agree

Applicable Elements

required vs aria-required vs pattern

Examples Gallery

Single required field, login form with two required inputs, and toggling required on email with JavaScript.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <button type="submit">Submit</button>
</form>

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

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

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

<label>
  <input type="checkbox" id="needEmail" checked> Require email
</label>
<input type="email" id="email" name="email">

<script>
  var cb = document.getElementById("needEmail");
  var email = document.getElementById("email");
  function sync() { email.required = cb.checked; }
  cb.addEventListener("change", sync);
  sync();
</script>

♿ Accessibility

• Pair with labels — Every required field needs an associated <label>.
• Add aria-required="true" — Reinforces required state for screen readers (in addition to required).
• Indicate visually — Use asterisks or “(required)” in labels — do not rely on color alone.
• Native messages help — Browser validation bubbles are announced in many assistive tech setups.
• Custom errors — If using setCustomValidity(), keep messages clear and specific.

💡 Best Practices