HTML Тег <input>
Приклад
HTML-форма з трьома полями введення; два текстових поля та одна кнопка надсилання:
<form action="/action_page.html">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Спробуйте самі »Визначення та використання
Тег <input> визначає поле введення, куди користувач може вводити дані.
Елемент <input> є найважливішим елементом форми.
Елемент <input> можна відобразити кількома способами, залежно від атрибута типу.
Нижче наведено різні типи введення:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text">(значення за замовчуванням)<input type="time"><input type="url"><input type="week">
Перегляньте атрибут type, щоб побачити приклади для кожного типу введення!
Поради та нотатки
Порада: Завжди використовуйте тег <label> для визначення міток для <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file"> та <input type="password">.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <input> | Так | Так | Так | Так | Так |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
Визначає фільтр для типів файлів, які користувач може вибрати з діалогового вікна введення файлу (лише для type="file") |
| alt | text | Визначає альтернативний текст для зображень (лише для type="image") |
| autocomplete | on off |
Визначає, чи для елемента <input> має бути ввімкнено автозаповнення |
| autofocus | autofocus | Вказує, що елемент <input> має автоматично отримувати фокус під час завантаження сторінки |
| checked | checked | Вказує, що елемент <input> має бути попередньо вибрано під час завантаження сторінки (для type="checkbox" або type="radio") |
| dirname | inputname.dir | Вказує, що напрямок тексту буде подано |
| disabled | disabled | Вказує, що елемент <input> має бути вимкнено |
| form | form_id | Визначає форму елементу <input>, якій належить |
| formaction | URL | Вказує URL-адресу файлу, який оброблятиме елемент керування введенням під час надсилання форми (для type="submit" та type="image") |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Визначає, як мають бути закодовані дані форми під час надсилання їх на сервер (для type="submit" та type="image") |
| formmethod | get post |
Визначає метод HTTP для надсилання даних на URL-адресу дії (для type="submit" та type="image") |
| formnovalidate | formnovalidate | Визначає, що елементи форми не повинні перевірятися під час надсилання |
| formtarget | _blank _self _parent _top framename |
Визначає, де відображати відповідь, отриману після надсилання форми (для type="submit" та type="image") |
| height | pixels | Визначає висоту елемента <input> (тільки для type="image") |
| list | datalist_id | Посилається на елемент <datalist>, який містить попередньо визначені параметри для елемента <input> |
| max | number date |
Визначає максимальне значення для елемента <input> |
| maxlength | number | Визначає максимальну кількість символів, дозволених у елементі <input> |
| min | number date |
Вказує мінімальне значення для елемента <input> |
| minlength | number | Визначає мінімальну кількість символів, необхідних для елемента <input> |
| multiple | multiple | Вказує, що користувач може ввести більше ніж одне значення в елементі <input> |
| name | text | Вказує назву елемента <input> |
| pattern | regexp | Визначає регулярний вираз, яким перевіряється значення елемента <input> |
| placeholder | text | Визначає коротку підказку, яка описує очікуване значення елемента <input> |
| readonly | readonly | Вказує, що поле введення доступне лише для читання |
| required | required | Вказує, що поле введення має бути заповнене перед надсиланням форми |
| size | number | Визначає ширину в символах елемента <input> |
| src | URL | Вказує URL-адресу зображення, яке буде використовуватися як кнопка надсилання (лише для type="image") |
| step | number any |
Визначає інтервал між допустимими числами в полі введення |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Визначає тип елементу <input> для відображення |
| value | text | Визначає значення елементу <input> |
| width | pixels | Визначає ширину елементу <input> (тільки для type="image") |
Глобальні атрибути
Тег <input> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <input> також підтримує Атрибути подій в HTML.
Пов’язані сторінки
HTML підручник:
HTML DOM довідник:
- Об’єкт Input Button
- Об’єкт Input Checkbox
- Об’єкт Input Color
- Об’єкт Input Date
- Об’єкт Input Datetime
- Об’єкт Input DatetimeLocal
- Об’єкт Input Email
- Об’єкт Input FileUpload
- Об’єкт Input Hidden
- Об’єкт Input Image
- Об’єкт Input Month
- Об’єкт Input Number
- Об’єкт Input Password
- Об’єкт Input Range
- Об’єкт Input Radio
- Об’єкт Input Reset
- Об’єкт Input Search
- Об’єкт Input Submit
- Об’єкт Input Text
- Об’єкт Input
- Об’єкт Input URL
- Об’єкт Input Week
CSS налаштування за замовчуванням
Немає.
