Атрибут HTML – max
Атрибут max
(максимум) визначає максимальне значення, що є прийнятним і дійсним для поля, що містить цей атрибут. Якщо value
елемента перевищує значення max
, то елемент провалює валідацію. Це значення повинно бути більшим або рівним значенню атрибута min
. Якщо атрибут max
присутній, але його значення не задане або недійсне, то не застосовується жодне значення max
. Якщо атрибут max
є дійсним, а непорожнє значення поля перевищує максимальне значення, дозволене атрибутом max
, то валідація обмежень зупиняє подачу форми.
Атрибут max
валідний для полів числових типів, серед яких date, month, week, time, datetime-local, number і range, а також елементи <progress>
і <meter>
. Це число, яке задає найбільше допустиме значення, з яким елемент форми вважається дійсним.
Якщо значення поля перевищує дозволений максимум, то властивість validityState.rangeOverflow
буде істинною, а контрольний елемент дасть збіг з псевдокласами :out-of-range
і :invalid
.
Синтаксис
Тип поля | Синтаксис | Приклад |
---|---|---|
date | yyyy-mm-dd |
<input type="date" max="2019-12-25" step="1"> |
month | yyyy-mm |
<input type="month" max="2019-12" step="12"> |
week | yyyy-W## |
<input type="week" max="2019-W23" step=""> |
time | HH:mm |
<input type="time" max="17:00" step="900"> |
datetime-local | yyyy-mm-ddTHH:mm |
<input type="datetime-local" max="2019-12-25T23:59">
|
number | <number> |
<input type="number" min="0" step="5" max="100">
|
range | <number> |
<input type="range" min="60" step="5" max="100">
|
[!NOTE] Коли дані, введені користувачем, не відповідають заданому максимальному значенню, то значення поля вважається недійсним, а поле дає збіг з псевдокласами
:invalid
і:out-of-range
.
Дивіться докладніше у Валідації на клієнтському боці та rangeOverflow
.
У випадку елемента <progress>
атрибут max
описує кількість роботи, яку вимагає завдання, що описується елементом progress
. Якщо цей атрибут присутній, то він повинен мати за значення дійсне число з рухомою комою, більше нуля. У випадку елемента <meter>
атрибут max
визначає верхню числову межу вимірюваного діапазону. Це значення повинно бути більшим за мінімальне значення (атрибут min
), якщо воно задане. В обох випадках у випадку відсутності цього атрибута береться усталене значення 1.
Тип поля | Синтаксис | Приклад |
---|---|---|
<progress> |
<number> |
<progress id="file" max="100" value="70"> 70%
</progress>
|
<meter> |
<number> |
<meter id="fuel" min="0" max="100" low="33" high="66"
optimum="80" value="40"> at 40/100</meter>
|
Занепокоєння щодо доступності
Надавайте користувачам інструкції, щоб їм було легше заповнити форму та користуватися окремими її елементами. Позначайте всі обов'язкові та необов'язкові поля, формати даних та іншу доречну інформацію. При використанні атрибута max
переконайтеся, що такий максимум зрозумілий користувачам. Достатньо може бути додавання інструкцій в підписах. Якщо інструкції надаються поза підписами, що дає змогу застосовувати до них гнучкіші позиціювання та дизайн, розгляньте варіант використання aria-labelledby
або aria-describedby
.
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
max
|
Chrome Full support 6 | Edge Full support 18 | Firefox Full support 16 | Internet Explorer No support Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | Chrome Android Full support 18 | Firefox for Android Full support 16 | Opera Android Full support 11 | Safari on iOS Full support 10.3 | Samsung Internet Full support 1.0 |
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
max
|
Chrome Full support 6 | Edge Full support 12 | Firefox Full support 6 | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 6 | Opera Android Full support 11 | Safari on iOS Full support 7 | Samsung Internet Full support Так |
Дивіться також
step
min
- інші атрибути лічильників:
low
,high
,optimum
- Валідація обмежень
- Валідація форм
validityState.rangeOverflow
:out-of-range
<input>
- Типи date, month, week, time, datetime-local, number and range, а також
<meter>