HTML-формы

SELECT

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

На самом деле ниспадающее меню или список прокрутки реализуется при вкладывании внутрь контейнера SELECT контейнеров OPTION. Именно они определяют варианты выбора или элементы списка:

<FORM>
<SELECT>
</SELECT>
</FORM>

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

Для реализации реального выпадающего меню внутрь контейнера SELECT нужно вложить контейнеры OPTION:

<FORM>
<SELECT>
<OPTION>Понедельник
<OPTION>Вторник
<OPTION>Среда
<OPTION>Четверг
<OPTION>Пятница
<OPTION>Суббота
<OPTION>Воскресенье
</SELECT>
</FORM>

Рис. 23.1.

По умолчанию в качестве текущей опции устанавливается первая опция списка. Как и в случае с полями INPUT , если после выбора опции нажать кнопку Reload, изменения выбора не произойдет. Значение по умолчанию устанавливается либо кнопкой Reset, либо при наборе в поле location браузера, либо при переходе по гипертекстовой ссылке. Для принудительного указания выбора по умолчанию следует воспользоваться атрибутом SELECT контейнера OPTION. (открыть)

Выбранное значение альтернативы становится значением поля SELECT , и в запросе передается пара " имя_поля_select-значение_альтернативы " ( fisel2.htm ).

В ранних версиях браузеров существовало довольно жесткое ограничение на размер списка альтернатив. В настоящее время его нет, но все-таки злоупотреблять не стоит.

Для того, чтобы сформировать список прокрутки в контейнере SELECT , нужно указать атрибут SIZE:

<FORM>
<SELECT SIZE=5>
<OPTION>Понедельник
<OPTION>Вторник
<OPTION>Среда
<OPTION>Четверг
<OPTION>Пятница
<OPTION>Суббота
<OPTION>Воскресенье
</SELECT>
</FORM>

Рис. 23.2.

В данном случае мы реализовали окно прокрутки для пяти вариантов. Интересно отметить, что, например, в Netscape Navigator при перезагрузке по Reload выбранная альтернатива остается, а вот список устанавливается на начало. Так, в нашем случае при выборе "Воскресенье" после перезагрузки эта альтернатива окажется невидимой. В ряде случаев это вводит пользователя в заблуждение. (открыть)

Атрибут SIZE не изменяет самого характера работы с полем. Оно продолжает оставаться списком вариантов, из которого можно выбрать только один. Для организации множественного выбора в контейнере SELECT необходимо указать атрибут MULTIPLE:

<FORM>
<SELECT SIZE=5 MULTIPLE>
<OPTION SELECTED>Понедельник
<OPTION>Вторник
<OPTION selected>Среда
<OPTION>Четверг
<OPTION>Пятница
<OPTION>Суббота
<OPTION>Воскресенье
</SELECT>
</FORM>

Рис. 23.3.

В данном примере по умолчанию выбрано два дня недели: понедельник и среда. По идее, пользователь должен иметь возможность либо устанавливать отметку о выборе опции, либо снимать ее. При этом таких отметок в одном списке может быть несколько. Однако практика показывает, что это не всегда так. Например, в Netscape Navigator 4.01 для Windows 3.1 при первоначальной загрузке страницы, действительно, отмечено две опции по умолчанию. Когда же пользователь начинает отмечать дополнительные опции, то выбрать удается только одну из них, при этом отметка по умолчанию снимается, т.е. мы имеем дело со списком альтернатив. Аналогично ведет себя и браузер Mosaic, например. Таким образом, обозначенная возможность множественного выбора поддерживается не всегда. (открыть)

OPTION

Контейнер OPTION никогда не используется сам по себе. Его применение имеет смысл только в контексте контейнера SELECT . В контейнере OPTION можно указывать два атрибута: VALUE и SELECTED.

Атрибут VALUE позволяет задать полю SELECT значение, отличное от альтернативы, которая определена в OPTION. Это позволяет существенно упростить обработку запроса. Например, при выборе дней недели вместо их полных имен можно использовать сокращения: (открыть)

