Практическая работа. Тема: Изучение форм

Практическая работа

Тема: Изучение форм

Цель: Научиться создавать формы

Теоретическое обоснование

Очень часто владельцу Web-сайта необходимо, чтобы посетитель ввел ка­кую-либо информацию, которую потом можно было бы обработать. Чаще всего это применяется при регистрации посетителя, при получении от него восторженного отзыва в гостевую книгу, проведении различного рода вик­торин и анкетирований. Конечно, могут быть и другие, более серьезные применения форм, но их обработка достаточно сложна, а, значит, недос­тупна нам. Типичная форма представляет собой набор полей редактирова­ния текста, выпадающих списков, радиокнопок и флажков. Также ко всей этой совокупности элементов управления обычно добавляется две кнопки. Одна из них обновляет введенные пользователем значения, приводя их к установленным по умолчанию, а вторая завершает - процесс ввода и отсылает данные на сайт для обработки. Сами формы создаются средствами HTML, а вот для обработки применяются CGI-приложения. Это приложе­ние обычно привязывается к кнопке, отсылающей результаты на сервер. Обычно эту кнопку называют "Submit".

Общие атрибуты форм

Предполагается, что форма должна содержать определенное число элементов управ­ления: поля ввода, переключатели, кнопки, флажки и т. д. Каждый элемент управ­ления создается при помощи одного из элементов HTML. Для таких элементов предусмотрены атрибуты, влияющие на работу формы.

Большинство элементов формы может принимать определенные значения. Напри­мер, для поля ввода это может быть текст, а для переключателя — номер элемента, который выбран пользователем. Для доступа к этим значениям со стороны про­граммы необходимо использование атрибута name.

В момент активизации формы часть элементов может иметь значения. В тексто­вое поле может быть введена строка, переключатели могут иметь подписи и т. д. Для задания этих значений используется атрибут value. Атрибут tabindex=номер позволяет определить, в какой последовательности курсор переходит с поля на поле при нажатии клавиши Tab. На элемент с атрибутом tabindex=1 устанавлива­ется курсор в момент открытия окна броузера.

В элементах управления, содержащих подписи (например, в меню), часто исполь­зуются сочетания клавиш, позволяющие перевести фокус на определенный эле­мент. Обычно командой служит комбинация клавиши Alt и символа, подчеркну­того в названии команды. В формах HTML тоже можно использовать этот прием при помощи атрибута accesskey. Например: accesskey="R"

Атрибут disabled позволяет сделать элемент формы недоступным. Вид элемента при этом не изменяется, но цвет текста становится более бледным. Недоступный элемент нельзя выбрать или изменить его значение. Существуют атрибуты событий, которые непосредственно связаны с формами:

• onfocus — элемент получает фокус (выбирается);

• onchange — информация элемента изменена;

• onbluг — элемент теряет фокус.

Элементы форм

<ISINDEX>

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

<ISINDEX prompt="Строка для ввода критерия поиска">

Данный элемент позволит создать поле ввода, показанное на рис. 1. Работа это­го элемента связана с определенным на текущей странице базовым URL. Допус­тим, задан базовый адрес:

<BASE href="http://www.название.домен/путь">

Значение атрибута href должно представлять собой адрес некоторого поискового средства в Интернете. Если пользователь введет в поле элемента ISINDEX последова­тельность ключевых слов (слово1, слово2, словоЗ), то броузер сформирует запрос:

http;//www.название. домен/?слово1+слово2+словоЗ

Эта строка будет отправлена на сервер для активизации поисковой машины. Тео­ретически этот метод очень удобен, но на практике его применение ограничивает­ся тем, что не все поисковые программы поддерживают стандартный синтаксис запроса. Имеется в виду использование знаков «?» и «+». Поэтому данный прием годится только для некоторых поисковых серверов.

Стандартные атрибуты: id, class, lang, dir, title, style.

Рис. 1. Пример использования элемента ISINDEX

