It is important to remember that the purpose of forms is to collect information from users. Of course, this information has some further purpose, usually involving processing the submitted information in some fashion. Although browser-based scripts written in JavaScript can perform certain preliminary manipulation of the data, the bulk of processing activity takes place on the server, using a server-based programming language.

The manner in which server-based processing takes place is important to understand when designing forms. Although you will not be learning form processing here, you need a general understanding of how the server identifies form information submitted to it.

When a submit button or submit image is clicked, information from the form is packaged for delivery to the page identified in the action attribute of the <form> tag. When forms are submitted to a Web server, this information is transmitted by the method indicated, which can be either get or post. Usually, form information is submitted to the server using the post method, meaning that it arrives at the server in a separate data stream from the URL request. When the information arrives, it is made available to the URL page and its processing script.

Name/Value Pairs

Form information is identified and processed at the server through names and values. Each field on a form is assigned a name when the form is created. This unique identifier is used to reference that particular form control and the value associated with it. When information is typed into a textbox, for example, that text becomes the value of the control and can be referenced through the name assigned to the textbox. Likewise, when the user clicks on a checkbox or selects from a drop-down list, the data value associated with the checkbox or selection choice is referenced through the name assigned to that particular control.

Thus, form information ends up as field names and associated data values submitted by the user. Information arrives at the processing page as a string of name/value pairs in the format:

Control names and their associated values are paired with an equal sign (=) and are connected with other pairs of names and values by ampersands (&). One of the first tasks of a processing script is to parse this string of characters into separate names and values in order to extract the information entered into the form. Thereafter, the script manipulates the information according to whatever processing steps are necessary.

A Form Example

The following form does not include all the possible field types, but it does illustrate the approach to creating a simple form.

The form elements have been coded inside a table structure to help align the labels and fields. You should recognize all of the form controls in the following code listing.

<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>

The action attribute of the <form> tag is the MembershipForm.htm page. That is, information submitted from the form is made available to this page when it is transmitted to the server. The method is post, meaning that form name/value pairs are sent as a separate data stream to the URL. The entire set of name/value pairs for the filled-out form would resemble the following:

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

Note that blank spaces in the string are replaced by the plus sign (+). When this input string is received at the server, it is broken down into its component parts so that individual names and values are associated:

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

The manner in which this information is processed by the receiving page depends on the script contained on that page.

Form Submission

The Membership Form above has been designed for submission to a page containing a processing script. If you fill in all the fields and click the button, you will receive an email showing your entered information. You must enter a valid email address for the form to work properly.

The following listing shows the server script used to process the submitted form. This script appears on the page given in the action URL of the <form> tag. It takes the stream of names and values transmitted from the form and formats the information as a email message that is sent to the address captured from the Email textbox on the form. This script is written in the Visual Basic language.

<SCRIPT runat="server">

Sub Submit_Form (Src As Object, Args As EventArgs)

  If Email.Text <> "" Then
    Dim MyEmail = New MailMessage
    MyEmail.From = "dadams@mail.maconstate.edu"
    MyEmail.To = Email.Text
    MyEmail.Subject = "Form Submission"
    MyEmail.Body = "<h3>Membership Form</h3>"
    MyEmail.Body &= "<b>First Name = </b> " & FirstName.Text & "<br/>"
    MyEmail.Body &= "<b>Last Name = </b> " & LastName.Text & "<br/>"
    If Gender1.Checked Then
      MyEmail.Body &= "<b>Gender = </b> " & Gender1.Text & "<br/>"
    ElseIf Gender2.Checked Then
      MyEmail.Body &= "<b>Gender = </b> " & Gender2.Text & "<br/>"
    Else
      MyEmail.Body &= "<b>Gender = </b>Not checked<br/><br/>"
    End If
    MyEmail.Body &= "<b>Major = </b> " & Major.SelectedItem.Text & "<br/>"
    MyEmail.Body &= "<b>Reason = </b> " & Reason.Text & "<br/>"
    MyEmail.BodyFormat = MailFormat.Html
    SmtpMail.Send(MyEmail)
    Message.Text = "Form posted. Check your email."
  Else
    Message.Text = "Missing email address. Not posted."
  End If

End Sub

</SCRIPT>

As meantioned, form processing is well beyond the scope of these tutorials. Nonetheless, you should have an appreciation of the behind-the-scenes work that takes place when you interact with Web forms. This is a very simple example of form processing. In the reality of daily activity on the Web, far more time and effort goes into the processing of forms than in their design and coding. If you intend to become a professional Web developer, your continuing education is as a systems analyst, systems designer, and Web programmer. Learning to code XHTML is but a small part of what you need to know.

The mailto: Action

Normally, information from a form is transmitted to the server for processing by a script, as is the case with the above membership form. You can, however, transmit form information through an email message without using a script. This method uses mailto: in the action URL of the <form> tag, supplying an email address for receipt of the information. The syntax of the mailto: action is

<form action="mailto:email@address">

When you click the submit button on a form that uses the mailto: action, your computer uses your email program to receive the content from the Web form. Depending on how the email system is configured, either you have a chance to edit the mail message, or it is sent automatically to the email address in the mailto: attribute.

NOTE: This method only works if you are using a Post Office Protocol 3 (POP3-compliant) e-mail system (one that supports Microsoft Exchange Server, for example). It does not work under Simple Mail Transfer Protocol (SMTP) mail systems that are typically installed on Web servers.