Поле ввода числового значения [10/28]
Поля для ввода числовых значений уже поддерживаются в этих браузерах.
Для ввода числовых значений существует специальный тип поля ввода number. Рядом с полем браузер автоматически подставляет две стрелочки для увеличения и уменьшения числового значения.
Пример записи:
<input type="number">
В Chrome это выглядит так:
При помощи вспомогательных атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.
Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.
form10-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Поле ввода числового значения</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/assets/course74/keksik-style.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 95%;
margin-bottom:10px;
padding: 2px 5px;
border: 1px solid #cccccc;
border-radius: 5px;
font-family: "Roboto", sans-serif;
}
input {
height: 24px;
}
input[type="submit"] {
display: inline-block;
width: auto;
height: auto;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
border-radius: 5px;
}
.half-width {
display: inline-block;
width: 50%;
margin-right:4px;
}
.half-width input,
.half-width select {
width: 80%;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="page-header">Форма доставки</header>
<main>
<form action="/echo" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" value="Кекс" required>
<label for="address">Адрес доставки</label>
<textarea id="address" name="address" rows="2" required>ул. Хвостенко, д. 1</textarea>
<div class="half-width">
<label for="date">Дата доставки</label>
<input type="date" id="date" name="date" value="2014-12-12">
</div>
<div class="half-width">
<label for="time">Время доставки</label>
<input type="time" id="time" name="time" value="12:00">
</div>
<div class="half-width">
<label for="dish">Блюдо</label>
<input type="text" list="dishes" id="dish" name="dish" value="Курочка">
<datalist id="dishes">
<option value="Мясо">
<option value="Рыба">
<option value="Курочка">
<option value="Индейка">
<option value="Мыши">
<option value="Молоко">
</datalist>
</div>
<div class="half-width">
<label for="amount">Количество</label>
<!-- Поле для ввода числового значения->
<input type="number" min="5" max="50" step="5">
</div>
<div class="buttons">
<input type="submit" value="Заказать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>