HTML5 по крупицам. Часть 4. Элементы форм. - 18 Августа 2010 - Блог U.S.F. - U.S.F.
codingSEO/SMO
internetо блоге
Otherhtml/css
мысли

HTML5 по крупицам. Часть 4. Элементы форм.
18.08.10

Всем привет! сегодня у нас спала жара и день пасмурный, красота вобщем. Решил вот написать пост в продолжении темы о HTML5. Напомню, что последний пост был о кэш api. А продолжить хочется нововведениями в области html тегов.

 В html5 были введены новые элементы форм, некоторых из которых, как по мне, очень не хватало.

Разберем их по порядку:

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

В заключении хочу сказать, что появление новых элементов форм, в большинстве своем достаточно оправдано и ожидаемо(чего я бы не сказал про инпуты дат и времени, уж очень много их сделали, мудреные форматы записи, лучше бы в один все сделали универсальный). Обещают сделать еще несколько штук, один из которых "progress", который как я понимаю, не что иное как прогресс бар. Был бы очень кстати. PS: в мозилле это все достаточно таки криво воспроизводится, опера понимает очень хорошо.

ПОЧИТАТЬ ЕЩЕ:
Теги: html5, html/CSS
1. ItSlam [19.08.10 в 05:08]
полезные штуки...... хтмл 5 вообще хорошая штука

2. Влад [20.08.10 в 00:56]
Бегунок вообще охуеть

4. usf [20.08.10 в 10:51]
в точку)

3. stalker_m6 [20.08.10 в 05:42]
Прикольный бегунок :) Надо будет поиспользовать его.

5. usf [20.08.10 в 10:51]
да, бегунок самая сладость))

6. Rotten9 [20.08.10 в 12:19]
бегунок классный, но мозиллой не поддерживается((

Что-то в firefox это всё не работает. Он что не поддерживает html5?

8. usf [21.08.10 в 02:16]
кое-что поддерживает, но вот эти новые элементы пока нет, к сожалению)

Имя *:
Email:
Ваш сайт:
Хотите что-то сказать?
Код *:


Хостинг от uCoz | Карта сайта