Як ми вже бачили раніше, найпотужнішим елементом форми є input. Цей елемент очікує дані від користувача. Зосередьмося на ньому.

Типи полів введення

Текстове поле введення

Призначене для введення коротких текстових даних, таких як імена користувачів, електронні адреси або короткі повідомлення.

<input type="text" />

Поле введення пароля

Використовується для введення пароля, при цьому символи приховані з міркувань безпеки. Забезпечує конфіденційність шляхом приховування введених символів.

<input type="password" />

Поле введення електронної пошти

Використовується для збору електронних адрес користувачів. Виконує валідацію на стороні клієнта, щоб переконатися, що введене значення відповідає формату електронної пошти.

<input type="email" />

Поле для введення телефону

Використовується для збору телефонних номерів від користувачів. Дозволяє вводити номери телефонів у різних форматах, включаючи міжнародні номери.

<input type="tel" />

Поле для введення чисел

Використовується для збору числових даних від користувачів. Забезпечує відображення цифрової клавіатури на мобільних пристроях для зручного введення.

<input type="number" />

Прапорець (Checkbox)

Дозволяє користувачам обирати одну або декілька опцій зі списку. Підходить для випадків, коли дозволено кілька виборів, наприклад, вибір кількох елементів зі списку або підтвердження згоди з умовами.

<input type="checkbox" />

Перемикач (Radio Button)

Дозволяє користувачам обрати один варіант із списку взаємовиключних опцій. Підходить для ситуацій, коли потрібно вибрати лише одну опцію, наприклад, визначення статі або вибір способу оплати.

<input type="radio" />

Поле для вибору файлу (File Input)

Дозволяє користувачам завантажувати файли зі свого пристрою, обирати їх із локальної файлової системи та надсилати разом із даними форми. Особливо корисно для прикріплення документів або зображень.

<input type="file" />

Поле для введення дати, часу та дати з часом (Date Input, Time Input, DateTime Input)

Дозволяє користувачам вводити дати, час або обидва значення. Забезпечує зручний інтерфейс для вибору дати та часу. Корисно для введення дати народження, часу зустрічі або розкладу подій.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Приклад: Введіть щось у поля, і вони запропонують різні варіанти. Не хвилюйтеся; жодні дані не будуть зібрані.

Можливо, ви помітили, що заповнювати форму не дуже зручно, якщо не зрозуміло, що потрібно вказати в кожному полі. Саме тому на допомогу приходять підписи (labels).

Мітки

Мітки (<label>) є важливими для зв'язування текстових підписів із елементами введення форми, що підвищує доступність і зручність використання. Важливо, щоб атрибут for тега <label> збігався зі значенням атрибута id відповідного елемента input.
Приклад:

<label for="username">Username:</label>
<input type="text" id="username" />

У наведеному прикладі:

• При натисканні на мітку Username: автоматично встановлюється фокус на відповідне поле введення;
• label і input пов'язані між собою за допомогою атрибутів for та id відповідно;
• Обидва атрибути for та id мають однакове значення (username).

Полегшення заповнення форми шляхом додавання міток до полів введення з попереднього прикладу.
Приклад:

Відео-урок