<input>: Елемент введення (форм)

Елемент HTML <input> використовується для створення інтерактивних засобів керування у вебформах, щоб приймати дані від користувача; доступно широке розмаїття типів даних введення та контрольних віджетів, залежно від пристрою та користувацького агента. Елемент <input> – один із найпотужніших та найскладніших у всій HTML, тому що має безліч комбінацій типів введення та атрибутів.

Спробуйте його в дії

Типи <input>

Те, як <input> працює, значною мірою залежить від значення його атрибута type, – тому різні типи полів розкриті на власних довідкових сторінках. Якщо цей атрибут не вказаний – використовується усталене значення text.

Доступні наступні типи:

Тип Опис Прості приклади
button Натисна кнопка без усталеної поведінки, що показує значення атрибута value, усталено – порожня.
checkbox Прапорець, котрий дає змогу обирати та скасовувати вибір окремих значень.
color Контрольний елемент для вибору кольору; відкриває колірну палітру, коли це підтримується браузером.
date Контрольний елемент для введення дати (року, місяця та дня, без часу). Відкриває панель вибору дати або числові колеса для року, місяця, дня, коли це підтримується браузером.
datetime-local Контрольний елемент для введення дати та часу, без часового поясу. Відкриває панель вибору дати або числові колеса для компонент дати та часу, коли це підтримується браузером.
email Поле для редагування адреси електронної пошти. Має вигляд поля з типом 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, а valuecherry, і такий прапорець є обраним, то подані дані форми включатимуть 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 – пусте, то значення поля введення не подається з формою! (Також не надсилаються вимкнені контрольні елементи, необрані радіокнопки, зняті прапорці та кнопки скидання значень.)

Існують два особливі випадки:

  1. _charset_ : Якщо використовувати такий рядок як значення імені елемента <input> типу hidden, то значення поля введення value автоматично встановлюється користувацьким агентом у кодування символів, що застосовується при поданні форми.
  2. isindex: З історичних причин ім'я isindex заборонено.

Атрибут name створює особливу поведінку на радіокнопках.

Лише одна радіокнопка в групі однойменних радіокнопок може бути обрана одночасно. Вибір будь-якої радіокнопки в такій групі автоматично знімає вибір з будь-якої попередньо обраної радіокнопки в тій самій групі. Значення однієї обраної радіокнопки надсилається разом з іменем групи при поданні форми,

При табулюванні до групи однойменних радіокнопок, якщо одна з них обрана, то така радіокнопка отримає фокус. Якщо вони не згруповані докупи в коді HTML, то якщо одна радіокнопка в групі обрана – табулювання до групи починається тоді, коли зустрічається перша радіокнопка групи, пропускаючи всі ті, що не є обраними. Інакше кажучи, якщо одна радіокнопка обрана — табулювання пропустить всі інші радіокнопки групи. Якщо жодна з радіокнопок не обрана, група отримує фокус, коли він досягає до першої кнопки групи.

Щойно одна з радіокнопок групи отримує фокус, клавіші стрілок можуть використовуватись для навігації по однойменних радіокнопках, навіть якщо радіокнопки не згруповані докупи в коді HTML.

Коли елемент введення отримує атрибут name, це ім'я стає властивістю об'єкта HTMLFormElement.elements форми-власника елемента. Якщо існує поле введення, в котрого атрибут name має значення guest, і іще одне з namehat-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 вказує розмір зображуваного поля введення. По суті робить те саме, що й властивість CSS width, але з кількома особливостями. Дієва одиниця значення залежить від типу поля введення. Для password і text це число символів (тобто одиниця em) з усталеним значенням 20, а для інших типів це пікселі (одиниці px). Властивість CSS width має перевагу над атрибутом 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) – ні, бо усталене значення step1. Щоб 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 при редагуванні поля. Використовується для визначення підпису такої кнопки на віртуальній клавіатурі. Оскільки цей атрибут нерекомендований, замість нього слід використовувати enterkeyhint.

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, що можуть специфічно націлювати на контрольні елементи форм на основі функціональності їх користувацького інтерфейсу, також відомі як псевдокласи користувацького інтерфейсу. Серед них також є деякі особливо корисні властивості.

Псевдокласи користувацького інтерфейсу

Підписи вкрай доречні до елемента <input>:
Псевдоклас Опис
: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:

Об'єктні помилки валідності залежать від атрибутів <input> та їх значень:
Атрибут Відповідна властивість Опис
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 (особлива помилка). Об'єкт валідності включає:

Для кожної з цих булевих властивостей значення 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.

Технічний підсумок

Категорії вмісту Потоковий вміст, перелічуваний, подаваний, скиданий, пов'язаний з формою елемент, оповідальний вміст. Якщо type – не hidden, то – підписуваний елемент, дотиковий вміст.
Дозволений вміст Жодного; це пустий елемент.
Упущення тега Мусить мати початковий тег і не мати завершального тега.
Дозволені предки Будь-який елемент, що приймає оповідальний вміст.
Неявна роль ARIA
Дозволені ролі ARIA
Інтерфейс DOM HTMLInputElement

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
input
Chrome Full support Так
Edge Full support 12
Firefox Full support 1
footnote
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
footnote
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
footnote
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 Ні
footnote
Internet Explorer No support Ні
Opera Сумісність невідома; будь ласка, оновіть. ?
Safari Сумісність невідома; будь ласка, оновіть. ?
WebView Android Сумісність невідома; будь ласка, оновіть. ?
Chrome Android Сумісність невідома; будь ласка, оновіть. ?
Firefox for Android No support Ні
footnote
Opera Android Сумісність невідома; будь ласка, оновіть. ?
Safari on iOS Сумісність невідома; будь ласка, оновіть. ?
Samsung Internet Сумісність невідома; будь ласка, оновіть. ?
type_color.list
Chrome Full support 20
Edge Full support 14
Firefox No support Ні
footnote
Internet Explorer No support Ні
Opera Сумісність невідома; будь ласка, оновіть. ?
Safari Full support 12.1
WebView Android Сумісність невідома; будь ласка, оновіть. ?
Chrome Android Сумісність невідома; будь ласка, оновіть. ?
Firefox for Android No support Ні
footnote
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
footnote
Samsung Internet Сумісність невідома; будь ласка, оновіть. ?
type="file" Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
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 Ні
footnote
Internet Explorer No support Ні
Opera Full support 11
Safari No support Ні
footnote
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 Ні
footnote
Internet Explorer Сумісність невідома; будь ласка, оновіть. ?
Opera Full support Так
Safari No support Ні
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android No support Ні
footnote
Opera Android Full support Так
Safari on iOS No support Ні
Samsung Internet Full support Так
Vertically-oriented slider support
Chrome Full support Так
footnote
Edge Full support 12
footnote
Firefox No support Ні
footnote
Internet Explorer Full support 10
footnote
Opera Full support Так
footnote
Safari Full support Так
footnote
WebView Android Full support Так
footnote
Chrome Android Full support Так
footnote
Firefox for Android No support Ні
footnote
Opera Android Full support Так
footnote
Safari on iOS Full support Так
footnote
Samsung Internet Full support Так
footnote
type="reset" Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
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
footnote
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
footnote
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
footnote
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
type="tel" Chrome Full support 3
footnote
Edge Full support 12
Firefox Full support Так
Internet Explorer Full support 10
Opera Full support 11
Safari Full support 4
footnote
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 Ні
footnote
Internet Explorer No support Ні
Opera Full support 11
Safari No support Ні
footnote
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 18
Opera Android Full support Так
Safari on iOS No support Ні
footnote
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 Ні

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