Повний гід по атрибуту type тегу <input>: від тексту до вибору дати
Привіт:) У цьому гайді детально розберу кожен тип <input>, спираючись на сучасні стандарти HTML5, щоб ваші форми були не тільки красивими, але й функціональними.
Елемент <input> — це справжній "швейцарський ніж" у веб-розробці. За допомогою лише одного атрибуту type ви можете перетворити звичайний рядок для тексту на складний віджет вибору дати, повзунок або палітру кольорів.
Чому важливо використовувати правильний type?
- Мобільний UX. Смартфон автоматично відкриває потрібну клавіатуру (цифрову для
tel, з символом@дляemail). - Валідація без коду. Браузер сам перевірить, чи ввів користувач пошту або URL, не вимагаючи зайвого JavaScript.
- Доступність (Accessibility). Скрінрідери краще розуміють призначення поля, допомагаючи людям з порушеннями зору.
Текстові та інформаційні типи
Це базові елементи, з якими користувач стикається щодня при реєстрації або пошуку.
text. Стандартне поле для короткого однорядкового тексту.password. Маскує символи (крапками). Використовуйте для паролів та конфіденційних даних.email. Очікує формат адреси. На мобільному додає кнопку@до клавіатури.number. Поле для цифр. Має стрілочки "більше/менше" та підтримує атрибутиmin,max.tel. Для номерів телефонів. Активує цифрову панель на смартфонах.url. Для введення веб-адрес. Перевіряє наявність протоколу (http/https).search. Поле для пошуку. Візуально може мати кнопку очищення (хрестик).
Вибір, файли та інтерактив
Ці типи замінюють ручне введення на вибір із запропонованих варіантів, що значно прискорює взаємодію.
radio. Перемикач. Дозволяє вибрати лише один варіант із групи (групуються за допомогою іменіname).checkbox. Прапорець. Дозволяє вибрати декілька значень одночасно.range. Повзунок (слайдер). Ідеально для вибору гучності, ціни або яскравості.color. Викликає системне вікно вибору кольору. Повертає значення у форматі HEX (наприклад,#ff0000).file. Дозволяє завантажувати файли з комп'ютера або телефона.
Дата та час
Раніше для календарів потрібні були важкі плагіни. Тепер HTML5 має вбудовані рішення, які виглядають нативно на кожній ОС.
date. Повний календар для вибору дня, місяця та року.time. Поле для вибору годин та хвилин.datetime-local. Дозволяє вибрати дату і час одночасно.month. Для вибору конкретного місяця (наприклад, термін дії картки).week. Вибір конкретного тижня року.
Кнопки та службові типи
Ці типи керують логікою всієї форми або передають технічну інформацію.
submit. Кнопка, що відправляє дані форми на сервер.reset. Очищує всі поля форми до початкових значень.button. Проста кнопка без стандартної дії. Використовується для зв'язки з JavaScript.image. Кнопка-картинка. Працює якsubmit, але замість тексту відображає графіку (атрибутsrc).hidden. Приховане поле. Користувач його не бачить, але воно передає важливі дані (ID користувача, токени) при відправці.
Технічне порівняння: таблиця можливостей
| Атрибут Type | Валідація браузером | Клавіатура на мобільному |
|---|---|---|
email | Так (наявність @) | Текстова з символом @ |
tel | Ні | Цифрова (Numpad) |
number | Так (лише цифри) | Цифрова з символами |
date | Так (формат дати) | Календарний віджет |
url | Так (формат посилання) | Текстова з доменними зонами |
Бонус: Чим замінити Input у 2026 році?
Хоча <input> дуже потужний, але іноді краще використовувати спеціалізовані теги:
<textarea>. Якщо вам потрібне багаторядкове поле (наприклад, для коментарів).<select>. Якщо варіантів вибору занадто багато дляradio.<button type="submit">. Сучасний стандарт для кнопок, оскільки всередину можна вставити іконку або інший HTML-код.
Висновок
Розуміння всіх типів input — це фундамент професійної верстки. Використовуючи специфічні типи замість універсального text, ви робите свій сайт швидшим, зручнішим для користувачів та кращим для пошукових систем.
