<input> – Елемент поля HTML

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

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

Типи <input>

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

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

<input type="button" name="button" value="Кнопка" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

Атрибути

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

Цей розділ містить таблицю з переліком усіх атрибутів зі стислим їх описом. Нижче цієї таблиці розміщений список, що описує кожний атрибут більш докладно, в тому числі вказуючи, з якими типами полів введення пов'язаний кожний атрибут. Ті з них, що діють для більшості або всіх типів полів введення, описані докладно нижче. Атрибути, що є ексклюзивними для певних типів полів введення, а також ті, що діють для всіх полів введення, але мають особливу поведінку на певному типі полів введення – документовані на сторінках відповідних типів.

Атрибути елемента <input> включають глобальні атрибути HTML, а також:

Кілька додаткових нестандартних атрибутів перелічені після описів стандартних атрибутів.

Ексклюзивні атрибути

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 – пусте, то значення поля введення не подається з формою! (Також не надсилаються вимкнені контрольні елементи, необрані радіокнопки, зняті прапорці та кнопки скидання значень.)

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

1. _charset_ : Якщо використовувати такий рядок як значення імені елемента <input> типу hidden, то значення поля введення value автоматично встановлюється користувацьким агентом у кодування символів, що застосовується при поданні форми.
2. 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 і як документовано у наших настановах із регулярних виразів. Текст схеми не повинен бути оточений рисками. Під час компілювання регулярного виразу:

1. патерн неявно загортається в ^(?: і )$, тож збіг вимагається щодо всього введеного значення: ^(?:<pattern>)$.
2. задається прапорець 'v', тож патерн розглядається як послідовність кодових точок Unicode, а не як ASCII.

Якщо атрибут pattern присутній, але не має значення, або має невалідне значення, то регулярний вираз не застосовується і такий атрибут цілком ігнорується. Якщо атрибут з патерном валідний і непусте значення поля введення не відповідає йому, то валідація обмежень перешкодить поданню форми. Якщо присутній атрибут multiple, то скомпільований регулярний вираз зіставляється з кожним зі значень, розділених комами.

[!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) – ні, бо усталене значення 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.

Нестандартні атрибути

Наступні нестандартні атрибути – доступні у деяких браузерах. У загальному випадку слід уникати їх використання, якщо є інший вихід.

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

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

Приклад псевдокласів

Можна по різному стилізувати підпис прапорця на основі того, є він позначеним чи ні. У цьому прикладі стиль – це color і font-weight на <label>, що йде зразу після позначеного поля введення. Якщо input не позначений – не встановлюються жодні стилі.

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Перемкни прапорець</label>

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 дивіться:

• Застосування кольору до елементів HTML за допомогою CSS.

Також дивіться:

• Стилізація форм HTML
• Розширена стилізація для форм HTML і
• таблиця сумісності властивостей CSS.

Додаткова функціональність

Підписи

Підписи необхідні для сполучення допоміжного тексту з <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:

Якщо контрольний елемент не має атрибута 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

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

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

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

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

• Валідація обмежень форми
• Ваша перша форма HTML
• Як упорядковувати форму HTML
• Нативні віджети форми
• Надсилання даних форми
• Валідація даних форми
• Як будувати власні віджети форми
• Форми HTML у застарілих браузерах
• Стилізація форм HTML
• Розширена стилізація для форм HTML
• Таблиця сумісності властивостей CSS
• Створення вертикальних формових елементів