Формы HTML5: разметка

Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!

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

  • 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 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Тип Описание
email ввод email-адреса
tel ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены
url ввод URL
search поле поиска с разрывами строк автоматически удаляется
number число с плавающей точкой
range элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date ввод дня, месяца и года
datetime ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local ввод даты и времени без временной зоны
month ввод месяца и года без временной зоны
week ввод номера недели без временной зоны
time ввод времени без временной зоны
color выбор цвета

Атрибуты полей ввода

Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:

<input type="email" name="email" required />

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

<input type="email" name="email" required="required" />
Атрибут Описание
name имя поля ввода
value изначальное значение
checked делает флажок или переключатель выбранным
maxlength Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке
placeholder ненавязчивая подсказка внутри поля
autofocus устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required указывает, что в поле должно быть введено значение (не пустое поле)
pattern проверяет значение на соответствие регулярному выражению
min минимальное разрешенное значение (числовое и дата)
max максимальное разрешенное значение (числовое и дата)
step шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18
autocomplete указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode

указывает способ ввода. Наиболее полезные возможности:

  • verbatim - содержимое с дословной передачей смысла, например имена пользователей
  • latin - латиница, например, поля поиска
  • latin-name - имена, то есть с заглавной первой буквой
  • latin-prose - содержимое с не дословной передачей смысла, например сообщения, твиты, прочее.
  • numeric - числовые значения, где не подходят типы number и range , например, номера кредитных карт
size размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows Количество текстовых строк (только для textarea)
cols количество рядов символов (только для textarea)
list ссылается на список опций
spellcheck установить в true или false, чтобы включить/отключить проверку привописания для поля
form идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled отключает поле ввода - нет валидации, и данные не будут отправлены

Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.

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

<input
  type="email"
  name="login"
  pattern="@mysite\.com$"
  autocomplete="email"
  autofocus
  required />

Списки данных

Список данных содержит набор подходящих значений для любого типа поля, например:

<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, браузер предоставляет список значений для автозаполнения, как только вы начинаете вводить данные в поле. Полный список обычно отображается при клике на стрелку, указывающую вниз (если таковая имеется). В отличие от стандартного выпадающего списка, пользователь может вводить произвольные значения в поле.

Возможно указывать значения и текстовые пояснения к значениям, например:

<option value="IE">Internet Explorer</option>

но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:

Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.

Отключение валидации

Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.

Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.

Поля вывода

Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации

  • output - результат вычисления пользовательских действий
  • progress - полоса прогресса (атрибуты value и max задают состояние)
  • meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum

Разделение и подпись полей

Согласно спецификации, каждый элемент формы считается параграфом, и отделяется от остальных частей элементом <p>

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

Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:

<p>
  <p>
  <label for="firstname">Имя</label>
  <input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" />
</p>

<p>
  <label for="lastname">Фамилия</label>
  <input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" />
</p>

<p>
  <label for="email">Email адрес</label>
  <input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" />
</p>

<p>
  <label>
    <input type="checkbox" name="newsletter" />
    Подпишитесь на рассылку
  </label>
</p>

Элементы управления не стандартизированы

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

Поддержка браузерами

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

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

Всегда используйте правильный тип!

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

Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.

  1. Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
  2. IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
  3. JavaScript плагин, как в jQuery UI позволяет определять собственный формат - да хоть YYYY-MM-DD - но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.

Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.

За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется...

Валидация на серверной стороне

Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:

  • багов браузера или ошибок в JavaScript, пропускающих неверные данные
  • пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
  • отправка данных с систем, которые вы не контролируете
  • перехват данных на пути от браузера к серверу (обычно по HTTP)

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

И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.

В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-markup/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 39947
Правила перепечатки


5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

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

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Июня 2014 16:45
    Clever_Bobr
    Слово "непустое" пишется слитно в данном случае. И вообще, перевод кривой :\ Но все равно спасибо, полезно.
^ Наверх ^