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

Формат контейнера <FORM> следующий:

<FORM action="url" method="POST">...</FORM>

Тэг <FORM> имеет следующие атрибуты:

• action="..." - обязательный параметр. Его значением является URL - адрес программы, которая будет обрабатывать содержимое формы.
• method="..." - определяет метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие:
  • GET - этот метод используется броузером по умолчанию и осуществляет присоединение содержимого заполненной формы к URL;
  • POST — при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.
• enctype="..." - задает тип кодирования содержимого заполненной формы. Если значение атрибута не установлено, по умолчанию предполагается application/x-www-form-urlencoded.

Внутри контейнера <FORM> могут находиться любые теги, кроме другого контейнера <FORM>. Для создания полей для ввода данных внутри формы применяют теги <INPUT>, <SELECT> и <TEXTAREA>.

Тег <INPUT> используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты.

• value="значение" - для полей ввода текста text или пароля password используется для задания начального содержания поля, а для checkbox или radio задает значение, когда элемент находится в отмеченном состоянии.
• size="n" - задает физический размер поля ввода в символах, действует для элементов ввода текста или пароля.
• maxlength="n" - определяет максимальное количество введенных символов, которые будут приниматься для ввода.
• name= "идентификатор" - имя для создаваемого поля ввода, используемое для идентификации при обработке данных сервером.
• type= "параметр" - задает тип создаваемого элемента ввода; этот параметр может принимать одно из следующих значений:
  • text - создает поле для ввода текста. Это значение используется по умолчанию.
  • password — создает поле ввода пароля, аналогичное типу "text", но при этом вводимые символы отображаются на экране звездочками;
  • file - создает поле для ввода имени локального файла, который необходимо куда-то послать. Сопровождается созданием кнопки "Обзор":
  • hidden — создает скрытый элемент не показываемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером. Может применятся, например, при обработке нескольких форм, поочередно отправляемых пользователем и каким-либо образом связанных между собой;
  • radio - создает радиокнопку - элемент-переключатель в составе группы, принимающий положения "включено" и "выключено", из которых может быть выбран только один из элементов;
  • checkbox - создает переключатель-поле для установки флажка "включено"/"выключено";
  • submit — создает кнопку передачи данных, действие которой сводится к отсылке содержимого заполненной формы на сервер;
  • image - определяется элемент в виде графического изображения, действующий аналогично кнопке "submit".
  • reset - создает кнопку, которая сбрасывает значения введенных полей в исходное состояние.

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

• name="идентификатор" - символьное имя для элемента <SELECT>, по которому он идентифицируется;
• size="n" - если значение равно 1 или если этот атрибут опущен, то элемент <SELECT> будет представлен как выпадающее меню; если size=2 или более, то элемент будет представлен как окно выбора, а значение будет определять количество видимых элементов списка;
• multiple - если этот атрибут присутствует, то допускается множественный выбор из списка.

И, наконец, контейнер <TEXTAREA> может быть использован для расположения многострокового поля ввода с необязательным содержимым в форме. Основными атрибутами тега <TEXTAREA> являются:

• name="..." - символьное имя поля ввода;
• rows="..." - число строк в поле ввода, то есть высота поля;
• cols="..." - число столбцов в поле ввода, то есть ширина поля.

action="..." - обязательный параметр. Его значением является URL - адрес программы, которая будет обрабатывать содержимое формы

Обработку данных, вводимых в формы, осуществляет программа, адрес которой указывается в атрибуте action="..." тэга <FORM>. Но далеко не все сервера, предоставляющее место для личных сайтов, разрешают работу таким программам, и сервер narod.ru не исключение. Поэтому для демонстрации примеров использовния форм мы будет отправлять содержимое формы не на сервер а по электронной почте адресату, которого вы сами укажите. Для этого в атрибуте action="..." прописывается макрокоманда отправки почтового сообщения:

<FORM ACTION="mailto:freeuser@mail.net"> ,

где freeuser@mail.net адрес электронной почты получателя. Для отправки содержимого формы в данном случае используется почтовая программа отправителя.

Теперь рассмотрим несколько примеров простейших форм ввода. В первой форме использован тег <INPUT> и несколько его атрибутов. Код формы приведен ниже:

<HTML>
<HEAD>
  <title>Пример простейшей формы</title>
</HEAD>

<BODY>

<FORM method="POST" name="student" 
        action="mailto:freeuser@mail.net" enctype="text/plain"> 

<P>Введите Ваше имя 
<INPUT type="text" name="Tl" size="45">

<P><INPUT type="radio" name="R1" value="V1">Учащийся ВУЗа

<P><INPUT type="radio" name="R1" value="V2">Другое 

<P><INPUT type="submit" value="Отправить данные" name="B1">

<INPUT type="reset" value="Очистить форму" name="B2"> 

</FORM>

</BODY>
</HTML>

Следующая форма проиллюстрирует варианты использования тэга <SELECT>, создающего списки в форме. Код формы:

<HEAD>
<TITLE>Создание списка</TITLE> 
</HEAD>
<BODY>

<TABLE> 

<TR>
 <TD>Выберите операционную систему, которую вы используете:</TD>
 <TD>Выберите операционную систему, которую вы используете:</TD>
 <TD>Выберите операционную систему, которую вы используете:</TD>
</TR> 

<TR> 
 <TD> 
  <FORM>
   <SELECT>
    <OPTION>Windows 3.11 
    <OPTION>Windows 95 
    <OPTION>Windows 98 
    <OPTION>Windows Me 
    <OPTION>Windows NT 
    <OPTION>Windows 2000 
    <OPTION>Windows XP 
    <OPTION>Linux 
    <OPTION>Unix 
    <OPTION>QNX 
   </SELECT> 
  </FORM> 
 </TD> 
 <TD> 
  <FORM>
   <SELECT size=3>
    <OPTION>Windows 3.11 
    <OPTION>Windows 95 
    <OPTION>Windows 98 
    <OPTION>Windows Me 
    <OPTION>Windows NT 
    <OPTION>Windows 2000 
    <OPTION>Windows XP 
    <OPTION>Linux 
    <OPTION>Unix 
    <OPTION>QNX 
   </SELECT> 
  </FORM> 
 </TD> 
 <TD> 
  <FORM>
   <SELECT multiple>
    <OPTION>Windows 3.11 
    <OPTION>Windows 95 
    <OPTION>Windows 98 
    <OPTION>Windows Me 
    <OPTION>Windows NT 
    <OPTION>Windows 2000 
    <OPTION>Windows XP 
    <OPTION>Linux 
    <OPTION>Unix 
    <OPTION>QNX 
   </SELECT> 
  </FOBM> 
 </TD> 
<TR> 

</TABLE> 

</BODY> 
</HTML>

А вот так будет выглядеть сама эта форма.

Cоздание текстовой области в форме:

<HTML>
<HEAD>
<TITLE>Соэдание простой формы для ввода текста</TITLE> 
</HEAD> 

<BODY>
Ваши предложения о работе сайта просьба оставлять здесь:<BR>

<FORM method="POST" name="student" 
        action="mailto:freeuser@mail.net" enctype="text/plain">
  <TEXTAREA name="textform" rows="10" cols="50">
  </TEXTAREA>
  <p><input type="submit" value= "Отправить" name="Bl">
     <input type="reset" value="Очистить" name="B2">
</FORM> 
</BODY> 
</HTML>

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

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