Таг select
Таг select създава падащо меню
за използване в HTML форми.
Отделен елемент от списъка трябва да се съхранява в
таг option.
Атрибути
| Атрибут | Описание |
|---|---|
multiple |
Наличието на този атрибут създава мултиселект -
падащо меню, в което може да се изберат няколко елемента, като се задържи
клавиш Ctrl или се маркират с мишката.
Незадължителен атрибут. |
name |
Име на падащото меню. Необходимо е, за да се извлекат данните от полето за въвеждане в PHP. За коректна работа на формата имената на полетата за въвеждане не трябва да съвпадат едно с друго (в една форма). Ако съвпадат - в PHP ще пристигнат данни от това поле за въвеждане, което е по-надолу в HTML кода. |
Пример
Нека да видим как работи падащото меню:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример
Нека ширината на падащото меню да стане
равна на ширината на най-големия елемент (ако
тя не е изрично зададена чрез CSS свойството
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример . Избор по подразбиране
А сега нека опитаме да изберем град
по подразбиране. Нека го направим с помощта на атрибута
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример . Мултиселект
Нека сега превърнем обикновения селект в
мултиселект с помощта на атрибута multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Обърнете внимание на това, че името на селекта, зададено в атрибута name,
трябва да е с квадратни скоби в края. Това е необходимо, за да пристигнат в PHP
всички избрани стойности (в противен случай ще пристигне само една - последната).
Пример . Няколко стойности по подразбиране в мултиселект
А сега, в мултиселекта по подразбиране, нека опитаме да изберем повече от една стойност:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
: