Атрибут min тега <input> — найменше допустиме значення
Атрибут min встановлює мінімально дозволене значення для введення числа і дати в поле форми.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте атрибут
автор: с3сminразом з атрибутомmaxдля створення діапазону допустимих значень. - Порада
-
Атрибути
автор: с3сmaxтаminпрацюють з наступнимиinputтипами: number, range, date, datetime, datetime-local, month, time та week. - Нотатка
-
Ціле додатне або від'ємне число (для
автор: с3сtype="number",type="range"). - Нотатка
-
Дата в форматі РРРР-ММ-ДД (наприклад: 2012-12-22) для
автор: с3сtype="date".
Синтаксис
<input min="number|date">Атрибут min може отримувати 2 значень:
-
number -
Визначає мінімальне допустиме значення.
автор: с3с -
date -
Задає мінімально дозволену дату.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 16 | 5 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 16 | 4 |
Приклади
+ запропонувати свій приклад у пісочниці
Шість полів із min: у діапазоні й поза ним, пастка min разом зі step, min більший за max, дата з мінімумом і текстове поле, на якому min не діє взагалі. Заливку малюють :in-range і :out-of-range, а червоний пунктир — :invalid. Найцікавіше поле — третє: воно зелене, бо в діапазоні, і водночас обведене пунктиром, бо не потрапляє в крок.
HTML
<form>
<p class="f">
<label for="a">min="10" max="20", значення 15</label>
<input id="a" type="number" min="10" max="20" value="15">
<span class="ok">у діапазоні</span><span class="bad">поза діапазоном</span>
</p>
<p class="f">
<label for="b">min="10" max="20", значення 5</label>
<input id="b" type="number" min="10" max="20" value="5">
<span class="ok">у діапазоні</span><span class="bad">поза діапазоном</span>
</p>
<p class="f">
<label for="c">min="10" step="3", значення 12 — крок рахується від мінімуму</label>
<input id="c" type="number" min="10" step="3" value="12">
<span class="note">12 у діапазоні, але не потрапляє в крок: 10, 13, 16…</span>
</p>
<p class="f">
<label for="d">min="10" max="5" — поле, яке не заповнити ніяк</label>
<input id="d" type="number" min="10" max="5" value="7">
<span class="ok">у діапазоні</span><span class="bad">поза діапазоном</span>
</p>
<p class="f">
<label for="e">min="2026-01-01", дата з минулого</label>
<input id="e" type="date" min="2026-01-01" value="2025-05-05">
<span class="ok">у діапазоні</span><span class="bad">поза діапазоном</span>
</p>
<p class="f">
<label for="g">type="text" із min="10" — атрибут не діє</label>
<input id="g" type="text" min="10" value="1">
<span class="note">поле лишається правильним: min тут ніхто не перевіряє</span>
</p>
</form>CSS
.f {
margin: 0 0 14px;
}
label {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
input {
padding: 5px;
font: inherit;
border: 2px solid #b9c6d8;
border-radius: 4px;
}
input:in-range {
border-color: #3a9a4f;
background: #f3fbf4;
}
input:out-of-range {
border-color: #d64545;
background: #fff4f4;
}
input:invalid {
outline: 2px dashed #d64545;
outline-offset: 3px;
}
.ok,
.bad {
display: none;
margin-left: 10px;
font-weight: 600;
}
input:in-range ~ .ok {
display: inline;
color: #3a9a4f;
}
input:out-of-range ~ .bad {
display: inline;
color: #d64545;
}
.note {
margin-left: 10px;
color: #5a6472;
font-size: .9em;
}Найпростіший приклад використання HTML атрибута min теґа <input>
<form>
<p><b>З використанням атрибуту min </b></p>
<p>Вкажіть свою дату вильоту до України.</p>
<p><input type="date" min="2019-03-24" /></p>
</form>
<br>
<form>
<p><b>Без використання атрибуту min</b> </p>
<p>Вкажіть свою дату вильоту до України.</p>
<p><input type="date"/></p>
</form>Різниця між HTML 4.01 та HTML5
Атрибут min з'явився тільки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!