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

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

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

Щоб відтворити ефект діапазону / повзунка на веб-сторінках, розробники використовували javascript або користувальницький плагін. Але HTML5 безпосередньо підтримує введення даних через діапазон.
Робота з діапазонами на HTML5 веб-сторінках


У специфікації HTML5 йдеться

Специфікація HTML5 описує діапазон, як атрибут типу елементів введення даних зі значенням "range", який надає можливість гнучкого управління процесом визначення значення елемента в рядку, що представляє число.

Для елемента вводу, який має тип "range", допускаються наступні атрибути:

Name (рядок);
Disabled;
Form - приймає значення id форми;
Autocomplete - значення - "on" або "off";
Autofocus;
List - значення id атрибута в списку значень атрибуту;
Min - float;
Max - float;
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 підтримують тільки введення чисел.

З цієї статті ви дізналися, як використовувати на веб-сторінках елементи введення даних типу діапазон для імітації слайдера.


315 08.01.16



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру