Элементы select и input

Контейнерный элемент select предназначен для того, чтобы организовать внутри формы вы­бор из нескольких вариантов без применения элементов типа checkbox и radio. Это связано с тем, что если элементов выбора много, то представление их в виде флажков или кнопок-переключателей увеличивает размеры формы, затрудняя выбор. С помощью элемента select варианты выбора бо­лее компактно представляются в окне Web-браузера в виде элементов раскрывающегося меню, задаваемых с помощью элемента input.

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента select можно задавать следующие атрибуты:

· name – имя меню;

· size – количество видимых строк меню (если количество элементов в меню больше, то выводятся полосы прокрутки), по умолчанию значение этого атрибута равно 1;

· multiple (без значения) – возможность выбора в меню нескольких элементов (если этот атрибут не задан, в меню можно выбрать только один элемент);

· disabled (без значения) – если задан, меню переводится в неактивное (отключенное) состояние и не реагирует на щелчок мышью.

В элементе select можно задать стили шрифтов и текста (в Internet Explorer не действует стиль text-align). Для этого элемента можно задать также стили цвета и фона во всех Web-браузерах, однако стиль background-image не действует в Opera.

Элементы меню задаются внутри контейнера <select>…</select> при помощи контейнерного элемента option. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента можно задавать следующие атрибуты:

· selected (без значения) – пункт в меню помечается как выбранный;

· value – значение пункта меню (если этот атрибут задан, на Web-сервер в запросе посылается значение этого атрибута, иначе посылается содержимое контейнера <option>…</option>);

· label – метка пункта меню (этот атрибут воспринимается в разных Web-браузерах по-разному, поэтому пользоваться им не рекомендуется);

· disabled (без значения) – если задан, пункт меню переводится в неактивное (отключенное) состояние и не реагирует на щелчок мышью (не работает в Internet Explorer).

В элементе option можно задать те же стили, что и в элементе select и с теми же ограничениями. Для этого элемента не действует стиль background-image.

Для списка элементов option элемента select в DOM2 HTML определена коллекция HTMLOptionsCollection со свойством length, содержащим количество элементов в коллекции и двумя методами:

· item(индекс) – возвращает элемент коллекции (типа Node) с заданным индексом или null, если элемента с заданным индексом не существует;

· namedItem(значение-id) – возвращает элемент коллекции (типа Node), у которого значение атрибута id равно заданному значению-id или null, если элемента с заданным значением-id не существует;

Для элемента select в интерфейсе HTMLSelectElement DOM2 HTML, помимо общих свойств, определены следующие свойства:

· name – значение атрибута name;

· size – значение атрибута size;

· multiple (true или false) – возможность множественного выбора из меню включена (значение true) или выключена (значение false);

· disabled (false или true) – состояние меню (активное или неактивное);

· length – текущее количество элементов option в меню;

· selectedIndex – индекс выделенного элемента в меню (начиная с индекса 0); если значение равно -1, ни один элемент не выделен; если выделено несколько элементов, свойство содержит индекс первого выделенного элемента;

· value для выделенного элемента, или значение содержимого контейнера <option>…</option> для выделенного элемента (если атрибут value для этого элемента не задан); если выделено несколько элементов, свойство содержит значение первого выделенного элемента;

· type (только для чтения) – тип меню: содержит строку "select-one", если в меню допустим только выбор одного элемента или строку "select-multiple", если в меню допустим множественный выбор;

· options (только для чтения) – содержит объект HTMLOptionsCollection для меню;

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит раскрывающееся меню.

Кроме этого, для элемента select определены следующие методы:

· add(новый-пункт-меню, пункт-меню) – добавляет пункт меню с именем новый-пункт-меню (типа HTMLElement) перед пунктом меню с именем пункт-меню (типа HTMLElement); для добавления пункта в конец меню необходимо указать значение пункта-меню, равное null;

· remove(индекс) – удаляет пункт меню с заданным индексом;

· focus() – переводит фокус клавиатуры на меню (устанавливает курсор в начало поля);

· blur() – убирает фокус клавиатуры с меню (удаляет курсор из поля, если он там был, иначе не производит никакого действия).

