Всем привет! сегодня у нас спала жара и день пасмурный, красота вобщем. Решил вот написать пост в продолжении темы о HTML5. Напомню, что последний пост был о кэш api. А продолжить хочется нововведениями в области html тегов.
В html5 были введены новые элементы форм, некоторых из которых, как по мне, очень не хватало.
Разберем их по порядку:
Бегунок(range). <input type="range" min="0" max="50" value="0" />. Обсуждаю его первым, так считаю одним из самых важных и полезных. Помню как-то делал клиентскую палитру на JS, делал через HSL, и чтобы менять насыщенность и светлоту очень бы пригодилось, но пришлось юзать статическое значение. Немного о атрибутах: min/max- задают минимальное и максимальное значения ползунка соответсвенно. step- задает цену деления(шаг) ползунка.
Еще одним из аналогов ползунка является number. <input type="number" />. Возможно использование когда вам нужно задать четко фиксированные значения с определенным интервалом. Атрибуты аналогичны с range.
Поиск(search). <input type="search" placeholder="Введите строку для поиска"/>. Поле для ввода строки поиска. Призван заменить использование type="text" в таких частных случаях как поиск. Атрибуты: placeholder- текст, который находится в инпуте, пока пользователь не введет туда свой(очень удобный, заменяющй пляс с бубном на JS, при котором надо было ставить обработчики на blur и focus). pattern- регулярное выражение, которое обработает содержимое инпута. required- определяется, является ли элемент обязательным для заполнения формы.
datetime, datetime-local, date, month, week, time. <input type="datetime" />. Тоже достаточно полезные элементы, в которых можно выбрать время, месяц, дату и неделю. Причем datetime является наиболее общим- он позволяет выбрать дату и время, а остальные согласно названиям, позволяют выбирать дату, время, неделю, месяц по отдельности. datetime отличается от datetime-local тем, что первые выводит значения времени используя информацию о временных зонах, а второй- без них. Атрибуты: min/max- устанавливаются минимальный и максимальные датыи время возможные для выбора. Формат зависит от типа. Подробней можно прочитать в описании элементов. required - является ли обязательным для заполнения. step- шаг, определяет с какой частотой данные можно выбрать(тоесть если step="2"), то в инпуте типа month можно выбирать только каждый 2й месяц, остальные disabled.)
Так же имеются несколько специфических инпутов. Это email, tel, url, color. В них вводятся данные определенного формата(по названиям понятно каким). В атрибутах имеется pattern- для проверки данных через регулярное выражение. А также уже знакомое нам required.
В заключении хочу сказать, что появление новых элементов форм, в большинстве своем достаточно оправдано и ожидаемо(чего я бы не сказал про инпуты дат и времени, уж очень много их сделали, мудреные форматы записи, лучше бы в один все сделали универсальный). Обещают сделать еще несколько штук, один из которых "progress", который как я понимаю, не что иное как прогресс бар. Был бы очень кстати.
PS: в мозилле это все достаточно таки криво воспроизводится, опера понимает очень хорошо.