required атрибут HTML

Логический Boolean-атрибут required, если он присутствует, указывает, что пользователь должен указать значение для поля ввода, прежде чем можно будет отправить содержащую его форму.

Атрибут required поддерживается типами элементов text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input>, а также элементами управления формы <select> и <textarea>. Если этот атрибут присутствует у любого из этих типов элементов ввода и элементов, будет соответствовать псевдокласс :required. Если атрибут не указан, будет соответствовать псевдокласс :optional.

Атрибут не поддерживается типами ввода range и color и не имеет к ним отношения, поскольку у обоих есть значения по умолчанию. Для типа color значением по умолчанию является #000000. Для типа range значением по умолчанию является середина между min и max — если они не заданы, то в большинстве браузеров min и max по умолчанию равны 0 и 100 соответственно. Атрибут required также не поддерживается для типа ввода hidden — нельзя ожидать, что пользователи будут заполнять скрытое поле формы. Наконец, required не поддерживается для типов ввода кнопок, включая image.

Если несколько переключателей radio имеют одинаковое имя, то при наличии атрибута required хотя бы у одного переключателя необходимо выбрать один из переключателей в этой группе, хотя это не обязательно должен быть переключатель с этим атрибутом. Для упрощения обслуживания кода рекомендуется либо добавлять атрибут required ко всем переключателям группы с одинаковым именем, либо не добавлять его ни к одному из них.

Если несколько флажков типа ввода checkbox имеют одинаковое имя, обязательными являются только флажки с атрибутом required.

Описание

Взаимодействие атрибутов

Поскольку поле только для чтения нельзя изменить, required не оказывает никакого действия на поля ввода, для которых также указан атрибут readonly.

Удобство использования

При добавлении атрибута required разместите рядом с элементом управления видимое уведомление о том, что поле <input>, <select> или <textarea> является обязательным. Кроме того, выбирайте обязательные элементы управления формы с помощью псевдокласса :required и задавайте им стиль, указывающий на их обязательность. Это улучшает удобство использования для зрячих пользователей. Вспомогательные технологии должны сообщать пользователю, что элемент управления формы является обязательным, на основании атрибута required, однако добавление aria-required="true" не повредит на случай, если сочетание браузера и программы чтения с экрана пока не поддерживает required.

Проверка ограничений

Если элемент является обязательным и его значение представляет собой пустую строку, то элемент находится в состоянии valueMissing и ему будет соответствовать псевдокласс :invalid.

Вопросы доступности

Сообщите пользователям, что элемент управления формы является обязательным. Используйте разные способы информирования — например, текст, цвет, обозначения и атрибуты, — чтобы все пользователи понимали требования, в том числе люди с дальтонизмом, когнитивными особенностями и те, кто пользуется программой чтения с экрана.

Пример

HTML

<form>
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required />
    <label>Required</label>
  </div>
  <input type="submit" />
</form>

Результат

Спецификации

Совместимость с браузерами

html.elements.input.required

html.elements.select.required

html.elements.textarea.required

См. также

• validityState.valueMissing
• :required и :optional
• <input>
• <select>