5. Поле ввода пароля

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

Поле ввода пароля также создается с помощью одинарного тега <INPUT>:

<INPUT TYPE="password" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>

Значение "password" атрибута тега TYPE указывает Web-обозревателю создать поле ввода пароля. Остальные атрибуты нам уже знакомы по обычному полю ввода.

Листинг 16.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>

В листинге 16.2 создается Web-форма с обычным полем ввода и полем ввода па-роля. Первое — login, длиной 20 символов, будет автоматически активизироваться при открытии Web-страницы. Второе — password, длиной также 20 символов.

6. Поле ввода значения для поиска

Поле ввода значения для поиска появилось в HTML 5. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк.

Поле ввода значения для поиска также создается с помощью одинарного тега <INPUT>:

<INPUT TYPE="search" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>

Значение "search" атрибута тега TYPE указывает Web-обозревателю создать поле ввода значения для поиска. Остальные атрибуты нам уже знакомы по обычному полю ввода (листинг 16.3).

Листинг 16.3

<FORM ACTION="#">

<P>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40"></P>

</FORM>

7. Область редактирования

Область редактирования создается парным тегом <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>, нам уже знакомы (листинг 16.4).

Листинг 16.4

<FORM ACTION="#">

<P>

Введите сюда ваш отзыв о Web-сайте:<BR>

<TEXTAREA ID="opinion" NAME="opinion" COLS="60" ROWS="10">

Отличный Web-сайт!

</TEXTAREA>

</P>

</FORM>

8. Кнопка

Кнопка при нажатии запускает на выполнение какое-либо действие. Она создается с помощью тега <INPUT>:

<INPUT TYPE="button" VALUE="<надпись>" [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]>

Значение "button" атрибута тега TYPE указывает Web-обозревателю создать обычную кнопку. Атрибут тега VALUE, задающий надпись для кнопки, в этом случае является обязательным. Остальные атрибуты тега нам уже знакомы (листинг 16.5).

Листинг 16.5

<FORM ACTION="#">

<P>

Найти:

<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">

<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">

</P>

</FORM>

9. Флажок

Флажки встречаются в Web-формах нечасто, в случаях, когда нужно дать посетителю возможность выбрать или не выбрать какую-то опцию. Для создания флажков применяется тег <INPUT>:

<INPUT TYPE="checkbox" [CHECKED] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [AUTOFOCUS]>

Значение "checkbox" атрибута тега TYPE указывает Web-обозревателю создать именно флажок.

Атрибут тега без значения CHECKED позволяет сделать флажок изначально установленным. Если он присутствует, флажок будет установлен изначально, если отсутствует — сброшен.

Остальные атрибуты тега нам уже знакомы (листинг 16.6).

Листинг 16.6

<FORM ACTION="#">

<P>

<INPUT TYPE="checkbox" ID="updates" NAME="updates" CHECKED>

Я хочу получать письма со списком обновлений Web-сайта

</P>

</FORM>