Поле со списком
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако, это является и недостатком, ведь пользователю сразу не виден весь выбор.
Поле со списком создается следующим образом.
<option параметры>Выбор 1</option>
<option>Выбор 2</option>
<option>Выбор 3</option>
</select>
Теги <SELECT> и <OPTION> имеет следующие параметры (табл. 1).
| Параметр select |
Описание |
|---|---|
| name | Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать список. |
| size | Количество видимых строк. По умолчанию одна строка. |
| multiple | Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift. |
| Параметр option | Описание |
| selected | Видимое поле по умолчанию. |
| value | Значение определяет, что будет отправлено на сервер при выбранном пункте списка. |
Создание списка с помощью тегов <SELECT> и <OPTION> показано в примере 1.
Пример 1. Поле со списком
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поле со списком</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p><b>Как по вашему мнению расшифровывается аббревиатура
"ОС"?</b></p>
<p><select name="OS">
<option>Офицерский состав</option>
<option>Операционная система</option>
<option>Большой полосатый мух</option>
</select></p>
</form>
</html>
В результате получим следующее (рис. 1).
Рис. 1. Вид раскрытого списка
| Статья опубликована: 12.09.2005 | Последнее обновление: 30.03.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Manson
17.07.2007
michael
17.08.2007
Григорий
27.08.2007
Есть меню из несколький выпадающих списков. Над этим меню есть небольшой див, при наведении на который выпадает еще один див, содержащий столбец со ссылками (событие on-hover).
Так вот при выпадании дива с ссылками "ниспадающие меню" перекрывают его.
z-index не помогает.
Как можно обойти проблему? Нужно, чтобы выпадающий див полностью перекрывал содержимое страницы. Позиция абсолютная.
Влад Мержевич
28.08.2007
1
11.10.2007
Sgraf
18.10.2007
Влад Мержевич
21.10.2007
Santarine Kabutta
27.12.2007
И если реально...то как ?
Влад Мержевич
27.12.2007
Евгений
21.01.2008
короче есть селект поле
<select class="endform" name="country" id="country" onchange="body(1);">
<option value="0">--Не имеет значения--
<option value="1">1
<option value="2">2
</select>
при выборе пишет короче типа что команда не поддерживается обьектом
я понимаю что это больше JS события но вс?же в ч?м проблема
Влад Мержевич
22.01.2008
ПетровичЪ
16.04.2008
ПетровичЪ
16.04.2008
paradisa
02.05.2008