HTML Topics
©1998–2010 R. Hinton, Broome Community College
Last Updated: 16–Feb–10

Form Basics

Overview

Forms enable user interaction with a Web page. The most common use is to provide ways for users to submit data. Known as server–side processing‚ servers store instructions regarding how to process the form‚ which is sent by clicking a Submit button. However‚ when coupled with scripting languages like JavaScript‚ client–side processing can occur. This permits interaction with a user without requiring a server–side script. This permits interaction‚ but not data capture for long term use. This guide deals with constructing forms‚ not using them.

Creating Forms

A form is actually made up of various kinds of controls. Each of these controls provides a different method of providing user interaction. However‚ all the controls are enclosed in <form>…</form> tags. Most controls are defined using the <input> tag. The type attribute will determine the actual control type. Using the name attribute enables scripts to use the control. The following are the common types of controls that can be placed in a form:

Common Controls
Text Fields Text Blocks List Boxes
Check Boxes Radio Buttons Buttons

Text Fields Return to Top of Page

The text field is probably the most common control. As the name implies‚ it permits the user to enter a single line of text data. It’s important to include a label so the user knows what to enter. At the minimum‚ it requires the following:

Code

<form>
        Label: <input type="text">
</form>
Example

Label:

Three other attributes are also important. size allows you to set the size of the text field. When omitted‚ a 20–character field is created. More characters can be entered than the specified size‚ but only that many characters are visible at a time. value allows a default value to be placed inside the text field. This takes the general form:

Code

<form>
        Label: <input type="text" name="someName">size="10" value="default value" </form>
Example

Label:

Replace the values for size, value, and name with meaningful ones.

Return to Top of Page

Text Blocks Return to Top of Page

Sometimes a multi–line text field is required. This uses its own tag and has the following form:

Code

<form>
        <textarea></textarea>
</form>
Example

Notice that <textarea>…</textarea> tags are paired. You can modify the default size of 20 columns by 2 rows using the cols and rows attributes. This takes the form:

Code

<form>
        <textarea cols="50" rows="5" name="someName">Default text here</textarea>
</form>
Example


Be careful where you place any default text. Spacing after the tag is included when displaying the text in the block.

Return to Top of Page

List Boxes Return to Top of Page

List boxes provide a drop–down list of choices. This requires two tags. The <select>…<select> tag defines the list of choices and <option> tag defines each choice. It takes the following form:

Code

<form>
        <select>
                <option>Choice 1
                <option>Choice 2
        </select>
</form>
Example

For scripts to work properly‚ both tags must be modified. The name attribute is added to the <select> tag and value attribute is added to each <option> tag. When selected‚ the value is associated with list box's name. This takes the following general form:

Code

<form>
        <select name="someName">
                <option value="">Select one…
                <option value="1">Choice 1
                <option value="2">Choice 2
        </select>
</form>
Example

Notice the use of the dummy option for the first list item.

Return to Top of Page

Radio Buttons Return to Top of Page

Radio buttons are used when a user is only allowed one choice out of many. A group of choices are given the same name. The value is used for script processing. It takes the following form:

Code

<form>
        <input type="radio" name="someName" value="Choice1">Choice 1
        <input type="radio" name="someName" value="Choice2">Choice 2
        <input type="radio" name="someName" value="Choice3">Choice 3
</form>
Example

Choice 1 Choice 2 Choice 3

A default choice can be automatically selected by using the checked attribute. It takes the following form:

Code

<form>
        <input type="radio" name="someName" value="Choice1" checked>Choice 1
        <input type="radio" name="someName" value="Choice2">Choice 2
        <input type="radio" name="someName" value="Choice3">Choice 3
</form>
Example

Choice 1 Choice 2 Choice 3

Return to Top of Page

Check Boxes Return to Top of Page

Check boxes are like radio buttons except a user is allowed one or more choices out of many. A group of choices are given the same name. The value is used for script processing. It takes the following form:

Code

<form>
        <input type="checkbox" name="someName" value="Choice1">Choice 1
        <input type="checkbox" name="someName" value="Choice2">Choice 2
        <input type="checkbox" name="someName" value="Choice3">Choice 3
</form>
Example

Choice 1 Choice 2 Choice 3

A default choice can be automatically selected by using the checked attribute. It takes the following form:

Code

<form>
        <input type="checkbox" name="someName" value="Choice1" checked>Choice 1
        <input type="checkbox" name="someName" value="Choice2">Choice 2
        <input type="checkbox" name="someName" value="Choice3">Choice 3
</form>
Example

Choice 1 Choice 2 Choice 3

Return to Top of Page

Buttons Return to Top of Page

A button initiates a user’s action. This is normally called a command button and usually activates a script. It takes the following form:

Code

<form>
        <input type="button" name="someName" value="Some Button">
</form>
Example

Two special buttons exist. The Submit button is normally used to send forms to a server and the Reset button that clears the form. They are normally used together and take the form:

Code

<form>
        <input type="submit">
        <input type="reset">
</form>
Example

To change the button text‚ use the value attribute as before:

Code

<form>
        <input type="submit" name="someName" value="Click Me">
        <input type="reset" value="Clear Me">
</form>
Example

Return to Top of Page