Работа с формами в HTML

 

Содержание: 
 
 

  
 

 

 Введение

 

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

      Например, регистрации посетителя на сайте, отправка через сайт текстовой информации на e-mail, загрузка на сайт (сервер) какой-то графической информации через веб-страницу, формы для расширенного поиска какой-то информации и.т.д.

      HTML-форма  является связующим звеном между посетителем сайта и программой на удаленном сервере. Что же собой представляет форма?

      Форма – это область на веб-странице, которая содержит специальные средства и возможности (текстовые поля, кнопки и.т.д.), которые позволяют посетителю сайта передать какую-то информацию на сервер.

 

1. Описание html форм.

     Некоторые браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW - сервере. Когда форма интерпретируется WEB - браузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые (прокручиваемые) списки, кнопки и т.д.

     Когда пользователь заполняет форму и  нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

     Когда вы описываете форму, каждый элемент  ввода данных имеет тэг <INPUT>. Когда  пользователь помещает данные в элемент  формы, инфоромация размещается  в разделе VALUE данного элемента.

1. Синтаксис форм.

 

Все формы  начинаются тэгом <FORM> и завершаются тэгом </FORM>.

<FORM METHOD="get|post" ACTION="URL">

элементы_формы_и_другие_элементы_html </FORM> 

METHOD

Метод посылки сообщения с данными  из формы. В зависимости от используемого  метода вы можете посылать результаты ввода данных в форму двумя  путями: 

• GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.

 

• POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.

 

ACTION

ACTION описывает  URL, который будет вызываться для обработки формы.

2. Тэги  формы

 

TEXTAREA

Тэг <TEXTAREA> используется для того, чтобы позволить  пользователю вводить более одной  строки информации (свободный текст). Вот пример использовани тэга <TEXTAREA>:

<TEXTAREA NAME="address" ROWS=10 COLS=50>Москва,Дмитровкое шоссе,д.9Б, офис 448 </TEXTAREA>

Атрибуты, используемые внутри тэга <TEXTAREA> описывают  внешний вид и имя вводимого  значения. Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:

• NAME - имя поля ввода
• ROWS - высота поля ввода в символах
• COLS - ширина поля ввода в символах

 

Если  вы хотите, чтобы в поле ввода  по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>. 
 

INPUT

Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:

• CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.
• MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности.
• NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
• SIZE - определяет визуальный размер поля ввода на экране в символах.
• SRC - URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).
• VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)
• TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.

CHECKBOX

Используется  для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может  принимать значение ON или OFF.

PASSWORD

То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране.  
 
 

RADIO BUTTON

     Данный  атрибут позволяет вводить одно значение из нескольких альтернатив. Для  создания набора альтернатив вам  необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране. 

RESET

     Данный  тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. 

SUBMIT

     Данный  тип обозначает кнопку, при нажатии  которой будет вызвана CGI-программа (или URL), описанная в заголовке  формы. Атрибут VALUE может содержать  строку, которая будет высвечена на кнопке. 

TEXT

     Данный  тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

3. Меню  выбора в формах

SELECT

     Тэг SELECT позволяет пользователю выбрать  значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

     Тэг SELECT имеет один или более параметр пежду стартовым тэгом <SELECT> и  завершающим </SELECT>.По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <SELECT>:

<FORM>

<SELECT NAME=group>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>

 

2. Создание  web-страницы с использованием форм html.

 

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

Шаг 1.

Для начала создадим пустую страницу HTML. Назовем ее «Регистрация». Затем создадим заголовок «Форма для  регистрации» в теле документа:

Шаг 2.

     Теперь  перейдем к главному. Во-первых, создадим поля для заполнения «Фамилия», «Имя» и «Город» при участии формы типа "textfield" – текстовое поле. Откроем тег  <form>. Сразу укажем URL, который будет вызываться для обработки формы, например, http://www.bestjob.com. Далее вводим название поля для заполнения: «Фамилия». Теперь при помощи тега <Input> вставим форму "textfield". Получится:

     Аналогично  создаем в регистрационной форме  поля ввода «Имя», «Город» и «E-mail». 

     Шаг 3.

      Теперь  сформируем поле ввода даты рождения. Сначала введем название поля: «Дата  рождения» Затем создадим само поле ввода. Сделаем это, используя форму «Меню». Она вводится при помощи тега <select>, который имеет атрибуты name – имя и (в данном случае "select") и  size – размер (в данном случае "1"). Чтобы в меню выпадали определенные значения, их необходимо задать, используя парный тег <option> </option>, значения записываются внутри тега.

      Создадим  меню «День». Вставим форму  «Меню», а затем пропишем значения для 31 дня.

     Также можно прописать значение по умолчанию, используя тег <option selected="selected">День</option>. Тогда при открытии страницы в данном меню будет написано «День».

 

Получится:

 

     Аналогично  создаем поля для ввода месяца и года рождения, просто меняя значения в теге <option>. Для меню «Год» выберем диапазон с 1970 по 1995. 

     Шаг 4.

     Создадим  поле для указания пола, используя  форму Radiobatton.

Синтаксис ввода:

<input name="radiobutton" type="radio" value="radiobutton" />.

Пропишем  его два раза: для женского и  мужского пола. 

     Шаг 5.

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

Синтаксис ввода:

<input type="checkbox" name="checkbox" value="checkbox" />.

Пропишем три  раза: для высшего, среднего и средне-специального образования. 

Шаг 6.

     Для регистрации на сайтах требуется  вести логин и пароль. С логином  все понятно – вставляем форму  “textfield”:

<input type="text" name="textfield" />.

     А вот при введении пароля мы привыкли видеть закодированные символы. Добиться этого нам помогает атрибут тега <input> – type. Задаем ему значение “password” вместо “text”, и вводимый пользователем пароль будет отображаться в виде символов. 

     Шаг 7.

     Заполнив  форму, пользователь должен отправить  ее по указанному адресу. Для этого  создадим кнопку Submit. Она при нажатии отправит данные по адресу, который был указан в описании тега формы (Action).

     Синтаксис ввода:

     <input name="Submit" type="submit" value="Отправить" />

       

     Шаг 8.

     Иногда  пользователю может понадобиться удалить  все данные из уже заполненной формы. На этот случай создадим кнопку «Очистить». Она вставляется также как и для передачи, но меняется значение атрибута type: указывается “reset”; ну и конечно же, меняется название самой кнопки (атрибут “value”).  

<input type="reset" name="Submit" value="Очистить форму" />

3. Результат

Выполнив  все указанные шаги, мы получим  следующий программный код:

<html>

<head>

</head>

<body>

<H2 ALIGN=CENTER> <FONT COLOR = "RED"> Форма для регистрации </FONT></H1>

     <form id="form name="form1" method="post" action="http://www.bestjob.com">

Фамилия<br>

   <input type="text" name="textfield" /> <br><br>

Имя<br>

     <input type="text" name="textfield2" /><br><br>