Классический пример – ползунок. До сих пор нам приходилось использовать JavaScript для того, чтобы эмулировать этот в каком-то смысле интерактивный элемент. В HTML5 благодаря >type="range" можно воспользоваться элементом управления, встроенным в браузер:
>
>type="range">
Safari и Opera на данный момент поддерживают этот тип элемента ввода, предлагая похожие элементы управления (рис. 4.06).
>Рис. 4.06. Тип ввода range в Safari и Opera
По умолчанию элемент ввода принимает значения от нуля до ста. Вы можете поставить свои собственные минимальные и максимальные значения с помощью атрибутов min и max:
>
>>min="1" max="5">
Для пользователей Safari и Opera все здорово и прекрасно; другие браузеры просто будут выводить обычное текстовое поле. Это, наверное, нормально, но вы, пожалуй, захотите использовать запасное решение на JavaScript для браузеров, которые не поддерживают >type="range".
Проверка
Для того чтобы проверить, есть ли в браузере встроенная поддержка типов ввода, нужен прием, похожий на проверку на поддержку атрибута. Опять же вам нужно будет создать в памяти «фантомный» элемент >input. Затем вы устанавливаете атрибут >type на то значение, которое хотите проверить.
После этого вы запрашиваете значение свойства >type, и если получаете значение “text”, то вы знаете, что браузер не поддерживает то значение, которое вы установили.
Вот примерный код, хотя я уверен, что вы можете написать и что-то гораздо более элегантное:
>function inputSupportsType(test) {
> var input = document.createElement('input');
> input.setAttribute('type',test);
> if (input.type == 'text') {
> return false;
> } else {
> return true;
> }
>}
Теперь вы можете использовать эту функцию, чтобы удостовериться, что JavaScript-widget будет исполняться только в тех браузерах, которые не поддерживают определенный тип элемента как встроенный:
>if (!inputSupportsType(‘range’)) {
> // Код запасного решения на JavaScript.
>}
Встроенный в браузер элемент ввода будет, разумеется, грузиться быстрее, чем решение на JavaScript, которому нужно ждать, пока загрузится вся DOM. Встроенный в браузер элемент управления будет также более доступен для технологий специальных возможностей, чем элемент, который написан на JavaScript, хотя – что весьма странно – элементом >range в Safari на данный момент нельзя управлять с клавиатуры!
Счетчики
Встроенный в браузер элемент управления >range не показывает пользователю свое внутреннее значение. Вместо этого номер переводится в графическое представление ползунка. Это отлично для определенных типов данных. Другие типы данных предназначены для того, чтобы пользователь мог видеть и выбирать числовое значение. Здесь на помощь приходит >type="number":
>
>type="number">min="5" max="20">
Позволяя пользователю напрямую ввести значение в текстовое поле, браузеры также выводят элементы управления для того, чтобы пользователь мог уменьшить и увеличить значение (