5.2 HTML Form Elements

A form of no use without some elements in it. Most form elements are defined by the <input> tag. There are different types of input elements, specified by the type attribute. These types are:

Value of Attributes	Element Description
Button	A button the user can click on
Checkbox	A checkbox that lets 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 standard Submit Button.
Password	A text box that displays dots instead of actual characters.
Radio	An on/off button that lets user choose one form set of options.
Reset	A reset button that resets all form elements.
Submit	A submit button that sends the form data to the URL specified in the <form> tag’s action attribute.

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

Let us discuss the above-mentioned elements one by one.

The Button Element

The button element displayed a button that 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 unique name for the button.
• Caption is the text displayed on the button.
• Script is the script to execute when user clicks the button.

The code used above will display the button as:

We will discuss about the scripts in the upcoming sections. Without use of scripts, one can hardly use the button element on the form.

Checkbox Element

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

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

• Name is a unique name for the check box.
• Value is the data value that is submitted if the check box is checked. If it is not checked, no data is submitted for the element.

Include the checked=”checked” attribute if you want the check box to be checked when first displayed; omit this attribute if not. See the following code for an example:

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

It will output as:

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 path of a file in the box or click the Browser button to browser for the file. Here is the syntax for this element.

<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.

The above used sample code shows output as:

It is 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.

Hidden Element

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 to see it. For example, you can use a hidden input field to identify the page the form is located on. The syntax is as follows:

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

• Name is unique name or the hidden element.
• Value is the data that will submitted for the element.

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 as follows:

<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 the submit target for the element.
• Alternate is the text to display if the image cannot  be found.

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. Here is the syntax for this element.

<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.
• Value is the value initially entered in the element. Omit this attribute to have the password element initially empty.

Given below is the output of the code discussed above:

Reset Element

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

<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.

Submit Element

Every form needs a submit element. The element syntax is as follows:

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

• Value is the text displayed on the button. If this attribute is omitted, the button displays “Submit”.

Note
You can use an image as a submit button with the image element, covered earlier in this chapter.

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 as follows:

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

• Name is unique name for the element.
• Size is the width of the element in characters; the default is about 20.
• Value is the value initially entered in the element. Omit this attribute to have the text element initially empty.

See the example below:

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

The above code will show output as:

Radio Element

You use the radio element to create a group of two or more mutually exclusive options. 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. Here is the syntax:

<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.

See the example given below:

<p><input type=radio name=flavor value=vanilla />Vanilla</p>
<p><input type=radio name=flavor value=blackforest />Blackforest</p>
<p><input type=radio name=flavor value=chocolate />Cholocate</p>

See output below

You can have as many radio elements in a group as you need.