Простейшая Webформа

Простейшая Web-форма

Для примера давайте создадим небольшую форму для опроса посетителей нашего сайта. В нее будут вводиться следующие данные о посетителе:

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

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

Конечно, наша форма будет содержать обязательную кнопку Отправить и кнопку Сброс. В последней, правда, особой нужды нет, но все же давайте ее сделаем.

В качестве серверной программы зададим program.exe. Отправлять данные будем с использованием метода GET. Думается, 245 символов (256 минус длина слова "program.exe") для этого хватит. Конечно, если вы сомневаетесь в этом, можете воспользоваться методом POST.

Какие же элементы управления мы используем в нашей форме? Внимательно посмотрим на список данных, которые мы намереваемся собрать, и хорошенько подумаем. Имя, фамилия и год рождения представляют собой текст, различных вариантов ввода может быть бесконечно много, значит, для них используем поля ввода. Различных полов на этой планете существует всего два, поэтому используем набор из двух переключателей. Что касается стажа работы в Интернете, то здесь также имеет место ограниченный набор вариантов выбора, поэтому можно, в принципе, использовать группу переключателей. Однако, чтобы не "раздувать" размеры нашей формы, применим раскрывающийся список, который значительно компактнее.

Решив, что мы хотим получить в результате, приступим к работе.

Создайте новую страницу. Если хотите, задайте ее параметры (название, цвета текста и фона). Можете добавить заголовок и какой-нибудь поясняющий текст. И сохраните под именем, например I6.2.htm.

Теперь поместим на свежесозданную страницу форму. Для этого воспользуемся кнопкой Form (см. Рисунок 16.1) вкладки Forms панели объектов или пунктом Form меню Insert. Пустая форма выглядит точно так, как показано на Рисунок 16.2. Не очень вдохновляет, правда?

Теперь зададим параметры нашей формы. В поле ввода Form Name редактора свойств введите имя формы visitorData. В поле ввода Action задайте имя серверной программы program.exe. В раскрывающемся списке Method выберите пункт GET, а в раскрывающемся списке Enctype — пункт application/x-www-form-urlencoded. Все, наша форма готова. Можно приступать к наполнению ее содержимым.

Поставьте текстовый курсор внутрь формы. Наберите строку "Имя" и поставьте после него пробел. После этого текста поместите поле ввода. (Для этого либо нажмите кнопку Text Field панели объектов, либо выберите пункт Text Field подменю Form Objects меню Insert.) У вас должно получиться то же самое, что показано на Рисунок 16.31.

Содержание раздела