От автора:
вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.
В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:
В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:
В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:
datetime (не поддерживается ни в одном браузере)
Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.
Search
Тип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:
«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»
Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.
Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы
На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.
Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:
<
form
id
=
"search"
method
=
"get"
>
<
label
for
=
"s"
>
Search
<
/
label
>
<
input
type
=
"search"
id
=
"s"
name
=
"s"
/
>
<
input
type
=
"submit"
value
=
"Search"
/
>
<
/
form
>
В браузерах без поддержки тип search отображается в виде обычного текстового поля, поэтому нет причин не использовать его там, где это подходит.
Email адреса
Не удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.
Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:
<
label
for
=
"email"
>
My
email
address
is
<
/
label
>
<
input
type
=
"email"
id
=
"email"
name
=
"email"
/
>
Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.
Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.
Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS
В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.
Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа)
Заметка: пользовательские сообщения о проверке
Не нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью.setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:
function setErrorMessages(formControl) {
var validityState_object = formControl.validity;
if (validityState_object.valueMissing) {
formControl.setCustomValidity("Please set an age (required)");
} else if (validityState_object.rangeUnderflow) {
formControl.setCustomValidity("You\"re too young");
} else if (validityState_object.rangeOverflow) {
formControl.setCustomValidity("You\"re too old");
} else if (validityState_object.stepMismatch) {
formControl.setCustomValidity("Counting half birthdays?");
} else {
//если ввод валидный, должно быть false, или будет ошибка
formControl.setCustomValidity("");
}
}
function
setErrorMessages
(formControl
)
{
var
validityState_object
=
formControl
.
validity
;
if
(validityState_object
.
valueMissing
)
{
formControl
.
setCustomValidity
("Please set an age (required)"
)
;
}
else
if
(validityState_object
.
rangeUnderflow
)
{
formControl
.
setCustomValidity
("You\"re too young"
)
;
}
else
if
(validityState_object
.
rangeOverflow
)
{
formControl
.
setCustomValidity
("You\"re too old"
)
;
}
else
if
(validityState_object
.
stepMismatch
)
{
Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.
Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:
Теперь выберем отдельные компоненты, которые составляют форму. Мы будем использовать выделение одинаковым цветом для элементов, выполняющих аналогичные функции.
Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.
Для имен задействуем
Обратите внимание, что мы использовали два новых атрибута: rows
и cols
. Атрибут rows
применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols
применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.
Последнее, что нам нужно добавить, это кнопка для отправки формы.
Элемент
содержит атрибут type
равный submit
. То что вы напишите в атрибуте value
будет отображаться как текст на кнопке.
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...» (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
задать метод отправки данных POST (method="post"
);
установить у атрибута enctype
значение multipart/form-data
.
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5
IE
Cr
Op
Sa
Fx
Отправка файла на сервер
Хотя можно установить ширину поля через атрибут size
, в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple
более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept
не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept
позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает , несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
audio/*
- выбор музыкальных файлов любого типа;
image/*
- графические файлы;
video/*
- видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept
.
Использование дополнительных атрибутов показано в примере 2.
HTML5
IE 10+
Cr
Op
Sa
Fx
Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple
и accept
, Safari не поддерживает accept
, а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg
. Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept
.
Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple
несколько изменился вид поля.
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента
Рис. 1. Улучшенные веб-формы с помощью HTML5
