Introduction to Forms

line.gif

Form Specification and Controls

The tag <form> is used to initiate the specification of a form. Forms are the primary means of input in HTML. Within a <form> - </form> bracket, there are three standard controls used to supply input. The form input controls are shown below.

<input> Defines a user input box.
<select> Creates a dropdown selection list in a form.
<textarea> Multiline text area in a form.

Name/Value Pairs

The form elements shown above use the attributes of name and value. The name attribute is assigned by the form designer and the value attribute can be initialized by the form designer. Data entry into a control allows the value attribute to be changed. Upon submission, the data generated is formatted as a sequence of name/value pairs, where the name and value in each pair are separated by an ampersand (&).

URL Encoding

The data stream generated by a form (and sent to a chosen URL) is further formatted (apart from separating each name/value pair with an ampersand). This formatting is referred to as URL encoding. URL encoding involves converting spaces to plusses (+) and certain accented characters to hexadecimal. When a server receives URL encoded data, it is required to split the data into a sequence of names and values and then URL decode the resulting values. Typically, a server side script or program using the Common Gateway Interface (CGI) protocol is required to perform this function. CGI is an entire branch of study and not covered in this book.

Testing Forms

The National Center for Supercomputing Applications (NCSA) supplies a free internet service for testing forms. Two different URL's are supplied for forms testing - one for the 'get' method and one for the 'post' method. These URL's are shown below.

Method URL
post http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
get http://hoohoo.ncsa.uiuc.edu/cgi-bin/query

The samples in this chapter make use of the post method; hence, they use the first URL. Thus, in order for the samples to be fully functional, you need to be logged on to the internet.

Forms - An Example

<html>
<head>
<title>A Sample Form</title>
</head>

<body>
<div align=center>
<br><br><br><hr><br>
<font size=+3><b>Rating Benedict McNamara's HTML Guide.</b></font>
<br><br>

<form method=post action="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">

<font size=+2>The following categories are available.</font><br><br>

<input type=radio name=rating value=G> <big><b>Good</b></big>
<input type=radio name=rating value=B> <big><b>Better</b></big>
<input type=radio name=rating value=E> <big><b>Excellent</b></big></input>

<br><br><br>
<input type=submit>
</div>
<br><br><br>
<hr>
</form>

</body>
</html>

Take this link to see the above sample in action. If you were logged on and submitted the form, and everything went according to plan, then you would have received a reply that looks something like the panel you will see upon taking this link. I say "something like" because there are three different possibilities for the field rating, being: G, B and E.

Immediately after the body begins, a division is defined using the tag <div>; thus, the entire form is contained within this division and all the form's text is centered.

The tag <form> begins the specification of the form. Valid values for the attribute method are post and send. Post is the preferred method, and causes the name/value pairs to be sent as a data stream. The send method causes the form's name/value pairs to be URL encrypted and suffixed to the URL specified in the action attribute. For the case at hand, the attribute specifies a target URL of "http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query", whereas previously mentioned, there sits a program that formats the data as a panel and returns it to you. In general, the value specified for the action attribute can be a url that is configured to receive the form data.

The next section next.gif shows how to mail yourself some information using forms. It also makes use of some other form controls.