Обзор форм HTML5 : CSS

Количество просмотров:

Вторая статья из цикла статей о формах HTML5 (всего их 3) посвящена стилевому оформлению, а если конкретнее – селекторам псевдоклассов, которые вы можете использовать для представления полей ввода в различных видах. Если вы об этом еще не читали, перейдите к первой статье из цикла, чтобы иметь представление об основных понятиях разметки.

Продолжение: Разметка форм в HTML5 (первая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Отмена стилевого оформления по умолчанию

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

Для того чтобы отменить стилевое оформление по умолчанию, используется свойство appearance: none;, требующее постановки префиксов. Вместе с тем использовать его нужно очень осторожно, поскольку оно может удалить важные элементы стиля – в браузере 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 поддерживается еще со времени CSS2.1 и устанавливает стилевое оформление выбранного элемента, например:

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

:checked

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

    <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 (ввод чисел и определение диапазона)

Числа и диапазоны чисел, содержащие действительное значение, входящее в диапазон, установленный атрибутами min и max, и подходящее к значению step, могут быть установлены с помощью класса :in-range. Конечно, вряд ли слайдер будет иметь значение вне диапазона, но все-таки..

:out-of-range (ввод чисел и определение диапазона)

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

:disabled

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

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

Помните, что заблокированные поля не могут быть проверены, а их содержимое не может быть отправлено на сервер. Тем не менее, стили для таких псевдоклассов, как :required или :invalid, будут применяться в любом случае.

:enabled

Как можно догадаться, стилевое оформление незаблокированных полей может быть определено с помощью классов :enabled (или :not (:disabled)). В реальности вам этот селектор может понадобиться с малой долей вероятности, поскольку он представляет стилизацию полей ввода по умолчанию.

:read-only

Вводимые значении с атрибутом read-only могут быть установлены с помощью псевдокласса :read-only. Имейте в виду, что вводимые значения, которые предназначены только для чтения, в любом случае будут проверены и отправлены на сервер, но у пользователя нет полномочий изменить их.

:read-write

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

:default (только для кнопок отправки запроса или полей ввода)

И, самый последний – это селектор :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 { ... }

Я не советую вам даже пытаться. Если вы хотите персонализированное форматирование ошибок, вам практически наверняка придется использовать и собственные сообщения. Это можно сделать только с Java Script.

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

Обычно наиболее значимые стили и селекторы доступны во всех современных браузерах с IE10+. Некоторые из наименее полезных селекторов, такие как in-range, пока доступны только в Webkit/Blink. Более ранние браузеры будут поддерживать селектор :focus, но для более сложных задач вам снова придется использовать JavaScript.

Создание удобных форм

Рассмотренные выше применяются сразу же. Например:

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

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

Что касается меня, то я предпочитаю, чтобы ошибки появлялись после отправки запроса или после перехода с поля, которое имеет недействительное значение. Браузеры не позволяют этого сделать стандартными инструментами. Как вы уже скорее всего догадались – здесь снова понадобится JavaScript. К нашей радости, API проверка ограничений валидации в HTML5 предоставляет набор инструментов для:

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

Урок подготовлен: командой DwStroy.ru
Источник: http://www.sitepoint.com/html5-forms-css/
Продолжение: Разметка форм в HTML5 (первая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Загрузка...