Справочник HTML & CSS

required

Делает поле обязательным: форма не отправится, пока оно пустое.

Синтаксис

<input name="email" required>

Примеры

Нажмите кнопку, не заполнив поле:

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

Подсветка обязательных и неверных полей:

<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>

Примечания

Работает для <input>, <select> и <textarea>. Браузерная проверка — удобство для пользователя, а не защита: на сервере данные всё равно нужно проверять. Отметьте обязательные поля и в подписи, например звёздочкой.

См. также

pattern — Шаблон (регулярное выражение), которому должно соответствовать значение поля.
<input> — Поле ввода; вид поля задаёт атрибут `type`.
<form> — Форма: собирает данные из полей и отправляет их на сервер.

Вопросы и ответы по теме

В учебнике

Проверка форм — Встроенная проверка полей в браузере — required, minlength и maxlength, min и max, pattern, оформление ошибок и novalidate.

Спасибо, что читаете!