Атрибут тега без значения READONLY позволяет сделать поле ввода доступным только для чтения; при этом посетитель все-таки сможет активизировать это поле, выделить содержащийся в нем текст и скопировать его в Буфер обмена. Если этот атрибут тега присутствует, поле ввода будет доступно только для чтения, если отсутствует — доступно и для чтения, и для ввода.
Если атрибут тега без значения AUTOFOCUS присутствует, данное поле ввода будет автоматически активизировано при открытии Web-страницы. Если же он отсутствует, поле ввода активизировано не будет и посетителю придется его активизировать щелчком мышью или клавишами <Tab> или <Shift>+<Tab>.
ВНИМАНИЕ!
Атрибут тега AUTOFOCUS можно указывать только для одного элемента управления на всей Web-странице.
Листинг 20.1
<FORM ACTION="#">
<P>Имя: <INPUT TYPE="text" ID="name1" NAME="name1" SIZE="20"
AUTOFOCUS></P>
<P>Фамилия: <INPUT TYPE="text" ID="name2" NAME="name2" SIZE="30"></P>
</FORM>
В листинге 20.1 мы создаем Web-форму с двумя полями ввода: name1 длиной 20 символов, автоматически активизирующееся при открытии Web-страницы, и name2 длиной 30 символов. Оба поля ввода имеют надписи, представляющие собой обычный текст и расположенные перед ними.
Обратим внимание, что для размещения элементов управления в Web-форме мы использовали абзацы. Вообще, для этого можно применять любые элементы Web- страниц из уже знакомых нам: списки, таблицы, контейнеры и пр.
Поле ввода пароля
Поле ввода пароля ничем не отличается от обычного поля ввода за тем исключением, что вместо вводимых символов в нем отображаются точки. Такие поля ввода широко применяют для запроса паролей и других конфиденциальных данных.
Поле ввода пароля также создается с помощью одинарного тега <INPUT>:
<INPUT TYPE="password" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>
Значение "password" атрибута тега TYPE указывает Web-обозревателю создать поле ввода пароля. Остальные атрибуты нам уже знакомы по обычному полю ввода.
Листинг 20.2
<FORM ACTION="#">
<P>Имя: <INPUT TYPE="text" ID="login" NAME="login" SIZE="20" AUTOFOCUS></P>
<P>Пароль: <INPUT TYPE="password" ID="password" NAME="password" SIZE="20"></P>
</FORM>
В листинге 20.2 мы создаем Web-форму с обычным полем ввода и полем ввода пароля. Первое — login, длиной 20 символов, будет автоматически активизироваться при открытии Web-страницы. Второе — password, длиной также 20 символов.
Поле ввода значения для поиска
Поле ввода значения для поиска появилось в HTML 5. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк.
Поле ввода значения для поиска также создается с помощью одинарного тега
<INPUT>:
<INPUT TYPE="search" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>
Значение "search" атрибута тега TYPE указывает Web-обозревателю создать поле ввода значения для поиска. Остальные атрибуты нам уже знакомы по обычному полю ввода (листинг 20.3).
Листинг 20.3
<FORM ACTION="#">
<P>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>
Область редактирования
Область редактирования создается парным тегом <TEXTAREA>:
<TEXTAREA [ROWS="<высота>"] [COLS="<ширина>"] [WRAP="off|soft|hard"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]><изначальное значение>
</TEXTAREA>
Значение, которое должно изначально присутствовать в области редактирования, помещается внутрь тега <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, могут быть разными. Это позволит
