Використання Елементів Введення Форми

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

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

Текстове поле

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

<input type="text" />

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

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

<input type="password" />

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

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

<input type="email" />

Поле для введення номера телефону

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

<input type="tel" />

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

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

<input type="number" />

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

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

<input type="checkbox" />

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

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

<input type="radio" />

Поле для вибору файлів

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

<input type="file" />

Поле для введення дати, часу та дати з часом

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

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

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

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