Современные формы на HTML5 и CSS3

Сделайте современные формы с помощью CSS3 и валидации HTML5

От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

Детали учебника «Создание и валидация формы на HTML5″

Тема: валидация форм HTML5, CSS3

Сложность: начальная

Примерное время выполнения: 45 мин.

скачать исходникидемо

Шаг 1: Формирование представления о функциональности

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

Имя

Адрес электронной почты

Вебсайт

Сообщение

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

Шаг 2: Разработка формы

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

Видите, нашу форму составляют следующие элементы:

Заголовок
Обозначение обязательных для заполнения полей

Названия полей ввода

Поля ввода данных
Текст-заполнитель

Подсказки к полям

Кнопка «Отправить» (Submit)

Теперь, когда вы определили, какие элементы составляют нашу форму, можно создавать разметку HTML.

Шаг 3: Первичный код HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Contact Form</title>
    <link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

Шаг 4: Форма HTML

Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

<form class="contact_form" action="" method="post" name="contact_form">
</form>

Шаг 5: Элементы формы HTML

Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denotes Required Field</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

Подсказки для полей формы

Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.

<li>
    <label for="email">Email:</label>
    <input type="text" name="email" />
    <span class="form_hint">Proper format email</span>
</li>

Остальные элементы input

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

<li>
    <label for="website">Website:</label>
    <input type="text" name="website" />
    <span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
    <label for="message">Message:</label>
    <textarea name="message" cols="40" rows="6" >
</li>
<li>
    <button class="submit" type="submit">Submit Form</button>
</li>

Шаг 6: Добавляем атрибут placeholder

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

Давайте добавим атрибут placeholder для всех текстовых тегов input. Это поможет пользователю понять, что нужно ввести в каждое поле.

<input type="text" name="name" placeholder="John Doe" />
<input type="text" name="email" placeholder="email format" />
<input type="text" name="website" placeholder="http://johndoe.com/" required/>

Подсказка: Назначьте placeholder’у стили

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

:-moz-placeholder {
    color: blue;
}
::-webkit-input-placeholder {
    color: blue;
}

В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

Шаг 7: Основной CSS

Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

Удалите стиль :focus

Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

*:focus {outline: none;}

Типографские стили

Давайте определим элементам своей формы типографские стили:

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

Стили списка

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

.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
}

Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

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

.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

Заголовок формы

Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.

.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

Элементы input

Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.

.contact_form input, .contact_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
}
/* Button Style */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer;
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}

Шаг 8: Добавляем интерактивность с помощью CSS3

Давайте добавим немного интерактивности. Мы заставим выбранное в данный момент поле увеличиваться путем добавления отступа.

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
}

Теперь с помощью CSS3 для поддерживающих браузеров сделаем увеличение поля гладким переходом.

.contact_form input, .contact_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

Шаг 9: Атрибут required в HTML5

Теперь пора заняться долгожданным: инструментами управления формой HTML5.

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

Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

<input type="text" name="name" required />
<input type="text" name="email" required />
<input type="text" name="website" required />
<textarea name="message" cols="40" rows="6" required ></textarea>

Шаг 10: Стили обязательных для заполнения полей

Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

.contact_form input, .contact_form textarea {
    padding-right:30px;
}

Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

input:required, textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}

Что происходит при отправке формы?

Прямо сейчас при отправке формы с использованием элементов HTML5 различные браузеры действуют по-разному. Большая часть браузеров воспрепятствует отправке и покажет пользователю подсказку, отмечающую первое обязательное к заполнению поле, в которое не введено значение. Визуальные стили и поддержка таких полей довольно широки. К счастью, в будущем такое поведение будет стандартизировано.

В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

Подсказка:

На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

::-webkit-validation-bubble-message {
    padding: 1em;
}

Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

Пример: iPhone

iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

Шаг 12: Изменение атрибутов type

Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.

<input type="email" name="email" placeholder="email format" required />
<input type="url" name="website" placeholder="http://johndoe.com" required/>

Шаг 13: Валидация HTML5

Как уже говорилось, валидация HTML5 основана на атрибутах type и включена по умолчанию. Для активации валидации формы никакой особенной разметки не требуется. Если хотите ее выключить, можете употребить атрибут novalidate, как здесь:

<form novalidate>
    <-- do not validate this form -->
    <input type="text" />
</form>

Поле имени

Взгляните на первое поле, которое запрашивает у пользователя его имя. Как уже описывалось ранее, мы добавили атрибут type=»text» и атрибут required. Они информируют веб-браузер о том, что это обязательное поле и тот должен делать его валидацию как простого текста. Так что, если пользователь введет в него по меньшей мере один символ, оно будет достоверным.

Теперь мы создадим свой собственный CSS для назначения стилей полям ввода, считающимся браузером достоверными и недостоверными. Если помните, мы использовали :required в своем CSS для определения стилей всем элементам ввода с обязательным атрибутом. Теперь нам можно назначить стили обязательным к заполнению полям, достоверным или нет, добавив в правила CSS :valid или :invalid.

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

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

