HTML / 9. Формы

Тег <form>

Форма может располагаться в любом месте тела документа, между тегом <form> и его закрывающим тегом </form>. Вы можете, и мы рекомендуем вам это делать, включать в формы обычное содержимое тела документа, чтобы надписывать поля ввода и снабжать пользователя инструкциями.

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

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

Атрибут action
Обязательный атрибут action тега <form> задает URL приложения, которое должно получить и обработать данные формы. Большинство веб-мастеров хранят обрабатывающие формы приложения в специальном каталоге на своем веб-сервере, который обычно называется cgi-bin, что означает Common Gateway Interface-binaries1. Хранение этих специальных программ и приложений, обрабатывающих формы, в едином
каталоге укрепляет безопасность сервера и облегчает его администрирование.

Типичный тег <form> с атрибутом action выглядит примерно так:

<form action="http://www.kumquat.com/cgi-bin/update">
...
</form>

URL из примера говорит броузеру, чтобы тот связался с сервером www в домене kumquat.com и передал значения пользовательской формы приложению с названием update, расположенному в каталоге cgi-bin.

В целом, если вы видите URL, указывающий на документ в каталоге cgi-bin, то можно с большой долей уверенности считать, что этот документ в действительности является приложением, которое всякий раз при вызове динамически создает новую HTML-страницу.

Атрибут enctype
Перед тем как передавать данные серверу, броузер их специальным образом кодирует, чтобы они не были перемешаны или испорчены при передаче. И это дело сервера – раскодировать параметры или передать их приложению в закодированном виде.
Стандартной кодировкой является Internet Media Type «application/xwww-form-urlencoded». Вы можете изменить эту кодировку при помощи не являющегося обязательным атрибута enctype тега <form>. Единственными возможными вариантами в настоящее время являются
«multipart/form-data» и «text/plain».

Вариант multipart/form-data необходимо использовать с формами, содержащими поле выбора файла, который загружает пользователь. Формат text/plain следует применять вместе с mailto-URL в атрибуте action при посылке форм не на сервер, а по адресу электронной почты.
Если в форме нет полей выбора файла и если не нужно применять mailto-URL в атрибуте action, вероятно, следует игнорировать этот атрибут и просто положиться на то, что броузер и обрабатывающий сервер будут пользоваться принятым по умолчанию типом кодировки.

Кодировка application/x-www-form-urlencoded
Стандартная кодировка – application/x-www-form-urlencoded – преобразует все пробелы в значениях формы в знаки «плюс» (+), символы, отличные от латинских букв и цифр, – в знак процента (%), за которым следуют две шестнадцатеричные цифры, являющиеся ASCII-кодом символа, а разрывы строк в многострочных данных – в %0D%0A.

Стандартная кодировка включает также имя каждого поля формы. «Поле» – это отдельный элемент формы, значение которого может быть почти любым текстом (от одного числа до нескольких строк), скажем, адресом пользователя. Если в поле несколько значений, они разделяются амперсандами.

Например, вот что броузер посылает серверу после того, как пользователь заполнил форму с двумя полями ввода, имена которых name и address. В первом поле только одна строка текста, тогда как второе содержит несколько строк ввода:

name=O'Reilly+Media&address=1005+Gravenstein+Highway+North%0D%0A
Sebastopol,%0D%0ACA+95472

Мы разбили значение на две строки1 для удобства чтения, но в реальности броузер посылает данные в виде сплошной записи. Поле name содержит «O’Reilly Media», и значение поля address после раскодирования таково:

1005 Gravenstein Highway North
Sebastopol,
CA 95472

