HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

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

А в Firefox отсутствует возможность прокрутки чисел при указании атрибута type="number", но библиотека Webshims силами jQuery обеспечивает весьма удобный альтернативный вариант. Короче говоря, Webshims является весьма эффективным средством, поэтому, если установить этот небольшой, но довольно приятный пакет и привязать к нему свою конструкцию, можно будет заняться написанием форм со всеми нововведениями HTML5, спокойно осознавая тот факт, что при пользовании формой все увидят то, что им нужно (за исключением тех двоих, которые используют IE6 с выключенным JavaScript, но вы знаете, кем они на самом деле являются, и их не следует брать в расчет!).

Загрузите сначала библиотеку Webshims (http://github.com/aFarkas/webshim/downloads) и извлеките из нее нужный пакет функций. Теперь скопируйте содержимое папки js-webshim в соответствующий раздел своей веб-страницы. Чтобы ничего не усложнять, для данного примера я скопировал его в корневой каталог сайта.

Теперь добавьте в раздел своей страницы следующий код:

<script src="js/jquery-2.1.3.min.js"></script>

<script src="js-webshim/minified/polyfiller.js"></script>

<script>

    // запрос нужных свойств:

    webshim.polyfill('forms');

</script>

Изучим этот код по разделам. Сначала в нем делается ссылка на локальную копию библиотеки jQuery (последнюю версию которой можно получить по адресу www.jquery.com) и на сценарий Webshim:

<script src="js/jquery-2.1.3.min.js"></script>

<script src="js-webshim/minified/polyfiller.js"></script>

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

<script>

    // запрос нужных свойств:

    webshim.polyfill('forms');

</script>

Вот и все, что нужно было сделать. Теперь отсутствующие функциональные возможности автоматически добавятся за счет загрузки соответствующего полифилла. Превосходно!

Придание формам HTML5 стилевого оформления с помощью CSS3

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

Код формы со стилевым оформлением можно увидеть в файле каталога examp­le_09-02, и не забудьте: если у вас еще нет кода примеров, его можно получить по адресу http://rwd.education.

В данный пример я включил также две версии таблицы стилей: styles.css — версию, включающую префиксы производителей (добавленные с помощью Autoprefixer), и styles-unprefixed.css — версию с чистым кодом CSS. При желании разобраться в том, что к чему применяется, легче работать с последней версией.

Вот как форма выглядит в небольшом по размеру окне просмотра с применением ряда основных стилевых настроек.

А вот как она выглядит в более крупном окне просмотра.

Если посмотреть на код CSS, то в нем можно заметить множество технологических приемов, рассмотренных в предыдущих главах. Например, Flexbox (глава 3) был использован для создания гибких элементов с равномерным шагом, а пре­образования и переходы (глава 8) — для увеличения размеров полей ввода, получающих фокус, и вертикального переворота кнопки вопроса о готовности и отправки формы (ready/submit) при получении ею фокуса. Блочные тени и градиенты (глава 6) использовались для выделения различных областей формы. Медиазапросы (глава 2) применялись для переключения Flexbox-направления для различных размеров окон просмотра, а селекторы CSS Level 3 (глава 5) — для выбора по признакам несоответствия селекторам.

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

Обозначение полей, требующих обязательного заполнения

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

input:required {

    /* стили */

}

Используя этот селектор, к обязательным для заполнения полям можно добавить границу, или контур, или фоновое изображение. Фантазировать здесь можно бесконечно! Можно также использовать конкретный селектор для нацеливания на поле ввода, обязательное для заполнения, только при получении им фокуса, например:

input:focus:required {

    /* стили */

}

Но таким образом стили будут применяться к самому полю ввода. А что, если понадобится изменить стили в отношении связанного с ним элемента label? Я решил, что буду помечать поля, обязательные для заполнения, небольшой звездочкой сбоку от надписи. Но тут возникает проблема. Дело в том, что, если элемент получает некое состояние (под которым я подразумеваю hover, focus, active, checked и т. д.), CSS позволяет применять изменения к его дочерним элементам, к самому этому элементу или к непосредственно примыкающему к нему и последующим одноуровневым родственным элементам. В следующих примерах используется состояние :hover, но такой вариант, несомненно, вызовет проблемы на устройствах с сенсорным экраном:

.item:hover .item-child {}

При использовании предыдущего селектора стили применяются к item-child при прохождении над ним указателя мыши:

.item:hover ~ .item-general-sibling {}

А при использовании показанного ранее селектора при прохождении указателя стили применяются к элементу item-general-sibling, если он находится на том же DOM-уровне, что и сам элемент, и следует за ним:

.item:hover + .item-adjacent-sibling {}

Благодаря предыдущему коду, когда указатель будет находиться над элементом, стили будут применяться к элементу item-adjacent-sibling, если по отношению к исходному элементу тот является примыкающим одноуровневым родственным элементом, следующим непосредственно за ним в DOM-модели.

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

<div class="form-Input_Wrapper">

    <label for="film">The film in question?</label>

    <input id="film" name="film" type="text" placeholder="e.g. King

        Kong" required/>

</div>

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

И все же Flexbox предоставляет нам возможность без особого труда наглядно поменять элементы местами (если вы еще не прочитали, как это делается, обратитесь к материалам главы 3). При этом можно воспользоваться следующей разметкой:

<div class="form-Input_Wrapper">

    <input id="film" name="film" type="text" placeholder="e.g. King

        Kong" required/>

    <label for="film">The film in question?</label>

</div>

а затем просто применить к родительскому элементу объявление flex-direction: row-reverse или flex-direction: column-reverse. Такие объявления меняют визуальный порядок следования дочерних элементов на обратный, позволяя получить эстетически более привлекательное размещение надписи над полем (при меньших по размеру окнах просмотра) или слева от поля ввода (при более крупных окнах просмотра). Теперь мы можем заняться фактическим обеспечением обозначений полям, подлежащим обязательному заполнению, и их выделением при получении фокуса.

Благодаря пересмотренной разметке теперь это можно сделать с применением селектора непосредственно примыкающего одноуровневого элемента:

input:required + label:after { }

Этот селектор в конечном итоге предписывает применять правило к каждой надписи, которая следует за полем ввода, имеющим атрибут required. А вот как выглядит код CSS для данного раздела:

input:required + label:after {

    content: "*";

    font-size: 2.1em;

    position: relative;

    top: 6px;

    display: inline-flex;

    margin-left: .2ch;

    transition: color, 1s;

}

input:required:invalid + label:after {

    color: red;

}

input:required:valid + label:after {

    color: green;

}

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