Select он же раскрывающийся список

Select он же раскрывающийся список


Есть такой тег, называется select он позволяет выбрать какое-то значение из выпадающего списка.
Он является парным тегом.

Пример:

<form action="/order" method="post">
    <label for="colorField">Выберите цвет футболки:</label>
    <select name="color" id="colorField">
        <option value="red">Красная</option>
        <option value="blue">Синяя</option>
        <option value="green">Зелёная</option>
    </select>
</form>

Вот что в браузере:

value указываем в теге option, внутри записываем текст который мы ходим отобразить

Мультиселект

Так-же тег поддерживает поддержку “мультиселект”, это означает что можно выбрать несколько вариантов и отправить их на сервер.
Реализуется легко – стоит добавить атрибут к тегу select

<form action="/order" method="post">
    <label for="productsField">Выберите блюда для заказа:</label>
    <br>
    <select name="color" id="productsField" multiple>
        <option value="burger">Бургер</option>
        <option value="frenchFries">Картофель фри</option>
        <option value="soda">Газировка</option>
        <option value="sauce">Соус</option>
    </select>
</form>

Чтобы выбрать несколько вариантов – зажимаем ctrl и нажимаем мышкой на нужные нам варианты.
Можно ограничить “высоту” тега, если установим значение атрибута “size” например на “2” то получим

Помните атрибут checked ? он выбирает значение по умолчанию, он тут не работает, зато работает selected возле тегов option

Пример:

<form action="/order" method="post">
    <label for="productsField">Выберите блюда для заказа:</label>
    <br>
    <select name="color" id="productsField" multiple>
        <option value="burger" selected>Бургер</option>
        <option value="frenchFries" selected>Картофель фри</option>
        <option value="soda" selected>Газировка</option>
        <option value="sauce">Соус</option>
    </select>
</form>

Вот как выглядит в браузере: