Главная | Обратная связь | Поможем написать вашу работу!

Практическое занятие №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>

<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><BR>

</FORM>

</BODY>

</HTML>

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

Обратите внимание на то, что для указания пола (семейного положения) элемент INPUT типа "RADIO" (переключатель) использовался столько раз, сколько предоставлено вариантов для выбора, и в каждом из них указано одинаковое имя NAME="radio" (NAME="rad1"). Это объясняется тем, что может быть выбрано только одно значение из возможных вариантов, и оно передаётся при отправлении. Например, если выбран пол «женщина» и семейное положение «замужем», то будет передано: radio=”ж” rad1=”з”.

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

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

Упражнение 7.1. Спроектируйте макет формы для выбранной темы. Это может быть форма анкеты, заказа, пожеланий и т.д.

Упражнение 7.2. Создайте HTML-файл, в теле которого опишите форму и её элементы в соответствии с макетом. Позаботьтесь о том, чтобы файл с формой вызывался из содержания Web-сайта.

⇐ Предыдущая 1 234 5 Следующая ⇒

Воспользуйтесь поиском по сайту: