Скриншот AtoZ CSS: необходимый псевдо-класс

Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .

расшифровка

:required — псевдокласс, основанный на состоянии, который может быть полезен при стилизации форм.

В сочетании с :valid и :invalid мы можем в значительной степени контролировать визуальную обратную связь для пользователей без необходимости написания большого количества JavaScript.

В этом эпизоде ​​мы узнаем:

• Как использовать проверку формы HTML5
• Использование :required и других основанных на состоянии псевдо-классов
• Креативная техника для отображения сообщений проверки пользователям

Проверка HTML5

Когда вы просите пользователя заполнить форму, очень часто есть обязательные поля. Это могут быть их имя, адрес электронной почты или данные кредитной карты.

В HTML5 мы можем использовать проверку на стороне клиента без JavaScript, когда поведение встроено в современные браузеры.

Для создания обязательного поля в форме required атрибут добавляется в HTML.

 <form action="#" method="#"> <div> <input id="name" type="text" required> <label for="name">Your name</label> </div> <div> <input id="email" type="email" required> <label for="email">Your email</label> </div> <div> <input id="phone" type="tel" pattern="[0-9]+"> <label for="phone">Your phone number</label> </div> <div> <textarea id="message" required></textarea> <label for="message"> </div> <div><input type="submit"></div> </form> 

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

Стоит также отметить, что в таких элементах HTML5, как input , которые не имеют закрывающего тега, больше нет необходимости закрывать себя косой чертой; Я думаю, что это выглядит аккуратнее без, поэтому оставили их.

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

Использование :required

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

Здесь важна структура HTML, каждая комбинация ввода и метки содержится внутри <div> а метка идет после ввода. Это станет ясно позже. Мы можем по-прежнему отображать метку перед входом, переместив их на противоположные стороны контейнера формы и очистив каждый контейнер соответствующим образом.

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

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

Противоположность required является optional и мы можем сделать это ясно в нашей форме, добавив текст «необязательный» для любых входных данных, которые явно не требуются. Здесь :optional псевдокласс :optional .

 input:optional ~ label:after { content: "(optional)"; display: block; color: #888; } 

Когда наши пользователи заполняют форму, мы можем предоставить дополнительную визуальную информацию о том, правильно ли они заполнили свои данные, стилизуя состояния :valid и :invalid .

 input:not([type="submit"]):valid:focus, textarea:valid:focus { box-shadow: 0 0 10px rgba(101,169,10,0.8); outline: 0; } input:not([type="submit"]):invalid:focus, textarea:invalid:focus { box-shadow: 0 0 10px rgba(204,63,133,0.8); outline: none; } 

Эти два фрагмента добавят тонкую красную тень позади недопустимых входных данных по мере их заполнения и тонкую зеленую тень за любыми допустимыми входными данными.

Сообщения проверки

Мы можем использовать те же методы, которые мы уже рассмотрели, используя псевдо-классы на основе состояния и генерировать контент с псевдоэлементами, чтобы добавить в нашу форму больше описательных проверочных сообщений.

Я создал серию сообщений, которые будут вводиться через свойство content различных комбинаций допустимых и недействительных полей.

 input[type="text"]:focus:invalid~label:before { content: "Please enter your full name"; } input[type="email"]:focus:invalid~label:before { content: "Please enter a valid email"; } input[type="tel"]:focus:invalid~label:before { content: "Please only use numbers"; } textarea:focus:invalid~label:before { content: "Please enter a message"; } input:focus:valid~label:before, textarea:focus:valid~label:before { content: "Perfect, thanks!"; } тем input[type="text"]:focus:invalid~label:before { content: "Please enter your full name"; } input[type="email"]:focus:invalid~label:before { content: "Please enter a valid email"; } input[type="tel"]:focus:invalid~label:before { content: "Please only use numbers"; } textarea:focus:invalid~label:before { content: "Please enter a message"; } input:focus:valid~label:before, textarea:focus:valid~label:before { content: "Perfect, thanks!"; } 

Затем они могут быть анимированы в положение, когда пользователь фокусирует ввод и будет меняться в зависимости от действительного или недействительного состояния.

 label:before { content: ""; position: absolute; bottom: 0; right: 0; font-size: 1rem; opacity: 0; transition: 0.2s; } input:focus~label:before, textarea:focus~label:before { bottom: 100%; opacity: 1; } input:focus:invalid~label:before, textarea:focus:invalid~label:before { color: #cc3f85; } input:focus:valid~label:before, textarea:focus:valid~label:before { color: #65a90a; } тем label:before { content: ""; position: absolute; bottom: 0; right: 0; font-size: 1rem; opacity: 0; transition: 0.2s; } input:focus~label:before, textarea:focus~label:before { bottom: 100%; opacity: 1; } input:focus:invalid~label:before, textarea:focus:invalid~label:before { color: #cc3f85; } input:focus:valid~label:before, textarea:focus:valid~label:before { color: #65a90a; } тем label:before { content: ""; position: absolute; bottom: 0; right: 0; font-size: 1rem; opacity: 0; transition: 0.2s; } input:focus~label:before, textarea:focus~label:before { bottom: 100%; opacity: 1; } input:focus:invalid~label:before, textarea:focus:invalid~label:before { color: #cc3f85; } input:focus:valid~label:before, textarea:focus:valid~label:before { color: #65a90a; } тем label:before { content: ""; position: absolute; bottom: 0; right: 0; font-size: 1rem; opacity: 0; transition: 0.2s; } input:focus~label:before, textarea:focus~label:before { bottom: 100%; opacity: 1; } input:focus:invalid~label:before, textarea:focus:invalid~label:before { color: #cc3f85; } input:focus:valid~label:before, textarea:focus:valid~label:before { color: #65a90a; } 

Теперь, когда мы заполняем форму, мы получаем немного больше информации о каждом шаге процесса, который должен быть хорошим UX-переходом к довольно скучной форме.