Ползунок/бегунок Type range значение атрибут поля ввода input

Тип - ползунок | бегунок. Что такое type range html, Type range - это одно из значений тега input, который превращает поле ввода input в ползунок или бегунок. В разных браузерах будет отображаться по разному.

Тип type range в поле ввода input

1. Что такое type range html,
2. Пример использования type range.

Что такое type range html.

У поля ввода есть типы передаваемых данных type, с разными значениями input

Одно из таких значении : "type range" - который превращает обычное поле ввода в ползунок или , как его иногда называют бегунок.

Синтаксис type range html.

<input type="range">

Как использовать данный type range на сайте.

HTML : Если вам требуется сделать данное поле type range обязательным, то вставляем атрибут required


Кроме поле ввода :

Понадобится форма form.

<form method="post">
<input name="example" type="range" required>
<input name="example_submit" type="submit" value="Отправить">
</form>


И еще одно поле ввода с другим типом submit

PHP :

Вам потребуется метод post.




Пример использования type range.

Для данного поля возможно и нужно использование php

if($_POST['example_submit']) { $result = 'Вы переместили бегунок на позицию со значением : '.strip_tags($_POST['example']) ;}

echo $result;

Соберем весь код вместе для работы type range.

Html : Добавим required

<form method="post">
<input name="example" type="range">
<input name="example_submit" type="submit" value="Отправить">
</form>

Php :

if($_POST['example_submit']) { $result = 'Вы переместили бегунок на позицию со значением : '.strip_tags($_POST['example']) ;}

echo $result;

Результат перемещения ползунка type range:

Возьмите, зажмите ползунок(type range) мышкой и переместите го в другое положение и нажмите кнопку отправить: