Создается переключатель с помощью все того же тега <INPUT>:
<INPUT TYPE="radio" [CHECKED]
[TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]>
Значение "radio" атрибута тега TYPE указывает Web-обозревателю создать именно переключатель. Остальные атрибуты тега нам уже знакомы.
В группе только один переключатель может быть установлен. Это значит, что атрибут тега без значения CHECKED можно указывать только для одного переключателя в группе. Листинг 20.7 содержит пример переключателя.
Листинг 20.7
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Я не хочу получать письма со списком обновлений Web-сайта
</P>
</FORM>
Список, обычный или раскрывающийся
Списки, как обычные, так и раскрывающиеся, реализуют с помощью парного тега <SELECT>, внутри которого помещают парные теги <OPTION>, создающие пункты списка.
Начнем с парного тега <SELECT>, который создает сам список:
<SELECT [SIZE="<высота в пунктах (позициях)>"] [MULTIPLE] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]><теги <OPTION>, создающие пункты списка>
</SELECT>
Необязательный атрибут тега SIZE задает высоту списка в пунктах (имеются в виду пункты списка). Если этот атрибут тега имеет значение, отличное от единицы, создается обычный список, имеющий высоту, равную указанному значению пунктов. Если же значение этого атрибута тега равно единице или вообще отсутствует, создается раскрывающийся список (имеющий в высоту один пункт).
Атрибут тега без значения MULTIPLE позволяет создать список, в котором можно выбрать сразу несколько пунктов. Если этот атрибут тега присутствует, в списке можно будет выбрать сразу несколько пунктов, если отсутствует — можно будет выбрать только один пункт. Понятно, что данный атрибут тега имеет смысл указывать только для обычных списков (если атрибут тега SIZE имеет значение, отличное от 1); в раскрывающемся списке в любом случае можно выбрать только один пункт.
Остальные атрибуты этого тега нам уже знакомы.
Парный тег <OPTION> создает отдельный пункт списка. Он может присутствовать только в теге <SELECT>:
<OPTION [LABEL="<текст пункта>"] [SELECTED] [DISABLED]> [<текст пункта>]<OPTION>
Текст пункта списка либо помещают внутрь тега <OPTION>, либо указывают с помощью атрибута тега LABEL.
Атрибут тега без значения SELECTED позволяет сделать данный пункт списка изначально выбранным. Если этот атрибут тега указан, пункт списка будет изначально выбранным, если не указан — не будет выбранным.
Уже знакомый нам атрибут тега без значения DISABLED позволяет сделать данный пункт недоступным для выбора. Листинг 20.8 иллюстрирует пример.
Листинг 20.8
<FORM ACTION="#">
<P>
Выполнять поиск по
<SELECT ID="search_in" NAME="search_in">
<OPTION>названиям</OPTION>
<OPTION>ключевым словам</OPTION>
<OPTION SELECTED>названиям и ключевым словам</OPTION>
</SELECT>
</P>
</FORM>
HTML также позволяет объединять пункты списка в группы по какому-либо родственному признаку. Такую группу создают с помощью парного тега <OPTGROUP>; в него помещают теги, создающие пункты списка, которые входят в эту группу. Тег <OPTGROUP> может присутствовать только внутри тега <SELECT>:
<OPTGROUP LABEL="<заголовок группы>" [DISABLED]>
<теги <OPTION>, создающие пункты, которые входят в группу>
<OPTGROUP>
Обязательный в этом случае атрибут тега LABEL задает заголовок группы. А атрибут тега без значения DISABLED позволяет сделать все пункты данной группы недоступными для выбора (листинг 20.9).
Листинг 20.9
<FORM ACTION="#">
<P>
Выполнять поиск по
<SELECT ID="search_in" NAME="search_in">
<OPTGROUP LABEL="Быстрый поиск">
<OPTION>названиям</OPTION>
<OPTION>ключевым словам</OPTION>
</OPTGROUP>
<OPTION SELECTED>названиям и ключевым словам</OPTION>
</SELECT>
</P>
</FORM>
Надпись
Строго говоря, надпись — это не элемент управления. Она просто задает для элемента управления текстовую надпись, которая описывает его назначение. Если посетитель щелкнет мышью на надписи, элемент управления будет активизирован.
Надпись создают с помощью парного тега <LABEL>:
<LABEL [FOR="<имя элемента управления, к которому относится надпись>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"]><текст надписи>[<элемент управления>]
</LABEL>
Есть два способа привязать надпись к элементу управления, который она должна описывать. Сейчас мы их рассмотрим.
При первом способе (листинг 20.10) элементу управления, к которому привязывается надпись, дают имя с помощью атрибута тега ID. (Впрочем, любой элемент управления должен иметь имя.) Это имя указывают в качестве значения обязательного в таком случае атрибута FOR тега <LABEL>, создающего надпись.
Листинг 20.10
<FORM ACTION="#">
<P><LABEL FOR="keyword">Найти:</LABEL>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40"></P>
</FORM>
При втором способе (листинг 20.11) элемент управления, к которому привязывается надпись, помещают в сам тег <LABEL>, создающий ее, сразу после текста надписи.
Листинг 20.11
<FORM ACTION="#">
<P><LABEL>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></LABEL></P>
</FORM>
Надписи в Web-формах встречаются довольно редко. Обычно Web-дизайнеры ограничиваются простым текстом, который ставят до или после элемента управления.
Группа
Группу также нельзя отнести к "настоящим" элементам управления. Она объединяет несколько элементов управления, имеющих сходное назначение. Визуально группа представляет собой рамку, окружающую элементы управления и, возможно, имеющую заголовок, расположенный прямо на ее верхней или нижней границе.
Группу создают с помощью парного тега <FIELDSET>:
<FIELDSET>
<элементы управления, объединяемые в группу>
</FIELDSET>
Видно, что теги, создающие элементы управления, которые должны быть объединены в группу, помещают прямо в тег <FIELDSET>.
Кроме того, в теге <FIELDSET> может присутствовать парный тег <LEGEND>, создающий заголовок группы:
<LEGEND [ACCESSKEY="<быстрая клавиша>"]><текст заголовка></LEGEND>
Текст заголовка помещают прямо внутри этого тега.
Тег <LEGEND> должен помещаться либо сразу же после открывающего тега <FIELDSET>, либо перед закрывающим тегом </FIELDSET>. В первом случае заголовок будет присутствовать на верхней границе группы, во втором случае — на нижней границе. В листинге 20.12 приведен пример группы.
Листинг 20.12
<FORM ACTION="#">
<FIELDSET>
<LEGEND>Найти:</LEGEND>
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">
</P>
</FIELDSET>
</FORM>
Прочие элементы управления
HTML позволяет создать еще несколько элементов управления, которые необходимы только для взаимодействия с серверными приложениями. Если же Web-форма служит для ввода данных, предназначенных для обработки Web-сценарием, эти элементы управления не имеют смысла.
Прежде всего, это кнопка отправки данных, о которой мы уже говорили в начале главы. Она отличается от обычной кнопки только значением атрибута TYPE тега <INPUT> — "submit".
Далее, в Web-форме может присутствовать кнопка очистки. При нажатии на такую кнопку все элементы управления в Web-форме получают изначальные значения, заданные в HTML-коде. Значение атрибута TYPE тега <INPUT>, создающего подобную кнопку, должно быть "reset".
Поле
