Значение, которое должно изначально присутствовать в области редактирования, помещается внутрь тега <TEXTAREA>. Это должен быть текст без всяких HTML-тегов.
Необязательный атрибут тега ROWS задает высоту области редактирования в строках. Если он не указан, высота области редактирования будет зависеть от Web- обозревателя.
Необязательный атрибут тега COLS задает ширину области редактирования в символах. Если он не указан, высота области редактирования будет зависеть от Web-обозревателя.
Необязательный атрибут тега WRAP позволяет управлять переносом строк в области редактирования. Атрибут WRAP может принимать два значения:
— "soft" — область редактирования будет автоматически выполнять перенос слишком длинных строк. При этом в само значение, введенное в область редактирования, символы перевода строк вставляться не будут.
— "hard" — область редактирования будет автоматически выполнять перенос слишком длинных строк. При этом в соответствующие места значения, введенного в область редактирования, будут вставлены символы перевода строк.
Если атрибут тега WRAP не указан, область редактирования будет вести себя так, словно задано значение "soft".
Остальные атрибуты, поддерживаемые тегом <TEXTAREA>, нам уже знакомы (листинг 20.4).
Листинг 20.4
<FORM ACTION="#">
<P>
Введите сюда ваш отзыв о Web-сайте:<BR>
<TEXTAREA ID="opinion" NAME="opinion" COLS="60" ROWS="10">
Отличный Web-сайт!
</TEXTAREA>
</P>
</FORM>
Кнопка
Кнопка при нажатии запускает на выполнение какое-либо действие. Она создается с помощью тега <INPUT>:
<INPUT TYPE="button" VALUE="<надпись>"
[TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]>
Значение "button" атрибута тега TYPE указывает Web-обозревателю создать обычную кнопку. Атрибут тега VALUE, задающий надпись для кнопки, в этом случае является обязательным. Остальные атрибуты тега нам уже знакомы (листинг 20.5).
Листинг 20.5
<FORM ACTION="#">
<P>
Найти:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">
</P>
</FORM>
Флажок
Флажки встречаются в Web-формах нечасто, в случаях, когда нужно дать посетителю возможность выбрать или не выбрать какую-то опцию. Для создания флажков применяется тег <INPUT>:
<INPUT TYPE="checkbox" [CHECKED]
[TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]>
Значение "checkbox" атрибута тега TYPE указывает Web-обозревателю создать именно флажок.
Атрибут тега без значения CHECKED позволяет сделать флажок изначально установленным. Если он присутствует, флажок будет установлен изначально, если отсутствует — сброшен.
Остальные атрибуты тега нам уже знакомы (листинг 20.6).
Листинг 20.6
<FORM ACTION="#">
<P>
<INPUT TYPE="checkbox" ID="updates" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</P>
</FORM>
Переключатель
Переключатели в Web-формах, как и в окнах Windows-приложений, применяются только группами. Группа переключателей предоставляет посетителю возможность выбрать одну из нескольких доступных альтернатив. В одиночку же переключатели абсолютно бесполезны — флажки в таких случаях гораздо удобнее.
А теперь — очень важная вещь! Ранее мы говорили, что каждый элемент управления должен иметь уникальное в пределах Web-формы имя, задаваемое атрибутом тега NAME. Это имя необходимо для формирования данных, отсылаемых серверному приложению.
Но из этого правила есть исключение — переключатели. В их случае атрибут тега NAME задает имя группы переключателей. Иными словами, переключатели, входящие в одну группу, должны иметь одинаковое имя, заданное атрибутом тега NAME, и данное имя должно быть уникально в пределах формы.
Тем не менее, имена переключателей, задаваемые атрибутом тега ID, могут быть разными. Это позволит нам получать доступ из Web-сценария к отдельным переключателям группы и проверять, установлены они или сброшены.
Создается переключатель с помощью все того же тега <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>
Надпись
Строго говоря, надпись — это не элемент управления. Она просто задает для элемента управления текстовую надпись, которая описывает его назначение. Если посетитель щелкнет мышью на надписи, элемент управления будет активизирован.