Для элемента option в интерфейсе HTMLOptionElement DOM2 HTML, помимо общих свойств, определены следующие свойства:

· value – значение атрибута value;

· label – значение атрибута label;

· index – индекс пункта в списке пунктов меню (индексация начинается с 0) ;

· selected (true или false) – выделение пункта меню (если пункт выделен, значение true, иначе значение false);

· defaultSelected (true или false) – выделение пункта меню по умолчанию (если для данного пункта задан атрибут selected, значение true, иначе значение false);

· text – содержимое контейнера <option>…</option> для пункта меню;

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит пункт меню.

 

Пример 4.5.30. Использование раскрывающего меню:

1. Простое меню в документе HTML:

<form action="http://localhost/greeting.asp" method="get">

<p>Введите Ваш любимый цвет:</p>

<select id="colorMenuChoice1" name="colorMenu1">

<option value="red">Красный</option>

<option value="green">Зеленый</option>

<option value="blue">Синий</option>

<option value="yellow">Желтый</option>

<option value="brown">Коричневый</option>

<option value="black">Черный</option>

<option value="white">Белый</option>

</select>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Вывод этого меню в Web-странице имеет следующий вид:

После нажатия кнопки в правой части меню оно раскрывается и в нем можно выбрать цвет:

При нажатии кнопки Обработка значение атрибута value для выбранного пункта меню будет передано на Web-сервер:

 

 

2. Меню со стилями в документе HTML:

<form action="http://localhost/greeting.asp" method="get">

<p>Введите Ваш любимый цвет:</p>

<select id="colorChoiceMenu2"

name="colorMenu2" style="font-size: 14pt">

<option style="color: red; font-weight: bold">

Красный</option>

<option style="color: green; font-weight: bold">

Зеленый</option>

<option style="color: blue; font-weight: bold">

Синий</option>

<option style="color: yellow; font-weight: bold">

Желтый</option>

<option style="color: brown; font-weight: bold">

Коричневый</option>

<option style="color: black; font-weight: bold">

Черный</option>

<option style="color: white; font-weight: bold;

background-color: black">Белый</option>

</select>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Вывод этого меню в Web-странице (в раскрытом виде) имеет следующий вид:

При нажатии кнопки Обработка выбранный пункт меню будет передан на Web-сервер (поскольку атрибут value для пункта меню не задан будет передано текстовое содержимое пункта меню):

 

3. Меню размером в 4 строки с множественным выбором и выделенным по умолчанию зеленым цветом в документе HTML:

<form id="selectForm"

action="http://localhost/greeting.asp"

method="get">

<p>Введите Ваши любимые цвета:</p>

<select id="colorMenuChoice3" name="colorMenu3"

size="4" multiple>

<option value="red">Красный</option>

<option value="green" selected>Зеленый</option>

<option value="blue">Синий</option>

<option value="yellow">Желтый</option>

<option value="brown">Коричневый</option>

<option value="black">Черный</option>

<option value="white">Белый</option>

</select>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Вывод этого меню в Web-странице имеет следующий вид:

После выбора цветов и выполнения фрагмента сценария

// Получение элемента для

// раскрывающегося меню выбора цвета

selectColorElement =

document.getElementById("colorMenuChoice3");

// Определение количества пунктов в меню

selectOptionsLength = selectColorElement.length;

// Вывод формы и количества пунктов в меню

outputString = "Меню: " + selectColorElement.id +

"\nВ форме: " + selectColorElement.form.id +

"\nТип: " + selectColorElement.type +

"\nКоличество пунктов: " + selectOptionsLength;

// Получение коллекции пунктов меню

selectOptions = selectColorElement.options;

// Определение выделенного

// по умолчанию пункта меню в цикле

for(i = 0; i < selectOptionsLength;i++)

{

// Если пункт выделен по умолчанию

if(selectOptions[i].defaultSelected)

{

// Вывод индекса и значения

// выделенного по умолчанию пункта

outputString += "\nВыделен по умолчанию пункт " +

" с индексом " + i + " и значением '" +

selectOptions[i].text + "'\n";

// Выход из цикла

break;

}

}

// Определение выделенных пунктов меню в цикле

for(i = 0; i < selectOptionsLength;i++)

