Создание на форме выпадающего списка (меню выбора)
Если необходимо, чтобы посетитель сайта мог выбирать один или несколько элементов из выпадающего списка элементов, поместите на форму список элементов между начальным и конечным дескрипторами <select></select>
ПРАКТИКУМ
Например, для организации меню выбора (или выпадающего списка), показанного в нижней части рис. 3.10, вставьте в HTML-код Web-страницы начальный и конечный дескрипторы выбора (<select></select>) и начальный и конечный дескрипторы опций (<option></option>), как показано в конце следующего кода:
<form name="ExampleForm"><p>Имя: <input type="text" name="FirstName" id="FN" size="15"/>Фамилия: <input type="text" name="LastName" id="LN" size="20"/></p><p>Адрес E-mail:*<input type="text" name="Email" id="EM" size="30"/></p><p>Сообщение: <textarea name="TextMessage" rows="5" cols="60"></textarea></p><p>Области интересов:<br/>Операционные системы:<input type="checkbox" name="Win98" value="ON"/>Windows 98<input type="checkbox" name="WinXp" value="ON"/>Windows XP<input type="checkbox" name="WinNT" value="ON"/>Windows NT<br />Оборудование:<input type="checkbox" name="DT" value="ON"/>Настольные компьютеры<input type="checkbox" name="LT" value="ON"/>Портативные компьютеры<input type="checkbox" name="PDA" value="ON"/>PDA<input type="checkbox" name="Prtr" value="ON"/>Принтеры<input type="checkbox" name="Mon" value="ON"/>Мониторы</р><p>Можем ли мы передавать ваш адрес электронной почты другим посетителям?<input type="radio" value="Yes" name="ShareEmail"/>Да<input type="radio" value="No" checked="checked" name="ShareEmail" />Нет</р><p>Выберите максимальный уровень ответственности:<br/><select size="l" name="PurchaseInvolvement"><option value="MPD">Выбор решения о покупке</option><option value="SV">Выбор производителя</option><option value="SP"> Выбор продукта</option><option value="ЗК"Определение требований</option><option value="AN">Оценка потребностей</option></select></p><p>[Кнопки RESET и SUBMIT формы]</р> </form>
Как и ранее, текстовая надпись, которая описывает назначение выпадающего списка (В приведенном примере "Выберите максимальный уровень ответ-ственности") не является частью HTML-кода списка выбора. Дескриптор <select> выпадающего списка может содержать следующие атрибуты:
Рис. 3.10. Форма с выпадающим списком (меню выбора)
- size. Количество пунктов меню (или опций), одновременно видимых на экране. В приведенном примере (size="1") в списке до нажатия кнопки раскрытия в правой части элемента на экране будет виден всего один пункт. Если значение атрибута size превышает единицу, Web-браузер будет визуализировать выпадающий список в виде списка элементов (с полосой прокрутки, если это необходимо), а не в виде выпадающего списка с кнопкой раскрытия.
- id. Используется для присвоения выпадающему списку уникального имени. Значение атрибута id можно использовать для работы с выбранным в списке элементом в рамках внедренного на Web-страницу сценария.
- name. Используется для идентификации выпадающего списка на форме. Значение атрибута name можно использовать для работы с выбранным в списке элементом в среде сценария, выполняемого Web-браузером. Более того, Web-браузер будет передавать Web-серверу значение атрибута name в качестве части "имя" пары имя/значение для каждого выбранного посетителем элемента списка.
- multiple. Если в дескрипторе <select> выпадающего списка присутствует атрибут multiple, Web-браузер позволит посетителю сайта выбирать в списке несколько элементов. В противном случае при выборе нового элемента Web-браузер будет автоматически снимать выделение с предыдущегоэлемента (если таковой существует).
Для вставки элемента в выпадающий список необходимо поместить текст элемента между начальным и конечным дескрипторами опций (<option></option>), которые, в свою очередь, находятся между начальным и конечным дескрипторами списка (<select></select>). Дескриптор <option> имеет следующие атрибуты:
- value. Строка, которая будет передаваться Web-серверу в качестве части "значение" пары имя/значение, если посетитель выбрал элемент выпадающего списка (или списка выбора). При нажатии кнопки Submit Web-браузер передает только значения атрибутов name (выпадающего списка) и value (опции), т.е. пару имя/значение для выбранного элемента (или элементов) списка. Если дескриптор <option> не содержит атрибута value, Web-браузер в качестве части "значение" пары имя/значение передает серверу текст выбранного элемента (который находится между начальным и конечным дескрипторами (<option></option>)).
- selected. Указывая атрибут selected в дескрипторе <option>, вы говоритеWeb-браузеру при начальной визуализации формы с выпадающим списком и после нажатия кнопки Reset выбирать соответствующий данному дескриптору <option> элемент в качестве элемента по умолчанию.
Web-браузер выделяет выбранный в выпадающем списке элемент (или элементы) путем его (их) подсветки. Если в дескрипторе <select> не указан атрибут multiple, посетитель может выбирать в списке только один элемент. В таком случае при выборе нового элемента Web-браузер будет автоматически снимать выделение с ранее выбранного элемента.
Чтобы разрешить посетителю сайта одновременно выбирать несколько элементов выпадающего списка, включите в дескриптор <select> списка атрибут multiple. Более того, при обеспечении возможности выбора нескольких элементов выпадающего списка желательно привести текст, например, "выберите все нужные опции" и "для выбора нескольких элементов удерживайте нажатой клавишу Ctrl". (Даже если выбор нескольких элементов из списка и разрешен, без удержания в нажатом состоянии клавиши Ctrl Web-браузер при выборе нового элемента будет снимать выделение с ранее выбранного элемента.)
ПРИМЕЧАНИЕ:
Если Вы хотите чтобы из меню выбора был выбран хотя бы один элемент, включите в качестве первого элемента (опции) списка пустой элемент. В таком случае, если посетитель не выберет в списке ни одного элемента, результаты формы будут содержать пустое значение в паре имя/значение для выпадающего списка. Если же в начале списка не включить пустой элемент, может показаться,что результаты формы содержат значение, выбранное посетителем, даже если посетитель собственно выбора не сделал. Соответствующие подробности описываются в следующем совете.