TML, CSS, СКРИПТЫ: практика создании сайтов

В отличие от
, означенные теги

являются парными, определяя элементы-контейнеры.

В последующих разделах мы более подробно рассмотрим возможности,

предоставляемые тегами, предназначенными для описания элементов HTML-

форм. Мне представляется, что наиболее разумно сгруппировать эти

элементы по роду решаемых задач.

Пока же — несколько общих замечаний.

Всякая веб-форма может содержать произвольное количество элементов того

или иного типа, расположенных в любом порядке.

288 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Тег, описывающий каждое поле формы, может (но не обязан)

характеризоваться атрибутом name, определяющим имя этого поля, использующееся в

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

обработку значением этого параметра будет являться информация,

определенная пользователем в соответствующем поле (путем непосредственного

ввода, если речь идет о текстовом поле; выбором требуемого значения из

заранее определенного перечня или иным возможным способом).

Любой элемент формы можно сделать неактивным и, соответственно,

недоступным для изменения благодаря использованию булева атрибута disabled.

HTML 4, напомню, допускает минимизацию подобных атрибутов, разрешая

записи вида:

XHTML же требует, чтобы все атрибуты, в том числе и булевы, были

записаны в развернутой форме:

Все примеры, обсуждаемые далее в этой главе, построены по правилам

XHTML. Я счел необходимым лишь кратко напомнить некоторые ключевые

различия синтаксиса XHTML 1.0 и HTML 4 (рассмотренные в главе 2), к

которым мы уже давно не возвращались.

Текстовые поля ввода

Однострочное текстовое поле можно сформировать, воспользовавшись тегом

с атрибутом type, принимающим значение text.

Также предусмотрены следующие дополнительные атрибуты:

? size — определяет видимую длину поля ввода в символах;

? maxiength — задает максимальное число символов, разрешенных для ввода

в данное поле (по умолчанию ограничений нет);

? value — устанавливает содержимое поля по умолчанию.

С примерами подобных полей мы повседневно сталкиваемся в поисковых

системах, таких как Google или «Яндекс». Попробуем реализовать похожую

форму своими силами.

j Листинг ел. Однострочное текстовое пол& -’ ‘*’ Ч11ЧИЩ^ ‘* у • |

^> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

Глава 6. Формы в HTML

289

Адрес вашего сайта:

maxlength=»100″ name=»website» value=»http://www.» /xinput

type=»submit» value=»OK» />

Описанная в приведенном выше листинге простейшая форма показана на

рис. 6.1.

Ш^ШйшШШШ^ШШш^^ШШШШ^Ш^ШШШШ^ШЯ^^ШЙ^^^^^^^^^^^^^^ШЁШШ!^^^^^

[ §эй?* Г&Ш* |ид П§ре*м ^кяздкн &

О * Ф*’* Й^ 1Ш 6Й f^ f’le:///2:/examples/06/01/index.html Jjj © *Ш&* |:Gl

ФбвОДЭДО*? ©t4*«*«Mdfe«W

1 Адрес вашего сайта: |http://www. OK j

I

1

j Г s

*iOS2

ftoj

1

j

^j

Рис. 6.1. Внешний вид простейшей веб-формы

с одним текстовым полем и кнопкой отправки данных

В этом примере использовано два типа элементов интерфейса — текстовое

поле ввода и кнопка, отправляющая данные на обработку (пустое значение

атрибута action тега

предполагает, что обработчик находится в

текущем документе). Атрибут value применительно к элементу-кнопке работает

слегка иначе, нежели по отношению к текстовому полю— он определяет

надпись, которая будет фигурировать на поверхности кнопки. Текст этой

надписи по умолчанию браузеры определяют на свое усмотрение — так,

локализованная версия Internet Explorer, например, предлагает нам не вполне

изящную формулировку «Подача запроса». Вместо нее мы кратко

напишем «ОК».

290 Часть II. Применение веб-технологий стороны клиента для создания сайтов

При помощи атрибута size мы указали, чтобы наше текстовое поле имело

длину 20 символов. Предельную длину вводимой строки, задаваемую

атрибутом maxiength, мы установили равной ЮОзнакам. Поскольку мы

призываем пользователя ввести в текстовое поле адрес своего сайта, логично дать

этому элементу имя website при помощи атрибута name.