Резюме псевдо-классов

Псевдокласс — это информация об элементе, который находится в дереве документов, но недоступен через указанные атрибуты. Например, псевдокл асс для перв ого ребенка применяется к элементам, которые являются первым ребенком их родителей. Вы можете получить эту информацию с дерева DOM, но нет атрибу та от перво го ребенка.

В CSS2.1 было доступно несколько псевдо-классов, в частности, состояния ссылок (: link, : visited) и действия пользователей ( :active , :hover ). В CSS3 эта горстка становится корзиной, с псевдо-классами структуры (:nth-child, :nth-o f-type), эле ме нтом пользова тельского интерфей са (:enab le d, :check ed), и теми, которые мы будем смотреть сейчас, проверки формы.

Проверка формы без JavaScript

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

Эти сообщения об ошибках являются браузером и ОС конкретными, и трудно изменить (который я документально на моем блоге), но вы можете изменить способ ошибки появляются на самих элементах с новой проверки псевдо-классов, которые являются частью модуля CSS3 Basic UI.

Я буду охватывать текущую поддержку браузера, как мы идем через статью, но в двух словах:

• Firefox и IE10 поддерживают некоторые из них.
• Опера и Chrome поддерживают все это.
• Safari поддерживает все это тоже, но проверка формы отключена по умолчанию.

В этом случае, я рекомендую использовать Chrome, Opera, или Safari для просмотра примеров я буду показывать вам.

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

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

Обязательные и необязательные элементы

Одним из наиболее распространенных шаблонов проверки является обязательное (то есть требуемое) значения — поля, которые пользователь должен заполнить для достижения прогресса. Чтобы отметить элемент формы как обязательный, нужно только добавит ь к нему необходимый атрибут:

<input type="text" required>

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

вход:обязательный ярлык::после содержания:

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

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

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

входной сигнал: необязательный - пограничный цвет: серебро;

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

Действительные и недействительные элементы

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

<input type="email">

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

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

вход:недействительный ярлык:после содержания: '⨉';

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

document.for[0]ms.addEventListener ('submit', функция (е) - e.currentTarget.classList.add ('submit');   Функция проверки обратной формы No);

Точный скрипт, который вы используете, будет меняться, но как бы вы это ни сделали, вы можете использовать этот класс для стиля элементов формы, как это:

.представленный вход:недействительный метка::после содержания: '⨉';

На рисунке 3 показан выход этого, и вы также можете увидеть живой пример.

В этом примере следует отметить две дополнительные вещи: во-первых, для использования моего собственного JavaScript я не позволил форме автоматически провериться с п омощью атри бута novalidate на кнопке отправки; и во-вторых, Firefox ставит цветное свечение вокруг элементов в зависимости от состояния их проверки, которое я чрезмерно правил, используя их собственны й селектор :-moz- ui-invalid. Просмотр источника демонстрации, чтобы увидеть, как они используются.

Диапазоны номеров

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

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

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

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

Когда это произойдет, вы можете использо вать :вне диапа зона псевдо-класса для вашего стиля:

вход:[type='number']вне диапазона - пограничный цвет: красный;

И, как и следовало ожидать, есть аналог, известный под названием: в диапазон е:

вход:[type='number']в диапазоне - пограничный цвет: зеленый;

На рисунке 4 вы можете увидеть эти два псевдо-класса на работе, и еще раз есть также живой пример для просмотра.

Чтение и письмо

Возможно, у вас есть поле формы, предварительно заполненное значением, которое вы не хотите, чтобы пользователь мог редактировать, например, термины и условия в atextare a. Если это так, вы можете добавить атрибут readonly:

<textarea readonly="">Лорем ипсум</textarea>

Вы можете стиль элементов, которые имеют reado nly атрибу т применяется, используя … Вы можете догадаться? Вы правы, воображаемый читатель: только для чтения псевдо-класса. Вы можете совместить его с в ыбранным по льзователем свойством CSS, чтобы пользователь не мог выбрать текст (в примере я также изменил стиль границы, чтобы сделать его более очевидным):

textarea:читать только для пользователей выбрать: нет;

И если вам это нужно, есть, конечно, :читать- написать пс евдо-класс для элементов, которые не имеют атрибут применяется:

textarea:читать-писать - пользователь-выбрать: текст;

Вы можете увидеть результаты на рисунке 5, и, как и прежде есть живой пример тоже.

Firefox и IE10 фактически реализовали атри бут rea donly, но пока не имеют поддержки для этих псевдо-классов.