Формы в HTML-документе

 

Формы в HTML -документе предназначены для передачи данных на Web -сервер, где они обрабатываются CGI-программой, либо для пересылки информации по электронной почте. Формы HTML -документа можно сравнить со всевозможными бланками и анкетами в нашей обычной (не виртуальной) жизни: при приёме на работу, оплате счетов и т.д. В основном разработчики веб-сайтов используют формы для различных регистраций, опросов и запросов. В итоге, с помощью форм реализуется элементарный диалог между пользователем интернета и сервером. Формы создаются в HTML -документе при помощи следующих тэгов и элементов:

· <FORM>

· <TEXTAREA>

· <INPUT>

· <SELECT>

· <OPTION>

 

FORM. Элемент, который собственно обозначает наличие формы в HTML-документе. Между его начальным и конечным тэгами содержатся все теги и элементы, участвующие в построение формы. Тэг<FORM> имеет следующие параметры:

· action - единственный обязательный параметр. Задаёт URL-адрес электронной почты или CGI-программы, по которому отправляется содержимое формы.

· method - задаёт способ отправки данных. Возможные значения: get (по умолчанию) и post.

· name - присваивает форме имя. Используется при наличии нескольких форм.

· enctype - задаёт способ кодировки содержимого формы. Возможные значения: application/x-www-form-urlencoded (по умолчанию) и multipart/form-data.

 

Например:

 

<form action="http://www.real.com/dr/cgi" method="post" ame="second">

</form>

 

TEXTAREA - создаёт область в виде прямоугольника для ввода нескольких строк текста. Имеет следующие параметры:

· name - задаёт название области.

· cols - задаёт ширину области в количестве печатных символов.

· rows - задаёт высоту области в количестве строк.

 

Например,

 

<form action="http://www.real.com/cgi-bin/dr/cgi" method="post"   name="first">

дополнительная информация:<br>

<textarea name="additional" cols="40" rows="5">

</textarea>

</form>

 

Дополнительная информация:

 

 

INPUT - используется для создания полей ввода информации, а также различных

кнопок и переключателей. Имеет следующие параметры:

name - задаёт полю или кнопке идентификационное имя.

type - задаёт тип поля (по умолчанию – text и может принимать следующие значения:

· text - создаёт поле для ввода одной строки текста. Используется совместно с параметрами: maxlength - задаёт максимальное количество символов, вводимых в строку; size - задаёт ширину поля в символах; value - задаёт начальное значение поля, которое может изменить пользователь.

Например,

 

    <input type= "text" name="t1" maxlength="40" size="20" value="фамилия">

 

 

· password- создаёт поле для ввода пароля, в котором вводимая пользователем информация отображается в виде звёздочек. Используется совместно с параметрами: maxlength - задаёт максимальное количество символов, вводимых в строку; size - задаёт ширину поля в символах.

Например,

 

<input name="t2" type="password" maxlength="40" size="20">

 

 

· file - создаёт поле для ввода имени файла, который пользователь может приобщить к данной форме.

Например,

 

<INPUT name="t3" type="file" maxlength="40" size="20">

 

· hidden - задаёт поле, которое не отображается на экране монитора, но содержит информацию, которую не может изменить ни пользователь, ни браузер.

· checkbox - создаёт поле для односложных ответов (да/нет, вкл/выкл, истина/ложь) в виде установки флажка или галочки. Используется совместно с параметрами: value - задаёт значение для выбранной кнопки; checked - определяет обозначенный вариант выбранным по умолчанию; name - задаёт полю идентификационное имя.

Например,

<INPUT type="checkbox" name="t4" value="Англия">Англия
<INPUT type="checkbox" name="t4" value="Франция">Англия
<INPUT type="checkbox" name="t4" value="Италия">Англия

 

Англия Франция Италия

· radio - создаёт переключатель в группе. На экране отображается в виде круглой кнопки. Все кнопки в группе имеют одинаковый параметр name. Используется совместно с параметром value - задаёт значение для выбранной кнопки.

Например,

<INPUT type="radio" name="t4" value="день">день
<INPUT type="radio" name="t4" value="неделя">неделя
<INPUT type="radio" name="t4" value="месяц">месяц

 

день неделя месяц

· submit - создаёт кнопку, при нажатии которой происходит пересылка содержимого формы. Используется совместно с параметром value - значение которого определяет надпись на кнопке.

Например,

<INPUT type="submit" value="отправить">

 

 

· image - создаёт кнопку отправки данных в виде изображения (заменяет кнопку submit). Адрес изображения задаётся параметром src. Параметр align выравнивает изображение по вертикали.

Например,

 

<INPUT type="image" src="button.gif">

· reset - создаёт кнопку сброса всех введённых значений формы. В момент нажатия данной кнопки форма приобретает первоначаль-
ный вид.

Например,

 

<INPUT type="reset" value="сброс">

 

SELECT - создаёт раскрывающийся список или прокручиваемое меню, из которого можно выбрать как одно, так и несколько значений. Имеет следующие параметры:

· name - задаёт имя списка.

· size - задаёт количество видимых пунктов списка. При значении size равным единице, отображается раскрывающийся список, а при значении больше единицы - прокручиваемое меню.

· multiple - задаёт возможность выбора нескольких пунктов из списка.

 

Пункты меню внутри элемента <SELECT> задаются при помощи тэга <OPTION>. Например,

<SELECT size="1">
<OPTION value=1>from 1 to 3 days
<OPTION value=2>from 4 to 7 days
<OPTION value=3>from 8 to 14 days
<OPTION value=4>from 15 to 18 days
<OPTION value=5>from 19 to 23 days
<OPTION value=6>from 24 to 30 days
</SELECT>

Навигационные карты.

 

Итак, вы уже знаете, что ссылки на веб-страницах могут быть в виде текста или изображения. Однако с помощью HTML возможно задавать активные области на изображении и таким образом получать несколько разных гиперссылок. Можно конечно "разрезать" изображение на части и добиться того же результата, тем не менее, навигационные карты сегодня являются отнюдь не редкостью. Представьте себе сплэш-страницу, состоящую из фотоколлажа, где есть необходимость точно задать ссылки в соответствии с расположением того или иного фрагмента изображения. Всё это легко реализовать при помощи навигационной карты.

Для того, чтобы обозначить какое-нибудь изображение в качестве объекта навигационной карты, существует параметр usemap тэга <IMG>. Всё очень просто. Добавляем в HTML -документе к нужному изображению параметр usemap, который задаёт имя навигационной карты. Например:

 

<IMG src="log1.gif" usemap="#log1">

Сама же навигационная карта создаётся при помощи элемента <MAP> и тэга <AREA>

 и располагается, как правило, в самом начале HTML-документа, в разделе <HEAD>.

MAP - элемент, обозначающий начало и конец навигационной карты. Имеет параметр name, задающий имя карты, которое должно соответствовать значению параметра usemap. Внутри элемента <MAP> располагается один или несколько тэгов <AREA>.

AREA - этот тэг задаёт активную область на изображении. Имеет слtдующие параметры:

· shape - задаёт форму активной области изображения. Имеет значения: rect, circle, poly (прямоугольник, круг, многоугольник).

coords- определяет координаты активной области изображения. Координаты записываются в виде целых чисел и разными способами в зависимости от формы активной области.

· href - задаёт адрес ссылки в виде URL.

nohref- задаёт область изображения как неактивную.

target- задаёт окно (fraim), в которое будет загружаться документ по ссылке. Используется только с параметром href. В качестве значения задаётся имя соответственного фрейма.

alt- задаёт альтернативный текст для активной области изображения. Активных областей может быть много. Они могут перекрывать друг друга. В этом случае область, заданная раньше других имеет приоритет над остальными.

 

Пример 1:

<AREA shape="rect" coords="гориз.x1, верт.y1, гориз.x2, верт.y2>

Заданы две координаты: левый верхний угол прямоугольника (гориз.x1,верт. y1) и нижний правый угол (гориз. x2,верт. y2).

Пример 2:

<AREA shape="circle" coords="гориз.x, верт.y, радиус z>

 

Заданы три числа: центр круга (гориз.x, верт.y) и его радиус (радиус z).
Если в виде формы активной области изображения задан многоугольник (poly), значениями параметра coords будут координаты его вершин. Начало координат лежит в левом верхнем углу изображения.