Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Tip-vvoda-dannyx-range-number

Тип ввода данных range

Тип ввода данных range в HTML5 обозначает ползунок. Для чего он используется, думаю можно не объяснять. А вот как его используют расскажу.

Синтаксис имеет следующий вид:
<input type="range">

Также вместе с этим типом возможно использовать такие атрибуты как min, max, step, но вот с отображением этих атрибутов пока есть проблемы. Хотя они хорошо применяются с другим типом ввода данных, таким как number

Тип ввода данных number

Этот тип выдаёт ошибку при вводе не числовых символов. Он выглядит как счетчик чисел, шаг значений можно задать с помощью атрибута step, а также ограничить максимальное и минимальное значение с помощью атрибутов min, max

Общий синтаксис имеет следующий вид:
<input type="number">

Для закрепления материала предлагаю взглянуть на пример использования range и number:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование range и number</title>
  <style>
  .forma {
	  display:block;
	  position:relative;
	  top:30%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
  <form action="pochta.php" class="forma">
  <p>Передвиньте ползунок</p>
  <p><input type="range" min="0" max="20" step="2"></p>
      <p>Введите любое число от 20 до 60 кратное двум</p>
   <p><input type="number"
min="20"
max="60"
step="2"
value="26"></p>    
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В итоге должно получиться следующее:

Использование range и number в HTML5

Я думаю вы найдете применение этим полям формы. В следующем уроке мы закончим знакомство с типами ввода данных и перейдём к изучению атрибутов в HTML5



наверх