Атрибут 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 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
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
Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.
 |
 |
 |
| Chrome | Opera | Firefox |
Рис. 1. Вид сообщения об обязательном поле
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
HTML5 IE Cr Op Sa Fx
Тег textarea, атрибут required
Сделать элементы форм обязательными для заполнения
Сделать элементы форм обязательными для заполнения можно через атрибут required , который появился в HTML 5.
input type="text" required>
Элементы с данным атрибутом доступны в CSS через псевдокласс :required .
Также стоит указывать aria-required для устройств, предназначенным людям с ограниченным возвожностям.
type="text" required aria-required="true">
Также стоит проверять, что поле заполнено на стороне сервера, например через PHP.
Обновлено: 17 сентября 2021
Комментарии
Авторизуйтесь, чтобы добавлять комментарии