HTML Forms

Web Programs and HTML Forms

Many Web applications require that a user provides some input that should be sent by the browser to a web server. Typically a user fills out a form by filling in some fields with text and/or selecting from lists of options. There are a number of issues to consider when designing and developing such applications, here we are focusing on just the creation of the forms themselves, not on how these forms are processed by some program running on the web server.

HTML forms provide a mechanism for including many input boxes (and buttons) that the user can use to provide input to a web application. The browser understands that when an HTML form is submitted to a web application, the values that the user input to the system must somehow accompany the request itself. The request is a normal HTTP request, there is not a separate protocol for form submission. The designer of the HTML form must include information in the form itself that tells the browser where the submission should be sent, and whether to use an HTTP GET or POST request. Although the syntax of a POST is a little different than a GET, we will just mention using GET requests here (later we will explore what happens when a browser uses a POST to submit a form).

When a user submits a form using the HTTP GET method (by pressesing a submit button, or sometimes just by pressing the Enter key), the browser will compose a HTTP GET request that includes a URI in which a "query string" is appended to the URI after a '?'. This query string will contain the names and values of all the form fields in the HTML form being submitted. The general syntax of the query string looks like this:

name1=value1&name2=value2&...&namex=valuex

Each of the names corresponds to one form field, the values are the information the user supplies (by typing in a field or selecting from lists of options).

A complete HTTP get request that includes a query string created for a form submission might look like this:

GET /cgi/addmetoyourspamlist.cgi?first=dave&last=hollinger&email=hollingd@cs.rpi.edu HTTP/1.1
User-agent: Netscape

In the above example there are 3 form fields being submitted, one named "first" that represents the user's first name, "last" is the last name and "email" is an email address. Someone had to create the actual form used, in the rest of this document we look at the HTML tags used to create forms and how the browser uses these tags to submit.

URL Encoding

You might ask: what will happen if the user types in "billy bob" as the firstname in the above example? Wouldn't this mess things up since the space character would now show up in the HTTP request line? What if the following request is sent:

GET /cgi/addmetoyourspamlist.cgi?first=billy bob&last=hollinger&email=hollingd@cs.rpi.edu HTTP/1.1
User-agent: Netscape

The server expects three words on the request line, the example above has 4!

To avoid this problem (and a few others), the browser will not send the request as shown above (with a space in the query string). Instead, the browser will encode the query string using well known encoding rules called "urlencoding". The encoded string is used as the query part of the URI. The server/web application knows about this and will decode the query string before extracting field names and values. The rules of URL encoding are shown below:

Replace all ' ' (space characters) with the character '+'.
Replace punctuation characters with the hex equivalent, which is a 3 character sequence composed of a '%' followed by the HEX digits that make up the ASCII code of the punctuation character. Some examples:
- # becomes %23
- $ becomes %24
- ? becomes %3F
- \n becomes %0D

The FORM tag

All form elements must be placed between a <FORM> and </FORM>. There can be multiple forms within a single HTML document - each form is separate entity and the contents of only one form are submitted as query (although a single form many contain many elements). The FORM tag has required attributes ACTION and METHOD.

The METHOD attribute of a form tag specifies the HTTP request method that should be used when the contents of the form are submitted as part of an HTTP request. Typically the request method is either GET or POST. The web application that handles the request will receive the contents of the form and must support the method specified, or things won't work. In other words - it is possible to write a web application (CGI program or ASP script) that only handles GET requests, so when creating a form, you need to know a little about the application to decide whether to use GET or POST.

The ACTION attribute specifies where the contents of the form should be sent. This is typically a URL (could be relative or absolute), although sometimes people use a mailto: URL so that when the user submits the form it is sent to as an email message to the specified email address.

Some FORM tag examples:

<FORM method=GET ACTION=http://www.foo.com/cgi-bin/aprog>


<FORM method="GET" action="prog.cgi">

<FORM method=POST action="mailto:billy@whitehouse.gov">

Form Elements (Fields)

Between the <FORM> and </FORM> tags you define the text and fields that make up the form. You can include HTML tags inside a form to format the text however you want, and there are a number of new tags that are used to define form fields

There are a variety of types of form fields:

Text fields
- text
- password
- textarea
Radio Buttons
Checkboxes
Buttons
- User Defined
- Submit Button
- Reset Button (clear)
Hidden Fields

Input Fields

Input fields allow the user to type in a string value as input or to click on buttons or menus to select specific options. These fields are all created with the INPUT tag, the required attribute TYPE indicates what specific kind of input field is being created.

The INPUT tag also has a required attribute named NAME that establishes the name of the field being created. This name is important, since it will be sent to the Web Application along with the value the user provides. Within a single form, every input must have a unique name.

Below is a description of many of the types of input fields, see any HTML reference for a complete description

TEXT Input Fields

TEXT is the most common type of input field, it allows the user to type in a single line of text. There are some additional attributes that can control the maximum length of the field (MAXLENGTH), the size of the box drawn by the browser (SIZE) and the initial/default value for the field (VALUE).

Here are a few examples of TEXT input fields:

<INPUT TYPE=TEXT NAME=FOO>
       
<INPUT TYPE=TEXT
       NAME=PIZZA
       SIZE=10
       MAXLENGTH=20
       VALUE=Pepperoni>

Here is an example form that includes a couple of text fields:

<FORM METHOD=GET ACTION=cgi-bin/foo> Your Name: <INPUT TYPE=TEXT NAME="Name"><BR> Your Age: <INPUT TYPE=TEXT NAME="Age"><BR> </FORM>

Your Name:
Your Age:

A couple of things to notice:

There is no special kind of "number" field - we just use a text field to get the user's age (and hope they actually type in a number).
The INPUTs above result only in the display of a text box, the broser does not display the name of the field (if you want the box to be labeled on the screen, you need to do that with HTML).
The form above has no button to press, so there is no way for the user to submit the form!

Submission Buttons

Another type of input field is the SUBMIT type, this tells the browser to draw a button. When the user clicks on the button the browser knows to submit the contents of the form to the URL specified as the ACTION in the form tag.

Submit inputs support the attribute VALUE which is the string you want displayed in the button. If you don't include a VALUE attribute the browser will put the string "Submit" in the button. Note that the NAME attribute is not required for a submit input.

Reset Buttons

An input of type RESET tells the browser to create a button that the user can press to clear all form fields (set to the default values). You can specify the text to appear in the button with the VALUE attribute.

Now we can look at a complete form example:

<FORM METHOD=GET ACTION=cgi-bin/foo> Your Name: <INPUT TYPE=TEXT NAME=Name><BR> Your Age: <INPUT TYPE=TEXT NAME=Age><BR> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET VALUE="Clear Form"> </FORM>

Your Name:
Your Age:

The above form has the ACTION set to the relative URL cgi-bin/foo, which does not really exist (there is no such URI on the server). We can change the URL in the form to point to any web page or application we want, although if the URL does not reference a web application that is looking for the form fields Name and Age nothing special will happen. For example, we can specify the action as www.rpi.edu and see what happens:

Tables and Forms

Tables are often used to make forms look pretty - remember that you can include any HTML formatting tags you want within a form

<FORM METHOD="GET" ACTION="cgi-bin/foo"> <TABLE><TR> <TD>Your Name: </TD> <TD><INPUT TYPE="TEXT" NAME="Name"></TD> </TR><TR> <TD>Your Age:</TD> <TD> <INPUT TYPE="TEXT" NAME="Age"></TD> </TR><TR> <TD><INPUT TYPE="SUBMIT" VALUE="Submit" ></TD> <TD><INPUT TYPE="RESET" VALUE="Clear Form"></TD> </TR></TABLE> </FORM>

Your Name:
Your Age:

Checkbox Inputs

Inputs of type CHECKBOX present user with an item that can be selected or deselected. Each checkbox has a name and a value and can be initially selected/deselected. Only checkbox fields that are selected when the form is submitted are sent as part of the query. To set a checkbox to be initially checked, use the SELECTED attribute (this attribute does not nees a value.

If you don't specify a value in a checkbox tag, the browser will send the value "on". Here is an example with some checkbox definitions:

<INPUT TYPE=checkbox name=chocchip value=yes>
<INPUT TYPE=checkbox name=oreo SELECTED>

Here is a complete form example that includes some checkboxes:

<FORM METHOD=GET ACTION=cgi-bin/foo> Select all the cookies you like:<BR> <INPUT TYPE=CHECKBOX NAME=Oreo Value=yes> Oreo<BR> <INPUT TYPE=CHECKBOX NAME=Oatmeal > Oatmeal<BR> <INPUT TYPE=CHECKBOX CHECKED NAME=ChocChip SELECTED VALUE=ofcourse> Chocolate Chip<BR> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM>

Select all the cookies you like:
Oreo
Oatmeal
Chocolate Chip

You can have multiple checkboxes with the same name (each must have a different value for this to work), and the value of the field that is sent by the browser will be a collection of values for the named field (when sent to a web server, a field can have multiple values). Here is an example (you can submit this form and although there is no web application to handle it, you will be able to see the query string created by the browser).

<DIV BGCOLOR=yellow> <FORM METHOD=GET ACTION=cgi-bin/foo> Select all the cookies you like:<BR> <INPUT TYPE=CHECKBOX NAME=Cookie Value=Oreo> Oreo<BR> <INPUT TYPE=CHECKBOX NAME=Cookie Value=Oatmeal> Oatmeal<BR> <INPUT TYPE=CHECKBOX CHECKED NAME=Cookie VALUE=ChocChip SELECTED> Chocolate Chip<BR> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM> </DIV>

Select all the cookies you like:
Oreo
Oatmeal
Chocolate Chip

Radio Button Inputs

Radio Button inputs are like checkboxes, except that the user must select only one item from group of choices. The way the browser knows which radio buttons are part of a group of choices is by looking at the NAME attribute. All radio button inputs that form a group must have the same NAME, and each should have a different value for the VALUE attribute (this is how the web application will find out which was picked).

Here is a complete form that includes some radio buttons:

<FORM METHOD=GET ACTION=cgi-bin/foo> Select the cookie you want to order:<BR> <INPUT TYPE=RADIO NAME=Cookie Value=Oreo> Oreo <BR> <INPUT TYPE=RADIO NAME=Cookie Value=Oatmeal> Oatmeal <BR> <INPUT TYPE=RADIO CHECKED NAME=Cookie Value=ChocChip> Chocolate Chip<BR> <HR> Select the size drink you would like:<BR> <INPUT TYPE=RADIO NAME=drink VALUE=1> <span style="font-size:small"> Small</SPAN><BR> <INPUT TYPE=RADIO NAME=drink VALUE=2> <span style="font-size:medium"> Medium</SPAN><BR> <INPUT TYPE=RADIO NAME=drink VALUE=3> <span style="font-size:large"> Large</SPAN><BR> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM>

Select the cookie you want to order:
Oreo
Oatmeal
Chocolate Chip

Select the size drink you would like:
Small
Medium
Large

TEXTAREA Form Fields

You can create a multiline text field with the TEXTAREA tag - you don't use the INPUT tag to create this kind of field. The TEXTAREA tag requires the NAME attribute and supports the attributes ROWS and COLS (to define the size of the box drawn on the screen). Unlike the INPUT tag - the TEXTAREA tag has an end tag, so you need to include a </TEXTAREA> tag.

Everything included between the <TEXTAREA> and </TEXTAREA> tags is the initial value of the multiline text box. The user can delete, edit or add to this initial text.

Here is a complete example:

<FORM METHOD=GET ACTION=cgi-bin/foo> Please enter your address in the space provided:<BR> <TEXTAREA NAME=address COLS=40 ROWS=5> Your address goes here </TEXTAREA><BR> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM>

Please enter your address in the space provided:
Your address goes here

SELECT form fields

The SELECT and OPTION tags can be used to create pull-down menus and scrolling lists of choices. The SELECT tag must include a NAME attribute (this is the name of the form field sent by the browser). The SELECT tag supports the optional attribute SIZE which controls the number of options displayed at once. If the SIZE attribute is omitted or set to the value 1, the browser will display a pull-down menu. If the attribute has a value greater than 1, the browser will display a scrolling list of options.

Between the <SELECT> tag and the corresponding end tag </SELECT> there can be number of OPTION tags - one for each choice you want displayed. The text that follows the OPTION tag is the text that will be displayed by the browser. The value sent by the browser if a choice is selected can be specified with a VALUE attribute, if none is specified the value sent will be the text that follows the OPTION tag.

Below is an example that displays a pull-down menu, the OPTION values are not specified so the browser will sent the text that is displayed as each menu item:

<FORM METHOD=GET ACTION=cgi-bin/foo> Pick your favorite: <SELECT Name="cookie"> <OPTION>Oreo <OPTION>Oatmeal <OPTION>Chocolate Chip </SELECT> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM>

Pick your favorite:

Here is another example, this one will appear as a scrolling list (the SIZE attribute controls the size), and the OPTION values are set inside the OPTION tags:

<FORM METHOD=GET ACTION=cgi-bin/foo> Pick your favorite: <SELECT Name="cookie" SIZE=3> <OPTION VALUE="1">Oreo <OPTION VALUE="2">Oatmeal <OPTION VALUE="3">Fig Newton <OPTION VALUE="4">Chocolate-Chip <OPTION VALUE="5">Chocolate Chocolate-Chip <OPTION VALUE="6">Chippity Chocolate Chip </SELECT> <INPUT TYPE=SUBMIT VALUE=Submit> </FORM>

Pick your favorite:

Form Submission

When the user presses on a submit button the following happens:

The browser uses the FORM method and action attributes to construct a request.
A query string is built using the (name,value) pairs from each form element. Form field names and values are concatenated together with an = separating each name and value. The character & separates the name/value pairs. The query string would look somethine like: name1=value1&name2=value2&name3=value3.
The query string is URL-encoded.

There are a few rules to keep in mind:

For each checkbox selected the name,value pair is sent.
For all checkboxes that are not selected - nothing is sent.
A single name,value pair is sent for each group of radio buttons.
Unnamed elements like submit and clear buttons don't generate a name/value pair to be part of the query

Checking what is sent by the browser

As many of the above forms demonstrate, you don't need to have an actual web application written to determine what the browser will send when a form is submitted. Any form the uses the GET request method includes all the form data in the URI, and this will appear in the Address box of the browser.

Other Form Field Types

There are more form field types:

Image buttons.
User defined buttons.
Hidden Fields - nothing is displayed by the browser but a name/value pair are sent as part of the query.