Теги для создания форм. Часть №3. select
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>.
Имеет схожие с <input> атрибуты, а также атрибуты multiple и size.
Обычно select располагается внутри тега <form> или связывается с ним атрибутом form. Но его также можно не встраивать в <form>.
<form action="">
<select name="some_list"></select>
</form><option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах.
Атрибуты:
selected - позволяет пред выбрать элемент.
disabled - работает как всегда. и другие.
<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>Ссылка на CodePen
<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled.
name - задает имя группы.
disabled - исключает возможность выбора элементов из группы.
label - Задает имя группы которое видно пользователю.
<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>Ссылка на CodePen
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)
<form action="">
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>Ссылка на CodePen
P.S. Больше уроков у меня на канале.
P.P.S. Ссылка на git репозиторий.