{

// Если пункт выделен

if(selectOptions[i].selected)

// Вывод индекса и значения

// выделенного пункта меню

outputString += "\nВыделен пункт" +

" с индексом " + i + " и значением '" +

selectOptions[i].text + "'";

}

// Вывод строки

alert(outputString);

меню принимает следующий вид:

При нажатии кнопки Обработка значения атрибута value для выбранных пунктов меню будет передано на Web-сервер:

 

4. Меню с возможностью добавления нового пункта в документе HTML:

<form id="selectAddForm"

action="http://localhost/greeting.asp" method="get">

<p>Введите Ваш любимый цвет:</p>

<select id="colorMenuChoice4" name="colorMenu4">

<option value="red">Красный</option>

<option value="green">Зеленый</option>

<option value="blue">Синий</option>

<option value="yellow">Желтый</option>

<option value="brown">Коричневый</option>

<option value="black">Черный</option>

<option value="white">Белый</option>

</select><br/>

<p>Если Ваше любимого цвета нет в меню,<br/>

добавьте его:</p>

<input type="text" id="userColor" value=""/>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Вывод этого меню и текстового поля (после ввода добавляемого цвета) в Web-странице имеет следующий вид:

После выполнения фрагмента сценария

// Получение нового цвета из текстового поля

userColor = document.getElementById("userColor").value;

// Если цвет не добавлен

if(userColor == "")

// Выход из функции

return;

// Получение элемента для

// раскрывающегося меню выбора цвета

selectColorElement =

document.getElementById("colorMenuChoice4");

// Создание нового пункта меню

userColorElement = document.createElement("option");

// Добавление текстового содержимого

// для нового пункта меню

userColorElement.appendChild(

document.createTextNode(userColor));

// Добавление нового пункта в конец меню

selectColorElement.add(userColorElement, null);

меню принимает следующий вид:

При нажатии кнопки Обработка значение цвета для выбранного пункта меню будет передано на Web-сервер:

 

5. Меню с возможностью удаления пункта в документе HTML:

<form id="selectAddForm"

action="http://localhost/greeting.asp" method="get">

<p>Введите Ваш любимый цвет:</p>

<select id="colorMenuChoice5" name="colorMenu5">

<option value="red">Красный</option>

<option value="green">Зеленый</option>

<option value="blue">Синий</option>

<option value="yellow">Желтый</option>

<option value="brown">Коричневый</option>

<option id="black" value="black">Черный</option>

<option value="white">Белый</option>

</select>

<p>Удалите из меню Ваш самый нелюбимый цвет:</p>

<input type="text" id="deletedColor" value=""/>

&nbsp;&nbsp;&nbsp;

<input type="submit" value="Обработка"/>

</form>

Вывод этого меню и текстового поля (после ввода удаляемого цвета) в Web-странице имеет следующий вид:

После выполнения фрагмента сценария

// Получение удаляемого цвета из текстового поля

deletedColor =

document.getElementById("deletedColor").value;

// Если цвет не добавлен

if(deletedColor == "")

// Выход из функции

return;

// Получение элемента для

// раскрывающегося меню выбора цвета

selectColorElement =

document.getElementById("colorMenuChoice5");

// Получение коллекции пунктов меню

selectOptions = selectColorElement.options;

// Удаление пункта меню в цикле

for(i = 0;i < selectColorElement.length;i++)

{

// Если пункт меню - удаляемый пункт

if(selectOptions[i].text == deletedColor)

{

// Удаление пункта меню

selectColorElement.remove(i);

// Выход из цикла

break;

}

}

меню принимает следующий вид:

 

6. Если в примере 4.5.30(1) заменить элемент select на следующий элемент

<select id="colorMenuChoice6" name="colorMenu6" disabled>

то меню становится неактивным и его вывод в Web-странице примет следующий вид:

 

7. Если в примере 4.5.30(1) заменить элемент select на следующий элемент

<select id="colorMenuChoice7" name="colorMenu7" size="7"

style="background-image: url('images/brownbg02.gif')">

и заменить элемент option для черного цвета на следующий элемент

<option value="black" disabled>Черный</option>

то вывод раскрывающегося меню в Web-странице примет следующий вид: