Вопросы для самоконтроля

• Какие тэги используются для заголовков в основном тексте?

• Какие тэги используются для управления шрифтами в документ?

• Какие тэги относятся к логическим текстовым стилям?

• Какие тэги относятся к физическим текстовым стилям?

• Что из себя представляют специальные символы и как они обозначаются в тексте?

• Какие тэги используются для отображения в документе графики и для представления графической ссылки?

• Какие атрибуты используются в тэге img для указания файлов высокого и слабого разрешения?

• Атрибут в тэге img для размещения графики относительно текста (или другого контекста) и его возможные значения?

• Назначение тэга br и его атрибута clear?

• Значения атрибута clear?

• Способы оформления гипертекстовых и графических ссылок?

• Что из себя представляют якоря (метки) и как они указываются в документе?

• Атрибут target – его назначение, где применяется и его значения?

• Для каких целей применяется контейнер map?

• Возможные значения атрибута shape в тэгах area?

Вопросы на самостоятельную проработку

• Виды списков?

• Значения атрибута type d тэгах ol и ul?

• Списки определений (или словарные списки)?

• Элементы таблиц – тэги и атрибуты?

К оглавлению

Лекция 14. Применение форм и основы оформления документов

Форма и ее элементы

Форма представляет аналог обычных диалоговых окон, внедряемых в HTML-документы. Обычно данные из формы пересылаются к серверу и обрабатываются сценарным приложением.

Тэги декларации формы

Форма определяется в HTML-документах с помощью контейнера form: <form…> элементы формы </form>. Элементами формы являются: - кнопки, - флажки, - переключатели, - списки выбора (меню), - текстовые поля и области, - списки выбора файлов, - скрытые поля, - объектные элементы управления. Основными атрибутами тэга form являются:

• method, для которого устанавливается одно из значений “get” или “post”, определяющих формат пересылки данных и способ их размещения на сервере,

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

Пример

<form action = “/cgi-bin/mailform.pl” method = “get”>

First Name: <input type = “text” name = “First”>

……………………………

</form>

Дополнительно форма может включать атрибуты enctype, accept-charset, accept, указывающих тип передаваемых данных (mime-тип для метода post), кодировку и список допустимых для передачи типов файлов, если в форме используются списки выбора файлов, а также ряд других атрибутов. Значение атрибута name (в более поздних версиях HTML - id) облегчает доступ к элементам различных форм в программах на языке JavaScript. С формой могут быть связаны обработчики событий: onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Элементы создаваемые тэгом input

В формах почти все элементы управления, за исключением нескольких, указываются тэгом input. Основным атрибутом для определения типа элемента является атрибут type, значениями которого могут быть:

• “text” – создание текстового поля,

• “password” – создание текстового поля для ввода пароля (по мере ввода пароля символы отображаются знаком ‘*’,

• “checkbox” – создание флажка, выбор в котором обозначается символом “Ö”,

• “radio” – создание переключателя, позволяющего выбрать в дальнейшем, при взаимодействии с формой, один из переключателей, объединенных в группу,

• “submit” – создание кнопки отправки данных формы к серверному приложению,

• “image” – создание графической кнопки отправки данных,

• “reset” – создание кнопки сброса, - элементы формы восстанавливаются к исходным значениям,

• “button” – создание простой кнопки с надписью,

• “hidden” – создание скрытого поля,

• “file” – создание списка выбора файлов, для выбора файла и пересылки его содержимого совместно с другими данными формы к серверному приложению.

Пример

<form action = "/cgi-bin/mailform.pl” method = "post">

<p>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname"><br>

email: <input type="text" name="email"> <br>

пароль: <input type="password" name="pass" value="NOPASS" size=6><br>

<input type="radio" name="sex" value="Male"> Male<br>

<input type="radio" name="sex" value="Female"> Female<br>

<input type="submit" value="Send"> <input type="reset">

</p>

</form>

В документе создается следующая форма:

First name: Last name: email: пароль: Male Female

Назначение большинства перечисленных выше элементов очевидно. Рассмотрим некоторые особенности их применения. В тэге input применяются следующие атрибуты:

• name – атрибут позволяет присвоить элементу управления имя; это необходимо, поскольку передача данных формы к серверу выполняется в виде пар «name=value» и именно имя позволяет анализировать в скрипте состояние элемента управления; если элементы типа «radio» имеют одинаковые имена, то они ведут себя как альтернативные переключатели,

• value – атрибут определяет начальное значение, связываемое с элементом управления; в процессе взаимодействия пользователя с формой значение этого атрибута для некоторых элементов управления может изменяться; для элементов типа «radio» к серверу передается только имя и значение того переключателя, который взведен,

• size – числовое значение устанавливает размер элемента управления и задается в пикселах; для элементов управления типа «text» или «password» числовой параметр устанавливает размар элемента количеством размещаемых букв,

• maxlength – для элементов управления "text" или "password", атрибут устанавливает максимальное количество символов для ввода; если это значение превышает значение атрибута size, то элемент управления будет включать механизм скроллинга,

• checked – этот атрибут для элементов управления "radio" или "checkbox" указывает, что соответствующий элемент управления выбран (взведен),

• src – значение этого атрибута указывает URI-адрес файла с графикой, которая отображается на кнопке "image", применяемой как кнопка отправки данных; совместно с этим атрибутом можно применить атрибут alt с указанием альтернативного текста.

Все перечисленные в данном разделе элементы управления и перечисляемые далее могут специфицироваться в документе вне форм, однако в этом случае их данные не передаются на сервер. Имена элементов в пределах формы могут совпадать. «Различение» элементов на сервере в любом случае возлагается на пользователя.

Как было отмечено выше, на сервер данные из формы передаются в виде пар «имя=значение». Для элементов типа «text» на сервер передается весь введенный текст или если текст не вводился, то значение атрибута value. Для элементов типа «image» (кнопки отправки данных) данные на сервер включают информацию о координатах щелчка «мышью» в следующем виде: name.x=x-value и name.y=y-value, где – name имя кнопки, x-value и y-value – координаты щелчка относительно верхнего левого угла изображения, соответственно, по координате х и по координате у. Для элементов типа «radio» на сервер отправляются данные только об одном из переключателей, имеющих одинаковые имена (того, который взведен). На сервер передаются данные о всех «взведенных флажках» (тип «checkbox»). Данные об элементах типа «reset» на сервер не передаются. Данные об элементах типа «button», также не передаются, предполагается, что с каждым элементом этого типа должен быть связан скрипт, обрабатывающий одно из следующих событий: onfocus (получение фокуса), onblur (потеря фокуса), onselect (был выделен некоторый текст), onchange (состояние элемента было изменено). Для элементов типа «file» передается содержимое выбранных файлов (При использовании элементов этого типа необходимо для формы задать атрибут enctype). Данные о кнопке «submit» (значение атрибута value) передаются на сервер, что позволяет различать – по какой кнопке «submit» был выполнен щелчок.