htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум
Главная страница > Теги HTML > Тег SELECT
Теги HTML
Все теги
A
ABBR
ACRONYM
ADDRESS
AREA
B
BASE
BASEFONT
BDO
BGSOUND
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIV
DL
DT
EM
EMBED
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1...H6
HEAD
HR
HTML
I
IFRAME
IMG
INPUT
INS
KBD
LABEL
LEGEND
LI
LINK
MAP
MARQUEE
META
NOBR
NOEMBED
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
UL
VAR
Теги по типам
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблица
Текст
Форматирование
Формы
Фреймы

Тег SELECT

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Список множественного выбора Раскрывающийся список

Синтаксис

<select>
 <option>Пункт 1</option>
 <option>Пункт 2</option>
</select>

Параметры

disabled
Блокирует доступ и изменение элемента.
multiple
Этот параметр позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
size
Количество отображаемых строк списка.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SELECT>

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
</head>
<body>

<form action="handler.php">
<p><select size="3" multiple name="hero">
<option selected>Выберите героя</option>
<option value="t1">Чебурашка</option>
<option value="t2">Крокодил Гена</option>
<option value="t3">Шапокляк</option>
<option value="t4">Крыса Лариса</option>
</select></p>
</form>

</body>
</html>

Описание параметров тега <SELECT>

Параметр DISABLED

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Блокирует доступ и изменение элементов списка.

Синтаксис

<select disabled>...</select>

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 2. Блокировка списка

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT, параметр disabled</title>
</head>
<body>

<form action="handler.php">
<p><select disabled name="hero">
<option selected>Выберите героя</option>
<option value="t1">Чебурашка</option>
<option value="t2">Крокодил Гена</option>
<option value="t3">Шапокляк</option>
<option value="t4">Крыса Лариса</option>
</select></p>
</form>

</body>
</html>

Параметр MULTIPLE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше, чем число пунктов, то появляется вертикальная полоса прокрутки. Когда size="1" список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка неудобно.

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

Параметр size отсутствует Параметр size равен 1

Синтаксис

<select multiple>...</select>

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 3. Создание списка множественного выбора

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT, параметр multiple</title>
</head>
<body>

<form action="handler.php">
<p><select multiple size="1">
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select></p>
</form>

</body>
</html>

Параметр NAME

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты.

Синтаксис

<select name="имя">...</select>

Аргументы

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <SELECT> по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию

Нет.

Пример 4. Обращение к списку по его имени

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT, параметр name</title>
<script type="text/javascript">
function dataSelect(f) {
n = f.hero.selectedIndex
if(n) alert("Выбран герой: " + f.hero.options[n].value)
}
</script>
</head>
<body>

<form action="handler.php">
<p><select name="hero">
<option>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select>
<input type="button" value="OK" onClick="dataSelect(this.form)"></p>
</form>

</body>
</html>

Параметр SIZE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

<select size="число">...</select>

Аргументы

Любое положительное целое число.

Значение по умолчанию

Зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то по умолчанию значение параметра size равно 1.

Пример 5. Высота списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT, параметр multiple</title>
</head>
<body>

<form action="handler.php">
<p><select size="1">
<option selected>Выберите героя</option>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select></p>
</form>

</body>
</html>

Copyright 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект