Дата публикации: 14.06.2015

Количество просмотров: 3214

Эта статья – первая из цикла статей об онлайн-формах HTML5, всего их будет 3. До перехода к стилевому оформлению и API проверке со стороны клиента в Java Script, в данной статье мы рассмотрим базовые понятия о разметке. Я советую вам прочитать об этом, даже если вы уже имеете представление о формах, так как в этой статье будут описаны многие новые атрибуты и подводные камни их использования.

Продолжение: Обзор форм HTML5: CSS (вторая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Формы 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

В арсенале HTML5 появился целый ряд новых видов полей ввода. Они сами по себе помогают при вводе данных и обеспечивают валидацию без кода Java Script…

вид поля применение
email для ввода электронного адреса
tel для ввода номера телефона – строгий порядок написания необязателен, но переносы строк будут удалены
url для ввода URL
search поисковое поле с автоматически удаляющимися переносами строк
number для ввода чисел с плавающей точкой
range для создания элемента управления, позволяющего вводить примерные значения, обычно для этого используется слайдер
date для ввода даты (день, месяц и год)
datetime для ввода даты (день, месяц, год) и времени (час, минута, секунда, микросекунда) в соответствии с текущим часовым поясом UTC.
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
minlength минимально возможная длина строки для ввода. Хотя возможность использования данного атрибута прописана, во время ввода символов поддержка браузера недостаточна, и происходит так, что система проверки достоверности в HTML выдает ошибку.Как альтернативу можно использовать pattern=".{3,}", который обеспечит наличие по крайней мере трех символов.
placeholder подсказка с бледным шрифтом внутри окна для ввода.
autofocus установка фокуса на данное видимое поле ввода во время загрузки страницы
required показывает, что необходимо ввести значение
pattern удостоверяет, что значение и регулярное выражение соответствуют
min Минимальное установленное значение (для чисел и дат)
max Максимальное установленное значение (для чисел и дат)
step Степень дробления значения. Например, код input type="number" min="10" max="19" step="2" сделает возможными следующие значения: 10, 12, 14, 16 or 18.
autocomplete обеспечивает подсказку для браузера о возможности авто-заполнения, например, «e-mail» для расчетов, или может быть переведен в положение «on» или «off» для того, чтобы, соответственно, активировать или дезактивировать эту функцию
inputmode

определяет метод ввода данных. Наиболее важными являются следующие методы:

  • verbatim — не текстовый контент, например, имя юзера
  • latin — латинский шрифт, такой как поля поиска
  • latin-name — имена собственные, т.е. первая буква является заглавной
  • latin-prose — обычный текстовый контент, например, сообщения, твиты и так далее
  • numeric — ввод числовых значений, к которым не подходят атрибуты number или range, например, для ввода номеров кредитных карт
size размер символов вводимого текста или пароля или число пикселей для полей ввода e-mail, телефона или поля поиска. Вероятно, не стоит его использовать , если вы используете CSS для оформления стилей полей ввода.
rows число строк текста (только для текстовых областей)
cols число колонок текста (только для текстовых областей)
list Указывает на установленный список опций
spellcheck Может принимать значения «true» или «false», чтобы активировать или дезактивировать функцию проверки орфографии вводимого текста
form Идентификационный номер формы, к которой относится указанное поле ввода. Как правило, поля ввода должны находиться внутри формы, но данный атрибут разрешает определить местоположение поля ввода в любой части страницы
formaction определяет URI, заменяющее действие формы при отправке (только для кнопок или изображений подтверждения отправки)
formmethod Определяет GET и POST, заменяющие метод формы при отправке (только для кнопок или изображений подтверждения отправки)
formenctype Определяет вид контента при отправке формы (text/plain, multipart/form-data или application/x-www-form-urlencoded, только для кнопок или изображений подтверждения отправки)
formtarget Устанавливает  целевое окно или фрейм, заменяющие атрибут form target при отправке (только для кнопок или изображений подтверждения отправки)
readonly Вводимые данные невозможно изменить, хотя они и будут проверены и отправлены
disabled Блокирует поле ввода, в этом случае не будет произведена валидации не будет и не будут отправлены данные.

Учитывайте, что тип поля date всегда использует формат ГГГГ-ММ-ДД для атрибутов value, min и max.
В примере, указанном ниже, мы видим поле для ввода обязательного e-mail с окончанием @mysite.com с фокусировкой на нем при первой загрузке страницы:

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

Datalist

datalist содержится набор подходящих опций для любого вида поля. Например:

<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, в этом случае пользователь может ввести собственный вариант.

Можно устанавливать значения и текстовые описания подобно стандартным опциям выбора, например:

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

Но имейте в виду, что реализаций отличаются в зависимости от браузеров. 

форма

Списки значений могут заполняться и с помощью Java Script, если вы хотели бы выбирать опции через Ajax.

Остановка валидации

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

Также помнете, что установление атрибута disabled для поля ввода отменит проверку данного поля.

Поля вывода

До этого мы рассматривали виды полей ввода, но в арсенале HTML5 также есть поля для вывода:

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

Отделение и маркировка полей

Спецификация формы на сайте whatwg.org form specification устанавливает, что

Каждая часть формы считается абзацем и, как правило, отделяется от других частей при помощи тега <p>.

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

Учтите, что маркировки следует устанавливать или вокруг, или рядом с самим полем ввода с атрибутом for, который идентифицирует поле ввода, например:

<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+ предоставляют возможность создания полей для ввода e-mail и чисел. Однако на момент написания этой статьи виды полей для ввода времени и дат были доступны только в браузерах Webkit и Blink.

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

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

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

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

1 - Стандартное поле для ввода дат всегда преобразовывает вводимые значения в формат ГГГГ-ММ-ДД вне зависимости от принятого формата даты принят в вашей местности.

2 - Firefox и IE вернутся к стандартному текстовому полю, а юзерам возможно нужно ввести даты в формате ММ-ДД-ГГГГ, принятом в США, или формате ДД-ММ-ГГГГ, принятом в европейских странах.

3 - Инструмент для выбора даты в Java Script и в jQuery UI дает возможность установить персонализованный формат вводимой даты – или даже ГГГГ-ММ-ДД для корректности – но нет гарантии, что на устройстве пользователя будет доступен Java Script.

Самое простое решение в этом случае – отказаться от применения поля ввода date в HTML5, возвратиться к текстовому полю и создать собственное управление датой. Не стоит этого делать. Вряд ли вы когда-нибудь сможете создать собственный элемент управления датой, который будет действовать на любых устройствах и со всеми экранными разрешениями, будет совместим с клавиатурой, мышью и сенсорами и будет продолжать работать при отсутствии Java Script. Так, в частности, браузеры для мобильных телефонов часто опережают обычные браузеры по набору доступных инструментов и обладают отличными элементами для сенсорного управления.

Виды полей HTML5 – это будущее в сайтостроении. Применяйте их и при необходимости добавляйте полизаполнители Java Script в случаях, когда вам требуется надежная кроссбраузерная поддержка. Но обратите внимание, что будет требоваться…

Проверка со стороны сервера

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

  • баги браузера или ошибки Java Script, которые будут разрешать недействительные данные
  • случаев, когда пользователь изменит ваш HTML, и когда скрипты будут использовать инструменты браузера
  • переписывание данных из систем, находящихся вне контроля
  • перехват данных во время их перемещения между браузером и сервером (как это бывает по HTTP)

Проверка со стороны клиента не заменяет и никогда не заменит проверку со стороны сервера. Проверка данных пользователя со стороны сервера является существенным условием, а со стороны клиента – желательным.

И, последнее, знайте, что даты можно получить в формате ГГГГ-ММ-ДД или в ином формате, который вы установили для пользователя (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и так далее) Проверяйте цифры в первых 4 символах или, в случае необходимости, используйте собственные методы анализа языка и оболочки даты.

В данной статье мы охватили большой объем материала. Следующая статья будет посвящена свойствам CSS, которые относятся к формам.

Отзывы

Без хостинга

Виртуальный хостинг Мак-10

Виртуальный хостинг Мак-15
Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.