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
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.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 tag is the most used form element. There are many types of input elements which are specified by the "type" attribute, e.g.,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.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.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.
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---
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.
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---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---
Radio Button:
A Radio button in a form is used to allow users select only one input out of a given number of options.Checkboxes:
Checkboxes are used in a form to allow users select more than one input out of a given number of options.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---Select a Country: |
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.
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 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".
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 a country: Here, you can select multiple countries at a time by "Ctrl+Click" on the desired names.
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: