CoffeeCup - HTML Editor, Flash & Web Design Software

Over 49,068,746 Downloads in 87 Countries

Chapter 6: Form Elements

A form is pretty useless without some elements in it.

Most form elements are defined by the <input> tag. There are 10 different types of input elements, specified by the type attribute. These types are described in Table 6-2. Following the table I will present details on using each one.

Table 6-2. Input element types.

Value of type attribute	Element description
button	A button the user can click.
checkbox	A checkbox that lets the user turn an option on or off.
File	Lets the user select a file to upload.
hidden	Not displayed. Used to submit information that the user does not need to see or change.
image	Use an image instead of a standard Submit button.
password	A text box that displays dots instead of the actual characters.
Radio	An on/off button that lets the user choose one from a set of choices.
Reset	A reset button that resets all form elements to their initial values.
submit	A submit button that sends the form data to the URL specified in the <form> tag's action attribute.

Note that most form elements also require a name attribute. This is a name that uniquely identifies the element on its form. It is used during form submission to identify the data from that element. The name attribute is required for button, checkbox, file, hidden, image, password, text, and radio elements.

The Button Element

The button element displays a button that the user can click to execute a client-side script. The syntax for a button element is as follows:

<input type="button" name="name" value="caption"
   onclick="script" />

name is a unique name for the button.
caption is the text displayed on the button.
script is the script to execute when the user clicks the button.

You'll learn more about scripts in the following Chapters. Unless you have scripts on your page you will probably not use the button element in your forms.

The Checkbox Element

The checkbox element displays a checkbox that the user can turn on (checked) or off (unchecked) by clicking. The text next to the checkbox is not part of the element itself--you must add it separately. The element syntax is:

<input type="checkbox" name="name" value="value"
   checked="checked" />

name is a unique name for the checkbox.
value is the data value that is submitted if the checkbox is checked. If it is not checked, no data is submitted for the element.

Include the checked="checked" attribute if you want the checkbox to be checked when first displayed; omit this attribute if not.

Since the checkbox element does not provide for a label, you must do it yourself. Here's the HTML that was used to create the image of the checkbox above:

<p><input type="checkbox" checked="checked"
   name="Spam" value="HateSpam" /> I hate spam.</p>

The File Element

You use the file element when you want the user to be able to upload a file as part of the submission. The user can either type the name of a file in the box, or click the Browse button to browse for the file. The syntax for this element is:

<input type="file" name="name" size="size" />

name is a unique name for the element.
size is the width of the element in characters; the default is about 20 (browser dependent).

It's important to remember that in order to use the file element, you must have a script set up on the server that will properly accept and process the uploaded file.

The Hidden Element

As the name implies, the hidden element does not display on-screen. You use it when you want to include information as part of the submission without having the user see or be able to change the data. For example, you could use a hidden input field to identify the page the form is located on. The syntax is:

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

name is a unique name for the hidden element.

value is the data that will submitted for the element.

You can have as many hidden elements as you need on a form.

The Image Element

You use the image element when you want a form's Submit button to be an image rather than a standard button. You would use this element in place of a Submit element. The syntax is:

<input type="image" name="name" src="imageURL"
   value="value" alt="alternate" />

name is a unique name for the element.
imageURL is the URL of the image to display.
value is the data passed to submit target for the element.
alternate is the text to display if the image cannot be found.

The Password Element

The password element is used for entering passwords. It is identical to the text element except that the characters entered display as dots rather than actual characters. This is to prevent a nosy person looking over your shoulder from seeing your password. The adjacent text is not part of the password element--you must specify it separately. The syntax for this element is:

<input type="password" name="name" size="size"
   value="value" />

name is a unique name for the element.
size is the width of the element in characters; the default is about 20 (browser dependent).
value is the value initially entered in the element. Omit this attribute to have the password element initially empty.

The following HTML was used to create the password element shown above:

<p>Your password: <input type="password" name="password"
   /></p>

The Reset Element

The reset displays as a button on a form. If the user clicks it, the form is cleared--that is, returned to its initial state. The syntax for this element is:

<input type="reset" value="value" />

value is the text displayed on the button. If this attribute is omitted, the button displays "Reset".

The reset element is optional and, in my opinion, not all that useful. If the user makes a mistake entering data on a form they will want to edit just the mistake, and not clear the entire form. Even so, there may be situations in which you want to use it.

The Submit Element

Every form needs a submit element--after all, there is no point in a form unless it can be submitted! The element syntax is:

<input type="submit" value="value" />

value is the text displayed on the button. If this attribute is omitted, the button displays "Submit".

A form can have more than one submit element. This can be useful when you have a long form and do not want the user to have to scroll to bring a submit button into view. Note that you can use an image as a submit button with the image element, covered earlier in this section.

The Text Element

The text element is used for entering text. The adjacent text is not part of the text element--you must specify it separately. The syntax for this element is:

<input type="text" name="name" size="size"
   value="value" />

name is a unique name for the element.
size is the width of the element in characters; the default is about 20 (browser dependent).
value is the value initially entered in the element. Omit this attribute to have the text element initially empty.

The following HTML was used to create the text element shown above:

<p>First name: <input type="text" name="firstname"
   /></p>

The Radio Element

You use the radio element to create a group of two or more mutually exclusive options. In other words, one and only one of the options in a group can be selected. You will always use radio elements in groups of two or more. The adjacent text is not part of the radio element--you must specify it separately The syntax is:

<input type="radio" name="name" value="value"
   checked="checked" />

name is a unique name for the element group. All radio elements in a group must have the same name.
value is the data that is submitted for the group if the element is selected.

Include the checked="checked" attribute in the radio element that you want selected initially. You can use this attribute in only one radio element in a group. The following HTML was used to create the radio element group shown above:

<p><input type="radio" name="flavor" value="vanilla"
   /> Vanilla</p>
  
<p><input type="radio" name="flavor"
   checked="checked" value="chocolate" /> Chocolate</p>

You can have as many radio elements in a group as you need. They do not have to be placed adjacent to one another on the form, but it is a good idea to do so.

« Forms and Tables

Specifying the Form Destination »

Table of Contents