Новые типы входных данных в HTML5
HTML5 имеет несколько новых типов входных данных для форм. Эти новые типы позволяют лучше контролировать ввод и проверку.
В этой главе рассматриваются новые типы входных данных:
- url
- number
- range
- Выбора даты (date, month, week, time, datetime, datetime-local)
- search
- color
Поддержка браузеров
| Тип ввода | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Нет | 4.0 | 9.0 | 10.0 | Нет | |
| url | Нет | 4.0 | 9.0 | 10.0 | Нет |
| number | Нет | Нет | 9.0 | 7.0 | Нет |
| range | Нет | Нет | 9.0 | 4.0 | 4.0 |
| Выбор даты | Нет | Нет | 9.0 | 10.0 | Нет |
| search | Нет | Нет | 11.0 | 10.0 | 5.0 |
| color | Нет | Нет | 11.0 | 10.0 | Нет |
Тип входных данных - электронная почта
Тип email используется для полей ввода, которые должен содержать адрес электронной почты.
Значение поля электронной почты автоматически проверяется при отправке формы.
E-mail: <input type="email" name="user_email" />
Совет: Safari на iPhone распознает тип ввода email и измененяет клавиатуру на экране, чтобы соответствовать ему (добавляет варианты @ и .COM).
Тип входных данных - url
Тип url используется для полей ввода, которые должны содержать URL-адрес.
Значение поля URL автоматически проверяется при отправке формы.
Homepage: <input type="url" name="user_url" />
Совет: Safari на iPhone распознает тип ввода url, и измененяет клавиатуру на экране, чтобы соответствовать ему (добавляет вариант .COM).
Тип входных данных - число
Тип number используется для полей ввода, которые должны содержать числовое значение.
Вы можете также установить ограничения на то, какие номера принимаются:
Points: <input type="number" name="points" min="1" max="10" />
Используйте следующие атрибуты для указания ограничений на тип number:
| Атрибут | Значание | Описание |
|---|---|---|
| max | number | Задает максимально допустимое значение |
| min | number | Задает минимально допустимое значение |
| step | number | Задает допустимые интервалы значения (если step="3", допустимые значения будут -3,0,3,6, и т.д.) |
| value | number | Задает значение по умолчанию |
Пример со всеми атрибутами ограничений типа входных данных number:
<input type="number" name="points" min="0" max="10" step="3" value="6" />
Совет: Safari на iPhone распознает тип ввода number, и измененяет клавиатуру на экране, чтобы соответствовать ему (показывает цифры).
Тип входных данных - диапазон
Тип range используется для полей ввода, которые должны содержать значение из диапазона чисел.
Тип range отображается в виде ползунка.
Вы можете также установить ограничения на то, какие номера принимаются:
Points: <input type="range" name="points" min="1" max="10" />
Используйте следующие атрибуты для указания ограничений на тип range:
| Атрибут | Значение | Описание |
|---|---|---|
| max | number | Задает максимально допустимое значение |
| min | number | Задает минимально допустимое значение |
| step | number | Задает допустимые интервалы значения (если step="3", допустимые значения будут -3,0,3,6, и т.д.) |
| value | number | Задает значение по умолчанию |
Тип входных данных - Выбор даты
HTML5 имеет несколько новых типов входных данных для выбора даты и времени:
- date - Выбор даты, месяца и года
- month - Выбор месяца и года
- week - Выбор недели и года
- time - Выбор времени (час и минута)
- datetime - Выбор времени, даты, месяца и года (время UTC)
- datetime-local - Выбор времени, даты, месяца и года (по местному времени)
Следующий пример позволяет выбрать дату из календаря:
Позволяет выбрать дату из календаря:
Дата: <input type="date" name="user_date" />
Позволяет выбрать месяц из календаря:
Месяц: <input type="month" name="user_date" />
Позволяет выбрать неделю из календаря:
Неделя: <input type="week" name="user_date" />
Позволяет выбрать время из календаря:
Время: <input type="time" name="user_date" />
Позволяет выбрать время UTC из календаря:
Время UTC: <input type="datetime" name="user_date" />
Позволяет выбрать локальное время из календаря:
Локальное время: <input type="datetime-local" name="user_date" />
Тип входных данных - поиск
Тип search используется для полей поиска, как поиск по сайту, или поиск Google.
Поле поиска ведет себя как обычной текстовое поле.
Тип входных данных - цвет
Тип color используется для полей ввода, которые должны содержать цвет.
Этот тип входа позволит вам выбрать цвет из палитры цветов:
Color: <input type="color" name="user_color" />
Была ли эта информация полезной?
