наверх





Как часто вы используете такие теги, как <input>? Скорее всего частенько, все таки они необходимы для работы с пользователям и для построения нормального интерфейса на сайте.
Но как много вы знаете про эти самые теги? А про новые, появившиеся в HTML5?


С появлением HTML5 появилось много новых интересных тегов, о которых раньше приходилось лишь только мечтать. Ведь появились такие теги, которые заменили JS, JQeury, PHP и т.д. Сейчас же, этот практически новый язык разметки дал путь для облегченной работы, без привлечения других языков.

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

Цифирный ползунок



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

Для того, что бы подключить к странице этот самый ползунок, нужно добавить на странице тег <input>:

<input type="range" min="0" max="10" step="1" value="5"> 


min - минимальное значение для ползунка.
max - максимальное значение для ползунка.
step - какой будет шаг.
value - значение по умолчанию.

Скриншот ползунка в Google Chrome:



Выбор даты



HTML5 подарило еще одно очень интересное значение атрибута для тега <input> - выбор даты. Но, к сожалению, где-то оно отображается криво (в Safari, например), где-то не отображается вовсе (Google Chrome). Единственный браузер, который показывает его отлично, так это Opera, вот как раз скриншот из него:



На данный момент существует несколько значений атрибутов для выбора даты:

date - обычный выбор даты, как в календаре (день, месяц, год).
month - выбор лишь месяца, но показывается год и месяц.
week - выбор лишь номера недели, но показывается год и номер недели.
time - выбор часа:минуты.
datetime - совмещенный выбор даты плюс выбор часа:минуты.
datetime-local - показ локальной даты и часа:минуты.

Пример:

<input type="date">


Поле поиска



На самом деле, это значение атрибута практически ничем не отличается от обычного текстового поля. Но отличия есть. Одно из них, так это то, что после того, как ты ввел какой-нибудь текст, появляется крестик, по нажатию на который можно удалить уже набранный текст. Незначительные изменения, но хоть что-то. Однако, данное значение атрибута не работает во всех браузерах, к примеру, в Opera. Вид из Google Chrome:



А вот как его нужно записать:

<input type="search">


Конечно, это не все новые значения атрибута type в теге <input>. Есть еще, но они уже менее заметные и применение никому не покажется заметным. Выше были написаны лишь самые заметные и которые, возможно, могут пригодиться в работе.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.