Атрибут 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.

Синтаксис

Синтаксис значень max для різних типів полів
Тип поля Синтаксис Приклад
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.

Синтаксис значень max для інших елементів
Тип поля Синтаксис Приклад
<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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
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 Так

Дивіться також