Атрибут max тега <input>
Описание
Атрибут max задаёт максимальное допустимое значение для элемента <input>. Работает с типами: number, range, date, datetime-local, month, time и week.
<!-- Для числового поля -->
<label for="quantity">Количество (макс. 10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
<!-- Для поля даты -->
<label for="meeting">Дата встречи (не позднее 2023-12-31):</label>
<input type="date" id="meeting" name="meeting" max="2023-12-31">
Поддерживаемые типы input:
| Тип | Формат значения | Пример |
|---|---|---|
| number | Число | max="100" |
| range | Число | max="100" |
| date | ГГГГ-ММ-ДД | max="2023-12-31" |
| datetime-local | ГГГГ-ММ-ДДTЧЧ:ММ | max="2023-12-31T23:59" |
| month | ГГГГ-ММ | max="2023-12" |
| time | ЧЧ:ММ | max="18:00" |
| week | ГГГГ-Wнеделя | max="2023-W52" |
Пример с ползунком (range):
<label for="volume">Громкость (макс. 100):</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">
<output for="volume" id="volume-output">50</output>
<script>
document.getElementById('volume').addEventListener('input', function(e) {
document.getElementById('volume-output').value = e.target.value;
});
</script>
Рекомендации:
- Всегда используйте вместе с атрибутом
minдля точного диапазона - Для числовых полей укажите
stepдля контроля шага изменения - Сочетайте с HTML-валидацией через атрибут
required - Дублируйте проверки на сервере (клиентскую валидацию можно обойти)
Пример с временным интервалом:
<label for="appointment">Время приёма (до 18:00):</label>
<input type="time" id="appointment" name="appointment"
min="09:00" max="18:00" required>
Ограничения:
- Не поддерживает динамические выражения (только конкретные значения)
- Визуальное отображение ограничений зависит от браузера
- Для сложных условий потребуется JavaScript
- Старые браузеры могут игнорировать эти атрибуты
Примечание: Атрибут max особенно полезен для форм заказов, бронирований и любых интерфейсов, где важно ограничить верхнюю границу вводимых значений. Однако помните, что это лишь клиентское ограничение - всегда проверяйте данные на сервере.