Тег <OPTION> определяет отдельные пункты списка, создаваемого с помощью контейнера <SELECT>. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Синтаксис
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Параметры
- selected
- Заранее устанавливает определенный пункт списка выделенным.
- value
- Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.
Закрывающий тег
Не обязателен.
Пример 1. Использование тега <OPTION>
<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. Выделение пункта списка
<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. Обращение к элементу списка
<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>