В первой части статьи о новинках HTML5 я делал обзор блочных элементов и элементов, которые помогают структурировать информацию на странице. Теперь же я хочу поговорить о формах и их начинке. HTML5 подготовил много приятных сюрпризов, которые предназначены упростить создание UI и сделать его более удобным. Как и раньше тип элемента в теге <form>, мы определяем с помощью присваивания определенного значения атрибуту type=”” внутри тега <input>.
Перейдем непосредственно к новому:
Поле ввода для адреса электронной почты. <input type="email" />, присвоив значение email атрибуту type, мы получили текстовое поле, предназначенное для ввода адресов электронной почты. Что это значит? В первую очередь будет происходить проверка (валидация) значения, которое введено в поле. Проверка производится во время отправки формы. Еще один плюс будет ощутим для владельцев мобильных устройств, при попадании курсора в поле для email’a клавиатура будет меняться на соответствующую раскладку (со знаком собаки и “.com”).
Поле для ввода URL-адреса. <input type="url" />, присвоив значение url атрибуту type, мы получили текстовое поле, предназначенное для ввода url-адресов. По аналогии с <input type="email" name="mail" />, проходит валидация значения, которое введено в поле.
Для мобильных устройств тег <input> с атрибутом type=”url”, значит, что при попадании курсора в поле, клавиатура будет меняться на соответствующую раскладку (с дополнительной кнопкой “.com”).
Поле для ввода действительных чисел. <input type="number" min="1" max="10" />, type=’number’ – превращает простой <input> в поле, которое предназначено исключительно для действительных чисел. Поле имеет множество атрибутов, среди которых: min, max, step… Очень удобное новшество для UI.
Поле диапазонных значений. <input type="range" min="1" max="10" />, отображается этот чудо-input на странице в форме slide-bar’a. Как и с элементом type=’number’, range имеет атрибуты: min, max, step, value. С их помощью определяются границы диапазона, стартовое положение ползунка и величина шага при перетягивании ползунка.
Инструменты для работы с датой и временем. <input type="date">, этот тэг очень многофункционален. Все благодаря большому количеству атрибутов для работы с временем и датой:
И на последок хочу рассмотреть <input type="color" />. Выбор цвета в rgb кодировке в любом web-приложении стал очень удобным. Достаточно выставить для input’a type="color" и пользователь может без проблем выбрать нужный ему цвет.
Применимость всех этих средств для пользовательского интерфейса доступна не во всех современных браузерах. Поэтому на данный момент все еще надо обращаться к помощи JavaScript для корректной работы новых элементов формы. Следите за новостями ведущих браузеров, чтобы быть в курсе, когда и как можно оптимизировать верстку интерфейсов.
Перейдем непосредственно к новому:
Поле ввода для адреса электронной почты. <input type="email" />, присвоив значение email атрибуту type, мы получили текстовое поле, предназначенное для ввода адресов электронной почты. Что это значит? В первую очередь будет происходить проверка (валидация) значения, которое введено в поле. Проверка производится во время отправки формы. Еще один плюс будет ощутим для владельцев мобильных устройств, при попадании курсора в поле для email’a клавиатура будет меняться на соответствующую раскладку (со знаком собаки и “.com”).
Поле для ввода URL-адреса. <input type="url" />, присвоив значение url атрибуту type, мы получили текстовое поле, предназначенное для ввода url-адресов. По аналогии с <input type="email" name="mail" />, проходит валидация значения, которое введено в поле.
Для мобильных устройств тег <input> с атрибутом type=”url”, значит, что при попадании курсора в поле, клавиатура будет меняться на соответствующую раскладку (с дополнительной кнопкой “.com”).
Поле для ввода действительных чисел. <input type="number" min="1" max="10" />, type=’number’ – превращает простой <input> в поле, которое предназначено исключительно для действительных чисел. Поле имеет множество атрибутов, среди которых: min, max, step… Очень удобное новшество для UI.
Поле диапазонных значений. <input type="range" min="1" max="10" />, отображается этот чудо-input на странице в форме slide-bar’a. Как и с элементом type=’number’, range имеет атрибуты: min, max, step, value. С их помощью определяются границы диапазона, стартовое положение ползунка и величина шага при перетягивании ползунка.
Инструменты для работы с датой и временем. <input type="date">, этот тэг очень многофункционален. Все благодаря большому количеству атрибутов для работы с временем и датой:
- date – работает с датой, месяцем и годом.
- week – работает с месяцем и годом.
- time – работает с временем (часы и минуты).
- datetime – работает с временем, датой, месяцем и годом.
- datatime – local работает с временем, датой, месяцем и годом (в локальном формате).
И на последок хочу рассмотреть <input type="color" />. Выбор цвета в rgb кодировке в любом web-приложении стал очень удобным. Достаточно выставить для input’a type="color" и пользователь может без проблем выбрать нужный ему цвет.
Применимость всех этих средств для пользовательского интерфейса доступна не во всех современных браузерах. Поэтому на данный момент все еще надо обращаться к помощи JavaScript для корректной работы новых элементов формы. Следите за новостями ведущих браузеров, чтобы быть в курсе, когда и как можно оптимизировать верстку интерфейсов.
Комментариев нет:
Отправить комментарий