CSS3 псевдо-классы и HTML5 формы

Одна из особенностей, введенная с HTML5 - это проверка клиентской формы без использования JavaScript. В этой статье рассмотрим интересный момент интеграции CSS3 и HTML5.

Псевдо-класс это информация об элементе, который находится в дереве документа, но не любой указанный атрибут. Для примера: :first-child, применяется ко всем первым элементам своего родителя.

В CSS2 были похожие псевдо-классы, которые применяются в основном к ссылкам :active, :visited, :hover и т.д. С приходом CSS3, котомка с псевдо-классами была значительно расширена ( :nth-child, :nth-of-type, :checked, :enabled и т.д. ). О чем сейчас и поговорим.

Так как я уже говорил в начале, приход HTML5 дает возможность проверять форму на стороне клиента без JavaScript. При попытке отправить форму, ваш браузер будет проверять все поля и возвращает ошибку, если любое из полей является неверным. Это произойдет автоматически - при условии, что браузер поддерживает такую возможность.

Хотите идти в ногу со временем?

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

<input type="text" required id="foo">
<label for="foo">Foo</label>

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

input:required + label::after { content: "*"; }

С помощью псевдо классов можно оформить и необязательный элемент :optional. Следующий пример добавит красную рамку к необязательным элементам формы:

input:optional { border-color: red; }

Существуют и другие типы проверки помимо :required и :optional. Например для поля ввода с типом "email":

<input type="email" id="email">
<label for="email">email</label>

Если пользователь вводит что-либо в этой области, он должен соответствовать патерну адреса электронной почты, или же он будет помечен как неверно введенный. ( Конечно, если это не требуется, то поле может быть пустым.)

В любом случае с помощью псевдо-классов css3, можно задать оформление для этого поля в зависимости от правильности его заполнения, с помощью :valid и :invalid. Например можно иммитировать статус поля:

input:invalid { background-color: red; }
input:valid { background-color: green; }
input:invalid + label::after { content: ' поле заполнено не корректно'; }
input:valid + label::after { content: ' ок'; }

Некотрые из новых типов тегов, позволяют создать форму с вводом диапазона чисел, с ограничением по максимальному и минимальному значению:

<input type="number" max="10" min="1">

Хоть браузер и не позволит пользователю ввести число за пределами этого диапазона, но могут быть случаи ( например, если используется JavaScript для получения значений ), где значение, выходит из допустимого диапазона:

<input type="number" max="10" min="1" value="11">

Контролировать, сей момент, можно новыми псевдо-классами :out-of-range и :in-range.

input[type='number']:out-of-range { border-color: red; }
input[type='number']:in-range { border-color: green; }

Иногда необходимо изначально заполненное поле ( например условие ), но закрытое для редактирования пользователем. В этом случае используется атрибут readonly:

<textarea readonly>Некоторое условие</textarea>

Собственно для оформления его через CSS используется псевдо-класс :read-only и свойство CSS user-select:

textarea:read-only { user-select: none; }

Для полей которые могут использоваться пользователем для редактирования применяется псевдо-класс :read-write:

textarea:read-write { user-select: text; }

К сожалению еще не все браузеры до конца поддерживают эти замечательные псевдо-классы.