Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью тегов < select> < /select>, внутри которых располагаются элементы значений, заданных тегом < option>. Рассмотрим параметры этих тегов:

• < select>:
  
  
  

o name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.

o size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.

o multiple - разрешает выбор нескольких элементов списка.

• < option>:
  
  
  

o selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.

o value - значение, которое будет отправлено серверу, если пункт выбран.

Пример:

< form name=" forma1" >

Какой язык вы хотите изучать:

< select name=" language" size=" 1" >

< option selected value=" html" > html

< option value=" php" > php

< option value=" java" > java

< /select> < br> < br>

Какое время вы готовы на это потратить: < br>

< select name=" time" size=" 3" >

< option selected value=" 1" > 1 месяц

< option value=" 2" > 2 месяца

< option value=" 3" > 3 месяца

< /select> < br> < br>

Какие дни недели для занятий вас устроят: < br>

(выбирайте с нажатой клавишей ctrl)< br>

< select name=" day" size=" 7" multiple>

< option selected value=" mon" > понедельник

< option value=" tue" > вторник

< option value=" wen" > среда

< option selected value=" thu" > четверг

< option value=" fri" > пятница

< option value=" sat" > суббота

< option value=" san" > воскресенье

< /select>

< /form>

Результат:

Начало формы

Какой язык вы хотите изучать: html php java

Какое время вы готовы на это потратить:
1 месяц 2 месяца 3 месяца

Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)
понедельник вторник среда четверг пятница суббота воскресенье

Конец формы

Существуют еще теги < optgroup> < /optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам:

Начало формы

Каталог сайтов:
интернет мобильники hardware вакансии трудоустройство резюме здоровье красота дети

Конец формы

Для этого нам и нужны теги < optgroup> < /optgroup> с одним параметром label, который и задает название группе элементов.

Пример кода:

< form name=" forma1" >

Каталог сайтов: < br>

< select name=" catalog" size=" 9" >

< optgroup label=" Компьютеры" >

< option value=" 1" > интернет< /option>

< option value=" 2" > мобильники< /option>

< option value=" 3" > hardware< /option>

< /optgroup>

< optgroup label=" Работа" >

< option value=" 4" > вакансии< /option>

< option value=" 5" > трудоустройство< /option>

< option value=" 6" > резюме< /option>

< /optgroup>

< optgroup label=" Дом" >

< option value=" 7" > здоровье< /option>

< option value=" 8" > красота< /option>

< option value=" 9" > дети< /option>

< /optgroup>

< /select>

< /form>

Обратите внимание, в данном случае необходимо указывать закрывающие теги < /option>.