Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Ефективне використання елементів введення та міток форми | Таблиці та форми
Основи HTML

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

Як ми вже бачили раніше, найпотужнішим елементом форми є 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" />

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

index.html

index.html

copy

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

Мітки

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

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

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

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

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

index.html

index.html

copy

Відео-урок

1. Який атрибут тега <label> використовується для зв'язку з певним елементом <input> у формі?

2. Який атрибут відсутній у елементі input, щоб його можна було зв'язати з елементом label?

question mark

Який атрибут тега <label> використовується для зв'язку з певним елементом <input> у формі?

Select the correct answer

question mark

Який атрибут відсутній у елементі input, щоб його можна було зв'язати з елементом label?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 5

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 3.13

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

Свайпніть щоб показати меню

Як ми вже бачили раніше, найпотужнішим елементом форми є 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" />

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

index.html

index.html

copy

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

Мітки

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

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

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

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

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

index.html

index.html

copy

Відео-урок

1. Який атрибут тега <label> використовується для зв'язку з певним елементом <input> у формі?

2. Який атрибут відсутній у елементі input, щоб його можна було зв'язати з елементом label?

question mark

Який атрибут тега <label> використовується для зв'язку з певним елементом <input> у формі?

Select the correct answer

question mark

Який атрибут відсутній у елементі input, щоб його можна було зв'язати з елементом label?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 5
some-alt