• METHOD. Задает метод – GET или POST. По умолчанию предполагается GET. Хотя большинство из существующих форм использует метод POST Различия между GET и POST, а также ситуации, в которых следует использовать тот или иной метод, будут рассмотрены при изучении CGI-программирования.
• ACTION. Задает имя программы, которая будет обрабатывать форму.
• ENCTYPE. Задает метод кодирования (обычно не задается). По умолчанию равен "application/x-www-form-urlencoded".
• NAME. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру.
• TARGET. Задается во фреймосодержащих документах. Определяет, в какой фрейм отправить полученную информацию.
• ONSUBMIT. Задает JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз некорректно заполнил какое-то поле.

<FORM METHOD="POST" ACTION="/cgi_bin/grill.pl"
     ONSUBMIT="alert('Некого посылать');return false;">
 ...Элементы формы...
 </FORM>

Контейнер <FORM>…</FORM> существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.Контейнер <FORM>…</FORM> существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.

Элементы форм

• NAME. Задает название информации. Обязательный атрибут.
• ROWS. Задает высоту поля, т.е. число строк в нём.
• COLS. Задает ширину поля, т.е. длину строки.
• disabled. Запрещает доступ пользователя к элементу формы. Поле не может быть выбрано. Значение не отправляется на сервер.

readonly. Объявляет поле только для чтения. Поле доступно для выбора, но не может быть изменено.

<FORM>
<TEXTAREA NAME="MyText" ROWS=5 COLS=30>
Тут можно что-нибудь написать
</TEXTAREA>
</FORM>

Список - <SELECT>

• NAME. Задает имя поля. Обязательный атрибут.
• SIZE. Задает вертикальный размер окна для вариантов выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список вариантов. Если указано число больше 1, то варианты выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем возвращаются пустые поля.
• MULTIPLE. Этот атрибут позволяет выбрать несколько вариантов одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.
  Список вариантов включается в контейнер <SELECT>…</SELECT> при помощи тэгов <OPTION>. Тэг имеет два необязательных атрибута:
• VALUE. Задает значение, передаваемое сценарию в случае выбора варианта пользователем. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тэга <OPTION>.
• SELECTED. Указывает вариант, выделенный по умолчанию.

 <!-—Выпадающий список-->
 <FORM>
 <SELECT NAME="Item">
 <OPTION VALUE="tea">Чай
 <OPTION VALUE ="coffee">Кофе
 <OPTION VALUE ="milk">Молоко
 <OPTION VALUE ="ham">Ветчина
 <OPTION VALUE ="cheese">Сыр
 </SELECT>
 </FORM>

<!--Список с множественным выбором-->
 <FORM>
 <SELECT NAME="Item" SIZE=5 MULTIPLE>
   <OPTION VALUE ="tea">Чай
   <OPTION VALUE ="coffee" SELECTED>Кофе
   <OPTION VALUE ="milk">Молоко
   <OPTION VALUE ="ham">Ветчина
   <OPTION VALUE ="cheese">Сыр
 </SELECT>
 </FORM>
 

OPTGROUP

<form> <br> 
 <p>Справочники:</p> <br>
 <select name="ask">
   <optgroup label="HTML"> </optgroup> 
   <option label="3.2">HTML 3.2</option>
   <option label="4.0">HTML 4.0</option>
   <optgroup label="CSS"> </optgroup> 
   <option label="1">CSS-1</option>
   <option label="1">CSS-2</option>
   <option label="3">CSS-3</option>
   <option value="js">JavaScript</option>
   <option value="dhtml">DHTML</option>
 </select>
 </form> 
 

<form> <br> <p>Справочники:</p> <br> 
 <select name="ask">  
   <optgroup label="HTML" 
     style="background:  RGB(0, 153, 0) none repeat scroll 0% 50%;
         -moz-background-clip: -moz-initial;
         -moz-background-origin: -moz-initial;
         -moz-background-inline-policy: -moz-initial;">
   </optgroup> 
   <option label="3.2" 
     style="background: rgb(0, 153, 0) none repeat scroll 0% 50%; 
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;">HTML 3.2  
   </option>
   <option label="4.0"
       style="background: rgb(0, 153, 0) none repeat scroll 0% 50%;
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;">HTML 4.0    
   </option>
   <optgroup label="CSS" 
       style="background: rgb(255, 255, 0) none repeat scroll 0% 50%; 
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;"> 
   </optgroup> 
   <option label="1" 
     style="background: rgb(255, 255, 0) none repeat scroll 0% 50%; 
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;">CSS-1  
   </option>
   <option label="1" 
     style="background: rgb(255, 255, 0) none repeat scroll 0% 50%; 
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;">CSS-2  
   </option>
   <option label="3" 
     style="background: rgb(255, 255, 0) none repeat scroll 0% 50%; 
         -moz-background-clip: -moz-initial; 
         -moz-background-origin: -moz-initial; 
         -moz-background-inline-policy: -moz-initial;">CSS-3    
   </option>
   <option value="js">JavaScript  </option>
   <option value="dhtml">DHTML  </option>
 </select>
 </form>
 

<INPUT>

• TYPE. Задает тип поля ввода. Может принимать значения: кнопка (BUTTON, SUBMIT, RESET), поле ввода (TEXT), поле ввода пароля ( Password), скрытое поле (HIDDEN), флажок (CHECKBOX), переключатель (RADIO), файл (FILE). Чуть ниже всё это рассмотрим подробно.
• NAME. Задает имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки.
• VALUE. Задает значение поля по умолчанию или надпись на кнопке.
• ONCLICK. Задает обработчик щелчка на кнопке.
• SIZE. Задает размер поля типа TEXT.
• MAXLENGTH. Задает ограничение в поле типа TEXT вводимого количества символов.
• AUTOCOMPLETE="OFF". Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute('autocomplete','off');


Кнопка - BUTTON

<FORM>
 <INPUT TYPE="BUTTON" VALUE ="Нажми!" ONCLICK="alert('Нажал!');">
 </FORM>
 

<button type="button">
  <img src="knopka.png" alt="кнопочка не функционирует"
     border="0" height="115" width="100">
 </button>

нажми на кнопку

получишь результат

<button type="button">
  <table border="1" cellspacing="0" width="200"> <tbody>
  <tr> <td>нажми на кнопку</td> 
  <td>получишь результат</td> </tr> </tbody>
  </table>
 </button>
 

Кнопка - SUBMIT

<FORM>
 <INPUT TYPE="SUBMIT" VALUE ="Принять заказ">
 </FORM>
 

<FORM>
 <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Вступить в клуб">
 <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Отказаться">
 <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Принять как наблюдателя">
 </FORM>
 

Кнопка - RESET

<FORM>
 <INPUT TYPE="RESET" VALUE ="Сброс">
 </FORM>
 

Поле ввода - TEXT

<FORM>
 <INPUT NAME="Фамилия" VALUE ="Иванов" SIZE=20 MAXLEGNTH=20>
 </FORM>
 

<FORM>
 <INPUT TYPE="PASSWORD" NAME=" Пароль" SIZE=20>
 </FORM>
 

Скрытое поле - HIDDEN

<FORM METHOD="POST" ACTION="/cgi_bin/test.cgi">
 <INPUT TYPE="HIDDEN" NAME="NumForm" VALUE ="1">
 ...Другие элементы формы....
 </FORM>
 <FORM
 METHOD="POST" ACTION="/cgi_bin/test.cgi">
 <INPUT
 TYPE="HIDDEN" NAME="NumForm" VALUE ="2">
 ...Другие элементы формы...
 </FORM>
 

 <INPUT TYPE="HIDDEN" NAME="FormVersion" VALUE ="1.2">

Флажок - CHECKBOX

<FORM>
 Нужна накладная
 <INPUT TYPE="CHECKBOX" NAME="Receipt" VALUE ="Yes">
 </FORM>
 

Переключатель - RADIO

<FORM>
 <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской
 <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский
 </FORM>
 

Файл - FILE

Позволяет передать сценарию любой файл. Максимальный размер файла задается скрытым полем MAX_FILE_SIZE.

<form name=forma enctype="multipart/form-data"
     method=POST action= HTTP://htmlweb.ru/cgi-bin/file.cgi >
 <INPUT TYPE="hidden" NAME="MAX_FILE_SIZE"
     VALUE ="10000" >
 Фото:<INPUT TYPE="file" NAME="mURL" size=45>
 </form>

Сценарий получения файла на PHP:

<?php
if (isset($mURL_type)) {
   $nname='/usr/home/ FTP/pub/'.$mURL_name;
   if (move_uploaded_file($mURL,$nname)) {
     Print "Файл успешно загружен на сервер!";
    mail(" Admin@aaanet.ru",
        "Поступил файл $nname",
        "Поступил файл $nname",
        "Content-Type: text/plain; charset=windows-1251");
   } else
    print "Ошибка! Файл не был загружен...";
   exit;
}
?>

FIELDSET

<form> <br> 
 <fieldset style="border: 2px solid rgb(0, 0, 0);
          padding: 10px; width: 200px;"> <br>
  <legend>Ваш комментарий</legend>
  <p>Вы можете разместить на сайте ваш комментарий,
     касающийся данной статьи</p> 
  <br> 
  <table> <tbody>
  <tr><td>Имя:</td><td><input size="12"></td></tr> 
  <tr><td>E-mail:</td><td><input size="12"></td></tr> 
  <tr><td>Страна:</td> 
  <td><select>  
     <option selected="selected">Кыргызстан</option>
     <option selected="selected">Казахстан</option>
     <option selected="selected">Россия</option>
  </select></td></tr>
  <tr><td colspan="2">Комментарий:<br>
  <textarea rows="4" cols6=""></textarea></td></tr>
  <tr><td colspan="2">
  <input value="отправить" type="submit"></td></tr> 
  </tbody></table> <br>
  </fieldset>
 </form> 

Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный Html-документ. Фреймы прекрасно подходят для оформления следующих документов:

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

<!-- Файл фреймовой структуры frame.htm -->
<HTML>
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="yes"
BORDER="5" >
<FRAME src="left.htm"
NAME="toc_window">
<FRAME src="right.htm"
NAME="main_window">
</FRAMESET>
</HTML>

<!-- Файл оглавления left.htm -->
<HTML>
<H3>Оглавление</H3>
<UL>
<LI>Товары
  <UL>
  <LI><A href="cosm.htm"
TARGET="main_window">Косметика</A>
  <LI><A href="eat.htm"
TARGET="main_window">Пищевые добавки</A>
  <LI><A href="perf.htm"
TARGET="main_window">Парфюмерия</A>
  </UL>
<LI>Услуги
  <UL>
  <LI><A href="massage.htm"
TARGET="main_window">Массаж</A>
  <LI><A href="manic.htm"
TARGET="main_window">Маникюр</A>
  </UL>
</UL>
</BODY>
</HTML>

<!-- Файл заставки основного окна right.htm -->
<HTML>
<BODY>
<H1>Здравствуйте!</H1>
</BODY>
</HTML>

<!-- Файл оглавления left.htm -->
<HTML>
<HEAD>
<BASE TARGET="main_window">
</HEAD>
<H3>Оглавление</H3>
<UL>
<LI>Товары
  <UL>
  <LI><A href="cosm.htm">Косметика</A>
  <LI><A href="eat.htm">Пищевые добавки</A>
  <LI><A href="perf.htm">Парфюмерия</A>
  </UL>
<LI>Услуги
  <UL>
  <LI><A href="massage.htm">Массаж</A>
  <LI><A href="manic.htm">Маникюр</A>
  </UL>
</UL>
</BODY>
</HTML>

<!-- Файл фреймовой структуры frame.htm -->
<HTML>
<FRAMESET COLS="20٪,40٪,*" FRAMEBORDER="yes"
BORDER="5">
<FRAME src="left.htm"
NAME="toc_window">
<FRAME src="wares.htm"
NAME="wares_window">
<FRAME src="service.htm"
NAME="service_window">
</FRAMESET>
</HTML>

<!-- Файл оглавления left.htm -->
<HTML>
<HEAD>
<BASE TARGET="wares_window">
</HEAD>
<H3>Оглавление</H3>
<UL>
<LI>Товары
  <UL>
  <LI><A href="cosm.htm">Косметика</A>
  <LI><A href="eat.htm">Пищевые добавки</A>
  <LI><A href="perf.htm">Парфюмерия</A>
  </UL>
<LI>Услуги
  <UL>
 <LI><A href="massage.htm"
TARGET="service_window">Массаж</A>
  <LI><A href="manic.htm"
TARGET="service_window">Маникюр</A>
  </UL>
</UL>
</BODY>
</HTML>

<!-- Файл заставки окна товаров wares.htm -->
<HTML>
<BODY>
<H1>Здесь товары!</H1>
</BODY>
</HTML>

<!-- Файл заставки окна услуг service.htm -->
<HTML>
<BODY>
<H1>Здесь услуги!</H1>
</BODY>
</HTML>

• TARGET=”_blank”. Документ загружается в новое окно броузера.
• TARGET=”_self”. Документ загружается в текущее окно.
• TARGET=”_parent”. Документ загружается в родительский фрейм. Обычно это фрейм, стоящий в контейнере <FRAMESET>…</FRAMESET> перед текущим. Если родительского фрейма нет, то значение "_parent" становится тождественным "_self".
• TARGET=”_top”. Документ загружается в самый верхний фрейм.

Закрывающий тег </IFRAME> обязателен!

• ALING. Определяет вид выравнивания. Принимает значения "left", "center", "right".
• HEIGHT. Определяет высоту фрейма в пикселях
• WIDTH. Определяет ширину фрейма в пикселях.
• SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME. Аналогичны рассмотренным ранее.

<IFRAME src=" Banner.html" width="468" height="60" 
	hspace="10" vspace="10" align="center" src="aa.htm">
Ваш браузер не поддерживает плавающие фреймы!
</IFRAME>

<NOFRAMES>
Ваш браузер не поддерживает плавающие фреймы!
</NOFRAMES>

Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную HTML-код фрейма, а затем в качестве SRC тега <IFRAME> указать " JavaScript:parent.имя переменной".

< Script language="JavaScript">
var varFrame = "<html><body> HTML-код </body></html>";
</script>
...
<iframe src="javascript:parent.varFrame"></iframe>

<HTML>
<HEAD>
<TITLE> ...  </TITLE>
</HEAD>
<FRAMESET ROWS="60px,*">
   <FRAME name="menu"  SRC="Навигационное меню.html">
   <FRAME name="main" SRC="Информационная часть.html">
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>

• посетитель зашёл на страницу, содержащую фреймовую структуру;
• посетитель зашёл на одну из информационных страниц;
• посетитель попал на страницу с навигационным меню.

if (window.name != "main")
    {     window.name="root";
         document.write("<frameset rows='60px,*'>");
         document.write("<frame name='menu' src='menu.html'>");
         document.write("<frame name='main' src='"+URL+"?'>");
         document.write("</frameset>");
    }

<html>
 <head>
      ... 
 </head>
 <script language="JavaScript" src="frame.js"> </script>
 <body>
       ... 
</body>
</html>

<?php
$frame=$HTTP_GET_VARS['frame'];
if ((!isset($frame))||($frame!='yes'))   {
   ?>
   <frameset rows="60px,*">
   <frame name="menu" src="menu.php">
   <frame name="main" src="index.php?frame=yes">
   </frameset>
   <noframes>
   </noframes>
<?php  } ?>

Помещаем код в файл frames.php. Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.

<html> <head>   <title> 	frames   </title> </head> 
<?php
require('frames.php');
?>
<body>
   	...
</body>
</html>

В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать HTML документ, описывающий фреймовую структуру.

• <TABLE> - Для обрамления самой таблицы;
• <THEAD> - Определяет заголовки элементов таблицы;
• <TBODY> - Определяет тело таблицы;
• <TFOOT> - Определяет нижнюю, завершающую часть таблицы;
• <CAPTION> - Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} - размещение заголовка относительно таблицы (вверху или внизу таблицы)
• <COLGROUP> - Задание свойств одного или более столбцов;
• <COL> - Задание свойств одного или более столбцов;

• <TR> - Для обрамления рядов таблицы;
• <TD> - Для обрамления клеток
  • <TH> -- </TH> тех, что нужно показывать пожирнее, например заголовков;
  • <TD> -- </TD> обычных.

<TABLE>
<CAPTION>потребление пива сотрудниками вневедомственной охраны
	пивзавода</CAPTION>
<TR><TH>Ф.И.О</TH>
<TH>литров</TH>
<TH>сорт</TH>
</TR>
<TR><TD> Иванов Иван Иванович </TD>

<TD ALIGN=CENTER >133</TD>
<TD>Хейнекен</TD>

</TR>
</TABLE>

<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 WIDTH="50%" >
<CAPTION><I>образец таблицы</I></CAPTION>
<TR><TH ROWSPAN="2"></TH>
<TH COLSPAN="2">средний</TH>
<TH ROWSPAN="2">повышенная
<BR>пушистость</TH>
</TR>
<TR><TH>рост</TH>
<TH>вес</TH>
</TR>

<TR><TH>самцы</TH>
<TD>29см</TD>
<TD>6.2кГ</TD>

<TD>40%</TD>
</TR>
</TABLE></CENTER>

<TABLE>
<COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
</TR>
</TABLE>

Пример :

<TABLE>
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT>
<COLGROUP><COL ALIGN=CENTER>
<TBODY>
<TR>
<TD>This is the first column in the group and is right-aligned.</TD>
<TD>This is the second column in the group and is left-aligned.</TD>
<TD>This column is in a new group and is centered.</TD>
</TR>
</TABLE>

<HTML>
 <HEAD>
  <ISINDEX>
 </HEAD>
 <BODY>
  ...
 </BODY>
</HTML>

 HTTP://vbizsoft.kg/main.html?keyword+list 

<ISINDEX ACTION=/cgi-bin/search.cgi>

HTML>
 <HEAD>
  <BASE HREF=http://vbizsoft.kg/cgi-bin/search.cgi>
  <ISINDEX>
 </HEAD>
 <BODY>
  <BASE HREF=http://vbizsoft.kg/>
 </BODY>
</HTML>

<ISINDEX [PROMPT=текст] [ACTION=URL]>

<ISINDEX PROMPT="Строка для поиска:">

ISINDEX — отмирающий элемент разметки. Однако он определил формат обмена данными ISINDEX. Данные в этом формате передаются от браузера серверу в случае применения ISINDEX и в случае прямого указания дополнительных параметров после символа "?" в гипертекстовой ссылке.

Элемент разметки BASE

<A HREF=../next_level/document. Html>...</A>

<BASE HREF= HTTP://vbizsoft.kg/start/>
<HTML>
<HEAD>
  <BASE HREF=http://vbizsoft.kg/ CGI-bin/>
  ...  </HEAD>
 <BODY>
  <BASE HREF=http://vbizsoft.kg/start/>
  ...  </BODY>
<HTML>

<A HREF=http:/vbizsoft.kg/cgi-bin/ Script/vbizsoft.kg?name=value>
 ...
</A>

<A HREF=vbizsoft.kg.htm TARGET=left>vbizsoft</A> 

<BASE HREF="http://www.vbizsoft.kg/main.html">
<BASE HREF=http://www.vbizsoft.kg/main.html TARGET=new>