<FORM> </form>

Этот элемент необходим для построения достаточно сложных форм. После заполне­ния формы и подтверждения ввода со стороны пользователя, введенная информа­ция пересылается на сервер и обрабатывается при помощи CGI-программы, связан­ной с формой. Атрибут action должен указывать на имя программы, например:

<FORM action="http://www.название.домен/имя программы" method="post">

<INPUT>

Этот элемент позволяет создавать различные части формы, такие как флажки, переключатели, поля ввода. Элемент не имеет конечного тега, так как все парамет­ры задаются при помощи атрибутов. Вид элемента определяет атрибут type:

• type="text" — создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value;

• type="password" — создание поля для ввода пароля, причем введенная ин­формация отображается звездочками;

• type="checkbox" — создание флажка;

• type="radio" — определение одного переключателя. Для создания группы пе­реключателей необходимо использовать несколько элементов INPUT. Вот при­мер группы из трех переключателей:

<НЗ> Переключатели </h3>

<INPUT type="radio" name="S001" value ="Первый">

<INPUT type="radio" name="S001" value ="Второй">

<INPUT type="radio" name="S001" value ="Третий" checked>

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

type="button" — создание кнопки произвольного назначения;

type="submit" — создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке;

type=" reset" — тоже кнопка, но для отмены ввода данных в форму;

type="image" — создание кнопки с рисунком. Для указания графического файла используется атрибут src. Атрибут align предназначен для позиционирова­ния кнопки с рисунком. Значения атрибута уже неоднократно упоминались: bottom, left, middle, right, top.

type="file" — средство выбора файла для присоединения к форме. Пользова­телю предлагается записать имя файла в поле ввода. Кроме того, броузер авто­матически создает рядом с полем ввода кнопку Обзор, которая позволяет запу­стить стандартный (для операционной системы) диалог выбора файлов;

type="hidden" — скрытый от пользователя элемент. Такие элементы использу­ются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.

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

Атрибут-name должен присутствовать во всех элементах INPUT, кроме кнопок под­тверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени мо­жет выделить необходимые данные.

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

Выше было показано, как с помощью атрибута checked создать группу переклю­чателей. Точно таким же способом этот атрибут может быть использован и для флажков. Его наличие показывает, что флажок должен быть установлен по умол­чанию. В отличие от переключателей, одновременно может быть установлено любое количество флажков.

Атрибут size позволяет задать длину поля ввода. Длина выражается в символах, но эта величина может быть задана только приближенно. Чтобы разместить в поле ввода определенное количество символов, потребуется подбор значения ат­рибута. При этом никто не может дать гарантию, что все броузеры обеспечат тре­буемую длину строки, а не меньшую. Таким образом, длину поля ввода необходи­мо выбирать с запасом.

Атрибут maxlenght может быть использован двумя способами. Во-первых, он определяет максимальную длину строки, которая может быть записана в поле ввода. Во-вторых, с его помощью можно ограничить размер файла, присоединяе­мого к форме.

Атрибут readonly позволяет создать элемент, недоступный для редактирования.

Атрибут usemap может использоваться, если в форме создается карта.

Так же, как и в FORM, в элементе INPUT можно указывать атрибут accept. Допустимые общие атрибуты: accesskey, tabindex, readonly, disabled. Стандартные атрибуты: id, class, lang, title, dir, style, атрибуты событий.

Используя элементы FORM и INPUT, можно создать объект, который заменит анало­гичный объект, созданный на основе элемента ISINDEX.

<FORM action="действие" method="post"> <Р>Строка для ввода критерия поиска <BR> <INPUT type="text"> </form>

<LABEL/label>

Этот элемент является контейнером для других элементов формы. Например, можно объединить надпись и поле ввода:

<LАВЕl>Ваш адрес: <INPUT type="text" id="adres"</label>

Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for, значение которого должно совпадать со значением атрибута id соответствую­щего элемента:

<LABEL for="adress">Baш адрес: </label> <INPUT type="text" id="adress">

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

Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, атрибуты событий.

Пример формы

Часто формы исполь­зуются для ввода анкетных данных, поэтому наш пример будет имитировать по­добный документ:

<TABLE border=3>

<FORM action="mailto:Имя@cepвep.домен" method="post">

<TR>

<TD><LABEL for="imya">Имя: </label>

<TD><INPUT type="text" id="imya">

<TR>

<TD><LABEL for="familiya">Фамилия: </label>

<TD><INPUT type="text" id="familiya">

<TR>

<TD><LABEL for="telefon">Teлeфoн: </label>

<TD><INPUT type="text" id="telefon">

<TR>

<TD>Пол:&nbsp; &nbsp;

<INPUT type="radio" name="pol" value="Male"> M&nbsp;

<INPUT type="radio" name="pol" value="Female"> Ж

<TD align="bottom">

<INPUT align="bottom" type="submit" value="0тослать">

<INPUT type="reset">

</form>

</table>

В этом примере использована таблица для выравнивания элементов формы. В фор­ме есть несколько полей ввода и группа из двух переключателеq. Для тренировки вы можете заполнить форму информацией, и отослать ее по электрон­ной почте (например, себе). Для этого надо ввести в код страницы реальный элек­тронный адрес. Заполнив форму, следует щелкнуть на кнопке Отослать. Обратите внимание, что подпись этой кнопки задается в элементе на Web-странице. Под­пись кнопки Сброс не задана, поэтому она выбирается из настроек операционной системы. Иными словами, в нерусифицированной версии операционной системы эта кнопка может называться, к примеру, Reset.

После того как форма будет заполнена и отправлена щелчком на кнопке Отослать, она будет помещена в папку Исходящие почтовой программы. Чтобы действитель­но отослать форму, надо отправить это новое электронное послание. Если вы от­правляете форму самому себе, то через несколько минут можете проверить свой электронный почтовый ящик: форма в виде письма появится в нем.

<FIELDSET> <LEGEND> </legend> </fieldset>

Эти два элемента предназначены для создания группы полей в форме. Чтобы по­нять, как используются эти элементы, рассмотрим небольшой пример.

<FIELDSET>

<LEGEND>3aголовок</legend>

Город: <INPUT name="gorod2" type="text">

Фамилия: <INPUT name="familiya2" type="text"><BR>

Имя: <INPUT name="imya2" type="text">

Текст по умолчанию

</fieldset>

С помощью элемента FIELDSET несколько элементов объединяются: пользователь видит их заключенными в рамку. Внутри группы элементы формы ис­пользуются обычным способом.

Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент яв­ляется контейнером, в нем можно размещать другие элементы HTML. Например заголовок группы можно составить из двух строк, если использовать тег <BR>. В этом случае размер шрифта заголовка целесообразно уменьшить.

С помощью атрибута align можно регулировать положение заголовка:

• top — заголовок сверху;

• bottom — заголовок внизу (что не всегда удается реализовать);

• left — заголовок вверху и слева (значение по умолчанию);

• right — заголовок вверху и справа.

Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, dir, style, title, атрибуты событий.

Ход работы

1.  Выпишите новый материал из теоретического обоснования в конспект

2.  Проанализируйте приведенные примеры

3. Разработайте формы в блокноте (аналогичные приведенным ниже) используя теги <form>…</form>, <input>, <label>…</label>, <SELECT> <OPTION> </select>, <TEXTAREA> </textarea>, <BUTTON> </button>, <FIELDSET> <LEGEND> </legend> </fieldset>и т. д.

Содержание отчета

·  Тема

·  Цель

·  Законспектировать новый материал в конспект

·  Ход работы

·  Код HTML, разработанных форм

·  Вывод

Контрольные вопросы

1.  Перечислите атрибуты выравнивания

2.  Опишите процесс обработки форм сервером

3.  Где установлено приложение, обрабатывающее формы?