XHTML Forms

XHTML forms are primarily used to gather user input data and send it to scripts (programs) running on a web server. There are several ways in which this can be achieved, from the old but still good Common Gateway Interface (CGI) to the new environments such as ASP, PHP, JSP, ASP.NET. Regardless of the server side programming environment to sequence of operation is much the same.

CGI Sequence of actions

The client browser sends a request (HTTP message) to the server
- may be triggered in several ways - e.g. form submit
- names the URL of the CGI program
- data can be sent with the message - get/post
Server software on the server machine receives the message
Server calls the CGI program
- information passed to the CGI program
  - get/post data
  - cookies
  - client environment data
  - server environment data
CGI program runs
- has access to server resources - e.g. filesystems, databases
- outputs a response - e.g. an HTML document
Server software routes stdout from the CGI program back to the client
Client browser receives the HTTP response

Sequence of actions with PHP as an HTTP server module

This is much the same as the CGI diagram above except the PHP script executes within the process space of the HTTP server. With an Apache HTTP server PHP may be configured to run as either a server module or as a CGI script.

Forms

The HTML <form> tag has three attributes that control the interaction of the form with the program on the server:

action provides the URL of the program that is to process the form data.
method specifies how the name=value pairs are transmitted
- get - data is transferred as part of the URL
- post - data is transferred after the URL in the same http data stream
enctype specifies the data encoding used in transmission
- default is Internet Media Type (application/x-www-form-urlencoded)

For XHTML validity the <form> tag must be outside any container but the various form elements must be inside a container such as a paragraph or table.

<form action="/~mk05/cgi-bin/form.pl" method="get" enctype="application/x-www-form-urlencoded">
<p>
   Form components
</p>
</form>

Various types of input allowed in forms:

An input type text allows a single line of text input. The maxlength attribute provides some user input validation.

Name: <input type="text" size="20" maxlength="30" name="userName" value="Betty"/>

Use a label for the input and suppress the display of the data as it's typed. This value can be seen by simply looking at the page source.

<label for="userPasswd">Password: </label>
<input type="password" maxlength="8" name="userPasswd" id="userPasswd" value="secret"/>

A textarea is used for multiline input. Note how the value of this element is not an attribute but the element content.

<textarea rows="7" cols="40" name="address">
3 Bedrock Blvd.,
Boulder,
Colorado
</textarea>

Only one of a group of radio buttons with the same name can be selected. Note the use here of the selected attribute.

<input type="radio" name="age" value="under_18" checked="checked"/>Under 18<br />
<input type="radio" name="age" value="range18_30"/>18 to 30<br />
<input type="radio" name="age" value="over_30"/>Over 30<br />

Checkboxes allow multiple selections from a range of options. An array syntax is ordinarily used for the input name because it can have multiple values.

<input type="checkbox" name="mags[]" value="Hamster"/>Hamster Weekly<br />
<input type="checkbox" name="mags[]" value="Reptile"/>The Reptile Specialist<br />
<input type="checkbox" name="mags[]" value="Beekeeping checked="checked"/>Practical Beekeeping

The select and option elements operate in much the same way as checkboxes and radio buttons but provide a pulldown menu.

<select name="experience">
   <option value="newbie">Novice</option>
   <option value="ok">Intermediate</option>
   <option value="good" selected="selected">Expert</option>
   <option value="showoff">Wizard</option>
</select>

Note that the value is not the content of the option element. With the select multiple attribute a select element provides a scrolling list. Here the value attribute is omitted and the content of the option element is used as a value.

<select multiple="multiple" name="languages[]" size="4">
   <option>C</option>
   <option>C++</option>
   <option>Java</option>
   <option>Pascal</option>
   <option selected="selected">Perl</option>
   <option selected="selected">PHP</option>
   <option>Visual Basic</option>
</select>

Types of form buttons:

Input type submit buttons cause the form data to be transmitted in an HTTP request to the web server which forwards the data to the CGI program.

Multiple submit buttons may be used in a single form. The name and value of the submit button are transmitted so the application can do something different depending on which button was clicked.

<input type="submit" value="Definitely Yes" name="myButton"/>
<input type="submit" value="Absolutely Not" name="myButton"/>

JavaScript may be triggered by button events.

<input type="submit" value="Uncertain" name="myButton" onclick="return confirm('Are you sure?')"/>

Images may be used as submit buttons. The x, y coordinates of the mouse pointer click event on the image are sent to the server with the rest of the form data. Note the tool tip as the mouse pointer lingers over the image.

<input type="image" src="bobpush.gif" name="Bob"
   alt="Intolerant Bob pushbutton" title="Please click on Intolerant Bob"  value="does_not_work"/>

An input type button may be used to trigger some JavaScript without submitting the form. In this example the JavaScript creates a cookie called 'crumble' with a value taken from the userName text input. (Another cookie called 'MyLittleSecret' was set by some JavaScript in the page head as the page loaded.)

<input value="Choc Chip Cookie" type="button"
onclick="document.cookie='crumble=' + this.form.userName.value + 
   ';path=/~mk05'"/>

An input type button could use some JavaScript to change the form properties such as the method and the action. Here the form is posted to a different URL than the URL given in the form action attribute. Note how this URL has some GET data appended to it.

<input value="POST form to info.php" type="button"
onclick="this.form.method='post';
this.form.action='../PHP/info.php?fruit=apple&pet=cat';
submit();"/>

A reset button will restore the form to default data.

<input type="reset" value="Clean Me!"/>

Hidden fields can be included with input type hidden. As the type implies these inputs are not displayed by the web browser. Hidden fields can be used to give the CGI application information about the form or can be generated by the CGI script to pass state information.

<input type="hidden" name="form_id" value="form123"/>

Significant Conclusions

This form demonstrator is a simple static HTML page that demonstrates several important concepts in the use of forms and the development of stateful web applications. Information is transmitted from this page to server side scripts in several ways. When the POST form to info.php link is clicked data is passed to the server side script info.php as a combination of GET, POST and cookie data.

Cookies are an important mechanism for implementing stateful web applications. This page demonstrates other ways of storing state information. State may be stored visibly as default values in form text fields and as default selects for checkboxes, radio buttons and options. State may be concealed in hidden form fields. And what about those GET parameters? This means of storing state is often referred to as URL re-writing. If this page were dynamically generated by a CGI program or server side script then all of these provide possible storage mechanisms for state.

HTML5 extends the range of form input types providing a richer widget set and inherent client side validation of user input.