Що робить елемент <input>?
Елемент <input> - це основний елемент форми, призначений для введення даних користувачем.
Він створює інтерактивне поле, у якому можна ввести текст, обрати варіант, поставити позначку, завантажити файл і багато іншого.
Фактично, <input> - це універсальний "контейнер" для різних видів користувацького вводу, що визначається через атрибут type.
1. Загальний синтаксис
<input type="text" name="username" placeholder="Введіть ім'я">Тут:
type="text"- визначає тип поля (у цьому разі звичайний текст);name="username"- ім'я поля (потрібне, щоб надіслати дані на сервер);placeholder="Введіть ім'я"- текст-підказка всередині поля.
2. Основні типи
Тип (type) | Призначення | Приклад |
|---|---|---|
text | Однорядкове текстове поле | |
password | Поле для введення пароля (символи приховані) | |
email | Введення email-адреси (перевіряє формат) | |
number | Введення чисел, зі стрілками вгору-вниз | |
tel | Введення номера телефону | |
url | Введення посилання (перевірка формату URL) | |
search | Поле для пошуку (з оформленням під браузер) | |
checkbox | Прапорець (можна обрати декілька) | |
radio | Перемикач (можна обрати лише один) | |
file | Завантаження файлу | |
date | Вибір дати | |
range | Повзунок діапазону | |
color | Палітра вибору кольору | |
hidden | Приховане поле (не видно користувачу) | |
submit | Кнопка "Надіслати форму" | |
reset | Скидання всіх полів форми | |
button | Звичайна кнопка (для JS-обробки) |
3. Ключові атрибути
| Атрибут | Призначення |
|---|---|
name | Ім'я поля (ключ для надсилання даних) |
value | Значення за умовчанням |
placeholder | Підказка всередині поля |
required | Обов'язкове для заповнення |
readonly | Поле лише для читання |
disabled | Поле вимкнене (не можна редагувати) |
maxlength | Максимальна кількість символів |
min / max | Мінімальне та максимальне значення (для чисел, дати тощо) |
step | Крок зміни (наприклад, 0.5) |
checked | Встановлює позначку за умовчанням (для checkbox і radio) |
4. Як працює з формою
Якщо елемент <input> перебуває всередині <form> і має атрибут name, то під час відправлення форми браузер передасть його значення як пару:
name=valueПриклад:
<form action="/send" method="post">
<input type="text" name="user" value="Oleh">
<input type="checkbox" name="subscribe" checked>
<button type="submit">OK</button>
</form>На сервер надішлеться:
user=Oleh&subscribe=on5. Особливості
-
<input>- непарний тег (не має</input>). -
Різні типи
<input>забезпечують різний інтерфейс і валідацію. -
Можна комбінувати з
<label>для зручного вибору:html<label> <input type="checkbox"> Погоджуюся з умовами </label>
Підсумок:
| Властивість | Опис |
|---|---|
| Призначення | Отримання даних від користувача |
| Типи | text, password, email, checkbox, radio, file та ін. |
| Надсилання | Через атрибут name під час сабміту форми |
| Особливість | Непарний, універсальний, налаштовується через type |
| Розташування | Зазвичай всередині <form> |
Простими словами:
<input> - це "точка вводу" для користувача.
Він перетворює статичну сторінку на інтерактивну, дозволяючи сайту отримувати інформацію, а не просто показувати її.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.