Пошук уроків, статей та іншого контенту
Оберіть відповідний тип input для тексту, email, пароля, числа, дати та інших значень.
input<input> — це HTML-елемент для введення даних користувачем. Його вигляд і поведінка залежать від атрибута type.
<input type="text">Якщо атрибут type не вказати, браузер використає тип text.
Тип потрібно обирати відповідно до даних, які вводить користувач. Це допомагає:
показати відповідну клавіатуру на мобільному пристрої;
показати спеціальний інтерфейс, наприклад календар;
зробити форму зрозумілішою та зручнішою.
type="text"Звичайне однорядкове текстове поле.
<label for="username">Ім’я користувача</label>
<input type="text" id="username" name="username">Тип text підходить для:
імені;
назви;
міста;
короткого опису;
інших довільних текстових значень.
Корисні атрибути:
placeholder — підказка всередині поля;
required — поле обов’язкове для заповнення;
maxlength — максимальна кількість символів;
minlength — мінімальна кількість символів.
<label for="city">Місто</label>
<input
type="text"
id="city"
name="city"
placeholder="Наприклад, Львів"
required
maxlength="50"
>placeholder не замінює підпис поля. Для доступності потрібно використовувати <label>.
type="search"Поле для пошукового запиту.
<label for="search">Пошук</label>
<input type="search" id="search" name="search" placeholder="Введіть запит">У деяких браузерах поле пошуку може мати додаткове оформлення або кнопку очищення.
type="url"Поле для введення адреси вебсайту.
<label for="website">Вебсайт</label>
<input
type="url"
id="website"
name="website"
placeholder="https://example.com"
>Браузер може перевірити, чи схоже значення на URL-адресу. Наприклад, значення https://example.com є коректнішим для цього типу, ніж звичайний текст.
type="tel"Поле для номера телефону.
<label for="phone">Телефон</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+380 00 000 00 00"
>Тип tel не гарантує перевірку формату номера. Він передусім повідомляє браузеру, що поле призначене для номера телефону, і може показати зручнішу клавіатуру на мобільному пристрої.
type="password"Поле для пароля. Введені символи зазвичай приховуються.
<label for="password">Пароль</label>
<input
type="password"
id="password"
name="password"
minlength="8"
required
>Значення пароля не потрібно зберігати в атрибуті value у HTML. Користувач має ввести його самостійно.
Для підтвердження пароля зазвичай створюють окреме поле:
<label for="password">Пароль</label>
<input type="password" id="password" name="password" required>
<label for="password-confirmation">Підтвердження пароля</label>
<input
type="password"
id="password-confirmation"
name="password-confirmation"
required
>type="email"Поле для електронної адреси.
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="user@example.com"
required
>Браузер перевіряє, чи має значення базову структуру email-адреси. Атрибут multiple дозволяє вводити кілька адрес через кому:
<label for="emails">Email-адреси</label>
<input type="email" id="emails" name="emails" multiple>Перевірка браузера є базовою. Остаточну перевірку даних має виконувати сервер.
type="number"Поле для числового значення.
<label for="age">Вік</label>
<input
type="number"
id="age"
name="age"
min="1"
max="120"
step="1"
required
>Корисні атрибути:
min — мінімальне значення;
max — максимальне значення;
step — крок зміни значення.
Наприклад, поле для ціни з кроком 0.01:
<label for="price">Ціна</label>
<input
type="number"
id="price"
name="price"
min="0"
step="0.01"
>type="number" підходить для кількості, віку або іншого числа. Для телефонів, поштових індексів чи кодів не варто використовувати цей тип, навіть якщо вони складаються з цифр. Такі значення можуть починатися з нуля або містити спеціальні символи. Для них краще використовувати text або tel.
type="date"Поле для вибору дати. Браузер може показати календар.
<label for="birthday">Дата народження</label>
<input type="date" id="birthday" name="birthday">Значення дати передається у форматі РРРР-ММ-ДД, наприклад 2000-05-18.
Можна обмежити доступний діапазон:
<label for="start-date">Дата початку</label>
<input
type="date"
id="start-date"
name="start-date"
min="2025-01-01"
max="2025-12-31"
>type="time"Поле для вибору часу.
<label for="meeting-time">Час зустрічі</label>
<input type="time" id="meeting-time" name="meeting-time">type="datetime-local"Поле для вибору дати й часу без часового поясу.
<label for="appointment">Дата і час</label>
<input type="datetime-local" id="appointment" name="appointment">type="month" і type="week"Ці типи призначені відповідно для вибору місяця або тижня.
<label for="billing-month">Місяць оплати</label>
<input type="month" id="billing-month" name="billing-month">
<label for="work-week">Робочий тиждень</label>
<input type="week" id="work-week" name="work-week">Підтримка зовнішнього вигляду таких полів може відрізнятися в різних браузерах.
type="checkbox"Прапорець використовується для незалежного вибору. Користувач може увімкнути або вимкнути його.
<label>
<input type="checkbox" name="subscribe">
Підписатися на новини
</label>Для кількох незалежних варіантів використовують однакову або різні назви залежно від даних, які потрібно надіслати:
<fieldset>
<legend>Улюблені технології</legend>
<label>
<input type="checkbox" name="technology" value="html">
HTML
</label>
<label>
<input type="checkbox" name="technology" value="css">
CSS
</label>
<label>
<input type="checkbox" name="technology" value="javascript">
JavaScript
</label>
</fieldset>Атрибут checked встановлює прапорець увімкненим за замовчуванням:
<label>
<input type="checkbox" name="terms" required>
Я погоджуюся з умовами
</label>type="radio"Перемикачі використовують, коли користувач має вибрати лише один варіант із групи.
Усі перемикачі однієї групи повинні мати однакове значення name:
<fieldset>
<legend>Спосіб доставки</legend>
<label>
<input type="radio" name="delivery" value="courier" required>
Кур’єр
</label>
<label>
<input type="radio" name="delivery" value="pickup">
Самовивіз
</label>
</fieldset>Різні значення value дають змогу визначити, який саме варіант обрав користувач.
type="file"Поле для вибору файлу з пристрою.
<label for="avatar">Аватар</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">Атрибут accept обмежує типи файлів, які пропонує вибрати браузер. Наприклад:
<input type="file" name="document" accept=".pdf,.doc,.docx">Атрибут multiple дозволяє вибрати кілька файлів:
<label for="photos">Фотографії</label>
<input type="file" id="photos" name="photos" accept="image/*" multiple>accept є підказкою для браузера, а не повним захистом. Файл потрібно перевіряти також на сервері.
type="submit"Кнопка надсилає форму.
<button type="submit">Зареєструватися</button>Також можна використати input:
<input type="submit" value="Надіслати">Елемент <button> зазвичай зручніший, оскільки його текст можна оформлювати гнучкіше.
type="reset"Очищує або повертає поля форми до початкових значень.
<input type="reset" value="Очистити">Використовуйте reset обережно: користувач може випадково втратити вже введені дані.
type="button"Звичайна кнопка без автоматичної дії.
<input type="button" value="Показати більше">Її поведінку зазвичай додають за допомогою JavaScript. Без JavaScript така кнопка нічого не робить.
type="color"Дозволяє вибрати колір.
<label for="theme-color">Колір теми</label>
<input type="color" id="theme-color" name="theme-color" value="#3366ff">type="range"Повзунок для вибору приблизного числового значення з діапазону.
<label for="volume">Гучність</label>
<input
type="range"
id="volume"
name="volume"
min="0"
max="100"
value="50"
>type="hidden"Приховане поле, значення якого надсилається разом із формою, але не показується користувачу.
<input type="hidden" name="form-version" value="registration-v1">Не використовуйте hidden для секретних даних. Значення такого поля можна побачити та змінити в коді сторінки.
inputid і labelАтрибут id пов’язує поле з його підписом:
<label for="email">Електронна пошта</label>
<input type="email" id="email" name="email">Значення for у <label> має збігатися зі значенням id у <input>. Завдяки цьому користувач може натиснути на підпис, щоб активувати поле.
Інший варіант — розмістити input безпосередньо всередині label:
<label>
Електронна пошта
<input type="email" name="email">
</label>nameАтрибут name визначає назву даних, які надсилаються формою.
<input type="text" name="first-name">Якщо у поля немає name, його значення зазвичай не буде включене в дані форми.
valuevalue задає початкове значення або значення, яке буде надіслане для прапорця чи перемикача.
<input type="text" name="country" value="Україна">
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>requiredРобить поле обов’язковим:
<input type="email" name="email" required>Браузер не дозволить надіслати форму, доки поле не буде заповнене коректно.
disabled і readonlydisabled повністю вимикає поле. Користувач не може його змінити, а його значення не надсилається формою.
<input type="text" value="Недоступно" disabled>readonly забороняє редагувати текстове значення, але поле залишається доступним для фокуса, а його значення може бути надіслане.
<input type="text" name="user-id" value="42" readonly>У наступному прикладі використано кілька типів input:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Реєстрація</title>
</head>
<body>
<h1>Реєстрація</h1>
<form action="/register" method="post">
<div>
<label for="full-name">Повне ім’я</label>
<input
type="text"
id="full-name"
name="full-name"
placeholder="Введіть ім’я"
required
>
</div>
<div>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="user@example.com"
required
>
</div>
<div>
<label for="password">Пароль</label>
<input
type="password"
id="password"
name="password"
minlength="8"
required
>
</div>
<div>
<label for="age">Вік</label>
<input
type="number"
id="age"
name="age"
min="1"
max="120"
>
</div>
<div>
<label for="birthday">Дата народження</label>
<input type="date" id="birthday" name="birthday">
</div>
<fieldset>
<legend>Формат навчання</legend>
<label>
<input type="radio" name="format" value="online" required>
Онлайн
</label>
<label>
<input type="radio" name="format" value="offline">
Офлайн
</label>
</fieldset>
<label>
<input type="checkbox" name="agreement" required>
Я погоджуюся з умовами
</label>
<button type="submit">Зареєструватися</button>
</form>
</body>
</html>Браузер автоматично перевірить обов’язкові поля, формат email, мінімальну довжину пароля та діапазон віку.
inputОрієнтуйтеся на значення, яке вводиться:
короткий довільний текст — text;
email-адреса — email;
пароль — password;
номер телефону — tel;
адреса сайту — url;
число — number;
дата — date;
час — time;
дата й час — datetime-local;
один варіант із кількох — radio;
незалежний вибір — checkbox;
файл — file;
колір — color;
значення на шкалі — range;
пошуковий запит — search.
text для всіх значеньЯкщо для email, дати або числа використовувати text, браузер не зможе надати відповідну перевірку та інтерфейс.
<!-- Не найкращий варіант -->
<input type="text" name="email">
<!-- Кращий варіант -->
<input type="email" name="email">labelПоле без зрозумілого підпису складніше використовувати, особливо за допомогою клавіатури або засобів доступності.
<label for="phone">Телефон</label>
<input type="tel" id="phone" name="phone">nameid потрібен для зв’язку з label, а name — для надсилання даних форми. Часто потрібні обидва атрибути.
<input type="email" id="email" name="email">name у різних незалежних прапорцівПрапорці та перемикачі працюють по-різному:
для radio однаковий name об’єднує варіанти в одну групу;
для незалежних checkbox не потрібно створювати взаємне обмеження вибору.
placeholderПідказка зникає після введення тексту, тому вона не повинна бути єдиним поясненням призначення поля. Використовуйте label, а placeholder — лише як додатковий приклад.
number для телефонів і кодівНомер телефону або поштовий індекс — це не математичне число. У них можуть бути плюси, пробіли, дефіси або нулі на початку. Для таких значень використовуйте tel чи text.
Тип input визначається атрибутом type.
Для кожного значення варто обирати спеціалізований тип.
text призначений для звичайного короткого тексту.
email, url, number і типи дати надають базову перевірку браузера.
password приховує введені символи.
checkbox дозволяє незалежний вибір, а radio — вибір одного варіанта з групи.
file використовується для завантаження файлів.
label, id і name роблять форму зрозумілою та правильною.
Атрибути required, min, max, minlength і maxlength допомагають обмежувати введення.
Перевірка браузера не замінює перевірку даних на сервері.