Litra Library

Главное меню

Самоучитель CSS
Свойства CSS
Самоучитель HTML
Тэги HTML
SEO и заработок на сайте
Скрипты
Ucoz

Вход

Статистика

Онлайн всего: 9
Гостей: 9
Пользователей: 0
Главная » Статьи » WEB » Тэги HTML
SELECT
Браузер Internet Explorer Firefox Mozilla Opera Netscape Safari
Версия 5.5 6.0 7.0 1.0 2.0 1.7 7.0 8.0 9.0 6.0 7.0 8.0 1.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="city1">Москва</option>
<option value="city2">Санкт-Петербург</option>
<option value="city3">Новосибирск</option>
<option value="city4">Екатеринбург</option>
<option value="city5">Нижний Новгород</option>
<option value="city6">Самара</option>
<option value="city7">Омск</option>
<option value="city8">Казань</option>
<option value="city9">Челябинск</option>
<option value="city10">Ростов-на-Дону</option>
<option value="city11">Уфа</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="city1">Москва</option>
<option value="city2">Санкт-Петербург</option>
<option value="city3">Новосибирск</option>
<option value="city4">Екатеринбург</option>
<option value="city5">Нижний Новгород</option>
<option value="city6">Самара</option>
<option value="city7">Омск</option>
<option value="city8">Казань</option>
<option value="city9">Челябинск</option>
<option value="city10">Ростов-на-Дону</option>
<option value="city11">Уфа</option>
</select></p>
</form>

</body>
</html>

Параметр MULTIPLE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

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


Синтаксис

<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 selected>Выберите город</option>
<option value="city1">Москва</option>
<option value="city2">Санкт-Петербург</option>
<option value="city3">Новосибирск</option>
<option value="city4">Екатеринбург</option>
<option value="city5">Нижний Новгород</option>
<option value="city6">Самара</option>
<option value="city7">Омск</option>
<option value="city8">Казань</option>
<option value="city9">Челябинск</option>
<option value="city10">Ростов-на-Дону</option>
<option value="city11">Уфа</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 selected>Выберите город</option>
<option value="city1">Москва</option>
<option value="city2">Санкт-Петербург</option>
<option value="city3">Новосибирск</option>
<option value="city4">Екатеринбург</option>
<option value="city5">Нижний Новгород</option>
<option value="city6">Самара</option>
<option value="city7">Омск</option>
<option value="city8">Казань</option>
<option value="city9">Челябинск</option>
<option value="city10">Ростов-на-Дону</option>
<option value="city11">Уфа</option>
</select></p>
</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 value="city1">Москва</option>
<option value="city2">Санкт-Петербург</option>
<option value="city3">Новосибирск</option>
<option value="city4">Екатеринбург</option>
<option value="city5">Нижний Новгород</option>
<option value="city6">Самара</option>
<option value="city7">Омск</option>
<option value="city8">Казань</option>
<option value="city9">Челябинск</option>
<option value="city10">Ростов-на-Дону</option>
<option value="city11">Уфа</option>
</select></p>
</form>

</body>
</html>
Категория: Тэги HTML | Добавил: expert1 (02.02.2013)
Просмотров: 303 | Теги: тэги html, html | Рейтинг: 0.0/0
Всего комментариев: 0

Проекты

RSS Правила Бесплатный хостинг uCoz Litra Library
^ Наверх ^