4
Внимание!
В тексте между тегами и правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать.
Специфичным в настройке кнопки, создаваемой HTML?элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT.
Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь).
Меню При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML?элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них.
Начнем с HTML?элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов и и поддерживает следующие атрибуты:
Name – имя меню, которое также используется как название параметра при отправке формы;
Size – задает количество строк, одновременно видимых пользователем;
Multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно;
Disabled – булев атрибут, деактивирует меню;
Title – текст подсказки для меню;
Tabindex – номер при перемещении между элементами управления при помощи табуляции.
Элемент управления меню может представляться различными браузерами по?разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5.
Рис. 9.5. Внешний вид меню
Если использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя.
Ниже приведен фрагмент текста HTML?документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4).
Пример 9.4. Два простых меню
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5
Пункт 6
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5
Пункт 6
В тексте примера вы видите также упомянутый ранее HTML?элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами и (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:
Value – текст, который будет отправлен с формой при выборе пункта меню;
Selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple);
Disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут).
Теперь осталось рассмотреть, для чего нужен третий HTML?элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML?элементов OPTION, определяющих пункты меню одной группы, в парные теги и . Параметры группы можно настроить с использованием следующих атрибутов HTML?элемента OPTGROUP:
Label – строка с подписью для группы;
Disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION).
Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5).
Пример 9.5. Группировка пунктов меню
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6.
Рис. 9.6. Внешний вид меню с группированными пунктами
Подписи элементов управления Некоторые элементы управления, например кнопки, содержат надписи, по которым пользователь может определить назначение этих элементов управления. Для других элементов типа текстовых полей, флажков и т. п. приходится создавать подписи вручную, смешивая определения элементов управления формы с текстом.
Существует еще один способ задания подписей к элементам управления – использование HTML?элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML?документа.
Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами и помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления.
При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом:
Введите пароль:
В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так:
Введите пароль:
Текст может находиться до или после определения элемента управления. В теле HTML?элемента LABEL в этом случае должно быть только одно определение элемента управления.
9.3. Группировка элементов управления При создании форм есть возможность сделать более выразительным общее предназначение некоторых элементов управления, дополнительно заключив их в рамку так, как показано на рис. 9.1. Рамку можно подписать, а можно оставить без подписи.
Рамка создается при помощи HTML?элемента FIELDSET. Между парными тегами
и помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML?элемент задается при помощи парных тегов и , между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по?разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.
В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6).
Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI?приложения, способного обрабатывать форму.
Форма в HTML-документе реализуется тегом-контейнером FORM
, в котором задаются все управляющие элементы - поля ввода, кнопки и.т.д. Если управляющие элементы указаны вне содержимого тега FORM
, то они не создают форму, а используются для построения пользовательского интерфейса на веб-странице, то есть для привнесения в нее различных кнопок, флажков, полей ввода.
Обработка элементов формы производится с помощью скриптов, но они могут и вообще никак не обрабатываться.
Имена элементам формы присваиваются через их атрибут NAME
.
Каждый элемент формы может иметь начальное и конечное значения, которые являются символьными строками. Начальные значения элементов не меняются, благодаря чему может осуществляться сброс значений, указанных пользователем. Результатом этого действия будет установка всех управляющих элементов формы в своих первоначальных используемых по умолчанию значениях.
В HTML 4.01 определены следующие типы управляющих элементов:
Кнопки - задаются с помощью элементов BUTTON
и INPUT
. Различают:
»
кнопки отправки - при нажатии на них, они осуществляют отправку формы серверу;
»
кнопки сброса - при нажатии на них, управляющие элементы принимают первоначальные значения;
»
прочие кнопки - кнопки, для которых не указано действие, выполняемое по умолчанию при нажатии на них.
Зависимые переключатели (переключатели с зависимой фиксацией) - задаются элементом INPUT
и представляют собой переключатели "вкл/выкл". Если несколько зависимых переключателей имеют одинаковые имена, то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение "вкл", то все остальные автоматически - в положение "выкл". Именно это и является преимуществом их использования.
Независимые переключатели (переключатели с независимой фиксацией) - задаются элементом INPUT
и представляют собой переключатели "вкл/выкл", но в отличие от зависимых, независимые переключатели могут принимать и изменять свое значение независимо от остальных переключателей. Даже если последние имеют такое же имя.
Меню - реализуется с помощью элементов SELECT
, OPTGROUP
и OPTION
. Меню предоставляют пользователю список возможных вариантов выбора.
Ввод текста - реализуется элементами INPUT
, если вводится одна строка, и элементами TEXTAREA
- если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.
Выбор файлов - позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT
.
Скрытые управляющие элементы - создаются управляющим элементом INPUT
.
Как видите, очень много элементов задаются с помощью универсального тега INPUT
.
Полную спецификацию по HTML4 Вы можете найти
Тег FORM - контейнер форм
Как уже было сказано, форма в HTML-документе реализуется тегом-контейнером FORM
. Этот тег своими атрибутами указывает адрес сценария (скрипта), которому будет послана форма, способ пересылки и характеристику данных, содержащихся в форме. Начальный и конечный теги FORM
задают границы формы, поэтому их указание является обязательным.
Приведем атрибуты тега FORM
:
action
- единственный обязательный атрибут. В качестве его значения указывается URL-адрес запрашиваемого скрипта, которая будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись mailto:URL
, благодаря которой форма будет послана по электронной почте. Если атрибут ACTION
все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная веб-страница;
method
- определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD
может принимать два значения: GET
и POST
;
enctype
- необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибутов ENCTYPE
:
APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию);
MULTIPART/FORM-DATA.
Тег INPUT и его методы
Элемент INPUT
является наиболее употребительным тегом HTML-форм. С помощью этого тега реализуются основные функции формы. Он позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и.т.д.
Обратите внимание на особенность INPUT
- у него нет конечного (завершающего) тега. Атрибуты и особенности использования INPUT
зависят от способа его использования. Рассмотрим эти способы.
»
Однострочные поля ввода
Наиболее часто используются поля ввода - ведь даже кнопка является полем ввода информации. Начнем с поля ввода текстовой информации. Формат тега INPUT
для создания поля ввода текстовой строки:
Данный тег создает поле воода с максимально допустимой длиной текста maxlen
и размером в size
знакомест. Если указан атрибут value
, то в поле будет изначально отображаться значение данного атрибута. В квадратных скобках помечены необязательные атрибуты.
Вот пример однострочного поля ввода:
»
Поля ввода пароля
Конечно, имя пользователя можно ввести с помощью обыкновенного текстового поля. А вот пароль не должен отображаться на экране при его вводе. В этом нам поможет поле ввода пароля:
Принцип работы данного тега точно такой же, как и текстового. Разница заключается в том, что вводимая информация в поле не отображается, а заменяется "звездочками
". Не рекомментуется устанавливать значение по умолчанию из соображений безопасности (value
).
Вот пример поля ввода пароля:
»
Скрытое текстовое поле
Для передачи служебной информации (о которой пользователь даже не должен подозревать) используются скрытые поля. С помощью таких полей, например, могут передаваться параметры настройки.
Такие поля передаются серверу, но на веб-странице не отображаются.
»
Независимые переключатели
Очень часто пользователю, заполняющему форму в браузере, необходимо дать возможность указать свои настройки с помощью выбора определенных значений. При этом приводятся сами эти значения, а рядом с ними помещается небольшое квадратное поле, в котором можно установить, или убрать галочку. При этом значение, соответственно, будет либо выбрано, либо нет.
Реализовать это можно опять же с помощью тега INPUT
. Для этого только необходимо в качестве значения атрибута type
указать chechbox
.
Если переключатель был включен на момент нажатия кнопки отправки данных, то скрипту будет передан параметр имя=значение
. Если же флажок выключен, то сценарию вообще ничего не будет передано - как будто переключателя вообще нет.
Переключатель по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked
.
Переключатель checkbox
называется независимым, так как его состояние не зависит от состояния других переключателей checkbox
. Таким образом, в одной форме модет быть одновременно выбрано несколько переключателей.
Приведем пример независимых переключателей:
В HTML есть и такой переключатель, который зависит от других переключатель, он рассматривается далее.
»
Зависимые переключатели
Зависимы переключатель, так же как и независимый переключатель, может быть либо включен, либо выключен. При этом переключатель radio
является зависимым переключателем, поскольку на форме может быть только один включенный переключатель типа radio
. Точнее, если в форме присутствуют несколько одноименных зависимых переключателей, то включен из них может быть только один. При выборе одного переключателя все одноименные зависимые переключатели автоматически выключаются. В качестве имени переключателей воспринимается значение атрибута name.
Может быть только один активный переключатель. Пример листинга формы с зависимыми переключателями:
Данная форма будет выглядеть так:
Первый переключатель (со значением yes
) активен по умолчанию (мы установили атрибут checked
).
Как только пользователь нажмет кнопку "Отправить", скрипту script.php
будет передан параметр answer
(атрибут name
обоих переключателей) со значением yes
или no
(в зависимости от того, какой вариант выбрал пользователь).
А вот так выглядит текст скрипта , принимающий данные из рассмотренной формы и обрабатывающий ответ.
»
Кнопка отправки формы
Еще одним элементом управления типа INPUT
являются кнопки. Кнопка отправки служит для отправки скрипту ввведенных в форму параметров. Синтаксис тега INPUT
при этом такой:
Атрибут value
определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если атрибут name
для кнопки будет указан, то дополнительно к основным данным формы будет отправлена пара имя=значение
от самой кнопки.
»
Кнопка сброса параметров
Кроме кнопки submit
есть еще кнопка reset
, которая сбрасывает параметры формы, а точнее, устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки обеспечивает очистку формы, например, в случае, когда были введены неправильные параметры. Синтаксис кнопки сброса:
»
Кнопка отправки с рисунком
Вместо кнопки submit
можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit
. Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X
, y=коор_Y
. Синтаксис кнопки отправки с рисунком:
Многострочные текстовые поля. Тег TEXTAREA
В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA
. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA
:
Несколько значений относительно использования атрибутов: необязательные параметры cols
и rows
желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap
определяет тип переноса текста, как будет выглядеть текст в поле ввода:
Virtual
- справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER
;
Physical
- этот тип зависит от типа браузера и выглядит по-разному;
None
- текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.
Следует заметить, что наиболее удобным является тип Virtual
. Вот пример многострочного текстового поля с использованием атрибуту wrap=Virtual
.
Назначение форм HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка. Формы поддерживаются всеми популярными браузерами.
Синтаксис формы В HTML-документе для задания формы используются тэги
, Документ может содержать несколько форм, но они не могут быть вложены одна в другую.Тэг
Параметр action
является единственным обязательным. Его значением является URL-адрес CGI
-программы, которая будет обрабатывать информацию, извлеченную из данной формы.
Взаимодействие между браузером и web-сервером Взаимодействие между клиентом-браузером и Web-сервером осуществляется по правилам, заданным протоколом HTTP, и состоит из запросов клиента и ответов сервера. Запрос разбивается на три части. В первой строке запроса содержится HTTP-команда, называемая методом, URL-адрес запрашиваемого файла и номер версии протокола HTTP. Вторая часть - заголовок запроса. Третья часть - тело запроса, собственно данные, посылаемые серверу.
MIME-типы Одним из первых применений Интернета была электронная почта, ориентированная на пересылку текстовых сообщений. Часто возникает необходимость вместе с текстом переслать данные в нетекстовом формате, например, упакованный zip-файл, рисунок в формате GIF
, JPEG
и т. д. Для того, чтобы переслать средствами электронной почты такие файлы без искажения, они кодируются в соответствии с некоторым стандартом. Стандарт MIME
( Multipurpose
Internet Mail
Extensions, многоцелевые расширения электронной почты для Интернета) определяет набор MIME
-типов, соответствующих различным типам данных, и правила их пересылки по электронной почте. Для обозначения MIME
-типа используется запись вида тип/ подтип
, где тип определяет общий тип данных, например, text
, image
, application
(тип application
обозначает специфический внутренний формат данных, используемый некоторой программой), а подтип
- конкретный формат внутри типа данных, например, application/zip
, image/gif
, text/html
.
MIME
-типы нашли применение в Web, где они называются также медиа
-типами, для идентификации формата документов, передаваемых по протоколу HTTP. В HTML-форме
параметр enctype
определяет медиа
-тип, который используется для кодирования и пересылки специального типа данных
- содержимого формы.
Значением параметра enctype
является медиа
-тип, определяющий формат кодирования данных при передаче их от браузера к серверу. Браузер кодирует данные, чтобы исключить их искажение в процессе передачи. Возможны два значения этого параметра: (по умолчанию) и multipart/form-data
.
Второй метод нужен только в том случае, если к содержимому формы присоединяется локальный файл, выбранный при помощи элемента формы
. В остальных случаях следует использовать метод кодирования по умолчанию.
URL-кодирование Схема кодирования application/x-www-form-urlencoded
одинакова для обоих методов пересылки (GET
и POST
) и заключается в следующем. Для каждого элемента формы, имеющего имя, заданное параметром name
, формируется пара "name=value"
, где value
- значение элемента, введенное пользователем или назначенное по умолчанию. Если значение отсутствует, соответствующая пара имеет вид "name="
. Для радиокнопок и переключателей используются значения только выбранных элементов. Если элемент выбран, а значение параметра value
не определено, по умолчанию используется значение "on"
.
Все пары объединяются в строку, в качестве разделителя служит символ "&"
. Так как имена и значения представляют собой обычный текст, то они могут содержать символы, недопустимые в составе URL (метод GET
пересылает данные как часть URL). Такие символы заменяются последовательностью, состоящей из символа %
и их шестнадцатеричного ASCII- кода. Символ
пробела может заменяться не только кодом %20
, но и знаком +
(плюс). Признак конца строки, встречающийся в поле textarea
, заменяется кодом %0D%0A
. Такое кодирование называется URL-кодированием
.
Методы передачи данных Закодированная информация пересылается серверу одним из методов GET
или POST
. Основное отличие заключается в том, как метод передает информацию CGI
-программе.
При использовании метода GET
данные формы пересылаются в составе URL-запроса, к которому присоединяются после символа "?"
в виде совокупности пар
переменная = значение,
разделенных символом "&"
. В этом случае первая строка запроса может иметь следующий вид:
GET /cgi-bin/cgi-program.pl?name=Ivan&surname=Ivanov HTTP/1.1
Часть URL после символа "?"
называется строкой запроса
. Web-сервер, получив запрос, присвоит переменной среды
QUERY_STRING
значение строки запроса
и вызовет CGI
-программу, обозначенную в первой части URL до символа "?"
.
При использовании метода POST
данные формы пересылаются серверу в теле запроса, после чего передаются сервером в CGI
-программу через стандартный ввод
.
Методы GET
и POST
имеют свои достоинства и недостатки. Метод GET
обеспечивает лучшую производительность при пересылке форм, состоящих из небольшого набора коротких полей. При пересылке большого объема данных следует использовать метод POST
, так как браузер или сервер могут накладывать ограничения на размер данных, передаваемых в составе URL, и отбрасывать часть данных, выходящую за границу. Метод POST
, к тому же, является более надежным при пересылке конфиденциальной информации
.
Поля ввода формы Форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги:
,
, < textarea
>
, которые употребляются только внутри тэга
Тэг
Это наиболее употребительный тэг, с помощью которого можно генерировать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Он имеет два обязательных параметра: type
и name
. Параметр type
определяет тип поля: селекторная кнопка, кнопка передачи и др. Параметр name
определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные параметры меняются в зависимости от типа поля. Ниже приведено описание типов полей, создаваемых при помощи тэга
, и порождаемых ими элементов ввода.
type="text" Создает элемент для ввода строки текста.
Дополнительные параметры:
maxlength="n"
- задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию - не ограничено.
size="n"
- максимальное количество отображаемых символов.
value = "начальное_значение"
. Первоначальное значение текстового поля.
type="password" Создает элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа *
. Поле password
не обеспечивает безопасности введенного текста, так как на сервер он передается в незашифрованном виде.
type="files" Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse
. Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или выбрать его из диалогового окна. Для корректной передачи присоединенного файла следует установить значения параметров формы равными enctype="multipart/form-data"
и method="post"
. В противном случае будет передана введенная строка, то есть маршрутное имя
файла, а не его содержимое. Дополнительные параметры maxlength
и size
имеют тот же смысл, что и для элементов типа text
и password
.
type="checkbox" Создает поле для установки флажка. Элементы checkbox
можно объединить в группу, установив одинаковое значение параметра name
.
Дополнительные параметры:
value="строка"
. Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value
всех установленных флажков.
checked
. Если указан параметр checked
, элемент является выбранным по умолчанию.
type="radio" Создает элемент-переключатель, существующий только в составе группы подобных элементов, из которых может быть выбран только один. Все элементы группы должны иметь одинаковое значение параметра name
.
Отображается в виде круглой кнопки. Дополнительные параметры:
value="строка"
. Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы
.
checked
. Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот параметр.
type="submit" Создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде прямоугольной кнопки с надписью Submit
.
Дополнительный параметр позволяет изменить надпись на кнопке. Параметр name
для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер.
Если параметры name
и value
присутствуют, например,
,
то в список параметров формы, передаваемых на сервер, включается параметр submit_button="ok"
. Внутри формы могут существовать несколько кнопок передачи.
type="reset" Создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset
. Надпись можно изменить при помощи дополнительного параметра
value="название_кнопки"
Значение кнопки Reset
никогда не пересылается на сервер, поэтому у нее отсутствует параметр name
.
type="image" Создает элемент в виде графического изображения, действующий аналогично кнопке Submit
. Дополнительные параметры:
src="url_изображения"
. Задает URL-адрес файла с графическим изображением элемента.
align="тип_выравнивания"
. Задает тип выравнивания изображения относительно текущей строки текста.
Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде name.x=n&name.y=m
включаются браузером в список параметров формы, посылаемых на сервер.
HTML. Формы и их атрибуты
Элементы форм знакомы всем пользователям современной глобальной сети. Это поля ввода текста и пароля, стандартные кнопки, радиокнопки-переключатели, «флажки», выпадающие списки и т.д. Наиболее очевидные варианты применения: ввод ключевых слов в поисковых системах, работа с электронной почтой через веб-интерфейс, регистрация на сайте, веб-анкеты, online-тесты. Сразу заметим, что использование форм предполагает интерактивность и, следовательно, обеспечение функциональности неизбежно связано с программированием (клиентским или серверным). Пожалуй, в большинстве случаев формы используются для передачи данных на сервер, однако и на стороне клиента есть задачи, в которых удобно применение форм (например, календарь или калькулятор).
Роль HTML состоит в описании необходимых элементов и компоновке их на странице. Все атрибуты форм и их элементов, описанных с помощью HTML, транслируются в соответствующие свойства объектов DOM и используются при создании сценариев JavaScript.
Описания управляющих элементов форм, призванных обеспечивать необходимую функциональность, должны быть расположены в контейнере form, атрибуты которого существенны на этапе разработки сценариев. Основные атрибуты элемента form
:
атрибут
описание
возможные значения
name
имя
action
адрес файла серверного сценария, который будет обрабатывать заполненную и переданную форму
method
метод передачи данных серверу
get
post
enctype
тип содержимого, используемый для отправки формы на сервер
multipart/form-data
accept-charset
список кодировок символов ввода данных, которые будут обрабатываться сервером
target
onSubmit
сценарий JavaScript, выполняемый перед отправкой данных формы на сервер
onReset
сценарий JavaScript, выполняемый при сбросе значений элементов формы в значения по умолчанию
Внимательно прочитав описания атрибутов, заметим, что большинство из них актуальны при обработке данных формы серверным сценарием. Три атрибута имеют значения по умолчанию (что, вообще говоря, нехарактерно для HTML).
Все вышеперечисленные атрибуты формально необязательны, однако
при работе на стороне клиента необходимо задавать имя формы name
, чтобы иметь возможность обращаться к элементам формы из сценария JavaScript;
отправка данных формы на сервер требует, как минимум, указания атрибута action
, определяющего серверный сценарий обработки.
Смысл, по крайней мере, двух атрибутов необходимо пояснить более подробно.
Атрибут method
Атрибут method имеет два основных возможных значения: get (по умолчанию) и post.
Смысл этих значений следующий. При передаче данных методом get данные формы отправляются на сервер в заголовке запроса, а при использовании метода post – в теле запроса. Передача текстовых данных может осуществляться любым из этих методов. А вот бинарные данные могут быть отправлены только методом post. Это происходит в случае загрузки файла не сервер (всем понятный пример – приложение к электронному письму). Кстати, в этом случае необходимо указать enctype=”multipart/form-data” (см. далее примечения к атрибуту enctype).
Итак, за исключением случая передачи бинарных данных, равным образом можно применять оба возможных метода. На сложность разработки серверного сценария, принимающего данные из формы, это никоим образом не влияет. Какой же метод предпочтителен? Имеет смысл внимательно рассмотреть имеющиеся в сети ресурсы и убедиться, что в подавляющем большинстве случаев применяется метод get
(например, в поисковых системах). Можно ли считать это негласным эмпирическим правилом? Для ответа на этот вопрос следует сравнить методы get
и post
по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя.
Необходимо учитывать, что максимальный объем данных, передаваемых методом get
, ограничен, в зависимости от настроек протокола, и в любом случае не может превышать 8192 Кб.
Передача конфиденциальной информации методом get, несомненно, представляет определенную угрозу безопасности, так как get-строка остается в журналах всех промежуточных серверов и прокси-сервера.
С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса.
При передаче методом get пользователь имеет удовольствие видеть данные формы в адресной строке. Символы, отличные от стандартной латиницы кодируются. Например, пробелу соответствует код %20 . Каждый из нас постоянно наблюдает такую ситуацию, работая с поисковыми системами. Зададим, например в Яndex ключевое словосочетание «язык HTML
» и увидим в адресной строке:
Слово «язык
» закодировано последовательностью %FF%E7%FB%EA, а «HTML» передается как есть. Получив такой запрос, соответствующая серверная программа обратится к базе данных и, в конечном счете, сгенерирует и отправит браузеру список результатов поиска. Приятно ли смотреть на такую адресную строку? Нет. Зато пользователь может сохранить уникальную закладку на сгенерированную страницу.
При передаче методом post данные формы также отправляются на сервер. При этом пользователь не видит в адресной строке ничего «лишнего». Зато появляются другие проблемы: попытка обновить страницу вызывает маловразумительное для большинства пользователей сообщение: «… обновление страницы невозможно без повторной отправки данных…». И закладку не сохранить.
Резюме. По-видимому, в большинстве типичных задач следует выбирать заданный по умолчанию метод get
во всех случаях, кроме
передачи на сервер:
бинарных данных,
конфиденциальной информации,
данных большого объема.
Атрибут enctype
Этот атрибут имеет два возможных значения:
application/x-www-form-urlencoded
(по умолчанию)
multipart/form-data
Первое значение используется в абсолютном большинстве случаев. Нет смысла указывать его явно – оно и так предполагается по умолчанию. Второй же тип кодировки (multipart/form-data
) указывается в единственном случае: при загрузке на сервер бинарного файла. При этом обязательно задание атрибута method=”post”
.
Понравилась статья? Поделиться с друзьями: