<input> - HTML елемент вводу

HTML-елемент <input> використовується для створення інтерактивних елементів керування з метою отримання даних від користувача. Існує велика кількість типів інпутів, в залежності від атрибуту type.

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

Завжди використовуйте елемент <label> для покращення доступності полів вводу.

HTML
<input type="text" name="username">

Атрибути

Цей тег може мати глобальні атрибути.

type: Визначає, який тип елемента вводу буде відображено. Якщо атрибут не вказано, за замовчуванням використовується text. Можливі значення включають: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.
name: Ім’я елемента керування, яке надсилається разом із даними форми.
value: Початкове значення елемента керування. Для типів radio або checkbox це значення, яке надсилається, якщо елемент обрано.
placeholder: Текстова підказка, яка відображається в полі вводу, коли воно порожнє.
disabled: Булевий атрибут, який вказує, що елемент вводу неактивний і його значення не буде надсилатися з формою.
required: Булевий атрибут, який вказує, що користувач повинен заповнити це поле перед надсиланням форми.
readonly: Булевий атрибут, який вказує, що значення поля не можна редагувати.
checked: Булевий атрибут, який вказує, що елемент checkbox або radio має бути обраним за замовчуванням.
max, min, step: Використовуються для числових типів вводу (number, range, date тощо) для визначення максимального, мінімального значення та кроку.
maxlength: Визначає максимальну кількість символів для текстових полів (text, email, password тощо).
pattern: Регулярний вираз, якому має відповідати значення поля для успішної валідації.
accept: Для type="file", визначає типи файлів, які можна завантажувати (наприклад, .jpg, .png, image/*).
multiple: Для type="file" або type="email", дозволяє користувачу обирати декілька файлів або вводити декілька email-адрес.
autocomplete: Підказка для браузера щодо автозаповнення поля. Може мати значення "on", "off" або більш детальні токени, як-от "name", "email", "tel" тощо.
autofocus: Булевий атрибут, який вказує, що елемент має отримати фокус одразу після завантаження сторінки.
capture: Для type="file", вказує, який медіа-пристрій (мікрофон, відеокамера, камера) використовувати для захоплення нового файлу.
list: Вказує на id елемента <datalist>, який містить попередньо визначені варіанти для автозаповнення.
minlength: Визначає мінімальну кількість символів для текстових полів.
height та width: Для type="image", визначають висоту та ширину зображення, що відображається як кнопка.
src: Для type="image", вказує URL зображення, яке буде відображатися на кнопці відправки.
alt: Для type="image", надає альтернативний текст для зображення.
form: Вказує id форми, до якої належить цей елемент вводу. Дозволяє розміщувати інпути поза тегом <form>.
formaction: Для type="submit" або type="image", перевизначає атрибут action форми.
formenctype: Для type="submit" або type="image", перевизначає атрибут enctype форми.
formmethod: Для type="submit" або type="image", перевизначає атрибут method форми.
formnovalidate: Для type="submit", вказує, що форма не повинна валідуватися перед відправкою.
formtarget: Для type="submit" або type="image", перевизначає атрибут target форми.

Технічне резюме

Категорія контенту	Фразовий контент. Якщо атрибут `type` не є `hidden`, то також інтерактивний контент та відчутний контент.
Роль ARIA	Залежить від атрибута `type`: `button`, `checkbox`, `radio`, `slider`, `spinbutton`, `textbox`, `combobox`, `searchbox`, `switch`.
Дозволені ARIA атрибути	Всі
DOM інтерфейс	HTMLInputElement

Приклади використання

<label for="username">Ім’я користувача:</label>
<input type="text" id="username" name="username" placeholder="Введіть логін">

<fieldset>
  <legend>Оберіть ваш улюблений фрукт:</legend>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">Яблуко</label><br>
  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">Банан</label><br>
  <input type="radio" id="orange" name="fruit" value="orange">
  <label for="orange">Апельсин</label>
</fieldset>

<input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
<label for="subscribe">Підписатися на розсилку</label>

<label for="quantity">Кількість (від 1 до 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

<input type="submit" value="Надіслати">

Стилі за замовчуванням

CSS
/* Стилі за замовчуванням для <input> сильно залежать від браузера та атрибута type. */
/* Зазвичай вони включають рамку, внутрішні відступи та специфічні для типу елементи. */

input[type="text"] {
  padding: 2px;
  border: 1px solid #ccc;
  background-color: white;
}

Підтримка браузерів



`<input>`
`accept`
`align`
`alpha`
`alt`
`autocomplete`
`capture`
`checked`
`colorspace`
`dirname`
`disabled`
`form`
`formaction`
`formenctype`
`formmethod`
`formnovalidate`
`formtarget`
`list`
`max`
`maxlength`
`min`
`minlength`
`multiple`
`name`
`pattern`
`placeholder`
`popovertarget`
`popovertargetaction`
`readonly`
`required`
`size`
`src`
`step`
`type_button`
`type_checkbox`
`type_color`
`type_date`
`type_datetime-local`
`type_email`
`type_file`
`type_hidden`
`type_image`
`type_month`
`type_number`
`type_password`
`type_radio`
`type_range`
`type_reset`
`type_search`
`type_submit`
`type_tel`
`type_text`
`type_time`
`type_url`
`type_week`
`usemap`
`webkitdirectory`