Кодировка multipart/form-data
Кодировка multipart/form-data включает поля формы в виде отдельных частей в состав одного документа, соответствующего стандарту MIME. У каждого поля в результирующем файле есть соответствующий сегмент, отделенный от сегментов соседей стандартным разделителем. В каждом сегменте одна или несколько заголовочных строк определяют имя поля, за которым следуют одна или несколько строк, содержащих его значение. Поскольку часть, содержащая значения, может заключать в себе двоичные данные или не отображаемые по другой причине символы, по отношению к передаваемым данным не предпринимается никакого кодирования или символьного преобразования. Эта кодировка по своей природе более сложная и длинная по сравнению с application/x-www-form-urlencoded. Поэтому она применяется, только когда атрибуту method тега <form> присвоено значение post.Простой пример позволяет легко уяснить себе этот формат. Здесь приведен наш предыдущий пример, но переданный в кодировке multipart/form-data:

------------------------------146931364513459
Content-Disposition: form-data; name="name"
O'Reilly Media
------------------------------146931364513459
Content-Disposition: form-data; name="address"
1005 Gravenstein Highway North
Sebastopol,
CA 95472
------------------------------146931364513459--

Первая передаваемая строка определяет разделитель, который будет появляться перед каждым сегментом документа. Разделитель всегда состоит из тридцати тире (–) и длинного случайного числа, отличающего его от другого текста, который может появиться в настоящих значениях полей.

Следующие строки содержат заголовочные поля первого сегмента. Среди них всегда есть поле Content-Disposition, указывающее, что сегмент включает данные формы, и сообщающее имя элемента, значение которого передается в этом сегменте. Бывают и другие заголовочные поля, в частности, некоторые поля выбора файла содержат заголовочное поле Content-Type, указывающее тип данных в передаваемом файле.
После заголовков идет одна пустая строка, за которой следует действительное значение поля в одной или нескольких строках. Сегмент завершается повторением разделительной строки, с которой начинается передача. Следующий сегмент начинается сразу за разделителем и далее по шаблону, пока все параметры формы не будут переданы. Конец
передачи обозначается двумя дополнительными тире в конце последней разделительной строки.

Как мы уже говорили, используйте кодировку multipart/form-data только в случае, когда форма содержит поле выбора файла. Приведем пример того, как может выглядеть передача поля выбора файла:

------------------------------146931364513459
Content-Disposition: form-data; name="thefile"; filename="test"
Content-Type: text/plain
First line of the file1
...
Last line of the file
------------------------------146931364513459--

Единственное существенное отличие состоит в том, что поле Content-Disposition содержит добавочный элемент filename, определяющий имя передаваемого файла. В таком сегменте может находиться и поле Content-Type, дополнительно описывающее содержимое файла.

Кодировка text/plain
Используйте эту кодировку только в том случае, если у вас нет доступа к обрабатывающему формы серверу и нужно послать информацию по электронной почте (атрибут формы action имеет значением mailto-URL). Традиционные кодировки предназначены для компьютеров, text/plain разрабатывался для людей. В этой кодировке каждый элемент формы помещается на отдельной строке, имя поля формы и его значение разделяются знаком равенства. Возвращаясь к нашему примеру с именем и адресом пользователя, в этой кодировке мы получим:

name=O'Reilly Media
address=1005 Gravenstein Highway North%0D%0ASebastopol,%0D%0ACA 95472

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

Атрибут accept-charset
Атрибут accept-charset введен в стандарте HTML 4.0. Он позволяет указать список наборов символов (character set), которые должен поддерживать сервер, чтобы надлежащим образом интерпретировать данные формы. Значением этого атрибута служит заключенный в кавычки список названий наборов символов по стандарту ISO. Если среди приемлемых наборов отсутствует тот, который установлен пользователем, броузер может самостоятельно решать, следует ли ему проигнорировать форму или обработать ее особым образом. По умолчанию значением атрибута является unknown, подразумевающее, что наборы символов формы и документа, ее содержащего, совпадают.

Атрибут method
Второй обязательный атрибут тега <form> устанавливает метод, посредством которого броузер передает серверу для обработки данные формы. Существуют два подхода: метод POST и метод GET. Если атрибут method не указан, применяется метод GET.

Следуя методу POST, броузер передает данные в два шага: во-первых, броузер устанавливает связь с обрабатывающим форму сервером, адрес которого указан в атрибуте action, и, во-вторых, когда связь установлена, посылает данные серверу в отдельном сеансе связи.Ожидается, что со стороны сервера уже запущенные приложения типа POST начнут читать данные, расположенные стандартным образом.

Прочитанные данные должны быть декодированы, прежде чем удастся использовать значения формы. Именно сервер в точности определяет, на что могут рассчитывать POST-приложения при получении своих параметров.

Метод GET, напротив, соединяется с обрабатывающим форму сервером и отправляет данные за один шаг: броузер через вопросительный знак дописывает к URL данные из атрибута action.

Обычные броузеры могут передавать данные формы любым из этих методов. Некоторые серверы получают данные либо тем, либо другим способом. Вы указываете, какой из двух методов – POST или GET – использует ваш обрабатывающий формы сервер, присваивая значение атрибуту method тега <form>. Вот полный тег, включающий способ передачи GET в атрибуте method для формы из предыдущего примера:

<form method=GET
action="http://www.kumquat.com/cgi-bin/update">
...
</form>

POST или GET?
Какой из двух методов следует использовать, если сервер поддерживает оба – и POST, и GET? Вот несколько практических советов:

• Для наиболее быстрого получения результатов передачи маленькие формы с небольшим числом коротких полей посылайте методом GET.

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

• Если у вас нет опыта в написании приложений, обрабатывающих формы со стороны сервера, применяйте GET. Лишние действия, связанные с чтением и декодированием параметров, передаваемых по методу POST, хотя и не слишком трудны, все же, возможно, не заслуживают того, чтобы с ними связываться.

• Если защищенность данных представляется важной, используйте POST. GET помещает параметры формы прямо в URL приложения, где они могут быть легко перехвачены сетевыми анализаторами пакетов или выделены из регистрационного журнала сервера. Если параметры содержат секретную информацию, такую как номер кредитной карты, вы можете нанести вред своим пользователям.

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

• Если вы хотите вызвать находящееся за пределами царства форм серверное приложение, требующее передачи ему параметров, используйте GET, поскольку он позволяет включить в URL приложения параметры тем же способом, что и параметры формы. Приложения типа POST, напротив, ожидают дополнительной передачи данных от броузера после URL, чего нельзя достичь, употребляя традиционный тег (a).

Явная передача параметров
Предпошлем следующему совету необходимые объяснения. Предположим, у вас есть простая форма с двумя элементами по имени x и y. В закодированном виде значения этих элементов выглядят примерно так:

x=27&y=33

Если форма применяет метод GET, броузер добавляет в виде префикса URL-адрес приложения, выполняющего обработку на сервере, например, так:

http://www.kumquat.com/cgi-bin/update?x=27&y=33

Не существует ничего, что могло бы вам помешать создать обычный тег (a), вызывающий форму, с какими угодно параметрами, скажем, так:

(a href="http://www.kumquat.com/cgi-bin/update?x=19&y=104")

Одно только нехорошо – амперсанд, разделяющий параметры, служит также для обозначения вставленного кода символа. Броузер, встретив амперсанд в атрибуте href тега (a), попытается заменить следующие за ним символы на символ, который, как представляется броузеру, здесь закодирован.

Чтобы этого не случилось, вы должны заменить символ амперсанда его кодом: либо &, либо & (см. приложение F). После этой подстановки наш пример не использующего формы обращения к серверному приложению будет выглядеть так:

(a href="http://www.kumquat.com/cgi-bin/update?x=19&y=104")

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

Атрибут target
Применяя фреймы, можно перенаправить результаты обработки формы в другое окно или фрейм. Просто добавьте в тег <form> атрибут target и присвойте ему имя фрейма или окна, которые должны принять результат.Как и в случае атрибута target для тега (a), можно использовать множество специальных имен с атрибутом target в теге <form> для создания нового окна или для замещения содержимого существующих окон или фреймов.

