Атрибут required
Атрибут required указывает на то, что данный элемент HTML формы должен быть обязательно заполнен.
Атрибут следует применять к тегам input или textarea .
При попытке отправки формы в том случае, если поле с этим атрибутом не заполнено — браузер не даст отправить форму и выведет ошибку в виде всплывающей подсказки. К сожалению, текст ошибки и ее вид нельзя изменить с помощью HTML или CSS.
Имейте ввиду, что наличие атрибута required не освобождает вас от проверки правильности заполненности формы со стороны сервера на PHP (так как защиту через required легко обойти).
Пример
Давайте тегу input добавим атрибут required . Не вводя ничего в поле попробуйте нажать на кнопку, чтобы отправить форму. Браузер не даст отправить форму, добавит тень инпуту и выведет сообщение об ошибке:
Смотрите также
- атрибут pattern ,
который позволяет выполнить валидацию инпута
Атрибут required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.
 |
 |
 |
| Chrome | Opera | Firefox |
Рис. 1. Вид сообщения об обязательном поле
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
HTML5 IE Cr Op Sa Fx
Тег input, атрибут required
Браузеры
Opera не проверяет введенное значение, если у не указан атрибут name .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.
 |
 |
| Chrome | Opera |
 |
 |
| Firefox | Internet Explorer |
Рис. 1. Вид сообщения об обязательном поле
Атрибут required может добавляться только к полю формы, у которого type имеет одно из значений: text , password , search , url , tel , email , date , month , week , time , datetime-local , number , checkbox , radio , file .
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
Пример
Браузеры
| 10 | 12 | 4 | 12.1 | 5 | 4 |
| 2.3 | 4 | 12.1 | 4 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
HTML-атрибут Required и радиопереключатели
Чтобы указать пользователю, что перед отправкой формы нужно активировать один из взаимоисключающихся радиопереключателей, достаточно в одном из них указать атрибут required .
Пример
Браузеры
| Google Chrome | Показывает уведомление для первого переключателя 1 :  |
|---|---|
| Internet Explorer | Показывает уведомление для переключателя, к которому применяется атрибут:  |
| Mozilla Firefox | Показывает уведомление для первого переключателя 1 , но подсвечивает все:  |
| Opera Next | Показывает уведомление для первого переключателя 1 :  |
| Opera Presto | Показывает уведомление для переключателя, к которому применяется атрибут:  |
| Safari | Не поддерживает данный атрибут. |
- — это переключатель, который в коде находится выше остальных.
При активации одного из переключателей форма отправляется.
- The required attribute
- Взаимоисключающиеся радиопереключатели HTML