Новые значения атрибута type.
Сегодня мы рассмотрим, какие новые значения атрибута type повявились в HTML5.
<html>
<head>
<title>Types</title>
<meta charset="utf-8">
</head>
<body>
<input type="email">
</body>
</html>
input с типом email ничем не отличается от типа text, за исключением лишь того, что данные сами будут проверяться перед отправкой формы. Если там будет не email, то браузер нам скажет об этом.
Url
Поле с типом url, как и email, ничем не отличается, но проверяет, url ли введён или что-то другое.
<input type="url">
Tel
Поле с этим типом определяет телефонный номер. С помощью уже изученного нами атрибута pattern, можно задать формат.
<input type="tel" pattern="8[0-9]">
Number
Поле с этим типом подразумевает ввод чисел. В этом поле справа появятся две стрелочки, которые помогут указать число. Его преимуществом будут атрибуты min, max и step, которые позволяют задать минимальное, максимальное значение и шаг.
<input type="number" min="5" max="100" value="10" step="2">
В нашем случае шаг равен 2 и, следовательно, можно вводить числа 5,7,9 и т.д.
Range
Поле range уже отличается. Оно будет представлено ввиде ползунка, который вы можете двигать и тем самым выбирать нужные вам значения. Атрибуты у него такие же, как и у number.
<input type="range" min="10" max="100" step="7">
Search
Этот тип ничем особенным не отличается кроме того, что, когда вы начнёте вводить что-нибудь в поле, то справа у вас появится крестик, позволяющий его мгновенно очистить.
<input type="search">
Color
Color - очень полезное значение атрибута type. Вы увидите прямоугольник, нажав на который у вас появится палитра, где вы можете выбрать цвет. Это очень удобно.
<input type="color">
Дата
<input type='date'>
<input type='time'>
<input type='datetime'>
<input type='datetime-local'>
<input type='month'>
<input type='week'>
Эти значения помогут нам выбрать дату и время. Рядом с полями появятся стрелочки, как в number, с помощью которых вы сможете указать нужное вам число, неделю, время...
- date - дата в формате дд.мм.гггг
- time - время в формате чч:мм
- datetime - date и time вместе(глобальное время)
- datetime-local - date и time(местное время)
- month - позволяет выбрать месяц в формате месяц-год
- week - позволяет выбрать неделю в формате неделя_год
-
Создано 24.04.2014 20:05:55
-
Михаил Русаков
Комментарии (2):
У атрибута Range не отображается текущее значение. Как это исправить?
Ответить
Через JS выводить можно
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.