Привет! В этом уроке поговорим про довольно часто используемый на формах элемент - селект. Раскрывающий список, по сути, выполняет ту же функцию, какую делает переключатель. А именно, он дает возможность указать на один из вариантов ответа среди всех присутствующих.

Создание такого списка осуществляется с помощью тега <select>. Он является парным и у него есть атрибуты, которые вам уже должны быть хорошо известны. Это name и id.

Чтобы добавить варианты ответов, следует использовать парный тег <option>, разместив его в теге <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>. А вот внутри самого тега следует разместить подпись варианта ответа.

Следует понимать один важный нюанс. Что если атрибут value будет отсутствовать, то при выборе варианта сервер получит текст подписи. Например, в нашем случае, если его убрать, то будет передано значение "Красная". Если же атрибут будет присутствовать, то сервер получит его значение, например: "red".

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

Иногда, при создании раскрывающихся списков, возникает необходимость позволить пользователю осуществить выбор не одного, а сразу нескольких вариантов. Раскрывающийся список, где такой выбор возможен, принято называть мультиселект.

Сделать это можно, используя атрибут multiple, который добавляется к тегу <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 тега <select>:

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

Результат:

Как видим, теперь высота списка ограничена двумя элементами, а также появилась полоса прокрутки.

Если же необходимо, чтобы какие-либо значения отмечались по умолчанию, как выбранные, то в таком случае следует прописать атрибут 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>

Результат в браузере: