htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум
Главная страница > Теги HTML > Тег OPTION
Теги 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
Теги по типам
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблица
Текст
Форматирование
Формы
Фреймы

Тег OPTION

Браузер 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

Описание

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

Синтаксис

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

Параметры

selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Не обязателен.

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

Валидный код<!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>Тег OPTION</title>
</head>
<body>

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

</body>
</html>

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

Параметр SELECTED

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.

Синтаксис

<option selected>...</option>

Аргументы

Нет.

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

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

Пример 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>Тег OPTION, параметр selected</title>
</head>
<body>

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

</body>
</html>

Параметр VALUE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. Также параметр value применяется для получения значений данных через скрипты.

Синтаксис

<option value="значение">...</option>

Аргументы

Любая текстовая строка заключенная в двойные или одинарные кавычки.

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

Нет.

Пример 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>Тег OPTION, параметр value</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>

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

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