Создание форм

Отправка формы

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

Способ выполнения обработки на сервере важен для понимания при проектировании форм. Хотя здесь не рассматривается обработка форм, требуется иметь общее понимание, как сервер идентифицирует переданные ему данные формы.

Когда происходит щелчок на кнопке или изображении submit, данные из формы упаковывается для доставки на страницу, указанную в атрибуте action тега <form>. Когда формы передаются на сервер Web, эта информация передается указанным методом, который может быть get или post. Обычно данные формы передаются на сервер с помощью метода post - это означает, что они приходят на сервер отдельным от запроса URL потоком данных. Когда данные приходят, они делаются доступными для страницы с адресом URL и ее сценария обработки.

Пары имя/значение

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

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

fieldname1=value1&fieldname2=value2&fieldname3=value3....

Имена элементов управления и связанные с ними значения соединяются с помощью знака равенства ( = ) и скрепляются с другими парами имен и значений с помощью амперсандов ( & ). Одной из первых задач обработки в сценарии является разборка этой строки символов на отдельные имена и значения, чтобы извлечь введенные в форму данные. После этого сценарий обрабатывает данные согласно требуемым шагам обработки.

Пример формы

Следующая форма не включает все возможные типы полей, но она иллюстрирует некоторый подход к созданию простой формы.

Рис. 11.30. Форма для ввода данных

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

<form name="MyForm" action="MembershipForm.htm" method="post">

<h2>Membership Application Form</h2>

<table>
<tr>
  <td>First Name: </td>
  <td><input type="text" name="FirstName" size="15" maxlength="15"/></td>
</tr>
<tr>
  <td>Last Name: </td>
  <td><input type="text" name="LastName" size="15" maxlength="15"/></td>
</tr>
<tr>
  <td>Email: </td>
  <td><input type="text" name="Email" size="30" maxlength="50"/></td>
</tr>
<tr>
  <td>Gender: </td>
  <td><input type="radio" name="Gender" value="F"/>Female
      <input type="radio" name="Gender" value="M"/>Male</td>
</tr>
<tr>
  <td>Major: </td>
  <td><select name="Major">
        <option>Web Development</option>
        <option>Digital Media</option>
        <option>Database Administration</option>
        <option>Networking</option>
        <option>Software Development</option>
        <option>Systems Analysis</option>
      </select></td>
</tr>
<tr>
  <td>Reason for<br/>Joining: </td>
  <td><textarea name="Reason" cols="30" rows="5"></textarea></td>
</tr>
<tr>
  <td></td>
  <td><input type="submit" name="SubmitButton" value="Submit Form"/></td>
</tr>
</table>

</form>

Атрибут action тега <form> имеет в качестве значения страницу MembershipForm.htm. То есть, переданные из формы на сервер данные передаются этой странице. Для передачи используется метод post - это означает, что пары формы имя/значение посылаются отдельным потоком данных, независимо от запроса URL. Все множество пар имя/значение для заполненной формы будет напоминать следующее:

FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
+Web+pages&SubmitButton=Submit+Form

Отметим, что пробелы в строке заменяются знаком плюс ( + ). Когда сервер получает эту строку ввода, он разбивает ее на составные компоненты, так, чтобы связать отдельные имена и значения.

FirstName=Alice
LastName=Underwood
Email=a_underwood@hotmail.com
Gender=F
Major=Web Development
Reason=To meet new friends and make Web pages

Способ обработки этой информации получающей страницей зависит от сценария, который находится на этой странице.