Работа с диапазонами на HTML5 веб-страницах

Введение

Часто необходимо обеспечить посетителям функция выбора значения из допустимого диапазона. Чтобы облегчить этот процесс для посетителей, спецификация HTML5 поддерживает диапазон в виде элементов ввода данных.

Чтобы воспроизвести эффект диапазона/ползунка на веб-страницах, разработчики использовали Javascript или пользовательский плагин. Но HTML5 непосредственно поддерживает ввод данных через диапазон.

В спецификации HTML5 говорится

Спецификация HTML5 описывает диапазон, как атрибут типа элементов ввода данных со значением “ range ”, который предлагает функция гибкого управления процессом определения значения элемента в строке, представляющей число.

Для элемента ввода, который имеет в себя тип “ range ”, допускаются следующие атрибуты:

  • Name(строка);
  • Disabled;
  • Form – принимает значение id формы;
  • Autocomplete – значения — “ on ” или “ off ”;
  • Autofocus;
  • List – значение id атрибута в списке значений атрибута;
  • Minfloat;
  • Maxfloat;
  • Step — значение — « any » или положительное число с плавающей запятой.

Элемент ввода с типом “ range ” может быть дочерним для любого основного элемента.

Ближе к делу

Пример синтаксиса:

<input id=”myRange” type=”range”>

Ниже приведена простая HTML5 веб-страница, иллюстрирующая этот элемент управления:

<!DOCTYPE html><html><body> <header> <h1>Демонстрационный диапазон</h1> <p>Демо-версия, иллюстрирующая элемент ввода типа диапазон</p> </header> <footer>  <h1></h1>        <p>HTML Goodies</p>    </footer>    Диапазон<input id="example1" type="range" min="1" max="100" step="1" onchange="textbox1.value = example1.value" />    <input id="textbox1" type="text" />    <br>     Пример диапазона 2 <input id="example2" type="range" min="0" max="50" step="10" onchange="textbox2.value = example2.value" />    <input id="textbox2" type="text" /></body></html>

Когда страница выводится в браузере, который поддерживает HTML5, вы можете легко увидеть элемент управления range в действии.

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

Во втором слайдере допустимый минимальный шаг — 10.

В В Internet Explorer 11 эта страница выводится следующим образом:

Работа с диапазонами на HTML5 веб-страницах
В Google Chrome страница выглядит так.
Работа с диапазонами на HTML5 веб-страницах Range поддерживают только ввод чисел.

Заключение

Из данной статьи вы узнали, как использовать на веб-страницах элементы ввода данных типа диапазон для имитации слайдера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *