О ФОРМЛЕНИЕ НОВЫХ ПОЛЕЙ ФОРМЫ

Формы  •  119
Уже сейчас можно воплотить отдельные полезные идеи — в частности, псевдокласс 
:invalid
 
применяется для стилизации поля формы для случая ввода недопустимого содержимого. 
Таким образом, пользователь моментально получает ответ от формы, еще даже не нажав на 
кнопку отправки информации. Следующий код CSS окрашивает границу поля формы с не-
допустимыми данными в красный цвет, а в случае, когда данные допустимые, — в зеленый.
input:invalid {border:2px solid red;}
input:valid { border: 2px solid green; }
К сожалению, возникают сразу несколько проблем удобства использования. Например, 
данные в поле считаются недопустимыми в момент загрузки страницы — просто потому, 
что там требуются данные, а поле пустое. Следовательно, применяется стиль «invalid», что 
пугает пользователя. Значение в поле 
input
 
type=email
 считается недопустимым все то 
время, пока пользователь вводит какие-то символы, не содержащие «@», потому что лишь 
после появления «@» можно сказать, что он действительно ввел адрес электронной почты.
Великий Патрик Лауке (один из технических редакторов нашей книги) предлагает для 
смягчения этой проблемы добавлять :focus, то есть применять стиль «invalid» только тогда, 
когда пользователь взаимодействует с данным конкретным полем:
input:focus:invalid {border:2px solid red;}
input:focus:valid {border: 2px solid green;}
Такой вариант работает, но только для поля, на котором установлен фокус ввода. Нам 
требуется нечто большее: мы хотим, чтобы недопустимые поля оформлялись особенным 
образом только после того, как пользователь введет туда какие-то данные.
Из-за всех этих проблем в Firefox решили использовать альтернативный псевдокласс под 
названием 
-moz-ui-invalid
, обеспечивающий пользователям намного более удобный 
интерфейс. Как рассказывают разработчики Mozilla Developer Center, «если данные вну-
три элемента управления считаются допустимыми в момент, когда пользователь начинает 
работать с ним, то стилизация поменяется лишь после перевода фокуса на другой элемент 
управления. Однако если пользователь попытается исправить значение, ранее помеченное 
как недопустимое, то стилизация поменяется сразу же, как только значение станет допу-
стимым. К элементам, заполнение которых обязательно, псевдокласс применяется только 
в случае редактирования пользователем, или если пользователь попытается отправить 
форму с неотредактированным допустимым значением».
Среди других имеющихся псевдоклассов можно также перечислить 
:in-range
, 
:out-of-
range
 и 
:indeterminate
 (последний применяется к числовым полям ввода, для которых 
заданы значения 
min
 и 
max
, но которые в данный момент пусты).
Пока мы дожидаемся полностью описанного в спецификации и одобренного способа еди-
нообразной стилизации всех объектов во всех браузерах, можно применять различные 
трюки и фокусы, которые разработчики изобретают независимо друг от друга для своих 
продуктов. Например, мы уже познакомились с 
ui-invalid
 от Mozilla. WebKit предлагает 
способы стилизации облачков с сообщениями об ошибках стилизации (см. рис. 3.2):
„
„
::-webkit-validation-bubble{}
„
„
::-webkit-validation-bubble-top-outer-arrow{}
„
„
::-webkit-validation-bubble-top-inner-arrow{}
„
„
::-webkit-validation-bubble-message{}

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: