The HTML required attribute
The HTML required attribute makes a form field mandatory, as in <input name="email" required>. If the field is empty when the form is submitted, the browser stops the submission and reports the problem on that field. A required one-row <select> also needs an empty first option.
Overview
The HTML required attribute marks a form control that must have a value before its form is submitted. Even required="false" makes a field required, since it's a boolean attribute. <select> and <textarea> accept it, as does every <input> type except range, color, hidden and buttons.
What counts as filled depends on the control. A text field needs at least one character, and a space counts. A checkbox has to be checked, a radio group needs one selected button, a file input needs a file, and a select needs an option other than its placeholder.
The placeholder is a first <option> with an empty value, as in <option value="">Choose a size</option>. Without one, a select that shows one row starts on its first option and passes untouched, so the HTML standard requires the placeholder there.
The check runs when someone submits the form by button or Enter key, or a script calls requestSubmit(), unless novalidate or formnovalidate turns it off. The browser then fires an invalid event at each failing field instead of the submit event, and Chrome and Firefox focus the first one.
Syntax
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="size">Size</label>
<select id="size" name="size" required>
<option value="">Choose a size</option>
<option>Small</option>
<option>Large</option>
</select>Values
| Value |
|---|
| Needs no value to make the control mandatory. |
Example
<form id="rsvp">
<p style="margin:8px 0"><label for="guest">Name (required)</label>
<input id="guest" name="guest" required></p>
<p style="margin:8px 0"><label for="meal">Meal (required)</label>
<select id="meal" name="meal" required>
<option value="">Choose a meal</option>
<option>Chicken</option>
<option>Vegetarian</option>
</select></p>
<p style="margin:8px 0"><label><input type="checkbox" name="terms" required> I accept the terms (required)</label></p>
<button>Send RSVP</button>
<p id="msg" role="status" style="overflow-wrap:anywhere"></p>
<p>Press Send RSVP, then fill it in and resend.</p>
</form>
<script>
const form = document.getElementById('rsvp');
const msg = document.getElementById('msg');
form.querySelector('button').addEventListener('click', function () {
const empty = [...form.elements].filter(el => el.validity.valueMissing).map(el => el.name);
msg.textContent = empty.length ? 'Still empty: ' + empty.join(', ') : '';
});
form.addEventListener('submit', function (e) {
e.preventDefault();
msg.textContent = 'Sent: ' + [...new FormData(form)].map(pair => pair.join('=')).join(', ');
});
</script>Best practices
- Mark every radio button in a group with
required. One is enough to make the group required, but marking them all leaves no doubt for anyone reading the markup. - Style errors with
:user-invalidrather than:invalid. An empty required field matches :invalid at page load. :user-invalid waits for a submit attempt or a finished change, such as leaving an edited text field or unchecking a box. - Send forms from scripts with
requestSubmit(), notsubmit(). Thesubmit()method skips constraint validation, so empty required fields go through. - When a VAT number only matters for business orders, set
vat.required = business.checkedfrom a change listener. Setting the property to false also removes the attribute.
Accessibility
When a form mixes required and optional fields, mark the required ones visibly. The marker shouldn't rely on color alone, and text or an icon is the usual choice. The attribute itself maps to aria-required for assistive technology, so no extra ARIA is needed.
