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