Елементи HTML-форм

1. Множинний вибір та списки

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

У HTML форми надають кілька способів для створення елементів з можливістю вибору зі списку. Найбільш розповсюдженими елементами для цих цілей є <select> і <option>, а також чекбокси та радіо-кнопки.

Розкривний список: <select> і <option>

Тег <select> створює розкривний список, а <option> використовується для додавання варіантів всередині цього списку. Користувач може вибрати один або декілька варіантів зі списку.

Одиночний вибір: За замовчуванням <select> дозволяє вибрати лише один варіант.

<label for="country">Оберіть країну:</label>
<select id="country" name="country">
  <option value="ru">Росія</option>
  <option value="us">США</option>
  <option value="de">Німеччина</option>
</select>

<label for="country">Оберіть країну:</label>
<select id="country" name="country">
<option value="ru">Росія</option>
<option value="us">США</option>
<option value="de">Німеччина</option>
</select>

Множинний вибір: Якщо додати атрибут multiple, користувач зможе вибрати одразу декілька варіантів, утримуючи клавішу Ctrl (на Windows) або Cmd (на Mac) при кліку.

<label for="languages">Оберіть мови:</label>
<select id="languages" name="languages" multiple>
  <option value="ru">Російська</option>
  <option value="en">Англійська</option>
  <option value="de">Німецька</option>
</select>

<label for="languages">Оберіть мови:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Російська</option>
<option value="en">Англійська</option>
<option value="de">Німецька</option>
</select>

У цьому випадку дані з кількох обраних елементів надсилаються на сервер у вигляді масиву значень.

Чекбокси: <input type="checkbox">

Чекбокси — це елементи, які дозволяють користувачу вибрати один або декілька варіантів із запропонованого списку. Кожен чекбокс створюється за допомогою тега <input type="checkbox">.

<label><input type="checkbox" name="interests" value="sports"> Спорт</label>
<label><input type="checkbox" name="interests" value="music"> Музика</label>
<label><input type="checkbox" name="interests" value="travel"> Подорожі</label>

<label><input type="checkbox" name="interests" value="sports"> Спорт</label>
<label><input type="checkbox" name="interests" value="music"> Музика</label>
<label><input type="checkbox" name="interests" value="travel"> Подорожі</label>

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

Радіо-кнопки: <input type="radio">

Радіо-кнопки дозволяють користувачу вибрати лише один варіант із групи. Радіо-кнопки з однаковим значенням атрибута name об'єднуються в групу, і користувач може вибрати лише один варіант у цій групі.

<p>Оберіть стать:</p>
<label><input type="radio" name="gender" value="male"> Чоловіча</label>
<label><input type="radio" name="gender" value="female"> Жіноча</label>

<p>Оберіть стать:</p>
<label><input type="radio" name="gender" value="male"> Чоловіча</label>
<label><input type="radio" name="gender" value="female"> Жіноча</label>

Радіо-кнопки зручні для вибору одного з кількох фіксованих варіантів, таких як «Так» або «Ні», стать, вікова група тощо.

2. Елементи форм різних типів

У HTML існує безліч типів <input>, які надають різні можливості для введення даних. На додаток до тих, які ми вже розглянули, є кілька корисних типів, які можуть покращити взаємодію з формами та дозволити збирати більш точні дані.

Телефон type="tel"

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

<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+38 (123) 456-7890">

<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+38 (123) 456-7890">

Пошук type="search"

Поле для введення тексту, оптимізоване для пошуку. Воно може включати кнопку для очищення тексту (залежно від браузера), і часто стилізується інакше, ніж звичайне текстове поле.

<label for="search">Пошук:</label>
<input type="search" id="search" name="search" placeholder="Введіть запит">

<label for="search">Пошук:</label>
<input type="search" id="search" name="search" placeholder="Введіть запит">

URL type="url"

Поле для введення веб-адреси. При спробі надіслати форму HTML перевірить, що введено правильний формат URL.

<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website">

<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website">

Дата type="date"

Поле для вибору дати. У більшості сучасних браузерів автоматично з'являється календар.

<label for="birthday">Дата народження:</label>
<input type="date" id="birthday" name="birthday">

<label for="birthday">Дата народження:</label>
<input type="date" id="birthday" name="birthday">

Колір type="color"

Поле для вибору кольору. Відкриває палітру кольорів.

<label for="color">Обрати колір:</label>
<input type="color" id="color" name="color">

<label for="color">Обрати колір:</label>
<input type="color" id="color" name="color">

Діапазон type="range"

Повзунок, який дозволяє вибрати числове значення у заданому діапазоні. Атрибути min, max та step задають мінімальне і максимальне значення, а також крок зміни.

<label for="volume">Гучність:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

<label for="volume">Гучність:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

Файл type="file"

Поле для завантаження файлів. Цей тип дозволяє користувачу вибрати файл на своєму пристрої і прикріпити його до форми для відправки на сервер. Можна задати атрибутaccept, щоб обмежити допустимі типи файлів (наприклад, лише зображення або документи).

    
<label for="file">Завантажте файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
    
  

    
<label for="file">Завантажте файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
    
  

Приховане поле type="hidden"

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

<input type="hidden" name="user_id" value="12345">

Кнопка type="button"

Звичайна кнопка, яка може використовуватися для запуску JavaScript-функцій чи інших дій. Цей тип не надсилає форму, на відміну від кнопок типу submit.

        
          <button type="button" onclick="alert('Ви натисли на кнопку')">Натисни мене</button>
        
      

        
          <button type="button" onclick="alert('Ви натисли на кнопку')">Натисни мене</button>
        
      

3. Приклад

У наступному прикладі ми створимо форму, яка включає різноманітні типи <input> для різних сценаріїв введення:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Додаткові типи введення</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone" placeholder="+38 (123) 456-7890" required>

    <label for="search">Пошук:</label>
    <input type="search" id="search" name="search" placeholder="Введіть запит">

    <label for="appt">Оберіть час:</label>
    <input type="time" id="appt" name="appt">

    <label for="meeting">Дата і час зустрічі:</label>
    <input type="datetime-local" id="meeting" name="meeting">

    <label for="month">Місяць і рік:</label>
    <input type="month" id="month" name="month">

    <label for="week">Тиждень:</label>
    <input type="week" id="week" name="week">

    <label for="volume">Гучність:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" step="10">

    <label for="file">Завантажте файл:</label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">

    <input type="hidden" name="user_id" value="12345">

    <button type="submit">Відправити</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Додаткові типи введення</title>
</head>
<body>
<form action="/submit" method="post">
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+38 (123) 456-7890" required>

<label for="search">Пошук:</label>
<input type="search" id="search" name="search" placeholder="Введіть запит">

<label for="appt">Оберіть час:</label>
<input type="time" id="appt" name="appt">

<label for="meeting">Дата і час зустрічі:</label>
<input type="datetime-local" id="meeting" name="meeting">

<label for="month">Місяць і рік:</label>
<input type="month" id="month" name="month">

<label for="week">Тиждень:</label>
<input type="week" id="week" name="week">

<label for="volume">Гучність:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">

<label for="file">Завантажте файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">

<input type="hidden" name="user_id" value="12345">

<button type="submit">Відправити</button>
</form>
</body>
</html>

Висновок

Додаткові типи <input> в HTML дозволяють створювати форми відповідно до конкретних потреб користувачів і типів даних. Завдяки цим типам форм можна суттєво покращити взаємодію з користувачами та спростити введення даних.