INFO-Business.PRO
Детали урока:
| Тема: валидация форм HTML5, CSS3
Сложность: начальная Примерное время выполнения: 45 мин. |
  |
Шаг 1: Формирование представления о функциональности
Сначала нам нужно составить концепцию того, как будет выглядеть наша форма, и как она будет функционировать. Для примера давайте создадим простую контактную форму, запрашивающую у пользователя следующую информацию:
Имя
Адрес электронной почты
Веб-сайт
Сообщение
Нам нужно убедиться, что пользователь вводит информацию правильно. Чтобы этого добиться, применим новые техники валидации на стороне клиента 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 все еще не замещает валидацию на стороне сервера. До поры до времени, лучше всего при управлении информацией, отправляемой пользователем, применять оба метода.
Ну вот такой вот урок получился. Надеюсь он был для кого-то полезен.
