От автора: Это первая часть серии из трех частей о веб-формах на HTML5. Мы раскроем основы разметки в этой статье, прежде чем перейти к стилизации и API JavaScript валидации на клиенте. Я рекомендую прочесть эту статью даже если вы уже знакомы с формами – там много атрибутов и приемов.
 |
Перевод выполнила: Валерия ЗаруцкаяМеня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails. |
HTML формы могут быть распространены, но они являются неотъемлемой частью большинства сайтов и приложений. В четвертой версии HTML поля ввода были ограничены списком ниже:
input type=»text»
input type=»checkbox»
input type=»radio»
input type=»password»
input type=»hidden» — для данных, которые пользователь не может видеть
input type=»file» — для загрузок
textarea — для текста большего размера
select — для выпадающих списков
button — в основном используется для отправки формы, хотя input type=»submit» и input type=»image» также могут использоваться.
Также:
возможности стилей CSS были ограничены,
настраиваемые элементы управления и цветовые селекторы, должны были задаваться в коде, и
валидация на стороне клиента требовала JavaScript.
Дополнительные типы полей ввода в HTML5
Было представлено множество новых типов input. Они предоставляют нативную помощь при вводе и валидацию без использования кода на JavaScript:
email: ввод email-адреса
tel: ввод номера телефона – строгих ограничений по синтаксису нет, но разрывы строк будут удалены
url: ввод ссылки
search: поле поиска с удалением разрывов строк
number: число со знаками после запятой
range: элемент управления для ввода приблизительной величины, обычно выглядит как слайдер
date: ввод числа, месяца и года
datetime: ввод числа, месяца, года, часа, минуты, секунды и микросекунды в зависимости от выставленного часового пояса
datetime-local: ввод даты и времени без часового пояса
month: ввод месяца и года без часового пояса
week: ввод номера недели без часового пояса
time: ввод времени без часового пояса
color: позволяет выбрать цвет
Атрибуты полей ввода
Если не задано иначе, поля ввода могут иметь один из перечисленных ниже, специфических для форм атрибутов. Некоторые из них булевы атрибуты, а, значит, они не требуют значений, например
|
1 |
<input type="email" name="email" required /> |
Хотя вы можете добавлять их, если вы предпочитаете более строгий синтаксис, похожий на XHTML
|
1 |
<input type="email" name="email" required="required" /> |
name: поле ввода имени
value: начальное значение
checked: ставит флажок или включает переключатель
maxlength: максимальная длина введенной строки. Также может применяться к элементам textarea в HTML5
minlength: минимальная длина введенной строки. Это задокументировано, но на момент написания, поддержка браузеров плохая и этот атрибут вызывает ошибку валидаторов. Альтернативное решение – это pattern=».{3,}», что заставит поле ввода иметь хотя бы три символа
placeholder: текст подсказки, показываемый в поле ввода
autofocus: фокус будет на этом (неспрятанном) поле при загрузке страницы
required: обозначает, что значение должно быть введено
pattern: удостоверяет, что введенное значение соответствует образцу
min: минимальное допустимое значение (числа и дата)
max: максимальное допустимое значение (числа и дата)
step: шаг значения. Например, input type=»number» min=»10″ max=»19″ step=»2″ разрешит только значения 0, 12, 14, 16 или 18.
autocomplete: предоставляет браузеру подсказку для автозаполнения, например, «расчетный имейл» или может быть включено и выключено
inputmode: определяет механизм ввода. Самые полезные настройки:
verbatim — дословный ввод, такой как имена пользователей, latin — латинское написание, такое как поля ввода, latin-name — имена, начинающиеся с, latin-prose — строчное содержимое, такое как сообщения, твиты, и т.д., numeric — числовое значение, где не подходят значение number или range, например номер кредитной карты
size: размер в символах для полей ввода text или password или в пискелях для полей ввода типов email, tel, url или
search. Возможно лучше всего избегать этого атрибута, т.к. стили для полей ввода следует применять с помощью CSS.
rows: количество текстовых рядов (только для textarea)
cols: количество текста в колонках (только для textarea)
list: указывает на набор вариантов из datalist
spellcheck: принимает значение true и false для включения/выключения проверки правописания
form: ID формы, которой принадлежит это поле ввода. В целом, поля ввода должны быть вложены в форму, но этот атрибут позволяет полям ввода находиться в любом месте страницы
formaction: указывает ссылку для переопределения действия формы при отправке (только для кнопок отправки/изображений)
formmethod: указывает GET или POST для переопределения метода формы (только для кнопок отправки/изображений)
formenctype: определяет тип контента при отправке (text/plain, multipart/form-data илиapplication/x-www-form-urlencoded только для кнопок отправки/изображений)
formtarget: определяет целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки/изображений)
readonly: значение поля ввода не может быть изменено, хотя оно будет валидировано и отправлено
disabled: отключает поле ввода – не будет ни валидации ни отправки
Обратите внимание, поля date всегда должны использовать формат YYYY-MM-DD (год-месяц-день) для атрибутов value, min и max. Следующий пример делает обязательным ввод имейла, который заканчивается на @mysite.com и имеет фокус при загрузке страницы:
|
1 2 3 4 5 6 7 |
<input type="email" name="login" pattern="@mysite\.com$" autocomplete="email" autofocus required /> |
Списки данных
Список данных содержит набор подходящих значений для любого поля ввода, например:
|
1 2 3 4 5 6 7 8 9 |
<input type="text" name="browser" list="browsers" /> <datalist id="browsers"> <option value="Chrome" /> <option value="Firefox" /> <option value="Internet Explorer" /> <option value="Safari" /> <option value="Opera" /> </datalist> |
Когда атрибут datalist поддерживается, браузер предоставляет варианты автозаполнения, когда вы начинаете печатать. Полный список обычно показывается при двойном клике на элементе управления или при клике на стрелку вниз (если она показывается). В отличие от стандартного выпадающего элемента select, у пользователя есть возможность переопределить предоставленные значения и записать свое собственное.
Есть возможность задать значения и текст в качестве стандартных вариантов для элемента select, например:
|
1 |
<option value="IE">Internet Explorer</option> |
Но имейте ввиду, что реализация отличается. Например, Firefox автоматически заполняет сам текст (Internet Explorer) в то время как Хром предпочитает значение (IE) и показывает текст серым:
Списки данных могут вызываться с помощью JavaScript если вы хотите подставлять данные AJAXом.
Отключение валидации
Валидация всей формы может быть отключена с помощью атрибута novalidate для элемента form. Или же, вы можете добавить атрибут formnovalidate к кнопке отправки/изображению. Помните, что атрибут disabled отключает валидацию для поля ввода.
Поля вывода
Хотя мы обсуждаем в первую очередь поля ввода, HTML5 также предоставляет поля вывода только для чтения:
output — результат вычисления или действия пользователя
progress — полоза загрузки (атрибуты value и max определяют статус)
meter — шкала, которая может изменяться от красного, желтого до в зависимости от значения, заданного атрибутам value, min, max, low, high и optimum
Разделение и маркирование полей ввода
Спецификация форм whatwg.org утверждает:
Каждый участок формы считается параграфом, и обычно отделяется от других элементов с помощью элементов p
Интересно, я обычно использую div, хотя и сомневаюсь, что это имеет большое значение с точки зрения семантики. Хотя тэг p короче, хотя возможно вам понадобится класс для изменения внешних отступов. Что более важно, вам следует использовать элементы label или вокруг или за самим полем ввода, применяя атрибут for с идентификатором поля ввода, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<p> <p> <label for="firstname">First name</label> <input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" /> </p> <p> <label for="lastname">Last name</label> <input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" /> </p> <p> <label for="email">Email address</label> <input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" /> </p> <p> <label> <input type="checkbox" name="newsletter" /> Sign up for our newsletter </label> </p> |
Отсутствие стандартов для элементов управления
Нет специфических указаний для интерфейса, которым могли бы следовать разработчики браузеров. И это не случайно: типичное поле выбора даты управляемое мышью на настольном устройстве может быть слишком маленьким для мобильного, поэтому разработчики могут реализовать альтернативу, управляемую сенсором.
Поддержка браузерами
Не каждый тип поля ввода или атрибут поддерживается браузерами. В целом, большинство современных браузеров, начиная с IE10, поддерживают такие типы, как email и number. Однако, поля ввода, работающие с датой, на момент написания поддерживаются только браузерами на основе движков Blink и Webkit. Браузеры отобразят их как обычные текстовые поля и проигнорируют атрибуты, если их значения не поддерживаются.
Всегда используйте правильный тип!
Важно использовать правильный тип данных для данных, которые вы запрашиваете. Это может казаться очевидным, но вы окажетесь в ситуациях, когда вам захочется использовать стандартное текстовое поле. Примите во внимание даты. Поддержка имеет заплаточный характер и ведет к проблемам в реализации:
Стандартный тип поля ввода date всегда возвращает значение в формате YYYY-MM-DD (год-месяц-день), независимо от того, как поле выбора даты выглядит в вашем местоположении.
IE и Firefox будут отображать стандартное поле ввода text, но ваши пользователи должны будут вводить данные в формате MM-DD-YYYY для США и DD-MM-YYYY для Европы.
Поле выбора даты на JavaScript, такое как предоставленное jQuery UI позволяет задавать собственный формат или даже YYYY-MM-DD для последовательности – но вы не можете быть уверены в том, что JavaScript включен.
Простое решение – это отказаться от использования поля ввода date и вернуться к типу text и реализовать свой собственный выбор даты. Не делайте этого. Вы никогда не создадите свое собственное поле ввода данных, которое будет работать на всех устройствах и для любых разрешений экрана, поддерживает клавиатуру, мышь и сенсорную панель и продолжает работать с отключенным JavaScript. В частности, мобильные браузеры часто находятся впереди своих настольных собратьев и реализуют хорошие сенсорные элементы управления.
Будущее за типами полей ввода HTML5. Используйте их и, если необходимо, добавляйте полизаполнение в JavaScript в тех случаях, когда необходима кросс-браузерность. Но помните о…
Валидация на стороне сервера
Валидация браузерами не гарантирована. Если даже вы заставите всех использовать последнюю версию Chrome, вы никогда не сможете предотвратить нижеследующее:
баги браузера или ошибки JavaScript, пропускающие невалидные данные
пользователь может изменить ваш HTML код и скрипты, используя инструменты браузера
отправку из систем за пределами вашего контроля,
или подмену данных между браузером и вашим сервером (однозначно через HTTP).
Валидация на клиенте никогда не была и не будет заменой для серверной валидации. Валидации данных на стороне сервера необходима. На клиенте ее неплохо иметь.
Наконец, помните, что дату можно получать в формате YYYY-MM-DD или любом другом, который вы зададите MM-DD-YYYY, DD-MM-YYYY, и т.д.). Проверяйте четыре первые символа или используйте родные методы парсинга в языке/фреймворке при необходимости.
Мы рассмотрели многое в этой статье, в следующей – мы обратимся к свойствам CSS, относящимся к формам.
Автор: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
