Елемент <select>

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

Елементу <select> треба задати атрибут name, в якому зберігатиметься імʼя цього поля.

За замовчанням елемент <select> має всього один варіант вибору, тому є чудовою альтернативою радіокнопкам, якщо є багато варіантів вибору.

Варіанти вибору задають в елементах <option> з атрибутом value.

<select id="colors" name="colors">
  <option value="red">Червоний</option>
  <option value="green">Зелений</option>
  <option value="blue">Синій</option>
  <option value="yellow">Жовтий</option>
</select>

За замовчуванням вибраний перший елемент <option> зі списку. Це можна змінити, задавши необхідній опції атрибут-прапорець selected.

 <option value="green" selected>Зелений</option>

Можна вибирати більше одного варіанту, якщо дозволити атрибут multiple.

<select id="fruits" name="fruits" multiple>
  <option value="apple">Яблуко</option>
  <option value="orange">Апельсин</option>
  <option value="banana">Банан</option>
</select>

У цьому прикладі користувач може вибрати кілька варіантів, утримуючи клавішу Shift або Ctrl (або Command на Mac) під час вибору.

Групування опцій

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

<form>
  
<label for="month">Виберіть місяць:</label> 
<select id="month" name="month">
  
  <optgroup label="Зима">
    <option value="december">Грудень</option>
    <option value="january">Січень</option>
    <option value="february">Лютий</option>
  </optgroup>
   
  <optgroup label="Весна">
    <option value="march">Березень</option>
    <option value="april">Квітень</option>
    <option value="may">Травень</option>
  </optgroup>   

  <optgroup label="Літо">
    <option value="jun">Червень</option>
    <option value="july">Липень</option>
    <option value="august">Серпень</option>
  </optgroup>   
 
  <optgroup label="Осінь">
    <option value="september">Вересень</option>
    <option value="october">Жовтень</option>
    <option value="november">Листопад</option>
  </optgroup>     
    
</select>
</form>