Приглашаем посетить
Соловьев (solovyev.lit-info.ru)

HTML

ФОРМЫ

ПРОСТАЯ ФОРМА

Для чего служит форма? Она позволяет вводить текст и осуществлять выбор из текста или же при помощи кнопок.

Форма состоит из: открывающего тега, объявления типов полей ввода, кнопки отправки. Открывающим тегом служит <FORM>, который определяет способ, которым информация передается сценарному приложению сервера и определяющий имя этого приложения. Типы полей определяются тегом <INPUT TYPE= > и делятся на текстовые поля, флажки, переключатели, расскрывающиеся списки и некоторые другие.

Специальный тип поля ввода HIDDEN позволяет послать дополнительную информацию. Кнопка отправки (<INPUT TYPE=SUBMIT VALUE="Отправить">) используют для пересылки информации. Встроенное изображение может работать и как графическая кнопка отправкии как ссылка. Кнопка отмены (<INPUT TYPE=RESET VALUE="Очистить">) служит для очистки полей ввода и восстановления значений, заданных по умолчанию.

<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><H1><CENTER>Ваша анкета</CENTER></H1>
<FORM METHOD="Post" ACTION="bin/who">Имя:
<BR>
<INPUT TYPE="Text" NAME="first" MAXLENGTH="40" SIZE="40">
<BR>Фамилия:
<BR>
<INPUT TYPE="Text" NAME="last" MAXLENGTH="40" SIZE="40">
<P>
<INPUT TYPE=SUBMIT VALUE="Далее">
<INPUT TYPE=RESET VALUE="Очистить">
</FORM>
</BODY>
</HTML>
  

Пример

Ваша анкета

Имя:

Фамилия:

ТЕКСТОВЫЕ ПОЛЯ

Текстовые поля позволяют ввести слово, фразу или набор из чисел. Вводимый текст появляется в поле. Если вы желаете указать тип поля PASSWORD (пароль), то водимый текст будет скрыт символом " * ".

Для текстового поля в теге <INPUT> задаются следующие атрибуты:

<HTML>
<HEAD>
<TITLE>моя перва страничка</TITLE>
</HEAD>
<BODY>
<FORM METHOD="Post" ACTION="bin/who">Введите ваше имя (предел - 30 символов)
<P><INPUT TYPE="TEXT" SIZE="30" NAME="form" MAXLENGTH="15" VALUE="Ваше имя">
<P>Введите пароль (предел - 5 символов)
<P><INPUT TYPE="PASSWORD" SIZE="30" NAME="pass" MAXLENGTH="5">
<P><INPUT TYPE=SUBMIT VALUE="Отправить">
<P><INPUT TYPE=RESET VALUE="Очистить">
</FORM>
</BODY>
</HTML>
  

Пример
Введите ваше имя (предел - 30 символов)

Введите пароль (предел - 5 символов)

ТЕКСТОВЫЕ ОБЛАСТИ

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

Тегом, определяющим текстовую область служит <TEXTAREA>. Атрибутами, входящими в этот тег, являются:

<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<FORM METHOD="Post" ACTION="bin/who">
<P><TEXTAREA NAME="name" ROWS=10 COLS=40 WRAP=VIRTUAL>Здесь можно привести любой текст
</TEXTAREA>
<P><INPUT TYPE=SUBMIT VALUE="Отправить">
<INPUT TYPE=RESET VALUE="Очистить">
</FORM>
</BODY>
</HTML>
  

Пример

ПЕРЕКЛЮЧАТЕЛИ

Переключатели позволяют выбрать из предлагаемого списка что-то одно. При выборе одного переключателя метка с другого убирается.

Необходимо начать с создания списка , используя тег <UL>, который уже рассматривался ранее.

Итак, перечислим все атрибуты для переключателей, входящие в тег <INPUT>:

Не забудьте: весь список переключателей заканчивается тегом </UL>

<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<FORM METHOD="Post" ACTION="bin/card">Какой браузер вы используете?
<UL><BR>
<INPUT TYPE="RADIO" NAME="card" VUALUE="Internet Explorer" CHECKED>Internet Explorer<BR>
<INPUT TYPE="RADIO" NAME="card" VUALUE="Netscape Navigator">Netscape Navigator<BR>
</UL>
<INPUT TYPE=SUBMIT VALUE="Отправить">
<INPUT TYPE=RESET VALUE="Очистить">
</FORM>
</BODY>
</HTML>
  

Пример
Какой браузер вы используете?

    Internet Explorer
    Netscape Navigator

ФЛАЖКИ

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

Итак, начинаем с создания списка при помощи тега <UL>. Далее открывается тег <INPUT> со следующими атрибутами:

<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<FORM METHOD="Post" ACTION="bin/book">
<UL><BR>
<INPUT TYPE="CHECKBOX" NAME="book1" VALUE="YES" CHECKED>Книга 1<BR>
<INPUT TYPE="CHECKBOX" NAME="book2" VALUE="YES">Книга 2<BR>
<INPUT TYPE="CHECKBOX" NAME="book3" VALUE="YES">Книга 3<BR>
</UL>
<INPUT TYPE=SUBMIT VALUE="Отправить">
<INPUT TYPE=RESET VALUE="Очистить">
</FORM>
</BODY>
</HTML>
  

Пример

    Книга 1
    Книга 2
    Книга 3

РАСКРЫВАЮЩИЕСЯ СПИСКИ

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

Спсики с множественным выбором позовляют выбрать один или несколько пунктов. По умолчанию ни один из вариантов не отмечается, но с помощью атрибута SELECTED можно установить отметку, принятую по умолчанию, для любых пунктов спика.

Для раскрывающичся списков исспользуют тег <SELECT> со следующими атрибутами:

Для списка с множественным выбором далее следует тег <OPTION>.

<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<FORM METHOD="Post" ACTION="bin/level">Выберите уровень сложности:
<P><SELECT NAME="level">
<OPTION>Легкий
<OPTION SELECTED>Средний
<OPTION>Трудный
</SELECT>
<P>Укажите экзамены, которые хотите сдать:
<P><SELECT NAME="test" SIZE=4 MULTIPLE>
<OPTION>История
<OPTION SELECTED>Математика
<OPTION>Английский язык
</SELECT>
<P><INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>
</BODY>
</HTML>
  

Пример
Выберите уровень сложности:

Укажите экзамены, которые хотите сдать:

Назад | Содержание | Вперед