Forms on Web Pages

Forms give the user a way to communicate via the web. They are made up of text boxes, radio buttons, drop down lists and check boxes. Order forms from on-line stores, requests for feedback, these are places where you've seen forms used.

Most often, the contents of a form are processed by some program that resides on the server. The earliest kinds of programs were CGI ("Common Gateway Interface") scripts which were written in a language called perl. Other languages now in use include ASP, ColdFusion, C++, PHP, Javascript and Visual Basic script.

We're probably not going to be writing any of these programs in this class, but we will be designing some forms.

Forms are made up of control elements:

1. input boxes for text and numbers
2. selection lists (drop down lists) for a number of choices (like state abbreviations)
3. option buttons (radio buttons) for choosing a single option from a list
4. check boxes which allow for a yes/no true/false
5. group boxes for organizing elements on the form
6. form buttons that allow the user to click and start processing

A field is a control element where the user can enter information.

The value in a field value (or field) is the information the user entered.

To create a form you need the form element first:

<form attributes>
elements of the form
</form>

The attributes of the form are what control how it is processed, and the elements of the form are the actual elements that appear (usually) on the form. The attributes will usually tell the browser the location of the program to be applied to the form's data, how the data is to be transferred and so on. It is easier to omit them when you are designing a form so that you don't accidentally try to process incomplete data.

You should always specify a name or id or both for a form. If your page has multiple forms it makes it easier to differentiate the data. Name and id seem to do the same thing, and in fact they are similar. Name is the attribute used by older browsers and id is used by the newer browsers. If you want your forms to be compatible to the most browsers, it is best to use both.

Example:

<form name=”register” id=”register”>

form contents

</form>

Any control element where users are asked to enter information is marked as an input element.

General format:

<input type=”type” name=”name” id=”id”>

where type specifies the type of the input field and name and id provide those fields.

HTML supports 10 input types:

• type=”button” displays a button that can be clicked to perform an action
• type=”checkbox” displays a checkbox
• type=”file” displays a browse button to locate and select a file
• type=”hidden” creates a hidden field that is not viewable on the form
• type=”image” displays an inline image that can be clicked to perform an action from a script
• type=”password” displays an input box that hides the text entered by the user
• type=”radio” displays an option button
• type=”reset” displays a button that resets the form when clicked
• type=”submit” displays a button that submits the form when clicked
• type=”text” displays an input box that displays text entered by the user

If you omit the type, the browser will create an input box (as in “text”) as the default.

Again, older browsers support the name attribute and newer browsers support the id attribute so it is best to use both and set them to the same value.

When the data from a form is sent to the server, it is sent as a name/value pair. The name or id of each field is paired with the actual data the user entered. The script will then process these name/value pairs.

Important point: Remember that case is important in field names, "Last" is not the same as "last" or "LAST".

Because input boxes are blank, you need to include a text description so the user knows what to do with them.

An input box for last name might be coded like this:

<input type=”text” name=”last” id=”last” />

but the user doesn't know what it is. One way is to simply label it:

Last Name <input type=”text” name=”last” id=”last” />

Another choice is to put them in table cells and then they will line up easily. For example:

<form name="example1" id="example1">
<table width="80%">
<tr>
<td>First Name</td>
<td><input type="text” name="first" id="first"/></td>
<td>Last Name</td>
<td><input type="text” name="last" id="last"/></td>
</tr>
</table>
</form>

Size attribute

You can specify the size of a textbox with the size attribute:

<input type=”text” size=”value” />

where value is the number of characters wide the box will appear.

<form name="example2" id="example2">
<table width="80%">
<tr>
<td>First Name</td>
<td><input type="text” name="first" id="first" size="15" /></td>
<td>Last Name</td>
<td><input type="text” name="last" id="last" size="20" /></td>
</tr>
</table>
</form>

This does not limit the number of characters a user may type in, just the appearance on the screen.

Maxlength attribute

You can set the maximum size or number of characters with the "maxlength" attribute:

<input type=”text” maxlength=”value” />

where value is the maximum number of characters that can be entered into the field.

<form name="example3" id="example3">
<table width="80%">
<tr>
<td>First Name</td>
<td><input type="text” name="first" id="first" size="15" maxlength="10" /></td>
<!-- of course this makes no sense to make the box larger than the maximum number of characters! -->
<td>Last Name</td>
<td><input type="text” name="last" id="last" size="20" maxlength="20" /></td>
</tr>
</table>
</form>

Default values

You can also put a default value into a text box with the "value" attribute.

<input type=”text” value=”Default” />

An example of this is:

<form name="example4" id="example4">
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>University</td>
<td><input type="text” name="unv" id="unv" size="45" value="Northern Illinois University" /></td>
</tr>
</table>
</form>

Labels on fields

You can add labels to your form elements instead of just placing text beside the input elements:

<label for=”id”>label that appears </label>

This can simplify the data entry process because the user can click on the label as well as on the input element to enter data.

</form>
<form name="example5" id="example5">
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td><label for="first5" >First Name</label></td>
<td><input type="text" name="first5" id="first5" size="15" maxlength="10" /></td>
<td><label for="last5">Last Name</label ></td>
<td><input type="text" name="last5" id="last5" size="20" maxlength="20" /></td>
</tr>
</table>
</form>

A password field doesn't encrypt the characters typed in, it just makes them appear on the screen as either asterisks or bullets. It only makes it impossible for someone to see what you've typed by looking at your screen. The format looks likes this:

<input type=”password” />

Return to main