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

проблемы.

Что касается атрибута тега ID, то он задает имя, под которым элемент управления будет доступен в Web-сценариях, а также имя именованного стиля. Собственно, об этом мы уже знаем.

Обычно для каждого элемента управления атрибутами тега ID и NAME указывают одно и то же имя — просто чтобы не ломать голову и устранить разнобой в именах. Хотя это и не обязательно.

Все элементы управления HTML представляют собой встроенные элементы Web-страницы (см. главу 3).

Теперь рассмотрим все элементы управления HTML и особенности их создания.

Поле ввода

Поле ввода — наиболее распространенный элемент управления в Web-формах — создается с помощью одинарного тега <INPUT>:

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

Атрибут тега TYPE, как уже говорилось, задает тип элемента управления. Значение 'text' указывает Web-обозревателю создать именно поле ввода. Поле ввода также создается, если атрибут тега TYPE не указан (как уже говорилось, он необязательный).

Необязательный атрибут тега VALUE задает значение, которое должно присутствовать в поле ввода изначально. Если этот атрибут не указан, поле ввода не будет содержать ничего.

Необязательный атрибут тега SIZE задает длину поля ввода в символах. Если он не указан, длина поля ввода будет зависеть от Web-обозревателя.

Необязательный атрибут тега MAXLENGTH задает максимальный размер строки, которую можно ввести в это поле ввода, в символах. Если этот атрибут тега не указан, в поле ввода можно будет ввести строку неограниченного размера.

Необязательные атрибуты тега TABINDEX и ACCESSKEY задают, соответственно, номер в порядке обхода и 'горячую' клавишу для доступа к элементу управления. Они знакомы нам по гиперссылкам (см. главу 6).

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

Атрибут тега без значения 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. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк.

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