<FORM>
<SELECT NAME=s>
<OPTION VALUE=1>Понедельник
<OPTION VALUE=2>Вторник
<OPTION VALUE=3>Среда
<OPTION VALUE=4>Четверг
<OPTION VALUE=5>Пятница
<OPTION VALUE=6>Суббота
<OPTION VALUE=7>Воскресенье
</SELECT>
<INPUT TYPE=submit>
</FORM>

Рис. 23.4.

Если в данном примере выбрать кнопку "Submit Query", то в строке location можно убедиться в том, что поле s действительно приняло значение, которое определено в VALUE контейнера OPTION.

Второй возможный атрибут, SELECTED, определяет значение (значения) поля SELECT по умолчанию. Если задано несколько выбранных по умолчанию опций, то в обычном (селекторном) SELECT выбирается в качестве опции по умолчанию последняя, если это множественный выбор, то — все: (открыть)

<FORM>
<SELECT NAME=s>
<OPTION VALUE=1 selected>Понедельник
<OPTION VALUE=2>Вторник
<OPTION VALUE=3 selected>Среда
<OPTION VALUE=4>Четверг
<OPTION VALUE=5>Пятница
<OPTION VALUE=6>Суббота
<OPTION VALUE=7>Воскресенье
</SELECT>
<INPUT TYPE=submit>
</FORM>

Рис. 23.5.

Любопытно, что контейнер OPTION не именуется. Более того, при программировании в JavaScript все действия над значениями опций выполняются в рамках объекта SELECT .

TEXTAREA

Контейнер textarea — это первая попытка разрешить пользователю вводить большие текстовые фрагменты. Контейнер удобен там, где не требуется форматное представление данных, либо поле должно содержать произвольный фрагмент текста, например, комментарий. Если контейнер употребляется в документе, то нужно указывать как тег начала контейнера, так и тег его конца.

<FORM>
<TEXTAREA NAME=s>
Здесь можно ввести произвольный текст
</TEXTAREA>
<INPUT TYPE=submit>
</FORM>

Содержание поля textarea можно передать как методом get ( fiarea1.htm ), т.е. в URL скрипта, так и методом POST ( fiarea2.htm ).

Атрибуты контейнера textarea позволяют сформировать на экране окно, где будет отображаться значение поля, и правила этого отображения. Атрибут COLS определяет число столбцов в окне. Текст отображается в поле textarea фонтом фиксированной ширины, и этот атрибут задает ширину поля в символах:

<FORM>
<TEXTAREA NAME=s COLS=5>
Здесь можно ввести произвольный текст
</TEXTAREA>
<INPUT TYPE=submit>
</FORM>

Аналогично ширине поля можно задать и его высоту в строках текста:

<FORM>
<TEXTAREA NAME=s COLS=15 ROWS=5>
Здесь можно ввести произвольный текст
</TEXTAREA>
<INPUT TYPE=submit>
</FORM>

И последний штрих — управление отображением текста. Во всех предыдущих примерах текст "вылезал" за правый край экрана, и его приходилось листать по горизонтали. Это достаточно неудобно. Кроме того, всегда существует дилемма: передавать текст на сервер как он есть (с переводом строк) или вытянуть в одну длинную строку. В Netscape для решения этих задач используют атрибут WRAP. Этот атрибут может принимать несколько значений:

• off — отключить выравнивание внутри поля ( fiarea3.htm );
• virtual — включить выравнивание, но передавать как длинную строку ( fiarea4.htm );
• physical — включить выравнивание, но передавать вместе с переводом строк ( fiarea5.htm ).

Наиболее интересен второй случай. В практике обработки данных скриптом очень часто приходится вытягивать ввод в одну строку и потом сравнивать ее с шаблоном. В случае WRAP=virtual мы избегаем первого шага:

<FORM>
<TEXTAREA NAME=s COLS=15 ROWS=5 WRAP=virtual>
Здесь можно ввести произвольный текст
</TEXTAREA>
<INPUT TYPE=submit>
</FORM>