www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Формы > Поле со списком

Поле со списком

контентовая версия  

Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако, это является и недостатком, ведь пользователю сразу не виден весь выбор.

Поле со списком создается следующим образом.

<select параметры>
  <option параметры>Выбор 1</option>
  <option>Выбор 2</option>
  <option>Выбор 3</option>
</select>

Теги <SELECT> и <OPTION> имеет следующие параметры (табл. 1).

Табл. 1. Параметры поля со списком
Параметр
select
Описание
name Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать список.
size Количество видимых строк. По умолчанию одна строка.
multiple Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.
Параметр option Описание
selected Видимое поле по умолчанию.
value Значение определяет, что будет отправлено на сервер при выбранном пункте списка.

Создание списка с помощью тегов <SELECT> и <OPTION> показано в примере 1.

Пример 1. Поле со списком

Валидный HTML
<!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>Поле со списком</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>

</body>
</html>

В результате получим следующее (рис. 1).

Рис. 1

Рис. 1. Вид раскрытого списка

Статья опубликована: 12.09.2009 Последнее обновление: 30.03.2009
Поиск по сайту
Формы
Разделы
Теги по теме

FORM
Тег FORM устанавливает форму на web-странице. Форма предназначена для обмена данными между пользователем и сервером.

OPTGROUP
Тег OPTGROUP представляет собой контейнер, внутри которого располагаются теги OPTION объединенные в одну группу.

OPTION
Тег OPTION определяет отдельные пункты списка, создаваемого с помощью контейнера SELECT. Ширина списка определяется самым широким контентом, указанным в теге OPTION.

SELECT
Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект