HTML & CSS reference

required

Makes a field required: the form will not submit while it is empty.

Syntax

<input name="email" required>

Examples

Press the button without filling in the field:

<form>
  <label>Name <input name="name" required></label>
  <label><input type="checkbox" required> I accept the terms</label>
  <button>Send</button>
</form>

Highlighting required and invalid fields:

<style>
  input:required { border-left: 4px solid orange; }
  input:user-invalid { outline: 2px solid crimson; }
</style>
 
<form><input type="email" placeholder="Email" required> <button>OK</button></form>

Notes

It works on <input>, <select> and <textarea>. Browser validation is a convenience for users, not protection: the server must still check the data. Also mark required fields in the label, for example with an asterisk.

Related recipes

In the tutorial

Form validation — Built-in field validation in the browser — required, minlength and maxlength, min and max, pattern, styling errors and novalidate.

Thanks for reading!