Теоретический материал

Лабораторная работа №8

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

Тема лабораторной работы: создание HTML-форм.

Цель работы: изучение основ работы с HTML - формами.

Задание на лабораторную работу

Создать HTML форму на заданную тему.

Теоретический материал

Некоторые WWW браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW – сервере. Обычно пользователи "заполняют" форму, модифицируя управляющие элементы перед тем, как предоставить форму пользователя для обработки (например, на Web-серввер, на почтовый сервер и т.д.).

Когда форма интерпретируется WEB - браузером, создается специальные экранные элементы GUI, такие, как поля ввода, поля типа переключатель, поля типа флажок, выпадающие меню, списки, кнопки и т.д.

Пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа) и информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

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

Пример 1: Каркас html формы :

Текстовое поле.

Элемент INPUT - создает поле html формы. Элемент не имеет конечного тега.

Например,

<form name="primer1" method="post" action="obrabotchik.php">
Введите ФИО: <br>
<input type="text" name="fio" size="30">
<br>

Основные атрибуты:

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text".

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

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24.

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

VALUE определяет, что будет по умолчанию написано в поле для ввода.

Пароль.

Элемент INPUT. Тип "password" указывает на то, чтоб информация отображалась при вводе звездочками.

Пример 2:

<form name="primer2" method="post" action="obrabotchik.php">
Введите пароль (максимум шесть символов):<br>
<input type="password" name ="pass" maxlength="6">
< /form>

Результат:

Введите пароль (максимум шесть символов):

Радиокнопка.

Данный тип элементов html формы называется радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio".

Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked (включен).

Примечание: в радиопереключателе обязательно должен присутствовать атрибут value.

Пример 3:

<form name="primer3" method="post" action="obrabotchik.php">
<p> Какой диск вы хотите получить?</p>
<p>
<input name="disc" type="radio" value="cd" checked>
CD<br>
<input name="disc" type="radio" value="dvd">
DVD </p></form>

Результат:

Флажок.

Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов.

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

Пример 4:

<form name="primer4" method="post" action="obrabotchik.php">
<p>Какие обучающие курсы вы хотите видеть на диске?</p>
<input type="checkbox" name="fotoshop" value="yes" checked>
Курсы по Фотошопу <br>
<input type="checkbox" name="dreamweaver" value="yes">
Курсы по Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes"> Курсы по PHP
</form>

Результат:

Выпадающий список.

Базовым элементом здесь является SELECT(выбор). У него обязательно должен быть закрывающий тег! Внутри него содержатся элементы OPTION (опции выбора).

У элемента SELECT есть атрибут name, а у элементов OPTION - value (в элементе select это не обязательный атрибут). Они нужны для того, чтобы обработчик мог идентифицировать выбранный вариант.

Например, мы выбираем способ доставки - Срочная. Тогда переменная dostavka примет значение srochnaya. Если б не было значения value="srochnaya" то переменная dostavka приняла бы значение Срочная (т.е. значение текста заключенного в элемент option).

Атрибут SIZE задает количество одновременно видимых пунктов меню. В нашем случае это 1.

Атрибут флаг SELECTED означает, что данное значение будет выбрано по умолчанию.

Пример 5:

<form name="primer5" method="post" action="obrabotchik.php">
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka" size="1">
<option value="srochnaya" > Срочная </option>
<option value="ne srochnaya" selected > Не срочная </option>
<option value="kurierom"> Курьером </option>
</select>
</p>
</form>

Результат:

Выберите способ доставки:

Список с множественным выбором. Можно также сделать, чтобы имелась возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. Для этого используется атрибут-флаг MULTIPLE.

Пример 6:

<form name="primer6" method="post" action="obrabotchik.php">
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka" size="3" multiple >
<option value="srochnaya" > Срочная </option>
<option value="ne srochnaya"> Не срочная </option>
<option value="kurierom"> Курьером </option>
</select>
</p>
</form>

Результат:

Выберите способ доставки: