Задание к теме

1. Создать гиперссылку из файла rabota1_1.htm к файлу rabota1_2.htm и обратно. Предусмотреть перевод строки после гиперссылки.

2. Открыть текстовый редактор Блокнот.

3. Создать новый документ и сохранить его с именем rabota1_3.htm в той же папке, что и первые два файла.

4. Набрать HTML-код с разметкой таблицы согласно варианту, соблюдая заданное форматирование таблицы и не забывая сохранять документ.

5. Вставить в файл rabota1_1.htm гиперссылку на файл rabota1_3.htm.

6. Обеспечить с помощью гиперссылки возврат на первую страницу из файла rabota1_3.htm.

Работа №3 «Добавление в Web–узел страницы, содержащей форму»

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

Теоретико-методическая часть

Формы необходимы для поддержки интерактивности. С помощью формы пользователь при просмотре страницы вводит в поля формы данные, возвращаемые на веб-сервер. Эти данные могут использоваться на сервере как входные данные какой-либо программы, которая будет исполняться на стороне сервера, а полученные результаты будут возвращаться на сторону клиента сгенерированной на их основе HTML-страницей. Теги позволяют помещать формы в HTML-страницу.

Формы используют для «диалога» с читателем, они позволяют получить от него, например, исходные слова для поиска, оформить заказ на какую-либо продукцию, переслать данные в форум, заполнить анкету и т.п.

Взаимодействие посетителей с Web-узлом осуществляется в соответствии со стандартом CGI – Common Gateway Interface (общий интерфейс шлюзов). Программы сервера, имеющие дело с входной информацией типа форм, называются сценариями CGI. Форма позволяет только передать информацию на сервер. Отправленные данные поступают в сценарий, который обеспечивает их обработку. Обработка может быть простой, например, сохранение данных в файле, или сложной, такой, как сортировка, расчеты по представленным данным или передача подтверждения об отправке информации.

Любая форма FrontPage имеет одинаковую базовую структуру: кнопку, предлагающую отправить данные на сервер, и кнопку очистки для удаления введенной или выбранной в полях информации. Элемент, в который пользователь вводит или выбирает информацию, называют полем формы. В форме должно быть как минимум два элемента - поле для ввода текста или выбора варианта и кнопка Отправить.

В формах используются следующие поля:

• однострочное текстовое поле;

• прокручивающееся текстовое окно;

• флажок;

• переключатель;

• раскрывающийся список;

• нажимающаяся кнопка.

При обработке полей формы сценарий использует свойства полей формы. Одним из важнейших свойств является имя поля (название) для идентификации данных. Чтобы форма была правильно понята, у полей формы должны быть разные имена. Все свойства полей формы можно просмотреть и изменить, указав поле и выбрав в контекстном меню команду Свойства поля формы.

Форма начинается тегом <form> и заканчивается тегом</form>. Открывающий тег содержит параметры: метод пересылки данных, URL программы, которая пересылает данные, имя формы и, при необходимости, способ кодировки данных.

Форма может включать как обычный HTML-текст, так и поля – элементы, в которые пользователь вводит информацию. Количество полей может быть любым. При этом информация всех полей формы пересылается на информационный сервер одновременно при выборе команды Отправить.

Текстовое поле. В текстовое поле пользователь может вводить любую информацию с клавиатуры. Для этого поля могут быть заданы размер и текст, который появляется в поле при открытии документа.

Чтобы включить в форму текстовое поле, используйте следующий тег:

<input name = "имя поля" type = text value = "текст по умолчанию" size = размер поля в символах>.

Если предполагается вводить несколько строк текста можно создать прямоугольник в несколько строк и несколько колонок. Для этого используется следующий тeг:

<textarea name = "имя поля" rows = количество строк cols = кол-во колонок> текст, показываемый в поле по умолчанию </textarea>

Список выбора. При разметке формы определяется перечень значений, которые могут быть в списке. Список может быть выполнен как раскрывающийся и как уже частично раскрытый (например, показан не один ряд, а несколько).

Чтобы включить в форму список выбора, надо использовать для его указания тег <select> в начале поля и </select> — в конце. Между этими тегами указывается столько возможных вариантов списка, сколько необходимо. Для каждого варианта определяются значение параметра и текст, который будет показан для данного значения на экране.

Ширину списка на экране диктует самая длинная строка. Если в определении поля указать его размеры по вертикали (size), то будут показаны несколько строк. По умолчанию список принимает значение, которое отмечено параметром selected в определении опции выбора. Вот как выглядит оформление списка:

<select name = "имя списка" size = число видимых рядов width = значение height = значение>

<option value = "значение1"> текст

<option selected value = "значение2"> текст

<option value = "значение3"> текст…

</selected>

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

При пересылке данных списка на сервер передается переменная, имя которой задано параметром name в теге <select>, со значением, равным параметру value в строке, которая была выбрана пользователем.

Кнопки зависимой фиксации. Для кнопки зависимой фиксации следует написать такие строки:

<input type = "radio" name = name1 value = "button1" checked>

<input type = "radio" name = name1 value = "button2">

Если в тег включить слово checked, то по умолчанию параметр будет выбран (точка в кружочке), если опустить это слово, то — нет.

Обратите внимание, что эти кнопки имеют одинаковое имя – name1. Все кнопки, которые имеют одинаковое имя, относятся к одной группе зависимых кнопок: включение одной кнопки одновременно выключит другую из этой группы. Если имена кнопок различны, то обозначает включение в форму нескольких групп кнопок зависимой фиксации.

Кнопки управления формой. Предусмотрены две кнопки управления формой: кнопка пересылки данных Submit и кнопка очистки формы Reset. При нажатии первой данные формы пересылаются на сервер, нажатие второй очищает все поля формы (устанавливает значения полей по умолчанию). Для кнопки пересылки данных: <input name = "name" type = submit value = "значение"> текст, определенный для параметра value, будет отображен на кнопке.

Аналогично для клавиши сброса полей формы: <input type = reset value = "значение">. Не следует использовать русские буквы для параметра value. Если такую страницу будет просматривать пользователь, у которого на компьютере в качестве основного языка используется, например, английский, то внутри кнопки будут показаны нечитаемые символы, хотя остальной текст документа будет читаться правильно при наличии на компьютере кириллических шрифтов.

Пример формы. Разметим такую форму:

Разметку выполним с помощью таблицы, в левую колонку которой поместим текстовые пояснения, в правую - поля формы. Разметка будет выглядеть так:

<form method=get>

<table width=300 height=250 border=1 cellpadding=0 cellspacing=0 align=center>

<tr>

<th colspan=2><font face=Tahoma size=5>Бланк заказа</font></th>

</tr>

<tr>

<td width=100>ФИО</td>

<td width=200><input name=name type=text size=25 ></td>

</tr>

<tr>

<td>E-mail</td>

<td><input name=email type=text size=25 ></td>

</tr>

<tr>

<td>ТОВАР</td>

<td><input type=radio name=item value=it1 checked> Кепка

<input type=radio name=item value=it2> Майка</td>

</tr>

<tr>

<td>ЦВЕТ</td>

<td><select name=color>

<option value=orange>Оранжевый</option>

<option value=red>Красный</option>

<option value=green>Зеленый</option>

</select></td>

</tr>

<tr>

<td>Дополнительная информация</td>

<td><textarea cols=20 rows=4 name=info></textarea></td>

</tr>

<tr>

<td colspan=2 align=left><input type=submit value=ЗАКАЗАТЬ></td>

</tr>

</table>

</form>

Параметр colspan в тегах <th> и <td> позволяет объединять ячейки таблицы.