Самоучитель по HTML

Справочник HTML

Формы нужны чтобы получать от пользователей сайта какую-нибудь информацию (опросы, создание регистрационных форм и др.). Для их создания пользуются контейнером тегов <FORM>...</FORM>.

Атрибуты тега <FORM>:

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

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

С помощью тега <SELECT> можно создать списки в форме. Например:


      <HTML>
         <HEAD>
            <TITLE>Создание списка</TITLE>
         </HEAD>
         <BODY>
            Выберите вашу любимую марку автомобиля:
            <br><br>
            <FORM>
               <SELECT>
                  <OPTION>Lada
                  <OPTION>Toyota
                  <OPTION>BMW
                  <OPTION>Mersedes
                  <OPTION>Audi
                  <OPTION>Волга
                  <OPTION>ЗИЛ
                  <OPTION>Porshe
               </SELECT>
            </FORM>
         </BODY>
      </HTML>

Создание списка, select, option
рис. 22. Создание списка.

Вы видите новый для вас тег <OPTION>. Каждый такой тег в списке, создаёт один вариант ответа списка.

У тега <SELECT> имеются следующие атрибуты:

size="..." - определяет вид меню. Если данный атрибут не указывать или указывать со значением 1, то у вас получится выпадающее меню. Если же значение будет 2 и более, таким образом вы укажите количество видимых строк в меню, а само меню будет иметь линию прокрутки.
multiple - данный атрибут идёт без значения. Он создаёт множественный выбор из списка. Максимальное первоначально видимое количество строк равно 4.
name="..." - в значении данного атрибута задаётся имя элемента, по которому он идентифицируется.

Например (рис. 23): <HTML> <HEAD> <TITLE>Создание списка</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Выберите вашу любимую марку автомобиля: <TD>Выберите вашу любимую марку автомобиля: </TR> <TR> <TD> <FORM> <SELECT size="3"> <OPTION>Lada <OPTION>Toyota <OPTION>BMW <OPTION>Mersedes <OPTION>Audi <OPTION>Волга <OPTION>ЗИЛ <OPTION>Porshe </SELECT> </FORM> <TD> <FORM> <SELECT multiple> <OPTION>Lada <OPTION>Toyota <OPTION>BMW <OPTION>Mersedes <OPTION>Audi <OPTION>Волга <OPTION>ЗИЛ <OPTION>Porshe </SELECT> </FORM> </TABLE> </BODY> </HTML>

select, size, multiple, name
рис. 23. Создание списков.

Давайте теперь рассмотрим тег <INPUT>. Он нужен для создания элемента ввода. Его атрибуты:

name="..." - с помощью этого атрибута идентифицируется поле ввода формы после её подтверждения.
type="..." - указывает тип элемента. Его значения следующие:
- image - задаёт рисунок, по которому делается щелчок мышью, для отправки содержимого формы на сервер.
- text - поле ввода с одной строкой.
- password - этот параметр служит для ввода пароля. Вводимые символы будут отображаться звёздочками.
- checkbox - переключатель. Имеет два положения: включено и выключено. Может одновременно принимать несколько значений.
- radio - переключатель, принимающий только одно значение, либо включено, либо выключено.
- submit - кнопка, которая отсылает содержимое формы на сервер.
- reset - кнопка, которая удаляет содержимое заполненной формы.
value="..." - задает заголовок для полей, либо название кнопок.
size="..." - определяет размер поля ввода в символах. Атрибут действует для элементов ввода текста или пароля.
maxlenght="..." - задаёт максимальное количество введённых символов для поля ввода.

Например:

<HTML>
   <HEAD>
      <TITLE>тег INPUT</TITLE>
   </HEAD>
   <BODY>
      <FORM method="ROST">
         <p>Введите логин: <INPUT type="text">
         <p>Введите пароль: <INPUT type="password">
         <p>Ваш любимый цвет: 
            <br>красный <INPUT type="checkbox">
            <br>зелёный <INPUT type="checkbox">
         <p>Ваша любимый автомобиль:
         <p><INPUT type="radio" name="V1">Mersedes</p>
         <p><INPUT type="radio" name="V1">ВАЗ</p>
         <p><INPUT type="submit" value="Отправить">
         <INPUT type="reset" value="Сбросить">
      </FORM>
   </BODY>
</HTML>

Прошу заметить, что два переключателя radio имеют одинаковое имя V1. Таким образом, мы обозначили взаимосвязь двух переключателей между собой. Если же имя не указать, или указать разное имя, то они будут работать не правильно, либо вообще не работать. Также прошу не удивляться, что после того, как вы ввели какие-либо значения в нашу форму, нажали кнопку "Отправить" и ничего не произошло. Что б обработать нашу форму, нужно помимо языка HTML, знать такие языки, как, например, javascript, php или другие. Здесь же объясняется только как создаётся внешняя оболочка таких форм.

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

name="..." - задаёт имя поля ввода.
rows="..." - количество строк в поле ввода (его высота).
cols="..." - количество столбцов поля ввода (ширина).

Например:

<HTML>
   <HEAD>
      <TITLE>тег TEXTAREA</TITLE>
   </HEAD>
   <BODY>
      Оставьте ваш комментарий о нашем сайте:
      <FORM method="ROST">
         <TEXTAREA rows="10" cols="40">
         </TEXTAREA>
         <p>
         <INPUT type="submit" value="Отправить">
         <INPUT type="reset" value="Сбросить">
      </FORM>
   </BODY>
</HTML>

Предыдущая страница Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Хостинг от uCoz

Самоучитель по HTML

Справочник HTML

Оглавление:

CSS

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