
Делаем раскрывающийся список в HTML
Привет! В этом уроке поговорим про довольно часто используемый на формах элемент - селект. Раскрывающий список, по сути, выполняет ту же функцию, какую делает переключатель. А именно, он дает возможность указать на один из вариантов ответа среди всех присутствующих.
Создание такого списка осуществляется с помощью тега <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>
Комментарии (25)