«Основи HTML»
Кучай А.В., Білан С.О.

3.2. Поля множинного вибору і меню

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

Перемикачі

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

Щоб створити перемикач, використовується елемент <input> зі значенням radio атрибута type. Кожен перемикач повинен мати однакове значення атрибуту name, щоб усі вони в групі були пов'язані один з одним.

З текстовими полями їх значення визначається тим, що користувач в них набирає; з перемикачами користувач робить вибір з деякої множини значень. Таким чином, ми повинні визначити вхідні значення. Використовуючи атрибут value ми можемо встановити конкретне значення для кожного елемента <input>.

Крім того, для попереднього вибору деякого значення ми можемо використовувати логічний атрибут checked.

Приклад: Перемикачі

<form action="radio.php" method="post">
  <input type="radio" name="day" value="Friday" checked> П'ятниця
  <input type="radio" name="day" value="Saturday"> Субота
  <input type="radio" name="day" value="Sunday"> Неділя
</form>
Переглянути

 

Прапорці

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

Приклад: Прапорці

<form action="checkbox.php" method="post">
  <input type="checkbox" name="day" value="Friday" checked> П'ятниця
  <input type="checkbox" name="day" value="Saturday"> Субота
  <input type="checkbox" name="day" value="Sunday"> Неділя
</form>
Переглянути

 

Списки, які випадають

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

Для створення списку застосовують елементи <select> і <option>. Елемент <select> огортає всі пункти меню, а кожен пункт меню розмічений за допомогою елемента <option>. Атрибут name розташовується в елементі <select>, а атрибут value розташовується в елементах <option>, вкладених в елемент <select>. Таким чином, атрибут value у кожному елементі <option> пов'язаний з атрибутом name елемента <select>.

Кожен елемент <option> огортає текст, який видно користувачам, окремого пункту в списку.

Подібно логічному атрибуту checked у перемикачів і прапорців, для випадаючого меню можна використовувати логічний атрибут selected, щоб попередньо виділити пункт для користувачів.

Приклад: списки, які випадають

<form action="menu.php" method="post">
  <select name=“day”>
    <option value="Friday" selected>П'ятниця</option>
    <option value="Saturday">Субота</option>
    <option value="Sunday">Неділя</option>
  </select>
</form>
Переглянути

 

Множинний вибір

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

Розміром елемента <select> можна керувати за допомогою CSS і він повинен бути скорегований відповідним чином для множинного вибору. Можливо, є сенс інформувати користувачів, що для вибору декількох варіантів вони повинні утримувати клавішу Shift під час клацання мишкою, щоб зробити вибір.

Приклад: Множинний вибір

<form action="menu.php" method="post">
  <select name=“day” multiple>
    <option value="Friday" selected>П'ятниця</option>
    <option value="Saturday" selected>Субота</option>
    <option value="Sunday">Неділя</option>
  </select>
</form>
Переглянути

 

Питання для самоконтролю:

  1. Як створити пермикач?
  2. Як створити список з вибором декількох варіантів?
  3. За допомогою яких тегів організовують меню зі списком, який випадає?
  4. Який атрибут допомагає помітити наперед заданий варіант для перимикачів та прапорців? Для меню?
  5. За допомогою якого атрибуту організовують множинний вибір у меню?