Лабораторная работа №6 Организация форм
В ранее выполненных лабораторных работах Вы освоили технологии, позволяющие предоставлять информацию посетителю Web-сайта. Но при разработке любой программы одна из главных задач, стоящих перед программистом, ‑ это создание механизма взаимодействия с пользователем. Вам нужно научиться получать информацию от посетителя Web-сайта, а затем обрабатывать эту информацию. В HTML для получения данных посетителя предусмотрены формы и их элементы. В этой лабораторной работе Вы освоите технологию создания форм для сбора информации посетителей.
Форма - это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку, где информация будет некоторым образом обработана.
После того, как посетитель заполняет предложенную ему форму (например, комментируя Ваш сайт или оформляя заказ в Вашем Internet-магазине), данные, введенные им в поля формы, отправляются серверной программе для последующей обработки. С обработкой данных формы на сервере мы познакомимся в следующих лабораторных работах, а сейчас научимся создавать формы для сбора информации посетителя сайта.
Создание формы
Форма организуется с помощью тега <FORM> и </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не следует вкладывать друг в друга.
С помощью атрибутов тега <FORM> указывается URL, по которому следует передать введенную в форму информацию (атрибут ACTION ‑ обязательный атрибут), и каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику (атрибут method).
Задание 1
Откройте справочник “Srav_html” на компакт-диске и ознакомьтесь с атрибутами тега <FORM> и правилами их назначения. Законспектируйте материал.
Описание элементов формы
Существует три типа элементов формы: <TEXTAREA>, <SELECT>, <INPUT>.
<TEXTAREA>...</TEXTAREA>
Этот элемент служит для создания многострочного поля ввода. У элемента <TEXTAREA> имеются несколько атрибутов:
NAME ‑ обязательный атрибут, определяющий имя, под которым содержимое поля будет передано обработчику;
ROWS – атрибут, устанавливающий высоту окна в строках;
COLS – атрибут, устанавливающий ширину окна в символах.
Например: <textarea name=”address” rows=”5” cols=”30”>. Внешний вид формы, содержащей элемент <TEXTAREA>, приведен на рис. 16.
Рис. 16. Пример использования элемента <textarea>
Многострочные поля ввода можно использовать, например, для ввода комментариев посетителя.
<SELECT> </SELECT>
Этот элемент служит для организации разворачивающихся меню и полей списка. У элемента <SELECT> имеются следующие атрибуты:
NAME ‑ обязательный, определяющий имя переменной, которую генерирует меню;
MULTIPLE ‑ устанавливает режим выбора нескольких значений из списка;
SIZE ‑ устанавливает число строк, отображаемых одновременно.
Между тегами <SELECT> и </SELECT> находятся значения, которые может выбирать пользователь. Они перечислены в теге <OPTION>. Тег <OPTION> ‑ одиночный элемент, не требующий закрывающего тега.
Тег <OPTION> определяет элемент меню. У тега <OPTION> имеются следующие атрибуты:
VALUE ‑ обязательный, устанавливающий значение, которое будет передано обработчику, если выбран этот элемент меню;
SELECTED ‑ показывает, что данный элемент отображается выбранным.
HTML-код списка из четырех элементов выглядит примерно так:
<html>
<head>
<title>пример select</title>
</head>
<body>
страна, в которой вы живете:
<form>
<select name=”country”>
<option value="Россия">Россия
<option value="Литва">Литва
<option value="Украина">Украина
<option value="Эстония">Эстония
</select>
</form>
</body>
</html>
Внешний вид этой формы показан на рис. 17.
Рис. 17. Пример раскрывающегося списка
Задание 2
Проверьте самостоятельно работоспособность предложенного в примере HTML-кода. Выясните, как влияют на вид формы атрибуты тега <SELECT> SIZE и MULTIPLE и атрибут тега <OPTION> SELECTED.
Примечание: при создании формы наиболее распространенная ошибка, доставляющая неудобство пользователю – неровно расположенные поля. Поэтому для размещения полей формы рекомендуется использовать таблицу.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
<INPUT>
Этот элемент предоставляет возможность использовать другие типы ввода информации: отдельные строки текста, переключатели, флажки и кнопки передачи запроса и отказа от ввода. Это одиночный элемент, не требующий закрывающего тега.
У тега <INPUT> имеются следующие атрибуты: NAME, SIZE, MAXLENGTH, VALUE, CHECKED, TYPE.
Задание 3
Откройте справочник “Srav_html” на компакт-диске и ознакомьтесь с атрибутами тега <INPUT> и правилами их назначения. Законспектируйте материал.
Типы элементов <INPUT>
Основные типы элементов <INPUT>, определяемые атрибутом TYPE:
TYPE=”RADIO” ‑ определяет переключатель. Используется в тех случаях, когда необходимо выбрать только один из родственных элементов. Это значение атрибута TYPE используется с атрибутами NAME (обязателен), VALUE (определяет значение, возвращаемое серверу в случае выбора данной кнопки), CHECKED (показывает, что кнопка выбрана по умолчанию). Присвоив одинаковые значения атрибуту NAME разных переключателей, их можно объединить в группу. В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
<input type=”radio” name=”modem” value="9600" checked> 9600 бит/с
<input type=”radio” name=”modem” value="14400"> 14400 бит/с
<input type=”radio” name=”modem” value="28800"> 28800 бит/с
В данном примере определена группа из трех радиокнопок, подписанных, соответственно: 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.
Задание 4
Если на Ваш сайт зайдет пользователь, желающий «усыновить» серьезную собаку, например питбуля, то, прежде чем оформить его заказ, следует поинтересоваться его возрастом.
Для этого Вы должны создать Web-страницу с формой, запрашивающей сведения о возрасте посетителя.
Форма, которую Вы сейчас создадите, должна выглядеть следующим образом (рис. 18):
Рис. 18. Пример использования элементов radio
Созданную Web-страницу сохраните в папке “Form” под именем “radio.htm”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
TYPE=”CHECKBOX” - кнопка с независимой фиксацией. Используется в тех случаях, когда одновременно можно выбрать несколько опций. Атрибуты: NAME (обязателен), VALUE, CHECKED.
Задание 5
Если на Ваш сайт зайдет пользователь, желающий «усыновить» собаку, то, прежде чем оформить его заказ, следует уточнить, какие породы его интересуют. Причем, возможно, он еще не решил, какой породы собака ему нужна, и готов рассмотреть несколько вариантов.
Чтобы решить эту задачу, нужно создать форму, использующую элементы checkbox, так как в этом случае, в отличие от использования элементов radio, можно выбрать несколько вариантов.
Форма, которую Вы сейчас создадите, должна выглядеть следующим образом (рис. 19):
Рис. 19. Пример использования элементов checkbox
Созданную Web-страницу сохраните в папке “Form” под именем “check.htm”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
TYPE=”SUBMIT” ‑ командная кнопка, которая отправляет на сервер все введенные данные. Данные отправляются по адресу, указанному в атрибуте ACTION тега <FORM>. Надпись на кнопке можно задать путем введения атрибута VALUE="[Надпись]", например:
<input type=”submit” value="отправить">.
TYPE=”RESET” ‑ определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. В этом случае данные обработчику не передаются, поэтому кнопка может и не иметь атрибута NAME. Надпись на кнопке задается при помощи атрибута VALUE="[Надпись]".
Задание 6
Откройте созданную в предыдущем задании страницу “check.htm”. Добавьте в конец страницы две кнопки: SUBMIT и RESET с соответствующими надписями. Проверьте действие кнопки RESET.
По нажатию кнопки SUBMIT данные, введенные пользователем, отправляются соответствующей программе для обработки. Имя этой программы и путь к ней указываются в атрибуте ACTION тега <FORM>. Вы пока не умеете писать такие программы (это тема следующей лабораторной работы), но, чтобы проверить работу кнопки SUBMIT, Вы можете в качестве значения атрибута ACTION указать адрес любой Web-страницы или картинки.
Сохраните созданную страницу в папке “Form” в файле “check.htm”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
TYPE=”TEXT” ‑ определяет окно для ввода строки текста. Это значение атрибута TYPE можно использовать с атрибутами NAME (обязателен), VALUE, SIZE и MAXLENGTH.
Задание 7
Если на Ваш сайт зайдет пользователь, желающий найти или «усыновить» собаку, то, прежде чем оформить его заказ, следует уточнить, каким образом Вы с ним будете связываться.
Чтобы решить эту задачу, нужно создать форму, позволяющую клиенту вводить контактную информацию о себе. При ее создании используются элементы text.
Форма, которую Вы сейчас создадите, должна выглядеть следующим образом (рис. 20):
Рис. 20. Пример использования элементов text
Поля, обязательные для заполнения, помечаются звездочками.
Сохраните созданную страницу в папке “form” в файле “text.htm”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
TYPE=”PASSWORD” ‑ определяет окно для ввода пароля. Абсолютно аналогичен типу TEXT, только вместо символов вводимого текста показывает на экране звездочки (*).
TYPE=”BUTTON” ‑ не выполняет никаких действий при нажатии на кнопку, если к ней не прикреплена программа. Это значение атрибута TYPE используется с атрибутами NAME (имя кнопки), VALUE (надпись на кнопке), ONCLICK (для указания имени программы, которая будет выполняться при нажатии на эту кнопку).
Теперь давайте еще раз обсудим характер (специфику) информации, которую будет предоставлять посетителям наш сайт.
Мы предположили, что наш сайт будет интересен прежде всего двум категориям посетителей: тем, кто потерял собаку и пытается ее найти, и тем, кто хотел бы «усыновить» ничейное животное.
Для предоставления этой информации посетителям сайта имеется два способа.
Первый – размещение информации в соответствующем HTML-документе (что мы по сути и сделали в третьей лабораторной работе). В этом случае при изменении информации необходимо внести изменения и в HTML-документ.
Второй способ заключается в организации и ведении базы данных, в которой будет храниться структурированная нужным образом информация, и разработке приложения, которое по требованию посетителя сайта выдает запрос к этой базе данных и генерирует документ, предоставляющий запрошенную информацию. Если информация в базе данных меняется, то эти изменения автоматически отображаются в Web-документе.
Первый способ Вы освоили. Его можно использовать на статических сайтах, предоставляемая которыми информация не имеет больших объемов и нечасто меняется. Такие сайты не предполагают взаимодействия с посетителем.
Второй способ, подразумевающий использование базы данных, гораздо более интересен и сложен в реализации. Он предполагает следующие этапы:
Сбор данных посетителя с помощью формы;
Обработка данных формы на сервере специальной программой;
Организация с помощью этой серверной программы обращения к базе данных;
Предоставление пользователю интересующих его сведений из базы данных.
Выполнение Вами следующего задания позволит нам вплотную подойти к освоению технологии работы с базами данных в Web.
Итоговое задание
На отдельной странице Вашего сайта необходимо создать две формы. Эти формы должны позволять посетителю вводить данные о себе и об интересующей его собаке. (Впоследствии именно эти данные мы будем вводить в базу данных).
При заполнении пользователем интерактивной формы важно обратить его внимание на то, какие из полей являются обязательными. Наиболее распространенный в Web способ пометить такое поле – это поставить сразу за ним знак звездочки (подумайте, какие поля на создаваемой Вами форме будут обязательными).
Постарайтесь реализовать все изученные элементы формы.
Рекомендуемое содержание первой формы (сведения о заказчике, желающим взять или найти потерянную собаку):
ФИО;
Адрес;
E-mail;
Контактный телефон;
Возраст.
Рекомендуемое содержание второй формы (сведения о собаке):
Порода (боксер, питбуль, овчарка, бульдог, пудель, терьер, беспородная и т. д.);
Пол;
Примерный возраст (0-1, 1-3, 3-5 и т. д.);
Окрас (черный, белый, рыжий, коричневый, цветной, ...);
Характер (спокойный, агрессивный, флегматичный и т.д.);
Кличка;
Характерные приметы (предусмотреть возможность ввода большого объема текста);
Потерял/Хочу взять;
Кнопки: Очистить и Отправить.
Подготовленную Вами форму показать преподавателю
Контрольные вопросы
Что определяет атрибут NAME тега <SELECT>?
Что определяет атрибут VALUE тега <OPTION>?
Какое значение должно быть у атрибута SIZE тега <SELECT>, чтобы отобразился раскрывающийся список?
Что будет, если в группе радиокнопок всем элементам присвоить разные значения атрибута NAME?
Напишите HTML-код, создающий следующий фрагмент формы:
Напишите HTML-код, создающий следующий фрагмент формы:
Напишите HTML-код, создающий следующий фрагмент формы:
