Формы в HTML5: CSS

Содержание цикла статей «Формы в HTML 5»:

Часть 1 Формы в HTML5: Разметка
Часть 2 Формы в HTML5: CSS
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм

Это вторая статья из серии статей в трех частях «Формы в HTML5». В ней мы поговорим о стилизации, или дизайне, форм. А если говорить более точно, то о селекторах псевдо-классов, которые можно использовать для настройки полей ввода в различных состояниях.

Если же вы не читали часть первую, советую все — таки ее изучить, чтобы уяснить основные моменты концепции разметки.

Убираем дизайн по умолчанию

Возможно, вы замечали моменты, когда браузеры применяют форматирование по-умолчанию. Например, большинство браузеров закругляют углы у поля search и добавляют небольшой фоновый градиент, который смотрится нелепо посреди «плоского» дизайна.

Для того чтобы этого не происходило, используйте CSS-свойство appearance: none; свойство, требующее использования некоторых префиксов.

Но, думаю, вы ожидаете этого совета, используйте его с осторожностью, так как можете поплатиться некоторыми элементами — checkbox и radio buttons в Google Chrome исчезают!

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

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}

Заметьте, я также обнулил свойства outline и box-shadow, чтобы убрать уродливую тень голубого цвета с окошка ввода и ошибку форматирования во всех браузерах.

Свойство appearance задокументировано на CSS-Tricks, но оно видоизменяется до сих пор.

:focus

Селектор :focus поддерживается с версии CSS 2.1 и устанавливает стилизацию поля ввода, используемого на данный момент. Для примера:

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}
:checked

:checked

Селектор :checked применяется к отмеченным checkboxes и radio buttons, например:

<input type="checkbox" name="test" />
<label for="test">check me</label>
input:checked ~ label {
    font-weight: bold;
}

Здесь нет соответствия для ‘:unchecked’ переключателя, но он нам и не нужен. Просто создаём стиль по-умолчанию, а затем определяем стиль для состояния :checked. Или же можно использовать :not(:checked).

:indeterminate

Технически, селектор :indeterminate еще не отражен в спецификации, однако уже упомянут там. Согласно ей, он представляет собой флажок или переключатель, который «ни отмечен, ни не-отмечен».

Необычен он тем, что работает только тогда, когда вы применяете :indeterminate к чекбоксу с помощью JavaScript, например:

document.getElementById("mycheckbox").indeterminate = true;

Эффекта на свойстве .checked это не возымеет, так как оно может быть только true или false.

Есть несколько ситуаций, когда селектор :indeterminate может оказаться полезен. В случае, когда есть группа флажков, можно сделать флажок — «отметить все», который ставит или снимает галочки сразу для всей группы.

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

:required

:required применяет стиль к полям ввода, у которых есть атрибут required.

:optional

:optional применяет стиль к полям ввода, которые НЕ имеют атрибута required. Не знаю, зачем добавили этот селектор, когда :not(:required) делает тоже самое?!

:valid

:valid применяет стиль ко всем полям ввода, которые заполнены корректно на данный момент.

:invalid

Соответственно, :invalid (или :not(:valid)) применяет стиль к полям, которые заполнены не корректно, к примеру:

input:invalid {
    border-color: #900;
}

:in-range (для полей ввода типа number и range)

Поля ввода типа number и range содержат корректные значения между атрибутами min и max, значения которых в свою очередь меняются с шагом, равным значению атрибута step.

Очевидно, что довольно трудно сделать так, чтобы значение слайдера оказалось вне его допустимого диапазона, но…

:out-of-range (для полей ввода типа number и range)

:out-of-range предназначается для полей, содержащих недопустимые значения диапазонов.

:disabled

К полям ввода с атрибутом disabled можно обратится с помощью псевдо-класса :disabled, к примеру так:

input:disabled {
    color: #ccc;
    background-color: #eee;
}

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

Стили к псевдо-классам :required и :invalid будут применяться.

:enabled

Аналогично, не отключенные поля могут быть выбраны с помощью селектора :enabled (или :not(:disabled)). На практике он вам вряд ли понадобится, так как к не отключенным полям применяется стиль по умолчанию.

:read-only

К полям с атрибутом readonly можно обратится с селектором :read-only . Помните, что readonly поля будут проверяться и отправляться на сервер, но пользователь изменить значения не сможет.

:read-write

Стандартные read-write поля могут быть выбраны с помощью :read-write (или :not(:read-only)). Опять же, это не тот селектор, которым вы будете часто пользоваться.

:default (только для кнопок типа submit или input)

И, наконец, мы подобрались к селектору :default, который применяет стиль к кнопке «Отправить».

Стиль текста

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

input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }

CSS специфика

Селекторы, описанные выше, имеют одинаковую специфику, потому при определении двух или более стилей, применяемых к одному и тому же полю, будьте внимательны.

К примеру:

input:invalid { color: red; }
input:enabled { color: black; }

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

Используйте простые варианты селекторов и минимум кода. Для примера, пустое :required поле будет являться :invalid, потому вряд ли понадобится применять к нему стили.

Проверочный пузырь

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


Возможность дизайна пузырька зависит от устройства и от браузера. Браузеры Webkit / Blink позволяют использовать нестандартную настройку CSS:

:
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }

Моя рекомендация: не утруждайте себя попытками. Если вам нужно пользовательское форматирование сообщений об ошибках — вы наверняка захотите использовать пользовательские сообщения. А для этого вам понадобится JavaScript.

Поддержка браузерами

Как правило, важные стили и селекторы поддерживаются всеми современными браузерами от IE10 и выше. Некоторые менее полезные, например, in-range, на данный момент поддерживаются только Webkit/Blink.

Старые браузеры будут, к примеру, поддерживать :focus , но стоит позаботиться о JavaScript фол-бэках для более сложных свойств.

Создание юзабельных форм

Вышеуказанные стили применяются немедленно. Например:

input:invalid {
    border-color: #900;
}

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

Лично я предпочитаю осуществлять проверку на ошибку в поле либо при отправке формы целиком, либо же при смене фокуса. Браузеры не предлагают способа делать это, основываясь только лишь на их возможностях. Вы уже догадались — нужен JavaScript.

К счастью, API в HTML5 предоставляет инструменты, которые позволяют:

  • приостанавливать проверку, пока форма заполняется;
  • использовать пользовательские сообщения об ошибках;
  • обеспечить fall-back дизайн и проверку для старых браузеров;
  • создавать более удобные формы.

Мы рассмотрим эти свойства подробнее в последней статье из этой серии.

Данная публикация представляет собой перевод статьи «HTML5 Forms: CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню