Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лабораторные работы.Основы создания Web-докумен...docx
Скачиваний:
24
Добавлен:
18.09.2019
Размер:
450.51 Кб
Скачать

Лабораторная работа №4 Работа с формами

Цель работы: получить навыки создания форм в html – документе.

Задачи:

  • научиться применять основные элементы формы;

  • научиться производить сбор данных при помощи формы.

Порядок выполнения работы

Раздел 1. Форма.

Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана. Cоздать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Perl или C. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования. В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

    1. Элементы формы( тег<FORM>)

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

ACTION -обязательный атрибут. Определяет, где находится обработчик формы.

METHOD -определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.

<FORM > определяется последовательностью элементов < INPUT >, размещенных внутри пары <FORM> </FORM>

    1. Сбор данных при помощи форм ( тег <INPUT>)

Элемент < INPUT > используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля, в этой переменной обработчику будут переданы введенные пользователем данные.

Можно использовать следующие атрибуты:

  • MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)

  • SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, браузер будет прокручивать данные в окне.

  • VALUE - определяет начальное значение поля ввода.

Элемент < INPUT > можно определить различными типами с помощью атрибута TYPE.

Задание 4.1

Создание простой формы для ввода:

Наберите в редакторе «блокнот» текст следующего HTML-документа:

<html> 

<head> 

<title>пример 4_1 работа с формой</title> 

</head> 

<body> 

<p >

<form>

Улица: <input name="street"> <br>

Город: <input name="city" size="20" maxlength="20"> <br>

Индекс: <input name="zip" size="5" maxlength="5" value= "99999"> <br>

</form>

</p>

</body>

 </html>

Сохраните документ с именем пример4_1.htm, откройте в браузере, должно появиться следующее отображение: