Какой элемент позволяет осуществить отправку формы. Формы в HTML. Группа пунктов списка

Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось ввести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.

Итак, пользователь загрузил себе Web-страницу, на которой располагаются органы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе. Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при помощи самых различных технологий программирования. Объединяет их лишь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway Interface). Поэтому обрабатывающие программы часто называют CGI-приложениями или CGI-скриптами.

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

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

Форма ограничивается тегами и . Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут размещаться в таблице, которая в свою очередь полностью размещается в форме. Тег не создает какой-либо отображаемой структуры. Он, скорее предназначен для внутренней группировки объектов.

Тег , естественно, обладает целым рядом параметров, которые задают свойства создаваемой формы. Рассмотрим эти параметры.

• Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и будет, обрабатывать данные, введенные пользователем при помощи органа управления данной формы.
• Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значения параметра используется одно из двух предустановленных ключевых cлов: get или post . Сейчас нам нет нужды узнавать, какие механизмы peaлизуются при помощи того или иного метода. Так или иначе, в сопроводительной документации CGI-приложения указывается, какой метод neредачи данных следует использовать. По умолчанию используется значек get.
• Параметр enctype используется для указания типа передаваемых данных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded , используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений.
• Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых файлов. В качестве значения данного параметра используется текстовая строка, в которой записывается одно или несколько названий кодировок. В том случае, если применяется несколько кодировок, их наименование разделяются пробелами или запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками
• Параметр accept задает типы передаваемых файлов. Обычно не используется, так как сервер вполне в состоянии сам адекватно распознать тип принимаемого файла.
• Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице может находиться несколько форм. В этом случае значения параметров name у них не должны совпадать.

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

Листинг 1.33

Поле для ввода строки текста < input type="text">

Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33

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

• Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
• Параметр name предназначен для установки уникальных имен для каждого органа управления. Несмотря на то, что параметр не является обязательным, настоятельно рекомендуется использовать его. В сопроводительной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
• Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользователю, но именно это значение получить обрабатывающее CGI-приложение если пользователь выберет соответствующий переключатель.
• Параметр cheked используется только для независимых переключателей и радиокнопок. Он устанавливает их начальное состояние. Если этот параметр будет введен в тег , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
• Параметр disabled делает орган управления недоступным для использования пользователем. Параметр используется без значений.
• Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отображаемые в этих полях, нельзя будет изменять.
• Параметр size обычно задает размеры органа ввода данных. Но для каждого отдельного типа органов ввода его действие специфично.
• Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстового ввода. Значением параметра является целое положительное число.
• Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
• Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
• Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
• Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

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

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

Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи параметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые пользователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.

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

Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При этом используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.

Также мы можем создавать группы переключателей, которые часто называют зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создается при помощи тега с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.

Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.

Листинг 1.34

:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
,

Поле для ввода строки текста