Теперь создадим правила, которые обозначат достоверное поле. Добавим зеленую окантовку, зеленую тень и зеленую иконку с «галочкой», созданную в photoshop’е. Они будут применены ко всем валидным полям, независимо от того, находятся те в фокусе или нет.

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

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

Поля электронного адреса и URL’а

Стили CSS и правила валидации уже применены к полю электронного адреса, так как ранее мы уже установили атрибуты type и required.

Шаг 14: Представляем атрибут HTML5 pattern

Если для примера использовать атрибут type=»email», то похоже, что большинство браузеров делают валидацию этого поля как *@* (любой символ + символ “@” + любой символ). Это, конечно, не очень ограничивает, однако предотвращает введение пользователем пробелов или совершенно неправильных значений.

В примере атрибута type=»url», похоже, что минимальные требования большинства браузеров – это символ, за которым следует двоеточие. Поэтому, если вы ввели “h:”, то поле считается валидным. Это не очень-то помогает, но действительно предотвращает введение пользователями неподходящей информации, такой как их электронный или домашний адрес. Теперь вы уже могли бы позволить более точную валидацию в отношении значений ввода на стороне сервера; однако, мы собираемся поговорить о том, как это сделать в HTML5.

Атрибут pattern

Атрибут pattern принимает регулярное выражение javascript’а. Это выражение, а не выражение браузера по умолчанию, применяется для валидации значения поля. Так что теперь наш HTML выглядит так:

<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+" />

Теперь наше поле будет принимать только значения, начинающиеся с “http://” или “https://” и один дополнительный символ. Эти регулярные шаблоны выражения сначала могут сбивать с толку, но как только вы потратите время на их изучение, ваши формы будут открыты целому новому миру.

Шаг 15: Подсказки к полям формы (CSS)

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

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

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

Применение селектора ::before

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

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

Обычно мы бы применили формат HTML Unicode, чтобы отобразить их в своем HTML (как на изображении вверху). Однако из-за использования селектора CSS ::before нам придется взять соответствующий треугольнику escaped unicode с применением правила content:»". Затем просто применим позиционирование, чтобы поместить его в нужное место.

.form_hint::before { 
    content: "\25C0"; /* треугольник, указующий влево, в  escaped unicode */
    color:#d45252; 
    position: absolute; 
    top:1px; 
    left:-6px; 
}

Применение смежного селектора +

Наконец, мы используем смежный селектор CSS для показа и скрытия подсказок к нашим полям формы. Смежный селектор (x + y) выбирает элемент, которому непосредственно предшествует предыдущий элемент. Так как подсказки для полей идут в нашем HTML сразу после полей ввода, можно применять этот селектор для показа/скрытия всплывающих подсказок.

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

Как видно из CSS, мы также установили подсказки к форме, чтобы те меняли цвет наряду с рамкой ввода, когда поле валидно или невалидно.

Шаг 16: Откиньтесь в кресле и любуйтесь своей великолепной формой HTML5

Давайте, наконец, рассмотрите свой полученный продукт!

Заключение учебника «Создание и валидация формы на HTML5″

Как вы видите, новые свойства форм HTML5 весьма аккуратны! Все обратно совместимо, так что их введение в ваш вебсайт ничего не нарушит.

Валидация HTML5 приближается к замещению валидации на стороне клиента, успешно помогая пользователям правильно заполнять онлайн-формы. Однако валидация HTML5 все еще не замещает валидацию на стороне сервера. До поры до времени, лучше всего при управлении информацией, отправляемой пользователем, применять оба метода. Благодарю за прочтение!

Автор: Jim Nielsen

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Пётр

    Спасибо за урок. Скажите, пожалуйста, как можно сделать так, чтобы поле, не содержащее атрибут required, после заполнения подсвечивалось заданным цветом? Конкретный пример: поле URL не обязательно к заполнению но если вводится корректный URL (корректность будет задаваться, как у Вас в примере атрибутом pattern=»(http|https)://.+»), нужно чтобы поле подсвечивалось как валидное.

  2. Nitskel

    Там скрипт какой-то в примерах кода про подсказки и плейсхолдер. Это ошибка какая-то?

  3. jack

    я использовал эту форму на моем сайте, для регистрации но на локальном сервере все работают отлично, но на сайте формы малый размер и .contact_form input:focus эффект не работает тоже. вы можете помочь мне?

    • Андрей Кудлай

      Оформление (CSS) не зависит от сервера, поэтому либо не подключили файл стилей, либо допустили еще какую-то ошибку. Создайте тему на нашем форуме, дайте ссылку на проблемную страницу, тогда можно будет попробовать подсказать что-то конкретное, пока можно только гадать.

  4. Илья

    Очень полезная статья! Спасибо

  5. Aleksandr

    Спасибо за урок! Подскажите пожалуйста, если поля ввода разного размера, как сделать эффект увеличения поля при фокусировке. У вас все поля одинаковые и поэтому можно просто padding-right: 30px. У меня для некоторых полей нужно 30 px а для других 60 px и тд. Есть ли какой то универсальный способ.
    Заранее спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree