Form and its Elements

In this session, we will introduce you to the idea of Forms and how they are used in HTML. You will learn about the basic tags of a HTML Form and their attributes.

Basically, a HTML Form is used to select and process different types of user inputs. A Form behaves typically like an interface through which users can input different elements, e.g., texts, images etc. which in turn HTML Server will store in a database, process them and return results to the users.

A Form is created by using the <form> tag. A form element (text field, text area etc.) allows users to input different types of information in the form.

The basic attributes of a <form> tag are described as below-

Attribute Name	Attribute Value	Description
Action	The URL of the server side scripting file which recieves the user input; it may be any .asp, .php., .jsp, ... type of file. e.g., http://mysite.com/login/registration.php.	Performs an action with the input entered by the user in the form elemets
EncType	"application/x-www-form-urlencoded": the default value; "multipart/form-data": used for multiple plain text form data of input element.	This attribute describes the content type that is used to submit the form to the server
Method	Get (default value), Post	It is the HTTP method for sending the form information to the server; the GET method is used for less secured form information and the POST method is used for more secured form information
Name	Name given to the form	Specifies a name to the form for client-side scripting

The Action Attribute

The following example will describe you how to input an information in a form and how the action attribute works to process the information.

<form action="html_form_action.asp" enctype="multipart/form-data" method="get" name="input">

Username:
<input type="text" name="user">
<input type="submit" name="Submit">

</form>

Here, a text field and a submit button is created by specifying the input type attribute as "text" and "submit" respectively.

When you input some text in the above text field and click on the "Submit Query" button, your information will be sent to a file specified as "html_form_action.asp" in the action attribute. This file will process your data and return you a page containing the results as user=your_name. This is not shown here as it is a server side scripting.

The Input Element

The <input> tag is the most used form element. There are many types of input elements which are specified by the "type" attribute, e.g.,

<input type="text" name="username" value="Arnold">

Here, type of the input element is a text field which considers only text inputs as its value.

We will now describe how different types of input elements are used in HTML forms---

Text Field:

Text Field in a form allows users to input text elements like text character, numbers etc.

<form>

First Name:
<input type="text" name="firstname">

Last Name:
<input type="text" name="lastname">

</form>

The browser will show the text fields as---

Here, you can insert letters, numbers etc. as text inputs.

Password Field:

Password field allows users to insert characters as password given to some element in a form.

<form>

User Name:
<input type="text" name="username">

Password:
<input type="password" name="password">

</form>

The browser will show this as---

Here, the input type is password in the password field. You will notice that the characters you type in the password field is visible only as bullets or asterisks, it will not be displayed to others unlike the username in the text field.

Create a Button in a Form:

A Button in a HTML form can be created as an input type element. By clicking a button users request their information to be processed.

In the following example, we create just a simple button; no specific task will be performed by it.

In the browser, it looks like---

The text "Click Me!" put as the value of the button is displayed on the button in the browser.

Submit button

A Submit button can be created as an input element by specifying the type attribute as "Submit". When an user clicks on a submit button, the information entered in the form is submitted to the server.

Take the following example---

<form action="">

User Name: <input type="text" name="username">

Password: <input type="password" name="password">

<input type="submit" name="submit" value="Login">

</form>

The browser will show this as---

After entering username and password the user clicks on a submit button named "Login" which invokes the action attribute to submit the data to the server.

Reset button

A Reset button is used to reset the information entered in a form element to the default value or to change the information previously entered.

<form action="">

Enter your name: <input type="text" name="information" value="Arnold">

<input type="Reset" name="Reset" value="Reset name">

</form>

Image as a button

We can use an image as a button. For this, the "src" attribute is added in the input element which gives the URL of an image to be set as a button. The type attribute is specified as "image" and the value as "InputTypeImage".

Uploading a File:

To upload a file, we use the input type "File" element in HTML. This can be shown as below---

In the browser, it will be like ---

On clicking the "Browse..." button, you can upload a file from your database into the server. The URL of the file will be displayed in the text field provided.

The Hidden Input Type:

The "Hidden" input type element is used by the web authors to hide some particular form data from the users. It is useful in carrying user information from form to form as hidden input type for user applications containing several HTML documents.

In the following example, the e-mailed contents of a form is specified as "hidden" input types--- 0

The above input fields are hidden in the web browser only, they can be still viewed in the HTML document source page.

Radio Button:

A Radio button in a form is used to allow users select only one input out of a given number of options.

<form action="">

Choose a vehicle:

<input type="radio" name="vehicle" value="bike" checked="checked"> Bike
<input type="radio" name="vehicle" value="car"> Car
<input type="radio" name="vehicle" value="bus"> Bus

</form>

In the browser, it looks like--- 1

User can select only one item at a time. Here, the vehicle "bike" is made "checked" by default. If you select another value, it will become unselected.

Checkboxes:

Checkboxes are used in a form to allow users select more than one input out of a given number of options.

<form action="">

<input type="checkbox" name="vehicle" value="bicycle" checked="checked"> I've a bicycle
<input type="checkbox" name="vehicle" value="motorbike"> I've a motorbike
<input type="checkbox" name="vehicle" value="car"> I've a car
<input type="checkbox" name="vehicle" value="bus"> I've a bus

</form>

In the browser, it looks like--- 2

User can select more than one item at a time. Here, the vehicle "motorbike" is made "checked" by default.

The Select Element

The Select element is used in HTML forms to create a drop-down box or a drop-down list. The Select element has three basic optional attributes as shown in the following table -

Attribute Name	Attribute Value	Description
Name	A Unique Name	It is used to give a unique name to the drop-down list.
Size	Any Number, e.g., 1, 2, 3, ...	It is used to define the size of a drop-down list.
Multiple	Multiple	It is used to select multiple items at a time from a drop-down list.

A Simple Drop-Down List:

The following example will show how to create a simple drop-down list--- 3

Select a Country:

<select name="country">

<option name="Australia" value="Australia">Australia</option>
<option name="Belgium" value="Belgium">Belgium</option>
<option name="Germany" value="Germany">Germany</option>
<option name="India" value="India">India</option>
<option name="UK" value="UK">UK</option>
<option name="USA" value="USA">USA</option>

</select>

Each item to be displayed in the list is written in between the option tags <option> and </option>.

In the Browser, it will be shown as---

Select a country:

You can see the name of the countries by clicking on the list and select any one of them you wish to. When you click another name, the previous one will be replaced by it. 4

Size of a Drop-Down List:

By specifying a definite value to the "size" attribute in the select element, we can create a drop-down list of any size. Consider the following example -

Select a Country:

<select name="country" size="3">

<option name="Australia" value="Australia">Australia</option>
<option name="Belgium" value="Belgium">Belgium</option>
<option name="Germany" value="Germany">Germany</option>
<option name="India" value="India" selected="selected">India</option>
<option name="UK" value="UK">UK</option>
<option name="USA" value="USA">USA</option>

</select>

In the Browser, it will be shown as---

Select a country:

Here, name of three countries will be displayed at a time in the list. You can make any one of the itmes of a drop-down list as "selected" by default. In this list "India" is displayed as "selected by default". 5

Multiple Selection in a Drop-Down List:

We can select more than one item at a time in a drop-down list. For this, the value of the attribute "multiple" of the select element, is specified as "multiple". Consider the following example -

Select a country:

<select name="country" size="4" multiple="multiple">

<option name="Australia" value="Australia">Australia</option>
<option name="Belgium" value="Belgium">Belgium</option>
<option name="Germany" value="Germany">Germany</option>
<option name="India" value="India" selected="selected">India</option>
<option name="UK" value="UK">UK</option>
<option name="USA" value="USA">USA</option>

</select>

In the Browser, it will be shown as---

Select a country:

Here, you can select multiple countries at a time by "Ctrl+Click" on the desired names. 6

If you do not specify the size in the select element for a multiple selection, then all the items in the drop-down list will be displayed.

Select a country:

Text Area

A Text Area is an area where users can write an unlimited number of text characters. A text area is created in a form, using the <textarea> tag. The size of a text area is defined by the "rows" and "cols" attributes.

Following is an example--- 7

In the Browser, it will be shown as---

This is a text area

If you write any text in between the tags <textarea> and </textarea>, it will be displayed in the text area by default. 8

Form and its Elements