DevGang
Авторизоваться

Теги для создания форм. Часть №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 репозиторий.

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В подарок 100$ на счет при регистрации

Получить