- •Практическое занятие №1 посвящено изучению структуры Web-документа
- •Практическое занятие №2 посвящено изучению структуры внутри документа
- •Практическое занятие №3 посвящено изучению и использованию списков
- •Практическое занятие №4 посвящено изучению и использованию тэгов ссылки и изображения
- •Практическое занятие №5 посвящено изучению и использованию таблиц
- •Заголовок таблицы расположен над таблицей
- •Практическое занятие №6 посвящено изучению и использованию кадров (фреймов)
- •Практическое занятие №7 посвящено изучению и использованию форм
- •Практическое занятие №8 посвящено изучению и использованию объектов
- •Практическое занятие №9 посвящено изучению и использованию бегущей строки
- •Практическое занятие №10 посвящено изучению и использованию скриптов
- •Практическое занятие №11 посвящено изучению и использованию стилей
- •Содержание
Практическое занятие №7 посвящено изучению и использованию форм
Формы являются наиболее популярным способом организации интерактивного взаимодействия во Всемирной паутине. С помощью HTML можно создавать простые формы, позволяющие отвечать на вопросы (Да или НЕТ) или выбирать опции, и, более сложные, для оформления заказа, анкеты и т.д.
В форме представляется несколько полей, в которые пользователь может ввести данные. Эти данные после отправки обрабатываются программой (скриптом), расположенной на сервере. В таблице 13 представлены тэги для описания форм.
Таблица 13. Тэги формы и её элементов.
Тэги |
Атрибут и его значения |
Пояснение |
<FORM> </FORM> |
|
Контейнер тэга FORM в файле HTML играет роль контейнера тэга BODY, т.е. все описываемые элементы формы должны быть помещены в этот контейнер. |
|
ACTION="UR" |
Определяет URL-адрес программы (скрипта), которая примет и обработает данные формы. Если адрес не задан, то данные отправляются по адресу страницы, содержащей форму. |
|
METOD="POST" или "GET" |
Как послать данные скрипту (программе обработки): отдельно или вместе с URL-адресом. |
<TEXTAREA> </TEXTAREA> |
|
Поле ввода текстовой информации (многострочной). |
|
NAME="text" |
Определяет название информации |
|
ROWS=число |
Число строк в поле ввода. |
|
COLS= число |
Число позиций в строке поля ввода. |
<SELECT> </SELECT> |
|
Создание всплывающих меню или списков. |
|
NAME="menu" |
Название информации. |
|
SIZE=1 |
Размер окна для опций выбора. |
|
MULTIPLE |
Выбор нескольких опций сразу. |
<OPTION> |
|
Описание опции, включенной в список SELECT |
|
VALUE="значение" |
Значение, возвращаемое скрипту в случае выбора опции. |
|
SELECTED |
Опция, выбранная по умолчанию. |
<INPUT> |
|
Сбор информации различным образом в зависимости от заданного типа в атрибуте type: текст(строка), пароль, переключатель, флажки, кнопки для очистки формы и отправки данных. |
|
NAME="flag" |
Название информации. |
|
SIZE="число" |
Размер поля ввода в символах. |
|
MAXLENGTH="число" |
Максимальное количество символов, вводимых в поле. |
|
VALUE="текст" |
Определяет: для текста - текст по умолчанию; для флажков и переключателей - значение для программы обработки; для кнопок - надпись на кнопке. |
|
CHECKED |
Устанавливает флажок или переключатель во включенное состояние. |
|
TYPE="TEXT"|"PASSWORD" |"CHECKBOX"|"RADIO"| "RESET"| "SUBMIT"|”BUTTON” |
Тип поля ввода: текст; пароль; флажки; переключатель; кнопка очистки; кнопка отправки данных формы; кнопка.
|
Пример создания формы, в которой использованы все элементы формы:
кнопка для очистки формы элемент INPUT типа "RESET";
для ввода пароля элемент INPUT типа "PASSWORD";
для ввода пароля элемент INPUT типа "TEXT";
для указания пола и семейного положения элемент INPUT типа "RADIO" (переключатель);
для выбора из предлагаемого списка элемент SELECT и OPTION;
для указания города с подходящим для вас климатом элемент INPUT типа "CHECKBOX";
для ввода пожелания элемент TEXTAREA;
кнопка для отправки данных, введённых в форму, элемент INPUT типа "SUBMIT"
<HTML>
<HEAD>
<TITLE>Пример формы</TITLE>
</HEAD>
<BODY>
<FORM ACTION="comment_skript" METHOD="POST" NAME="FF">
<INPUT VALUE="очистка формы" TYPE="RESET" ><BR>
<PRE>
Ваш пароль: <INPUT NAME="PASSWORD" SIZE="10"
MAXLENGTH="10" VALUE="PRIVATE" TYPE="PASSWORD">
Номер телефона: <INPUT NAME="PHONE" SIZE="20"
MAXLENGTH= VALUE="" TYPE="TEXT">
Ваш пол: <INPUT NAME="radio" VALUE="м" TYPE="RADIO" CHECKED> мужчина
<INPUT NAME="radio" VALUE="ж" TYPE="RADIO" > женщина
Семейное положение:<INPUT NAME="rad1" VALUE="ж" TYPE="RADIO"
OnClick='alert "Вы имеете спутника жизни."' CHECKED> женат
<INPUT NAME="rad1" VALUE="х" TYPE="RADIO"
OnClick='alert "Вы ищете спутника жизни."'> холост
<INPUT NAME="rad1" VALUE="в" TYPE="RADIO"
OnClick='alert "Вы потеряли спутника жизни."'> вдовец
<INPUT NAME="rad1" VALUE="з" TYPE="RADIO"
OnClick='alert "Вы имеете спутника жизни."' > замужем
<INPUT NAME="rad1" VALUE="д" TYPE="RADIO"
OnClick='alert "Вы ищете спутника жизни."'> девица
<INPUT NAME="rad1" VALUE="ва" TYPE="RADIO"
OnClick='MsgBox "Вы потеряли спутника жизни."'> вдова
</PRE>
Ваш выбор <SELECT NAME="lst" SIZE=1 MULTIPLE>
<OPTION VALUE="1" SELECTED> Юг
<OPTION VALUE="2"> Север
<OPTION VALUE="3"> Запад
<OPTION VALUE="4"> Восток
</SELECT><BR>
Города с подходящим климатом: <BR>
<INPUT NAME="checkbox1" VALUE="Москва" TYPE="CHECKBOX"> Москва
<INPUT NAME="checkbox2" VALUE="Тикси" TYPE="CHECKBOX"> Тикси
<INPUT NAME="checkbox3" VALUE="Сочи" TYPE="CHECKBOX" CHECKED> Сочи
<BR> Введите ваши пожелания<BR>
<TEXTAREA NAME="txt" ROWS=5 COLS=40>
Текст, который выводится по умолчанию
</TEXTAREA><BR>
<INPUT VALUE="ОТПРАВИТЬ" TYPE= "SUBMIT" NAME="Submit" > <BR>
</FORM>
</BODY>
</HTML>
Тэг PRE используется, чтобы закрепить расположение надписей и элементов таким, как указано в описании.
Обратите внимание на то, что для указания пола (семейного положения) элемент INPUT типа "RADIO" (переключатель) использовался столько раз, сколько предоставлено вариантов для выбора, и в каждом из них указано одинаковое имя NAME="radio" (NAME="rad1"). Это объясняется тем, что может быть выбрано только одно значение из возможных вариантов, и оно передаётся при отправлении. Например, если выбран пол «женщина» и семейное положение «замужем», то будет передано: radio=”ж” rad1=”з”.
Тэг TEXTAREA позволяет выводить текст, заключённый в его контейнере, в область ввода, но лучше этого не делать, чтобы пользователь ввёл свои пожелания, и именно они были бы переданы, а не текст, который был выведен вами в эту область. Наличие текста в области ввода может отвлечь пользователя от ввода своих пожеланий.
Расположение кнопок в форме рекомендуется таким, чтобы предоставить пользователю возможность сначала ввести данные, а потом их отправить, и кнопку очистки формы не ставить рядом с кнопкой отправки данных.
Упражнение 7.1. Спроектируйте макет формы для выбранной темы. Это может быть форма анкеты, заказа, пожеланий и т.д.
Упражнение 7.2. Создайте HTML-файл, в теле которого опишите форму и её элементы в соответствии с макетом. Позаботьтесь о том, чтобы файл с формой вызывался из содержания Web-сайта.