<input>: Елемент введення (форм)
Елемент HTML <input>
використовується для створення інтерактивних засобів керування у вебформах, щоб приймати дані від користувача; доступно широке розмаїття типів даних введення та контрольних віджетів, залежно від пристрою та користувацького агента. Елемент <input>
– один із найпотужніших та найскладніших у всій HTML, тому що має безліч комбінацій типів введення та атрибутів.
Спробуйте його в дії
Типи <input>
Те, як <input>
працює, значною мірою залежить від значення його атрибута type
, – тому різні типи полів розкриті на власних довідкових сторінках. Якщо цей атрибут не вказаний – використовується усталене значення text
.
Доступні наступні типи:
Тип | Опис | Прості приклади |
---|---|---|
button |
Натисна кнопка без усталеної поведінки, що показує значення атрибута value , усталено – порожня.
|
|
checkbox | Прапорець, котрий дає змогу обирати та скасовувати вибір окремих значень. | |
color | Контрольний елемент для вибору кольору; відкриває колірну палітру, коли це підтримується браузером. | |
date | Контрольний елемент для введення дати (року, місяця та дня, без часу). Відкриває панель вибору дати або числові колеса для року, місяця, дня, коли це підтримується браузером. | |
datetime-local | Контрольний елемент для введення дати та часу, без часового поясу. Відкриває панель вибору дати або числові колеса для компонент дати та часу, коли це підтримується браузером. | |
Поле для редагування адреси електронної пошти. Має вигляд поля з типом
text , але має параметри валідації, а також відповідну клавіатуру, коли це підтримується браузером чи коли пристрій має динамічні клавіатури.
|
||
file |
Контрольний елемент, що дає змогу користувачеві обрати файл.
Для встановлення типів файлів, які може обрати цей елемент, слід використовувати атрибут accept .
|
|
hidden | Контрольний елемент, що не показується, але чиє значення подається серверові. У наступній колонці є приклад, але він прихований! | |
image |
Графічна кнопка submit (подання). Показує зображення, встановлене атрибутом src .
Вміст атрибута alt
показується, якщо зображення з атрибута src недоступне.
|
|
month | Контрольний елемент для введення місяця та року, без часового поясу. | |
number | Контрольний елемент для введення числа. Показує числове колесо і додає усталену валідацію. Показує цифрову клавіатуру на деяких пристроях із динамічними клавіатурами. | |
password | Однорядкове поле тексту, чиє значення приховане. Призведе до виведення користувачу попередження, якщо сайт не є безпечним. | |
radio |
Радіокнопка, що дає змогу обрати одне значення серед кількох варіантів з однаковим значенням атрибута name .
|
|
range |
Контрольний елемент для введення числа, чиє точне значення неважливе.
Показує віджет діапазону, що усталено показує значення посередині.
Використовується у зв'язці з атрибутами min та max для визначення діапазону прийнятних значень.
|
|
reset | Кнопка, що скидає вміст форми до усталених значень. Не рекомендується до використання. | |
search | Однорядкове текстове поле для введення рядків пошуку. Розриви рядка автоматично прибираються зі введеного значення. Може включати значок видалення у деяких браузерах, що може використовуватись для очищення поля. на деяких пристроях із динамічними клавіатурами показує значок пошуку на кнопці "Enter". | |
submit | Кнопка, що подає форму. | |
tel | Контрольний елемент для введення номера телефону. На деяких пристроях із динамічними клавіатурами виводить телефонну клавіатуру. | |
text | Усталене значення. Однорядкове текстове поле. Розриви рядка автоматично прибираються з уведеного значення. | |
time | Контрольний елемент для введення значення часу без часового поясу. | |
url |
Поле для введення URL. Має вигляд поля з типом text , але має параметри валідації та відповідну клавіатуру, коли це підтримується браузером чи пристрій має динамічні клавіатури.
|
|
week | Контрольний елемент для введення дати, що складається з року та номера тижня, без часового пояса. | |
Невживані значення | ||
datetime |
Контрольний елемент для введення дати та часу (години, хвилини, секунди та частки секунди) на основі Всесвітнього координованого часу. |
Атрибути
Елемент <input>
є таким потужним завдяки своїм атрибутам, причому атрибут type
, описаний у прикладах вище, – найважливіший. Оскільки кожний елемент <input>
, незалежно від типу, заснований на інтерфейсі HTMLInputElement
, усі такі елементи технічно мають однаковий набір атрибутів. Попри це, насправді більшість атрибутів діють лише для певної підмножини типів полів введення. На додачу, спосіб, у який певні атрибути впливають на поле введення, залежить від типу елемента, впливаючи на різні типи полів введення у різний спосіб.
Цей розділ містить таблицю з переліком усіх атрибутів зі стислим їх описом. Нижче цієї таблиці розміщений список, що описує кожний атрибут більш докладно, в тому числі вказуючи, з якими типами полів введення пов'язаний кожний атрибут. Ті з них, що діють для більшості або всіх типів полів введення, описані докладно нижче. Атрибути, що є ексклюзивними для певних типів полів введення, а також ті, що діють для всіх полів введення, але мають особливу поведінку на певному типі полів введення – документовані на сторінках відповідних типів.
Атрибути елемента <input>
включають глобальні атрибути HTML, а також:
Атрибути | Тип чи типи | Опис |
---|---|---|
accept |
file |
Вказівка щодо очікуваного типу файлу при виборі файлів до завантаження |
alt |
image |
Атрибут alt для типу зображення. Необхідний для доступності |
autocapitalize |
усі, крім url , email і password |
Контролює автоматичне додавання великих літер до введеного тексту. |
autocomplete |
усі, крім checkbox , radio та кнопок |
Вказівка для функціональності автоматичного заповнення форм |
capture |
file |
Спосіб захоплення медіа для контрольних елементів завантаження файлів |
checked |
checkbox , radio |
Вказує, чи є контрольний елемент обраним |
dirname |
hidden , text , search , url , tel , email |
Ім'я поля форми для надсилання напряму письма при поданні форми |
disabled |
усі | Вказує, чи є контрольний елемент вимкненим |
form |
усі | Асоціює контрольний елемент з елементом форми |
formaction |
image , submit |
URL для подання форми |
formenctype |
image , submit |
Тип кодування даних для подання форми |
formmethod |
image , submit |
Метод HTTP для подання форми |
formnovalidate |
image , submit |
Вказівка пропускати валідацію контрольного елемента при поданні форми |
formtarget |
image , submit |
Контекст перегляду для подання форми |
height |
image |
Те саме, що атрибут height для <img> ; вертикальний розмір |
list |
усі, крім hidden , password , checkbox , radio та кнопок |
Значення атрибута id елемента <datalist> із варіантами автозаповнення |
max |
date , month , week , time , datetime-local , number , range |
Найбільше прийнятне значення |
maxlength |
text , search , url , tel , email , password |
Найбільша прийнятна довжина (кількість символів) value |
min |
date , month , week , time , datetime-local , number , range |
Найменше прийнятне значення |
minlength |
text , search , url , tel , email , password |
Найменша прийнятна довжина (кількість символів) value |
multiple |
email , file |
Булеве значення. Вказівка приймати кілька значень |
name |
усі | Ім'я контрольного елемента. Подається разом із формою як частина пари ім'я-значення. |
pattern |
text , search , url , tel , email , password |
Патерн, котрому мусить відповідати значення value , щоб бути дійсним |
placeholder |
text , search , url , tel , email , password , number |
Текст, що з'являється у контрольному елементі, коли в ньому немає жодного значення |
popovertarget |
button |
Позначає <input type="button"> як контрольний елемент стосовно спливного віконця |
popovertargetaction |
button |
Задає дію, котру повинен виконати контрольний елемент спливного віконця |
readonly |
усі, крім hidden , range , color , checkbox , radio та кнопок |
Булеве значення. Вказівка заборонити зміну значення |
required |
усі, крім hidden , range , color та кнопок |
Булеве значення. Значення повинно бути вказане, або прапорець мусить бути поставлений, щоб форму можна було подати |
size |
text , search , url , tel , email , password |
Розмір контрольного елемента |
src |
image |
Те саме, що атрибут src елемента <img> ; адреса ресурсу зображення |
step |
date , month , week , time , datetime-local , number , range |
Крок квантування дійсних значень. |
type |
усі | Тип контрольного елемента |
value |
усі, крім image |
Початкове значення контрольного елемента. |
width |
image |
Те саме, що атрибут width елемента <img> |
Кілька додаткових нестандартних атрибутів перелічені після описів стандартних атрибутів.
Ексклюзивні атрибути
accept
(приймання)Дійсний лише для типу поля введення
file
. Атрибутaccept
визначає те, які типи файлів можна обрати для контрольного елементаfile
. Дивіться тип поля введення file.alt
(альтернатива)Дійсний лише для кнопки
image
. Атрибутalt
задає альтернативний текст для кнопки, що буде показаний, якщо зображенняsrc
немає або його не виходить завантажити. Дивіться тип поля введення image.autocapitalize
Контролює те, чи додаються великі літери до тексту, введеного у поля вводу, а також, якщо так, то яким чином. Шукайте більше інформації на сторінці глобального атрибута
autocapitalize
.autocomplete
(Не булів атрибут!) Атрибут
autocomplete
приймає розділений пробілами рядок, що описує, який тип функціональності автозаповнення слід надати (якщо це можливо). Типова реалізація автозаповнення нагадує попередні значення, введені у таке ж поле вводу, але можуть існувати складніші форми автозаповнення. Наприклад, браузер може використовувати список контактів пристрою для автозаповнення адресemail
у полі введення електронної адреси. Дивітьсяautocomplete
щодо дозволених значень.Атрибут
autocomplete
чинний наhidden
,text
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,range
,color
таpassword
. Цей атрибут не діє на типах полів введення, що не повертають числових або текстових даних, тобто діє на всіх типах, окрімcheckbox
,radio
,file
, а також типів кнопок.Дивіться Атрибут
autocomplete
щодо подробиць, включно з інформацією про безпеку паролів та тим, якautocomplete
поводиться трохи інакше для типуhidden
.autofocus
Булів атрибут, котрий, якщо встановлений, вказує, що поле введення повинно автоматично отримати фокус, коли завершилось завантаження сторінки (або коли елемент
<dialog>
, що містить таке поле, був показаний).[!NOTE] Елемент з атрибутом
autofocus
може отримати фокус до того, як спрацює подіяDOMContentLoaded
.Не більш ніж один елемент в документі може мати атрибут
autofocus
. Якщо встановити його на кількох – фокус отримає перший із них.Атрибут
autofocus
не може використовуватись на полях типуhidden
, оскільки приховані поля не можуть отримати фокус.[!WARNING] Автоматичне фокусування на контрольному елементі може спантеличити людей із порушенням зору, що користуються технологією читання з екрана, а також людей з розумовими порушеннями. Коли встановлено
autofocus
, читачі з екрана без попередження "телепортують" свого користувача до контрольного елемента.Ретельно обміркуйте можливі проблеми доступності при застосуванні атрибута
autofocus
. Автоматичне фокусування на контрольному елементі може змусити сторінку прокрутитись при завантаженні. На деяких сенсорних пристроях фокус може також змусити з'явитись динамічну клавіатуру. Хоч читач з екрана оголосить підпис контрольного елемента, що отримує фокус, читач з екрана не оголосить нічого вище такого підпису, а зрячий користувач із малим пристроєм аналогічним чином упустить контекст, створений вмістом вище.capture
(захоплення)Введений специфікацією "Захоплення медіа в HTML" і дійсний лише для типу поля введення
file
. Атрибутcapture
встановлює, який саме пристрій запису звуку та зображення повинен бути використаний для захоплення нового файлу для контрольного елемента завантаженняfile
. Дивіться тип поля введення file.checked
Чинний для типів
radio
таcheckbox
.checked
– це булів атрибут. Бувши встановленим із типомradio
, він вказує, що радіокнопка є обраною серед групи однойменних радіокнопок. Бувши встановленим із типомcheckbox
, він вказує, що такий прапорець усталено встановлений (при завантаженні сторінки). Він не вказує, чи є наразі такий прапорець встановленим: якщо стан прапорця змінюється, то цей атрибут не отримує змін. (Оновлюється лише IDL атрибутchecked
об'єктаHTMLInputElement
.)[!NOTE] На відміну від інших контрольних елементів, значення прапорців та радіокнопок включаються при подачі форми у її дані лише тоді, коли вони
checked
(обрані). Якщо це так, то подаються імена та значення обраних контрольних елементів.Наприклад, якщо прапорець, чий
name
має значенняfruit
, аvalue
–cherry
, і такий прапорець є обраним, то подані дані форми включатимутьfruit=cherry
. Якщо прапорець неактивний, то він не з'явиться у даних форми взагалі. Усталене значенняvalue
для прапорців та радіокнопок –on
.dirname
(ім'я напряму)Чинний для типів полів введення
hidden
,text
,search
,url
,tel
таemail
. Атрибутdirname
вмикає подання напрямленості введеного тексту. Коли присутній такий атрибут, від контрольного елемента будуть подані дві пари ім'я-значення: перша –name
таvalue
, а друга – значення атрибутаdirname
як ім'я іltr
абоrtl
як значення, визначене браузером.<form action="page.html" method="post"> <label> Фрукт: <input type="text" name="fruit" dirname="fruit-dir" value="вишня" /> </label> <input type="submit" /> </form> <!-- page.html?fruit=вишня&fruit-dir=ltr -->
Коли форма вище подається, поле введення надсилає як пару
name
/value
у виглядіfruit=вишня
, так паруdirname
/ напрям у виглядіfruit-dir=ltr
. Більше про це – на сторінці атрибутаdirname
.disabled
(вимкнене)Булів атрибут, котрий, бувши встановленим, вказує, що користувач не повинен мати змогу взаємодіяти з полем введення. Вимкнені поля введення зазвичай зображаються у тьмяніших кольорах, або з якоюсь іншою візуальною індикацією того, що поле недоступне для використання.
Конкретно кажучи, вимкнені поля введення не отримують події
click
і не подаються з формою.[!NOTE] Хоч це не вимагається специфікацією, Firefox усталено утримує динамічний вимкнений стан елемента
<input>
між завантаженнями сторінки. Слід використовувати атрибутautocomplete
, щоб керувати цією функціональністю.form
(форма)Рядок, що вказує елемент
<form>
, з котрим поле введення асоційоване (тобто його форму-господаря). Значення такого рядка, якщо є, мусить збігатися зі значенням атрибутаid
елемента<form>
, присутнього у тому ж документі. Якщо цей атрибут не вказаний, то елемент<input>
асоціюється із найближчою формою-предком, якщо така є.Атрибут
form
дає змогу помістити поле введення будь-де у документі, але включити його у форму, розташовану іще десь у тому ж документі.[!NOTE] Поле введення може бути асоційовано лише з одною формою.
formaction
(дія форми)Чинний для типів полів введення
image
таsubmit
. Дивіться тип введення submit.formenctype
(тип кодування форми)Чинний для типів полів введення
image
таsubmit
. Дивіться тип введення submit.formmethod
(метод форми)Чинний для типів полів введення
image
таsubmit
. Дивіться тип введення submit.formnovalidate
(невалідування форми)Чинний для типів полів введення
image
таsubmit
. Дивіться тип введення submit.formtarget
(ціль форми)Чинний для типів полів введення
image
таsubmit
. Дивіться тип введення submit.height
(висота)Чинний лише для кнопки
image
.height
– висота файлу зображення для представлення графічної кнопки подання форми. Дивіться тип поля введення image.id
(ідентифікатор)Глобальний атрибут, дійсний для всіх елементів, включно з усіма типами полів введення. Визначає неповторний ідентифікатор (ID), котрий мусить бути унікальним для всього документа. Його призначення – встановлення елемента для посилань. Значення використовується як значення атрибута
for
елемента<label>
для асоціювання між підписом та контрольним елементом. Дивіться<label>
.inputmode
(Режим введення)Глобальне значення, дійсне для всіх елементів. Дає браузерам вказівку щодо типу віртуальної клавіатури при редагуванні елемента чи його вмісту. Допустимі значення включають
none
,text
,tel
,url
,email
,numeric
,decimal
таsearch
.list
(список)Значення, встановлене для атрибута
list
, повинно бути значенням атрибутаid
елемента<datalist>
, присутнього в тому ж документі.<datalist>
надає список наперед визначених значень, щоб пропонувати їх користувачеві для відповідного поля введення. Усі значення у списку, що є несумісними ізtype
, не включаються у запропоновані варіанти. Надані значення є пропозиціями, а не обмеженням: користувачі можуть обирати із наданого списку або ввести інше значення.Цей атрибут чинний для
text
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,range
таcolor
.Згідно зі специфікаціями, атрибут
list
не підтримуєтьсяhidden
,password
,checkbox
,radio
,file
, а також усіма типами кнопок.Залежно від браузера, користувач може побачити користувацьку палітру кольорів, прапорці поруч із діапазоном, або навіть поле введення, що розгортається, неначе
<select>
, але приймає також значення, котрих немає в списку. Перевірте таблицю сумісності з браузерами щодо інших типів полів введення.Дивіться елемент
<datalist>
.max
(максимум)Чинний для
date
,month
,week
,time
,datetime-local
,number
таrange
. Встановлює найбільше значення діапазону дозволених значень. Якщо введене у поле значенняvalue
більше за значення цього атрибута, то елемент провалює валідацію обмежень. Якщо значення атрибутаmax
не є числом, то елемент не має максимального значення.Існує особливий випадок: якщо тип даних є періодичним (наприклад, датою чи часом), то значення
max
може бути меншим за значенняmin
, що вказує на те, що діапазон може бути циклічним; наприклад, так можна вказати часовий діапазон від 22:00 до 4:00.maxlength
(максимальна довжина)Чинний для
text
,search
,url
,tel
,email
таpassword
. Встановлює найбільшу прийнятну довжину рядка (у кодових одиницях UTF-16), яку користувач може ввести у поле. Мусить мати ціле числове значення, не менше за 0. Якщо атрибутmaxlength
не вказаний, або вказане недійсне значення, то поле не має максимальної довжини. Це значення мусить бути більшим або рівним значеннюminlength
.Поле введення провалить валідацію обмежень, якщо довжина введеного в поле тексту перевищить
maxlength
кодових одиниць UTF-16. Усталено браузери не дають користувачам вводити більше символів, ніж дозволено атрибутомmaxlength
. Валідація обмежень застосовується лише тоді, коли значення змінюється користувачем. Детальніше про це в секції Валідація на клієнтському боці.min
(мінімум)Чинний для
date
,month
,week
,time
,datetime-local
,number
таrange
. Визначає нижню межу діапазону прийнятних значень. Якщо значенняvalue
, введене в елемент, менше за значенняmin
, то елемент провалює валідацію обмежень. Якщо значення атрибутаmin
не є числом, то елемент не має мінімального значення.Це значення повинно бути меншим або рівним значенню атрибута
max
. Якщо присутній атрибутmin
, але його значення не вказане або недійсне, то не застосовується жодне мінімальне значення. Якщо атрибутmin
дійсний, і непусте значення поля менше за мінімум, встановлений атрибутомmin
, то валідація обмежень перешкодить поданню форми. Детальніше про це в секції Валідація на клієнтському боці.Існує особливий випадок: якщо тип даних є періодичним (наприклад, датою чи часом), то значення
max
може бути меншим за значенняmin
, що вказує на те, що діапазон може бути циклічним; наприклад, так можна вказати часовий діапазон від 22:00 до 4:00.minlength
(мінімальна довжина)Чинний для
text
,search
,url
,tel
,email
таpassword
. Встановлює найменшу прийнятну довжину рядка (у кодових одиницях UTF-16), яку користувач може ввести у поле. Мусить мати ціле числове значення, менше або рівне значеннюmaxlength
. Якщо атрибутminlength
не вказаний, або вказане недійсне значення, то поле не має мінімальної довжини.Поле введення провалить валідацію обмежень, якщо довжина введеного в поле тексту менша за
minlength
кодових одиниць UTF-16, і форма не буде подана. Валідація обмежень застосовується лише тоді, коли значення змінюється користувачем. Детальніше про це в секції Валідація на клієнтському боці.multiple
(кілька)Булів атрибут
multiple
, бувши встановленим, вказує на те, що користувач може ввести кілька електронних адрес, розділених комами, у віджет електронної адреси, або обрати більш ніж один файл у поле введенняfile
. Дивіться типи полів введення email та file.name
(ім'я)Рядок, що вказує ім'я контрольного елемента. Це ім'я подається разом зі значенням елемента при поданні форми.
Слід розглядати
name
як обов'язковий атрибут (хоч технічно він таким не є). Якщо не вказаноname
, або якщо значенняname
– пусте, то значення поля введення не подається з формою! (Також не надсилаються вимкнені контрольні елементи, необрані радіокнопки, зняті прапорці та кнопки скидання значень.)Існують два особливі випадки:
_charset_
: Якщо використовувати такий рядок як значення імені елемента<input>
типу hidden, то значення поля введенняvalue
автоматично встановлюється користувацьким агентом у кодування символів, що застосовується при поданні форми.isindex
: З історичних причин ім'яisindex
заборонено.
Атрибут
name
створює особливу поведінку на радіокнопках.Лише одна радіокнопка в групі однойменних радіокнопок може бути обрана одночасно. Вибір будь-якої радіокнопки в такій групі автоматично знімає вибір з будь-якої попередньо обраної радіокнопки в тій самій групі. Значення однієї обраної радіокнопки надсилається разом з іменем групи при поданні форми,
При табулюванні до групи однойменних радіокнопок, якщо одна з них обрана, то така радіокнопка отримає фокус. Якщо вони не згруповані докупи в коді HTML, то якщо одна радіокнопка в групі обрана – табулювання до групи починається тоді, коли зустрічається перша радіокнопка групи, пропускаючи всі ті, що не є обраними. Інакше кажучи, якщо одна радіокнопка обрана — табулювання пропустить всі інші радіокнопки групи. Якщо жодна з радіокнопок не обрана, група отримує фокус, коли він досягає до першої кнопки групи.
Щойно одна з радіокнопок групи отримує фокус, клавіші стрілок можуть використовуватись для навігації по однойменних радіокнопках, навіть якщо радіокнопки не згруповані докупи в коді HTML.
Коли елемент введення отримує атрибут
name
, це ім'я стає властивістю об'єктаHTMLFormElement.elements
форми-власника елемента. Якщо існує поле введення, в котрого атрибутname
має значенняguest
, і іще одне зname
–hat-size
, можна використати наступний код:let form = document.querySelector("form"); let guestName = form.elements.guest; let hatSize = form.elements["hat-size"];
При виконанні такого коду
guestName
дорівнюватимеHTMLInputElement
за полемguest
, аhatSize
– об'єктові за полемhat-size
.[!NOTE] Уникайте використання значень для атрибута
name
, що збігаються з назвами вбудованих властивостей форми, оскільки такі значення замістять присутню властивість або метод таким посиланням на відповідне поле введення.pattern
(патерн)Чинний для полів типів
text
,search
,url
,tel
,email
іpassword
атрибутpattern
– регулярний вираз, котрому повинно відповідати значенняvalue
поля введення, щоб пройти валідацію обмежень. Значенням атрибута має бути дійсний регулярний вираз JavaScript, такий, як використовується типомRegExp
і як документовано у наших настановах із регулярних виразів. При компіляції регулярного виразу автоматично вказується прапорець'u'
, тож схема розглядається як послідовність кодових точок Unicode, а не як ASCII. Текст схеми не повинен бути оточений рисками.Якщо атрибут
pattern
присутній, але не має значення, або має недійсне значення, то регулярний вираз не застосовується, і такий атрибут цілком ігнорується. Якщо атрибут з патерном дійсний, і непусте значення поля введення не відповідає йому, то валідація обмежень перешкодить поданню форми.[!NOTE] При використанні атрибута
pattern
слід повідомити користувача про очікуваний формат за допомогою пояснювального тексту поруч. Також можна використати атрибутtitle
для пояснення вимог для відповідності схемі; більшість браузерів покажуть цей атрибут як підказку. Візуальне пояснення необхідне для доступності, підказка – лише поліпшення.Детальніше про це в секції Валідація на клієнтському боці.
placeholder
(заповнювач)Дійсний для полів типів
text
,search
,url
,tel
,email
,password
іnumber
атрибутplaceholder
– рядок, що дає стислу пораду користувачеві щодо того, яка інформація очікується у полі. Це повинно бути слово або короткий вислів, що дає пораду радше щодо очікуваного типу даних, а не пояснення чи спонуку. Текст не мусить містити символів повернення каретки або нового рядка. Таким чином, наприклад, якщо поле повинно отримати ім'я користувача, а його підпис – "Ім'я", годящим заповнювачем був би рядок "наприклад, Мустафа".[!NOTE] Атрибут
placeholder
не є так семантично корисним, як інші способи пояснення форми, і може спричинити неочікувані технічні проблеми зі вмістом. Дивіться Підписи для докладнішої інформації.popovertarget
Перетворює елемент
<input type="button">
на контрольну кнопку спливного віконця; приймає ідентифікатор елемента спливного елемента, котрим керуватиме, як своє значення. Детальніше дивіться на сторінці Popover API.popovertargetaction
Задає дію, котра буде виконана над спливним елементом, котрим керує контрольний елемент
<input type="button">
. Можливі значення:"hide"
Ця кнопка приховує показане спливне віконце. Якщо спробувати приховати вже приховане спливне віконце, то ніяких дій не буде виконано.
"show"
Ця кнопка показує приховане спливне віконце. Якщо спробувати показати вже показане спливне віконце, то ніяких дій не буде виконано.
"toggle"
Ця кнопка перемикає спливне віконце між показом і приховуванням. Якщо спливне віконце приховане, то воно буде показано; якщо спливне віконце показане, то воно буде приховано. Якщо
popovertargetaction
відсутній, то"toggle"
є усталеною дією, котра буде виконана контрольною кнопкою.
readonly
(лише для читання)Булів атрибут, котрий, якщо присутній, вказує, що користувач не повинен мати змоги міняти значення поля введення. Атрибут
readonly
підтримується типами полів введенняtext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
таpassword
.Дивіться атрибут HTML:
readonly
для докладнішої інформаціїrequired
(обов'язковий)required
– булів атрибут, котрий, якщо присутній, вказує, що користувач мусить вказати значення поля введення до того, як форма-власник може бути подана. Атрибутrequired
підтримується полями введенняtext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,password
,checkbox
,radio
таfile
.Детальніше про це в секції Валідація на клієнтському боці та статті про атрибут HTML:
required
.size
(розмір)Чинний для полів типів
input
email
,password
,tel
,url
іtext
атрибутsize
вказує розмір зображуваного поля введення. По суті робить те саме, що й властивість CSSwidth
, але з кількома особливостями. Дієва одиниця значення залежить від типу поля введення. Дляpassword
іtext
це число символів (тобто одиницяem
) з усталеним значенням20
, а для інших типів це пікселі (одиниціpx
). Властивість CSSwidth
має перевагу над атрибутомsize
.src
(джерело)Чинний лише для кнопки введення
image
.src
– це рядок, що вказує URL зображення, котре потрібно показати для представлення графічної кнопки подання. Дивіться тип поля введення image.step
(крок)Чинний для полів типів
date
,month
,week
,time
,datetime-local
,number
іrange
атрибутstep
– це число, що вказує гранулярність, котрої мусить дотримуватись значення.Якщо не вказаний явно:
step
має усталене значення 1 дляnumber
іrange
.- Кожен тип поля введення, що стосується дати чи часу, має усталене відповідне значення
step
; дивіться сторінки типів введення:date
,datetime-local
,month
,time
таweek
.
Значення мусить бути додатним числом, цілим чи з рухомою комою – або особливим значенням
any
, котре вказує не застосовувати крокування і приймати будь-яке значення (прийнятне згідно з іншими обмеженнями, наприклад,min
іmax
.Якщо явно не вказане значення
any
, то дійсні значення для типівnumber
, дати й часу, а такожrange
охоплюють: основу крокування – значенняmin
, та всі її зростання на розмір кроку, аж до значенняmax
(якщо воно вказане).Наприклад, якщо є
<input type="number" min="10" step="2">
, то будь-яке парне число, починаючи від10
, є дійсним значенням. Якщо опустити атрибути обмежень,<input type="number">
, то усі цілі числа будуть дійсними значеннями, а числа з дробовою частиною (як4.2
) – ні, бо усталене значенняstep
–1
. Щоб4.2
було дійсним значенням,step
має бути абоany
, або 0.1, або 0.2. А якби значенняmin
було числом, що закінчується на.2
, – значенняstep
могло б бути будь-яким:<input type="number" min="-5.2">
[!NOTE] Коли введені користувачем дані не дотримуються налаштувань крокування, значення вважається недійсним при валідації обмежень, і елемент відповідатиме псевдокласові
:invalid
.Детальніше про це в секції Валідація на клієнтському боці.
tabindex
(індекс табуляції)Глобальний атрибут, чинний для всіх елементів, включаючи поля введення усіх типів. Цілочисловий атрибут, що вказує, чи може елемент отримати фокус введення (чи є фокусованим) під час послідовної навігації за допомогою клавіатури. Оскільки поля введення усіх типів, окрім типу
hidden
, є фокусованими, то цей атрибут не повинен застосовуватись на контрольних елементах, оскільки це призвело б до необхідності керувати порядком фокусування усіх елементів документа та загрози погіршення зручності та доступності при неправильній реалізації.title
(заголовок)Глобальний атрибут, чинний для всіх елементів, включно з полями введення всіх типів, що містить текст, котрий представляє дорадчу інформацію, пов'язану з елементом, на котрому встановлений. Така інформація зазвичай, але не обов'язково, виводиться користувачеві у вигляді підказки. Заголовок НЕ повинен використовуватись як основний засіб пояснення призначення контрольного елемента. Натомість слід вживати елемент
<label>
з атрибутомfor
, чиє значення рівне значенню атрибутаid
контрольного елемента. Дивіться Підписи нижче.type
(тип)Рядок, що вказує тип контрольного елемента, що буде зображений. Наприклад, для створення прапорця, використовується значення
checkbox
. Якщо цей атрибут опущено (або вказано невідоме значення), використовується типtext
, створюючи просте текстове поле введення.Дозволені значення перелічені вище: Типи input above.
value
(значення)Значення контрольного елемента. Коли вказаний у HTML, цей атрибут встановлює початкове значення, і відтоді воно може бути змінене або отримане за допомогою властивості
value
відповідного об'єктаHTMLInputElement
. Атрибутvalue
завжди є необов'язковим, втім, повинен розглядатись як необхідний дляcheckbox
,radio
таhidden
.width
(ширина)Чинний лише для кнопки — поля введення з типом
image
.width
– це ширина файлу зображення для представлення графічної кнопки подання. Дивіться тип поля введення image.
Нестандартні атрибути
Наступні нестандартні атрибути – доступні у деяких браузерах. У загальному випадку слід уникати їх використання, якщо є інший вихід.
Атрибут | Опис |
---|---|
autocorrect |
Рядок, котрий вказує, чи є автокорекція on (ввімкнена) або off (вимкнена). Лише Safari.
|
incremental |
Чи слід посилати повторювані події search ,
щоб дати змогу оновлювати результати пошуку в реальному часі, поки користувач продовжує редагування значення поля.
Лише WebKit і Blink (Safari, Chrome, Opera тощо).
|
mozactionhint |
Рядок, що вказує тип дії, котра буде виконана, коли користувач натисне клавішу Enter або Return при редагуванні поля. Використовується для визначення підпису такої кнопки на віртуальній клавіатурі. Оскільки цей атрибут нерекомендований, замість нього слід використовувати |
orient |
Встановлює орієнтацію повзуна діапазону. Лише Firefox. |
results |
Найбільша можлива кількість елементів, котрі слід показувати у спадному меню попередніх запитів пошуку. Лише Safari. |
webkitdirectory
|
Булеве значення, що вказує, чи слід дозволяти користувачеві обрати каталог (або каталоги, якщо також присутній атрибут multiple )
|
autocorrect
(автокоригування)(Лише Safari). Рядок, котрий вказує, чи вмикати автоматичне коригування, поки користувач редагує поле. Дозволені значення:
on
Ввімкнути автоматичне коригування хибодруків, а також обробку текстових замін, якщо вони налаштовані.
off
Вимкнути автоматичне коригування та текстові заміни.
incremental
(інкрементальний)Булів атрибут
incremental
– це розширення WebKit і Blink (тож підтримується Safari, Opera, Chrome тощо), котрий, якщо присутній, вказує користувацькому агентові обробляти введення як пошук в реальному часі. Поки користувач редагує значення поля, користувацький агент надсилає об'єктовіHTMLInputElement
, що представляє поле пошуку, подіїsearch
. Це дає змогу кодові оновлювати результати пошуку в реальному часі, поки користувач редагує пошук.Якщо атрибут
incremental
не вказаний, то подіяsearch
надсилається лише якщо користувач явно запускає пошук (наприклад, натиснувши клавішу Enter чи Return при редагуванні поля).Подія
search
має обмежену частоту, тож не буде надсилатись частіше, ніж зі заданим у реалізації інтервалом.orient
(орієнтація)Подібно до нестандартної CSS властивості -moz-orient, що впливає на елементи
<progress>
і<meter>
, атрибутorient
встановлює орієнтацію повзуна діапазону. Значення включаютьhorizontal
, що приводить до горизонтального зображення, таvertical
, що приводить до вертикального. Дивіться сучасний підхід до створення вертикальних формових елементів у Створенні вертикальних формових елементів.results
(результати)Атрибут
results
, підтримуваний лише Safari, – це числове значення, що дає змогу замістити найбільшу кількість записів, що показуються в нативному спадному меню попередніх запитів пошуку в елементі<input>
.Значення мусить бути невід'ємним десятковим числом. Якщо значення немає, або якщо воно недійсне, то використовується усталене в браузері найбільше число записів.
webkitdirectory
(директорія (Webkit))Булів атрибут
webkitdirectory
, якщо присутній, вказує, що лише каталоги повинні бути доступні для вибору користувачем в інтерфейсі вибору файлу. ДивітьсяHTMLInputElement.webkitdirectory
для додаткових подробиць та прикладів.Бувши початково реалізованим лише в браузерах на основі WebKit,
webkitdirectory
також можна використовувати у Microsoft Edge, а також, починаючи з версії 50, у Firefox. Втім, навіть маючи відносно широку підтримку, цей атрибут залишається нестандартним і не повинен використовуватись, якщо є інший вихід.
Методи
Наступні методи надаються інтерфейсом HTMLInputElement
, котрий представляє елементи <input>
у DOM. Також доступні усі ті методи, що вказані у батьківських інтерфейсах: HTMLElement
, Element
, Node
, and EventTarget
.
checkValidity()
(перевірити дійсність)Негайно запускає валідацію елемента, змушуючи документ викинути на елементі подію
invalid
, якщо значення є недійсним.reportValidity()
(прозвітувати про дійсність)Повертає
true
, якщо значення елемента проходить перевірки валідності; інакше – повертаєfalse
.select()
(обрати)Обирає увесь вміст елемента
<input>
element, якщо вміст елемента доступний для вибору. Для елементів без текстового вмісту, доступного для вибору (наприклад, для візуальної палітри кольорів чи календарного поля введення дати), цей метод нічого не робить.setCustomValidity()
(встановити власну дійсність)Встановлює повідомлення, що буде показане, якщо значення поля введення не є дійсним.
setRangeText()
(встановити текст діапазону)Встановлює вміст вказаного відрізка символів у полі введення у вказаний рядок. Параметр
selectMode
дає змогу керувати тим, як це впливає на присутній вміст.setSelectionRange()
(встановити діапазон вибору)Обирає вказаний відрізок символів всередині текстового поля введення. Нічого не робить для полів введення, що не представлені текстовими полями.
showPicker()
Виводить інтерфейс вибору елемента поля, що за звичайних умов виводиться, коли елемент стає вибраним, але викликається натисканням кнопки чи іншою користувацькою взаємодією.
stepDown()
(крок униз)Зменшує значення числового поля введення на один (усталено) або на вказане число одиниць.
stepUp()
(крок угору)Збільшує значення числового поля введення на один або на вказане число одиниць
CSS
Поля введення, бувши заміщеними елементами, мають кілька особливостей, що не властиві елементам іншого роду. Є селектори CSS, що можуть специфічно націлювати на контрольні елементи форм на основі функціональності їх користувацького інтерфейсу, також відомі як псевдокласи користувацького інтерфейсу. Серед них також є деякі особливо корисні властивості.
Псевдокласи користувацького інтерфейсу
Псевдоклас | Опис |
---|---|
:enabled (ввімкнений) |
Будь-який наразі ввімкнений елемент, що може бути активованим (обраним, отримати клік, введення з клавіатури тощо) або прийняти фокус, а також може мати вимкнений стан, у котрому не активуватиметься і не прийматиме фокус. |
:disabled (вимкнений) |
Будь-який наразі вимкнений елемент, що може мати ввімкнений стан, тобто міг би бути активованим (обраним, отримати клік, введення з клавіатури тощо), якби не був вимкненим. |
:read-only (лише зчитування) |
Елемент не може редагуватись користувачем |
:read-write (зчитування та запис) |
Елемент, що може редагуватись користувачем. |
:placeholder-shown (показаний заповнювач) |
Елемент, що наразі показує текст з атрибута placeholder ,
в тому числі елементи <input> і <textarea> з атрибутом placeholder , що наразі без значення.
|
:default (усталений) |
Елементи форми, що є усталеними у групі пов'язаних елементів. Відповідає типам полів введення checkbox та radio, що уже були обрані на момент завантаження сторінки чи візуалізації. |
:checked (обраний) |
Відповідає типам полів введення checkbox
і radio, що наразі обрані (а також <option> у <select> , що наразі обраний).
|
:indeterminate (невизначений) |
Елементи checkbox, чия властивість `indeterminate` отримала значення `true` в JavaScript,
елементи radio, коли всі радіокнопки з однаковим іменем у формі є непозначеними, і елементи <progress> у невизначеному стані
|
:valid (дійсне) |
Контрольні елементи форми, що мають валідацію обмежень і наразі мають дійсне значення. |
:invalid (недійсне) |
Контрольні елементи форми, що мають валідацію обмежень і наразі мають недійсне значення. Збігається з контрольними елементами, чиє значення не відповідає обмеженням, встановленим атрибутами, наприклад,
required ,
pattern ,
step і max .
|
:in-range (в межах діапазону) |
Непусте поле введення, чиє поточне значення знаходиться в діапазоні,
встановленому атрибутами min і max , і з кроком, встановленим атрибутом step .
|
:out-of-range (поза діапазоном) |
Непусте поле введення, чиє поточне значення знаходиться ПОЗА межами,
встановленими атрибутами min
і max , або
не відповідає обмеженню, накладеному step .
|
:required (обов'язковий) |
Елемент <input> , <select> або <textarea> , що має атрибут required .
Відповідає лише тим елементам, що можуть бути обов'язковими.
Атрибут, встановлений на елемент, що не може бути обов'язковим, не спричинить збігу за цим псевдокласом.
|
:optional (вибірковий) |
Елементи <input> , <select> , or
<textarea> , що НЕ мають атрибута required .
Не відповідає елементам, що не можуть бути обов'язковими.
|
:blank (порожній) |
Елементи <input> and <textarea> , що наразі без значення.
|
:user-invalid (недійсне від користувача) |
Подібний до :invalid , але активується при втраті фокуса. Збігається з невалідними полями введення, але лише після взаємодії з ними користувача. Наприклад, коли користувач передав фокус такому контрольному елементові, а потім залишив його, або спробував подати форму з невалідним контрольним елементом.
|
Приклад псевдокласів
Можна по різному стилізувати підпис прапорця на основі того, є він позначеним чи ні. У цьому прикладі стиль – це color
і font-weight
на <label>
, що йде зразу після позначеного поля введення. Якщо input
не позначений – не встановлюються жодні стилі.
input:checked + label {
color: red;
font-weight: bold;
}
Селектори атрибутів
Можна цілитись на різноманітні контрольні елементи на основі їх типу type
за допомогою селекторів атрибутів. Селектори атрибутів CSS вказують на елементи, спираючись або лиш на присутність атрибута, або на наявність атрибута з певним значенням.
/* відповідає полю введення пароля */
input[type="password"] {
}
/* відповідає контрольному елементові, чиї дійсні значення обмежені діапазоном*/
input[min][max] {
}
/* відповідає контрольному елементові, що має атрибут pattern */
input[pattern] {
}
::placeholder
Усталено текст заповнювача є напівпрозорим або світло-сірим. Псевдоелемент ::placeholder
– це текст з атрибута placeholder
елемента. Він може бути стилізований за допомогою обмеженої підмножини властивостей CSS.
::placeholder {
color: blue;
}
Лише та підмножина властивостей CSS, що застосовується до псевдоелемента ::first-line
, може застосовуватись із селектором ::placeholder
.
appearance
Властивість appearance
(зовнішній вигляд) вмикає відображення (майже) будь-якого елемента в стилі, що є природним для платформи, на основі теми операційної системи, або ж вимикає усі нативні стилі, якщо вказано значення none
.
Можна було б змусити <div>
мати вигляд радіокнопки за допомогою div {appearance: radio;}
, або радіокнопку – мати вигляд прапорця із [type="radio"] {appearance: checkbox;}
, але робити так не варто.
Встановлення appearance: none
усуває нативні для платформи межі, але не функціональність.
caret-color
Специфічна для елементів текстового введення властивість caret-color
(колір каретки) дає змогу встановити колір каретки текстового введення:
HTML
<label for="textInput">Зверніть увагу на червону каретку:</label>
<input id="textInput" class="custom" size="32" />
CSS
input.custom {
caret-color: red;
font:
16px "Helvetica",
"Arial",
"sans-serif";
}
Результат
field-sizing
Властивість field-sizing
дає змогу контролювати обчислення розміру формових полів (наприклад, щоб поле усталено отримувало бажаний розмір.) Ця властивість дає змогу замінити усталену логіку, даючи полям змогу підлаштовуватись, щоб у них вміщався їхній вміст.
Ця властивість зазвичай використовується для створення полів форми, що обтягують свій вміст і збільшуються, коли вводиться більше тексту. Це працює з типами введення, що приймають безпосередній текстовий ввід (наприклад, text
і url
), полями типу file
та елементами <textarea>
.
object-position і object-fit
У певних випадках (зазвичай за участі нетекстових полів введення та спеціалізованих інтерфейсів) елемент <input>
є заміщеним елементом. Коли він є таким, то положення та розмір елемента всередині своїх рамок може бути підігнано за допомогою властивостей CSS object-position
(положення об'єкта) і object-fit
(припасування об'єкта).
Стилізація
Для докладнішої інформації про додання кольору до елементів у HTML дивіться:
Також дивіться:
Додаткова функціональність
Підписи
Підписи необхідні для сполучення допоміжного тексту з <input>
. Елемент <label>
надає пояснювальну інформацію про поле форми, що завжди є доречною (попри можливі занепокоєння щодо компонування елементів). Ніколи не є поганою ідеєю використати <label>
, щоб пояснити, що саме повинно бути введено в <input>
чи <textarea>
.
Сполучені підписи
Семантичне парування елементів <input>
і <label>
корисне для технологій типу читачів з екрана. Бувши спарованими за допомогою атрибута for
елемента <label>
, підпис та поле введення пов'язані так, що читачі з екрана можуть точніше описати користувачам поля введення.
Недостатньо просто додати текст поруч з елементом <input>
. Натомість зручність та доступність вимагають включення, явно чи неявно, <label>
:
<!-- низька доступність -->
<p>Введіть своє ім'я: <input id="name" type="text" size="30" /></p>
<!-- неявний підпис -->
<p>
<label>Введіть своє ім'я: <input id="name" type="text" size="30" /></label>
</p>
<!-- явний підпис -->
<p>
<label for="name">Введіть своє ім'я: </label
><input id="name" type="text" size="30" />
</p>
Перший приклад має низьку доступність: немає зв'язку між підказкою та елементом <input>
.
На додачу до доступного імені, підпис надає більшу зону "попадання" для миші та користувачів сенсорних екранів для кліку чи дотику. При паруванні <label>
із <input>
клік на будь-якому з цих двох елементів спричинить передачу фокуса до елементу <input>
. При використанні простого тексту для "підписування" поля введення – цього не відбудеться. Присутність зони підказки для активації поля введення допомагає людям із порушеннями контролю руху.
Веброзробникам важливо ніколи не припускати, що користувач знає те саме, що й розробник. Розмаїття люду, що використовує Всесвітнє павутиння, практично гарантує, що хтось із відвідувачів вебсайту матиме відмінності у процесі мислення або обставини, що змусить їх тлумачити форми геть не так, як розробник, не маючи перед очима чітких та правильно показаних підписів.
Заповнювачі шкодять доступності
Атрибут placeholder
дає змогу вказати текст, що з'являється всередині області вмісту елемента <input>
, коли немає значення. Заповнювач ніколи не повинен бути необхідним для розуміння форми. Це не підпис, і заповнювач не повинен використовуватись як його заміна, бо він нею не є. Заповнювач використовується для надання підказки щодо того, на що повинно бути схоже введене значення, а не як пояснення чи вказівка.
Заповнювач не просто шкодить доступності для читачів з екрана. Щойно користувач вводить якийсь текст у контрольний елемент, або якщо контрольний елемент уже має значення, заповнювач зникає. Іще – браузери з функціоналом автоматичного перекладу сторінки можуть пропускати атрибути при перекладі, а отже – placeholder
може не бути перекладеним.
[!NOTE] Слід уникати використання атрибута
placeholder
, коли це можливо. Якщо необхідно підписати елемент<input>
, то слід використовувати елемент<label>
.
Валідація на клієнтському боці
[!NOTE] Валідація на клієнтському боці – корисна, але не гарантує, що сервер отримає валідні дані. Якщо дані мусять мати певний формат, слід завжди перевіряти їх також на серверному боці, повертаючи відповідь HTTP
400
, якщо формат невалідний.
На додачу до використання CSS для стилізації полів введення на основі станів користувацького інтерфейсу :valid
чи :invalid
, як зауважено в розділі Псевдокласи користувацького інтерфейсу вище, браузер валідує форму при спробі її подання. При поданні форми, якщо є контрольний елемент, що провалює перевірку обмежень, то браузери, що це підтримують, покажуть повідомлення помилки на першому невалідному контрольному елементі. Таке повідомлення може бути усталеним на основі типу помилки – або встановленим розробником.
Деякі типи полів введення та інші атрибути накладають обмеження на те, які значення є дійсними для поля введення. Наприклад, <input type="number" min="2" max="10" step="2">
означає, що дійсними значеннями є лише числа 2, 4, 6, 8 та 10. Може трапитись ціла низка помилок, включаючи помилку rangeUnderflow
(недосягнення діапазону), якщо значення менше ніж 2, rangeOverflow
(перевищення діапазону), якщо значення більше ніж 10, stepMismatch
(невідповідність кроку), якщо значення – число між 2 і 10, але не парне (не відповідає вимогам атрибута step
), і typeMismatch
(невідповідність типу), якщо значення не є числом.
Для типів полів введення, чия область допустимих значень є періодичною (тобто коли після найбільшого можливого значення йде перехід на початок, а не глухий кут), може бути так, що значення max
і min
у зворотному співвідношенні: це означає, що діапазон прийнятних значень починається від min
, прямує до найбільшого можливого, далі повертається до найменшого можливого – і продовжується, поки не досягне max
. Це особливо корисно для дат та часу, наприклад, коли необхідно дозволити діапазон від 20:00 до 8:00:
<input type="time" min="20:00" max="08:00" name="overnight" />
Конкретні атрибути та їх значення можуть привести до конкретних помилок ValidityState
:
Атрибут | Відповідна властивість | Опис |
---|---|---|
max |
validityState.rangeOverflow (вихід за верхню межу діапазону) |
Трапляється, коли значення більше за найбільше прийнятне значення, встановлене атрибутом max
|
maxlength |
validityState.tooLong (задовге) |
Трапляється, коли кількість символів більша за число, дозволене властивістю maxlength
|
min |
validityState.rangeUnderflow (вихід за нижню межу діапазону) |
Трапляється, коли значення менше за найменше прийнятне значення, встановлене атрибутом min
|
minlength |
validityState.tooShort (закоротке) |
Трапляється, коли кількість символів менша за число, дозволене властивістю minlength
|
pattern |
validityState.patternMismatch (невідповідність патерну) |
Трапляється, коли присутній атрибут `pattern` з дійсним регулярним виразом, а значення value цьому виразові не відповідає.
|
required |
validityState.valueMissing (немає значення) |
Трапляється, коли присутній атрибут required , але значення – null , або коли радіокнопка чи прапорець не позначені.
|
step |
validityState.stepMismatch (невідповідність квантування) |
Значення не відповідає кроку зростання. Такий рядок усталено рівний 1 , тож у разі type="number" дійсні значення – лише цілі числа,
якщо нема атрибута `step`. Поле з атрибутом step="any" ніколи не викидатиме такої помилки.
|
type |
validityState.typeMismatch (невідповідність типу) |
Трапляється, коли значення має неналежний тип, наприклад, електронна адреса без @ або URL без протоколу.
|
Якщо контрольний елемент не має атрибута required
, то відсутність значення чи пустий рядок – є дійсним значенням. Навіть якщо присутні інші атрибути, окрім required
, то пустий рядок все одно не приведе до помилки.
Можна встановлювати межі того, які значення приймаються, і браузери, що це підтримують, будуть природно валідувати такі значення форми й повідомляти користувача про помилку при поданні форми.
На додачу до помилок, описаних у таблиці вище, інтерфейс validityState
містить булеві властивості, що доступні лише для зчитування: badInput
(невдале введення), valid
(дійсний) і customError
(особлива помилка). Об'єкт валідності включає:
validityState.valueMissing
(значення відсутнє)validityState.typeMismatch
(невідповідність типу)validityState.patternMismatch
(невідповідність патерну)validityState.tooLong
(задовге)validityState.tooShort
(закоротке)validityState.rangeUnderflow
(вихід за нижню межу діапазону)validityState.rangeOverflow
(вихід за верхню межу діапазону)validityState.stepMismatch
(невідповідність кроку)validityState.badInput
(невдале введення)validityState.valid
(дійсний)validityState.customError
(особлива помилка)
Для кожної з цих булевих властивостей значення true
вказує, що з відповідної причини валідація може бути провалена, окрім властивості valid
, що має значення true
, коли значення елемента задовільняє усі обмеження.
Якщо є помилка, то браузери, що це підтримують, повідомлять користувача та перешкодять поданню форми. Невелике зауваження: якщо особлива помилка містить істинне значення (будь-чого, крім пустого рядка та null
), то подання форми не відбудеться. Якщо повідомлення особливої помилки немає, і жодна з інших властивостей не повертає істини, то valid
буде істинною, і форма може бути подана.
function validate(input) {
let validityState_object = input.validity;
if (validityState_object.valueMissing) {
input.setCustomValidity("Необхідне значення");
} else if (validityState_object.rangeUnderflow) {
input.setCustomValidity("Введене значення замале");
} else if (validityState_object.rangeOverflow) {
input.setCustomValidity("Введене значення завелике");
} else {
input.setCustomValidity("");
}
}
Останній рядок, встановлення особливого повідомлення валідації як рядка помилки – вся суть. Якщо користувач робить помилку, і значення валідності встановлено, то подання форми провалюватиметься навіть після того, коли всі значення стануть дійсними, аж поки повідомлення не стане null
.
Приклад особливої помилки валідації
Якщо необхідно показати особливе повідомлення помилки, коли поле провалює валідацію, слід використовувати API валідації обмежень, доступну на елементі <input>
(та споріднених до нього). Розберімо наступну форму:
<form>
<label for="name"
>Введіть ім'я користувача (з великих та малих літер):
</label>
<input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
<button>Подати</button>
</form>
Базова функціональність валідації форм HTML спричинить появу усталеного повідомлення про помилку, якщо спробувати подати форму або без дійсного заповнення, або зі значенням, яке не задовольняє pattern
.
При потребі натомість показати власні повідомлення помилок можна використати JavaScript отак:
const nameInput = document.querySelector("input");
nameInput.addEventListener("input", () => {
nameInput.setCustomValidity("");
nameInput.checkValidity();
});
nameInput.addEventListener("invalid", () => {
if (nameInput.value === "") {
nameInput.setCustomValidity("Введіть ім'я користувача!");
} else {
nameInput.setCustomValidity(
"Імена користувачів можуть містити лише великі та малі літери. Спробуйте ще!",
);
}
});
Приклад візуалізується так:
Стисло:
- Перевірка стану валідності елемента введення виконується щоразу, коли його значення змінюється, шляхом виклику метода
checkValidity()
в обробнику події наinput
. - Якщо значення – недійсне, то виринає подія
invalid
і запускається функція, що є обробником подіїinvalid
. Всередині цієї функції за допомогою блокуif ()
приймається рішення, чому значення недійсне: бо порожнє, чи через невідповідність патерну, і – встановлюється власне повідомлення помилки валідації. - Як наслідок: якщо значення поля введення є недійсним, коли натискається кнопка подання – показується одне з особливих повідомлень помилки.
- Якщо значення дійсне, то воно буде подано, як очікується. Щоб це відбулось, особлива валідація мусить бути скасована шляхом заклику
setCustomValidity()
із пустим рядком. Це робиться щоразу, коли виринає подіяinput
. Якщо цього не робити, і раніше була встановлена особлива валідація, то поле введення реєструватиметься як невалідне, навіть якщо при поданні воно містить дійсне значення.
[!NOTE] Слід завжди валідувати обмеження введення як на клієнтському, так і на серверному боці. Валідація обмежень не усуває потреби валідації на серверному боці. Недійсні значення можуть все ж бути надіслані давнішими браузерами чи недоброзичливцями.
[!NOTE] Firefox підтримував власницький атрибут помилки —
x-moz-errormessage
— протягом багатьох версій, котрий давав змогу подібним чином встановлювати спеціальні повідомлення про помилки. Це було прибрано у версії 66 (дивіться ваду Firefox 1513890).
Локалізація
Дозволені значення для певних типів <input>
залежать від локалі. У певних локалях 1,000.00 є дійсним числом, при тому в інших локалях дійсний спосіб ввести таке число – 1.000,00.
Firefox використовує наступну евристику для визначення локалі для валідації введення користувача (принаймні для type="number"
):
- Спробувати мову, вказану в атрибуті
lang
/xml:lang
елемента або будь-якого з його предків. - Спробувати мову, вказану будь-яким заголовком HTTP
Content-Language
. Або ж – - Якщо інше не спрацювало – використовувати локаль браузера.
Доступність
Підписи
При включенні полів введення вимогою доступності є додання підписів поруч. Це потрібно, щоб користувачі допоміжних технологій могли зрозуміти призначення поля. А ще – натискання на підпис передає фокус контрольному елементові, що сполучений з підписом. Це покращує доступність та зручність для зрячих користувачів, збільшує область, на котру може натиснути користувач для активування контрольного елемента. Це перш за все корисно (і навіть необхідно) для радіокнопок та прапорців, котрі самі по собі крихітні. Для докладнішої інформації про підписи в загальному дивіться Підписи.
Далі – приклад сполучення <label>
з елементом <input>
у вищеописаний спосіб. Потрібно дати <input>
атрибут id
. Тоді <label>
потребує атрибута for
, чиє значення таке ж, як id
поля введення.
<label for="peas">Любите горох?</label>
<input type="checkbox" name="peas" id="peas" />
Розмір
Інтерактивні елементи штибу контрольних елементів надають область достатньо велику, щоб було легко їх активувати. Це допомагає безлічі людей, включно із тими, хто має проблеми контролю руху та тими, хто використовує неточні способи введення, як то стилуси чи пальці. Рекомендований найменший інтерактивний розмір – 44x44 пікселів CSS.
- Розуміння критерію успіху 2.5.5: Розмір мішені | W3C Розуміння WCAG 2.1
- Розмір мішені та 2.5.5 | Адріан Розеллі
- Хутка проба: Великі мішені дотику – Проєкт A11Y
Технічний підсумок
Категорії вмісту |
Потоковий вміст, перелічуваний, подаваний, скиданий, пов'язаний з формою елемент,
оповідальний вміст. Якщо type – не
hidden , то – підписуваний елемент, дотиковий вміст.
|
---|---|
Дозволений вміст | Жодного; це пустий елемент. |
Упущення тега | Мусить мати початковий тег і не мати завершального тега. |
Дозволені предки | Будь-який елемент, що приймає оповідальний вміст. |
Неявна роль ARIA |
|
Дозволені ролі ARIA |
|
Інтерфейс DOM | HTMLInputElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-input-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
input
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 1 | Samsung Internet Full support Так |
align
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
type="button"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support 1.0 |
type="checkbox"
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="color"
|
Chrome Full support 20 | Edge Full support 14 | Firefox Full support 29 | Internet Explorer No support Ні | Opera Full support 12 | Safari Full support 12.1 | WebView Android Full support 4.4 | Chrome Android Full support 25 | Firefox for Android Full support 27 | Opera Android Full support 12 | Safari on iOS Full support 12.2 | Samsung Internet Full support 1.5 |
type_color.autocomplete
|
Chrome Full support 20 | Edge Full support 14 | Firefox No support Ні | Internet Explorer No support Ні | Opera Сумісність невідома; будь ласка, оновіть. ? | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android No support Ні | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Сумісність невідома; будь ласка, оновіть. ? | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
type_color.list
|
Chrome Full support 20 | Edge Full support 14 | Firefox No support Ні | Internet Explorer No support Ні | Opera Сумісність невідома; будь ласка, оновіть. ? | Safari Full support 12.1 | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android No support Ні | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Full support 12.2 | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
type="date"
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 57 | Internet Explorer No support Ні | Opera Full support 11 | Safari Full support 14.1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 57 | Opera Android Full support 11 | Safari on iOS Full support 5 | Samsung Internet Full support Так |
type="datetime-local"
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 93 | Internet Explorer No support Ні | Opera Full support 11 | Safari Full support 14.1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support 11 | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="email"
|
Chrome Full support 5 | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support Так | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
type="file"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support 11 | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support 11 | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="hidden"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support 2 | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="image"
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
type="month"
|
Chrome Full support 20 | Edge Full support 12 | Firefox No support Ні | Internet Explorer No support Ні | Opera Full support 11 | Safari No support Ні | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 18 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="number"
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support 10 | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="password"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 2 | Opera Full support 2 | Safari Full support 1 | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Special handling of password inputs in insecure login pages
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 52 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 52 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
type="radio"
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="range"
|
Chrome Full support 4 | Edge Full support 12 | Firefox Full support 23 | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support 3.1 | WebView Android Full support 4.4 | Chrome Android Full support 57 | Firefox for Android Full support 52 | Opera Android Full support Так | Safari on iOS Full support 5 | Samsung Internet Full support 7.0 |
Tick mark support
|
Chrome Full support Так | Edge Full support 79 | Firefox No support Ні | Internet Explorer Сумісність невідома; будь ласка, оновіть. ? | Opera Full support Так | Safari No support Ні | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android No support Ні | Opera Android Full support Так | Safari on iOS No support Ні | Samsung Internet Full support Так |
Vertically-oriented slider support
|
Chrome Full support Так | Edge Full support 12 | Firefox No support Ні | Internet Explorer Full support 10 | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android No support Ні | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="reset"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="search"
|
Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 10 | Opera Full support 10.6 | Safari Full support 5 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="submit"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="tel"
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support 4 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support Так | Opera Android Full support 11 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
type="text"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support Так | Opera Full support Так | Safari Full support 1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="time"
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 57 | Internet Explorer No support Ні | Opera Full support 10 | Safari Full support 14.1 | WebView Android Full support Так | Chrome Android Full support 25 | Firefox for Android Full support 57 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support 1.5 |
type="url"
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support 10 | Opera Full support 11 | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
type="week"
|
Chrome Full support 20 | Edge Full support 12 | Firefox No support Ні | Internet Explorer No support Ні | Opera Full support 11 | Safari No support Ні | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 18 | Opera Android Full support Так | Safari on iOS No support Ні | Samsung Internet Full support Так |
usemap
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
x-moz-errormessage attribute
|
Chrome No support Ні | Edge No support Ні | Firefox No support ? – 66 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support ? – 66 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
Дивіться також
- Валідація обмежень форми
- Ваша перша форма HTML
- Як упорядковувати форму HTML
- Нативні віджети форми
- Надсилання даних форми
- Валідація даних форми
- Як будувати власні віджети форми
- Форми HTML у застарілих браузерах
- Стилізація форм HTML
- Розширена стилізація для форм HTML
- Таблиця сумісності властивостей CSS
- Створення вертикальних формових елементів