Как создать свой сайт - Создание форм

Создание форм.

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

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

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

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

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

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

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

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

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>

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

И последний пример иллюстрирует создание текстовой области в форме: 

<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> заключить какой-либо текст, то он будет выводиться при загрузке страницы.

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


Хостинг от uCoz