Skip to content

Неделя HTML5 - Формы - Часть 1

Привет, друзья! В этом уроке серии мы рассмотрим нововведения в HTML5, которые упростят Вам работу с формами. Ну-ка вспомните, сколько форм вы уже заполнили за этот день? А теперь подумайте, сколько вы их заполните до конца дня? Без сомнения, вы вряд ли проведете один день в интернете не заполнив ни одной формы. Мы взаимодействуем с ними постоянно: вход в административную часть сайта, социальные сети, поиск в Google и Яндекс, это лишь несколько примеров вашего повседневного использования форм. Так почему бы не сделать их лучше на сайте, чтобы посетителям было удобней на сайте. Давайте приступим к модернизации форм!

Новые теги

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

  • search
  • email
  • url
  • tel
  • number
  • range
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local
  • color

search

Когда речь идет о поиске, надо думать не только о Google, Яндекс или Bing, но стоит вспомнить и о поиске по любому сайту. И на многих сайтах сейчас формой поиска выступает простое текстовое поле, например:

<input type="text" name="search">

Но теперь мы можем заменить эту запись на следующую:

<input type="search" name="search">

Как это действует. Это то же поле ввода текста, но когда вы введете в него какой-либо текст в правом крае появится крестик, нажав на который поле очистится. Посмотрите на картинку:

Поле search в браузере Safari под Windows
Поле search в браузере Safari под Windows

На смартфонах же все трактуется по своему. К примеру, на iPhone если такое поле поиска получит фокус появится специальная клавиатура.

Поле поиска на iPhone
Поле поиска на iPhone

email

Тип поле для email почти ни чем не отличается от простого поля для текста. Но в браузерах  Opera 9.5 +, Firefox 4 +, Internet Explorer 10 и Chrome 5 + присутствует простая проверка на правильность ввода адреса эл.почты. Если пользователь введет неправильный адрес почты, то будет выведено предупреждение:

Предупреждение о не правильно введенном адресе эл.почты
Предупреждение о не правильно введенном адресе эл.почты

Вот код для поля email:

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

Ну как, клево? Если раньше для проверки правильности ввода вам бы пришлось использовать JavaScript, то теперь за вас это сделает HTML5. И так же как и с полем search на iPhone выводится специальная клавиатура:

Поле ввода email-адреса на iPhone
Поле ввода email-адреса на iPhone

url

Как вы уже могли догадаться, это поле для ввода веб-адреса. Как и с полем email, современные браузеры производят простую проверку на правильность ввода, которая заключается в том, что адрес должен начинаться с http:// или https://, далее имя домена и доменная зона. Вот код для использования:

<input type="url" name="url">

Не забудем про iPhone, ведь он и здесь выводит специфическую клавиатуру.

Поле ввода url-адреса на iPhone
Поле ввода url-адреса на iPhone

tel

Тип ввода tel предназначен для ввода номера телефона. Вот нужная разметка:

<input type="tel" name="tel">

Опять таки, iPhone выводит цифровую клавиатуру с большими клавишами, а вместе с ним и некоторые устройства под Android. Я считаю, что это хорошо, т.к. посетителям со смартфонов будет удобно вводить номер телефона. Думаю будет очень полезно для форм заказов.

Поле ввода номера телефона на iPhone и Android
Поле ввода номера телефона на iPhone и Android

number

Используется для ввода цифр. То есть текст записать в него не получится. Так же имеет несколько дополнительных атрибутов. Следующий код выведет поле для цифр, значение которого по-умолчанию 9, минимально можно установить 5, а максимально 18, при нажатии на кнопки, значение будет изменяться на 0,5:

<input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">

Вот как выглядит данное поле:

Поле number
Поле number

range

Похож на number, но в браузерах с поддержкой HTML5 выводится как ползунок. Вот как он выглядит

Поле range представляет собой ползунок
Поле range представляет собой ползунок

Для использования на своих страница используйте следующий код:

<input id="skill" type="range" min="1" max="100" value="0">

Как видите также как и с number, можно задать минимальное и максимально и стандартное значния

Даты и время

В этом параграфе мы рассмотрим добавление календарей и выбор времени

date

Такое поле ввода добавит календарь для выбора определенной даты, который выглядит следующим образом:

Выбор даты на HTML5
Выбор даты на HTML5

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

<input id="startdate" name="startdate" min="2012-01-01" max="2013-01-01" type="date">

week

Работает как и date, но для выбора недели.

<input id="vacation" name="vacation" type="week">
Выбор недели на HTML5 (выбранная неделя выделена серым цветом)
Выбор недели на HTML5 (выбранная неделя выделена серым цветом)

month

Работает как и date, но для выбора месяца.

<input id="expiry" name="expiry" type="month">
Выбор месяца на HTML5 (выбранный месяц выделен серым цветом)
Выбор месяца на HTML5 (выбранный месяц выделен серым цветом)

time

Выводит поле, похожее на number, но выводит 2 числа через двоеточие (по формату времени)

<input id="exit-time" name="exit-time" type="time">
Поле time
Поле time

datetime и datetime-local

Они совмещают два поля — это date и time (как понятно из названия). Но с datetime-local мы можем получить более детальный контроль, выбрав точное время в определенный день с локальным изменением часового пояса.

Одновременный выбор даты и времени через datetime и datetime-local
Одновременный выбор даты и времени через datetime и datetime-local

Код для datetime:

<input id="entry-day-time" name="entry-day-time" type="datetime">

Код для datetime-local:

<input id="arrival-time" name="arrival-time" type="datetime-local">

color

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

ColorPicker на HTML5 в Opera
ColorPicker на HTML5 в Opera

Вот код для примера:

<input id="color" name="color" type="color">

Заключение

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

Данная запись является частью серии "Неделя HTML5".

Неделя HTML5 - Встраиваемое содержание

Неделя HTML5 - Формы - Часть 2