Тег select
Тег select стварае выпадаўні спіс
для выкарыстання ў HTML формах.
Асобны пункт спiса павінен захоўвацца ў
тэгу option.
Атрыбуты
| Атрыбут | Апісанне |
|---|---|
multiple |
Наяўнасць дадзенага атрыбута стварае мультыселект -
выпадаўні спіс, у якім можна выбраць некалькі пунктаў, заціснуўшы
клавішу Ctrl або вылучыўшы іх мышэй.
Неабавязковы атрыбут. |
name |
Імя выпадаўнога спiса. Патрэбна для таго, каб дастаць дадзеныя поля ўводу ў PHP. Для карэктнай працы формы імёны палёў уводу не павінны супадаць адзін з адным (у адной форме). Калі яны супадаюць - у PHP прыйдуць дадзеныя таго поля ўводу, якое ніжэй у HTML кодзе. |
Прыклад
Давайце паглядзім, як працуе выпадаўні спіс:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Прыклад
Давайце шырыню выпадаўнога спiса зробім
роўнай шырыні самага вялікага элемента (калі
яна не будзе відавочна зададзена з дапамогай 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>
:
