HTML-формы. Формы в HTML Значения от и до в форме html
Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось ввести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.
Итак, пользователь загрузил себе Web-страницу, на которой располагаются органы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе. Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при помощи самых различных технологий программирования. Объединяет их лишь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway Interface). Поэтому обрабатывающие программы часто называют CGI-приложениями или CGI-скриптами.
Итак, приложение получает данные и обрабатывает их. Затем оно может либо послать некое электронное письмо, либо произвести некоторую операцию в базе данных, или передать пользователю новую Web-страницу, возможные действия ограничиваются лишь свойствами технологии и фантазией программиста. При помощи подобных программ действуют всевозможные системы регистрации, обратной связи, гостевые книга, форумы, чаты. С их помощью создаются и более разветвленные и сложные системы, например, online-магазины.
Для того чтобы создавать подобные приложения все-таки необходимо уметь программировать и знать соответствующие правила создания CGI-приложений. До, тех пор, пока мы этого не умеем, нам остается пользоваться опять-таки общедоступными CGI-скриптами. Но если мы и получим эти приложения, то форму для ввода данных пользователем необходимо все равно делать самостоятельно. В данном разделе мы научимся это делать.
Форма ограничивается тегами и . Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут размещаться в таблице, которая в свою очередь полностью размещается в форме. Тег не создает какой-либо отображаемой структуры. Он, скорее предназначен для внутренней группировки объектов.
Тег
, по сути, создают контейнер для размещения органов ввода информации. Большая часть этих органов ввода реализуется при помощи тега . Продемонстрируем это на небольшом примере (рис. 1.32).Листинг 1.33
"http://www.w3.org/TR/html4/strict.dtd">
<р>Поле для ввода строки текста < 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 используется только для независимых переключателей и радиокнопок. Он устанавливает их начальное состояние. Если этот параметр будет введен в тег <input> , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
- Параметр disabled делает орган управления недоступным для использования пользователем. Параметр используется без значений.
- Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отображаемые в этих полях, нельзя будет изменять.
- Параметр size обычно задает размеры органа ввода данных. Но для каждого отдельного типа органов ввода его действие специфично.
- Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстового ввода. Значением параметра является целое положительное число.
- Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
- Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
- Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
- Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.
Итак, мы рассмотрели параметры, применяемые в теге . Но мы уже знаем, что при помощи данного тега мы можем создавать самые различные объекты форм. Пришло время детально разобраться с ними.
Объекты, входящие в форму, разделяются на два типа - органы ввода данных и кнопки, инициирующие различные действия. Сначала посмотрим, как мы можем создавать органы ввода.
Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи параметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые пользователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.
Существует модификация однострочного поля ввода текста, которая предназначена именно для ввода секретной информации, например, паролей. Они в отображают вводимый текст, а заменяют его звездочками. Создание подобных полей ввода производится при помощи следующей конструкции:
Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При этом используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.
Также мы можем создавать группы переключателей, которые часто называют
зависимыми переключателями. В этой группе пользователь может выбирать
и помечать только один переключатель. Каждый переключатель создается при
помощи тега
Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.
Листинг 1.34
:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
,
<р>Поле для ввода строки текста
<р>Поле для ввода пароля
<р>Независимый переключатель
<р>Группа переключателейр>
<р>Альтернатива 1
<р>Альтернатива 2