Атрибуты id, name и title
Атрибут id позволяет прикрепить к форме метку, представляющую собой уникальную в документе строку, предназначенную для обращения к этой форме со стороны программ (апплетов или сценариев) и гиперссылок. До того как HTML 4.0 ввел id, Netscape использовал атрибут name для получения подобного результата, хотя его и нельзя было применять в гиперссылках. Для достижения согласия с как можно большим числом броузеров мы рекомендуем употреблять с тегом <form> оба атрибута – name и id, если это оказывается необходимым. В будущем для такой цели можно будет использовать только id.
Атрибут title определяет заключенное в кавычки строковое значение, которое помечает форму. Однако название помечает ее только в качестве сегмента документа – это значение не может применяться для ссылок на форму в апплетах, сценариях и гиперссылках.

Атрибуты class, style, lang и dir
Атрибут style создает встроенный стиль для элементов формы, преодолевая любые другие действующие стилевые правила. Атрибут class позволяет применять к содержимому тега стиль, заранее определенный для данного класса тегов <form>. Значение атрибута class – это имя данного класса.

Действительный эффект атрибута style с тегом <form>, однако, предсказать трудно. В целом стилевые свойства действуют на содержимое тела, в частности текст, которое можно включить как часть содержимого формы, но стили тега <form> будут действовать на характеристики отображения элементов формы.

Например, можно создать стили цвета фона и особого начертания шрифта для формы. Текстовые метки формы, но не текст в полях ввода, будут отображаться указанным шрифтом на указанном фоне. Подобным образом текстовые подписи рядом с кнопками, но не сами кнопки, будут выводиться с применением стиля, определенного в форме. Атрибут lang дает возможность определить язык, который употребляется в форме, а атрибут dir позволяет рекомендовать броузеру, в каком направлении следует выводить текст. Значение атрибута lang – это двухбуквенный код языка по стандарту ISO, включающий необязательный языковой модификатор. К примеру, lang=en-UК сообщает броузеру, что содержимое формы написано по-английски, причем так, как говорят и пишут в Великобритании (United Kingdom). Предполагается, что броузер как-то отразит в макете и типографских решениях ваш выбор языка.

Атрибут dir сообщает броузеру, в каком направлении следует отображать содержимое формы: слева направо (dir=ltr), как в русском, английском или французском языках, или справа налево (dir=rtl) для таких языков, как китайский или иврит.

Атрибуты dir и lang поддерживаются популярными броузерами, хотя для конкретных языков какого-то особого поведения броузеров не предусмотрено.

Атрибуты событий
Как и большинство других элементов документа, тег <form> допускает стандартные атрибуты событий, инициируемых с помощью мыши и клавиатуры, которые распознают броузеры, следующие стандартам.

У форм есть два особых атрибута событий: onSubmit и onReset. Значением этих атрибутов событий служат заключенные в кавычки одно или несколько разделенных точками с запятой выражений JavaScript, методов или ссылок на функции. С атрибутом onSubmit броузер исполняет эти команды перед тем, как действительно передать данные формы
серверу или послать их по электронной почте.

Вы можете использовать событие onSubmit для самых разных эффектов. Самый популярный состоит в проверке со стороны клиента правильности заполнения формы. Программа просматривает данные в форме и подсказывает пользователю заполнить один или несколько пропущенных им элементов. Другое и гораздо более простое употребление состоит в информировании пользователя, что форма с mailto-URL отправляется по электронной почте.

Атрибут onReset применяется точно так же, как атрибут onSubmit, за исключением того, что ассоциированный с ним программный код исполняется, только когда пользователь нажимает кнопку «Reset» формы.

Статьи по HTML на эту тему:

Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Многострочные области ввода текста
Получение данных из форм при помощи электронной почты
Программирование форм

Вернуться в раздел: HTML / 9. Формы