Элементы для ввода чисел

Последнее обновление: 08.04.2016

Простое числовое поле

Для ввода чисел используется элемент input с атрибутом type="number". Он создает числовое поле, которое мы можем настроить с помощью следующих атрибутов:

  • min: минимально допустимое значение

  • max: максимально допустимое значение

  • readonly: доступно только для чтения

  • required: указывает, что данное поле обязательно должно иметь значение

  • step: значение, на которое будет увеличиваться число в поле

  • value: значение по умолчанию

Используем числовое поле:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Числовое поле в HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<label for="age">Возраст: </label>
				<input type="number" step="1" min="1" max="100" value="10" id="age" name="age"/>
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>

Здесь числовое поле по умолчанию имеет значение 10 (value="10"), минимально допустимое значение, которое мы можем ввести, - 1, а максимальное допустимое значение - 100. И атрибут step="1" устанавливает, что значение будет увеличиваться на единицу.

В зависимости от браузера визуализация этого поля может отличаться:

Ввод чисел в HTML5

Но как правило, у большинства современных браузеров, кроме IE 11 и Microsoft Edge, справа в поле ввода имеются стрелки для увеличения/уменьшения значения на величину, указанную в атрибуте step.

Как и в случае с текстовым полем мы можем здесь прикрепить список datalist с диапазоном возможных значений:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Числовое поле в HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<label for="price">Цена: </label>
				<input type="number" list="priceList" 
					step="1000" min="3000" max="100000" value="10000" id="price" name="price"/>
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
		<datalist id="priceList">
			<option value="15000" />
			<option value="20000" />
			<option value="25000" />
		</datalist>
	</body>
</html>
Ввод чисел из datalist в HTML5

Ползунок

Ползунок представляет шкалу, на которой мы можем выбрать одно из значений. Для создания ползунка применяется элемент input с атрибутом type="range". Во многом ползунок похож на простое поле для ввода чисел. Он также имеет атрибуты min, max, step и value:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ползунок в HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<label for="price">Цена:</label> 
				1<input type="range" step="1" min="0" max="100" value="10" id="price" name="price"/>100
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>
Ползунок в HTML5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850