Псевдокласс :required | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 10.0+ | 10.0+ | 10.0+ | 5.0+ | 4.0+ |
Краткая информация
Версии CSS
Описание
Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.
Синтаксис
input:required { … }
Значения
Нет.
Пример
HTML5CSS3IE 10CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Комментарии</title> <style> #comment p { margin: 0 0 5px; /* Отступ снизу */ } #comment label { width: 110px; /* Ширина текста */ float: left; /* Выстраиваем по горизонтали */ text-align: right; /* Текст по правому краю */ padding-right: 10px; /* Поле справа */ } #comment input[type="text"], #comment textarea { width: 320px; /* Ширина текстовых полей */ } input:required { border: 1px solid red; /* Красная рамка для обязательных полей */ } </style> </head> <body> <form> <p><label for="user">Имя</label> <input type="text" required></p> <p><label for="email">E-mail</label><input type="text"></p> <p><label for="text">Комментарий</label> <textarea cols="40" rows="10"></textarea></p> <p><label> </label><input type="submit" value="Отправить"></p> </form> </body> </html>
В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счет применения псевдокласса :required. Результат примера в Safari 5 показан на рис. 1.
Рис.
1. Использование псевдокласса :required
Статьи по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
HTML и CSS с примерами кода
Псевдокласс :required применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.
Синтаксис
input:required {
/* ... */
}
Спецификации
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Комментарии</title> <style> #comment p { margin: 0 0 5px; /* Отступ снизу */ } #comment label { width: 110px; /* Ширина текста */ float: left; /* Выстраиваем по горизонтали */ text-align: right; /* Текст по правому краю */ padding-right: 10px; /* Поле справа */ } #comment input[type='text'], #comment textarea { width: 320px; /* Ширина текстовых полей */ } input:required { border: 1px solid red; /* Красная рамка для обязательных полей */ } </style> </head> <body> <form> <p> <label for="user">Имя</label> <input type="text" required /> </p> <p> <label for="email">E-mail</label ><input type="text" /> </p> <p> <label for="text">Комментарий</label> <textarea cols="40" rows="10"></textarea> </p> <p> <label> </label ><input type="submit" value="Отправить" /> </p> </form> </body> </html>
В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса :required.
Результат:
См. также
Ссылки
- Псевдо-класс :required MDN (рус.)
Техники валидации форм — Блог HTML Academy
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSS
В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.
Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
:valid и :invalidОднако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
:valid и :requiredИспользуем JavaScript
JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами.
Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултип
Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity, включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity-объект будет у поля, когда пользователь введёт в него 1:
Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().
Теперь при попытке отправить форму мы увидим вот это:
Отображаем несколько ошибок в одном тултипеСтало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем.
Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей.
Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
Вот что происходит при клике на submit теперь:
Отображаем все ошибки для всех полей в DOMИспользуем нестандартные проверки валидности
Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.
Валидация в реальном времени
Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:
- Требования для каждого поля чётко видны до того, как пользователь начал печатать.
- Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
- Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.
В статье на следующей неделе (оригинал, перевод готовится) я покажу, как реализовать валидацию в реальном времени, переделав вот такую простую форму регистрации:
Пример валидации в реальном времениЕсли вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.
HTML обязательный атрибут
Определение и использование
Требуемый атрибут является логическим атрибутом.
Если присутствует, указывает, что элемент должен быть заполнен перед отправкой формы.
Относится к
Требуемый атрибут может использоваться в следующих элементах:
Примеры
Пример ввода
HTML-форма с обязательным полем ввода:
Попробуй сам »Выбрать пример
HTML-форма с обязательным раскрывающимся списком:
Попробуй сам »
Textarea, пример
Форма с обязательным полем для текста:
Попробуй сам »Поддержка браузера
Требуемый атрибут имеет следующую поддержку браузером для каждого элемента:
| Элемент | |||||
|---|---|---|---|---|---|
| вход | 5.0 | 10,0 | 4,0 | Не поддерживается | 9,6 |
| выбрать | Есть | 10,0 | Есть | Не поддерживается | Есть |
| текстовое поле | 5,0 | 10,0 | 4,0 | Не поддерживается | Есть |
Атрибут HTML: обязательный — HTML: язык разметки гипертекста
Логическое значение требует атрибута , который, если он присутствует, указывает, что пользователь должен указать значение для ввода перед отправкой формы-владельца.
Требуемый атрибут поддерживается текст , поиск , url , тел , адрес электронной почты , пароль , дата , месяц , неделя , время , дата -local , number , checkbox , radio , file , типов вместе с элементами управления формы и