HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

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

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

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

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

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

Листинг 20.2

<FORM ACTION="#">

Имя: <INPUT TYPE="text" ID="login" NAME="login" SIZE="20" AUTOFOCUS>

Пароль: <INPUT TYPE="password" ID="password" NAME="password" SIZE="20">

</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="#">

Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"

SIZE="40">

</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="#">

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

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

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

</TEXTAREA>

</FORM>

Кнопка

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

<INPUT TYPE="button" VALUE="<надпись>"

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

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

Листинг 20.5

<FORM ACTION="#">

Найти:

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

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

</FORM>

Флажок

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

<INPUT TYPE="checkbox" [CHECKED]

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

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

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

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