Атрибут required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.
 |
 |
 |
| Chrome | Opera | Firefox |
Рис. 1. Вид сообщения об обязательном поле
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
HTML5 IE Cr Op Sa Fx
Тег input, атрибут required
Браузеры
Opera не проверяет введенное значение, если у не указан атрибут name .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
HTML5: атрибут формы required
Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений. Чуть позже мы поговорим о том, как сообщать браузерам о необходимости отправки определенные типы данных.
Если обязательные поля остаются пустыми, форма не будет отправлена. Opera , Firefox , Internet Explorer 10+ и Chrome выдают пользователю сообщение об ошибке. Например, « Заполните это поле » или « Нужно заполнить пустые поля ».
В терминологии Javascript событие focus запускает элемент формы, когда на нее переключается фокус, когда фокус переходит на другой элемент или она теряет фокус.
В CSS можно использовать псевдокласс :focus для стилизации элементов, которые выделены в данный момент.
Атрибут required применим для любого типа элемента ввода, за исключением button , submit , image , color и hidden . У всех этих элементов имеется значение по умолчанию, поэтому дополнительный атрибут будет лишним. Синтаксис данного атрибута просто required или required=»required» , если вы используете XHTML-синтаксис .
Добавим атрибут HTML input required к форме регистрации. Сделаем поля имени, адреса электронной почты, пароля и даты подписки обязательными:
На скриншотах, приведенных ниже, можно видеть, что делает атрибут required HTML при попытке подтвердить форму:
Сообщение об обязательных полях в Firefox
Та же ситуация в Opera…
и в Google Chrome
Стилизация обязательных полей в форме
Вы можете стилизовать обязательные поля в формах при помощи псевдокласса :required,:optional или отрицательного псевдокласса :not(:required)) . Также можно стилизовать валидные и не валидные поля с помощью псевдоклассов :valid и :invalid . При помощи этих псевдоклассов HTML input required можно показывать пользователям, какие поля обязательны к заполнению:
input < background-position: 0% 50%; background-repeat: no-repeat; padding-left: 15px; >input:required < background-image: url('../images/required.png'); >input:focus:invalid < background-image: url('../images/invalid.png'); >input:focus:valid < background-image: url('../images/valid.png'); >
В данном случае мы добавляем фоновое изображение ( звёздочку ) к обязательным полям формы. В input-элементы нельзя включать генерируемый контент. Поэтому лучше будет использовать фоновое изображение. Кроме этого валидные и не валидные поля можно выделить разными фоновыми картинками. Изменения будут заметны, только если пользователь выделил соответствующий элемент формы.
Предупреждение : Firefox стилизует не валидные элементы
Учтите, что браузер Firefox применяет к не валидным элементам собственную стилизацию ( красную тень ), как было показано на одной из картинок выше. Чтобы отключить этот эффект для required HTML , воспользуйтесь следующим CSS-кодом :
:invalid
Подсказка : таргетированная стилизация для устаревших браузеров
Устаревшие браузеры вроде IE8 и IE9 не поддерживают псевдокласс :required , но можно предоставить таргетированные стили при помощи селектора атрибутов:
input:required, input[required] < background-image: url('../images/required.png'); >
Также можно использовать этот атрибут в качестве хука для валидации формы в браузерах, не поддерживающих валидацию на основе HTML5 . Javascript-код проверит пустые элементы ввода на наличие атрибута required и не отправит форму при обнаружении пустых обязательных полей.
Атрибут required
Атрибут required добавляется обязательным полям формы. Если поле с таким атрибутом не заполнено, то при отправке формы браузер покажет предупреждение и отменит отправку.
Пример
Скопировать ссылку «Пример» Скопировано
В примере ниже поле для телефона является обязательным:
Ваше имя: Ваш номер телефона (обязательно):form> label> Ваше имя: input type="text"> label> label> Ваш номер телефона (обязательно): input type="tel" required> label> button type="submit">Отправить заявкуbutton> form>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Достаточно написать атрибут required без значения, ведь он булевый: если он есть — поле обязательное, а если нет — не обязательное. Если вам по какой-то причине нельзя использовать булевы атрибуты (например, в XML-разметке), напишите required = «required» .
Атрибут required можно использовать для , , а также для со следующими типами:
- text ,
- search ,
- url ,
- tel ,
- email ,
- password ,
- date ,
- month ,
- week ,
- time ,
- datetime — local ,
- number ,
- checkbox ,
- radio ,
- file .
Если в группе радиокнопок с одинаковым значением атрибута name хотя бы у одной указан атрибут required , то вся группа будет считаться обязательной. Поэтому лучше явно прописывать required всем радиокнопкам в группе. При этом для чекбоксов с одинаковыми именами это не работает. Обязательным будет только тот чекбокс, у которого прописан атрибут.
Атрибут не сработает для любых кнопок, а также для полей ввода с типами color и range . Причина в том, что у таких полей существует значение по умолчанию, даже если оно явно не прописано в атрибуте value . У это #000000 , а у это среднее значение между min и max . Так что браузер посчитает их заполненными в любом случае и не покажет предупреждение.
Кроме того, атрибут required не работает для скрытых полей type = «hidden» и для полей с атрибутом readonly .
Как понять
Скопировать ссылку «Как понять» Скопировано
В момент отправки формы браузер выполняет валидацию введённых данных. Если поле, у которого есть атрибут required , не заполнено, то браузер не позволит отправить форму и покажет сообщение. Внешний вид и текст сообщения может отличаться в разных браузерах. Сообщение в Google Chrome:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Поля с атрибутом required можно стилизовать при помощи псевдокласса :required . Поля, у которых нет этого атрибута, стилизуются псевдоклассом :optional .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Необходимо визуально выделять обязательные для заполнения поля формы. Почему-то исторически сложилось, что рядом с подписью для поля ставят звёздочку. Раньше под формой писали пояснение, что звёздочка значит обязательное поле. Но со временем пропало даже пояснение.
Звёздочка — плохой паттерн. Как минимум потому что скринридер прочитает её просто как «звёздочка». Лучше явно написать в скобках «(обязательное)». Тогда пользователь, каким бы инструментом он не пользовался, точно будет знать, что поле надо заполнить.
HTML-атрибут Required и радиопереключатели
Чтобы указать пользователю, что перед отправкой формы нужно активировать один из взаимоисключающихся радиопереключателей, достаточно в одном из них указать атрибут required .
Пример
Браузеры
| Google Chrome | Показывает уведомление для первого переключателя 1 :  |
|---|---|
| Internet Explorer | Показывает уведомление для переключателя, к которому применяется атрибут:  |
| Mozilla Firefox | Показывает уведомление для первого переключателя 1 , но подсвечивает все:  |
| Opera Next | Показывает уведомление для первого переключателя 1 :  |
| Opera Presto | Показывает уведомление для переключателя, к которому применяется атрибут:  |
| Safari | Не поддерживает данный атрибут. |
- — это переключатель, который в коде находится выше остальных.
При активации одного из переключателей форма отправляется.
- The required attribute
- Взаимоисключающиеся радиопереключатели HTML