HTML Forms allows us to get data from the user level. A simple example is any application form you are filling online such as passport etc. We can get different kinds of input from user such as text inputs, passwords, radio buttons, check box, submit button, drop down list etc. We can create forms by using <form> tag.
The Input Element:
It is the most important form element which is used to select user information in different ways. Some of them are
- Text Field
It is used to get one line input from user with input type is text. By default it accepts only 20 characters.
Example:
<form>
First name <input type="text" name="firstname">
<br>
Middle name <input type="text" name="middlename">
<br>
Last name <input type="text" name="lastname">
</form>
Output:
- Password Field
It is used for defining password with input type is password. The inputs in password field are hidden and display only character entities.
Example:
<form>
User name <input type="text" name="username">
<br>
Password: <input type="password" name="pwd">
</form>Output:
- Radio buttons
It is used to select only one value from the user with input type is radio
Example:
<form>
<input type="radio" name="sex" value="female">Female
<input type="radio" name="sex" value="male">Male
</form>Output:
- Check box
By using this check box you can select more than one value or zero. The input here is check.
Example:
<form>
<input type="checkbox" name="Language" value="HTML">HTML<br>
<input type="checkbox" name="Language" value="JAVA">JAVA<br>
<input type="checkbox" name="Language" value="SQL">SQL
</form>Output:
- Drop-down list
It is used to create a drop down list of values. According to the selection of a value, particular action is called. Here action is not specified.
For example
<form>
<select name="Language">
<option value="HTML">HTML</option>
<option value="JAVA">JAVA</option>
<option value="SQL">SQL</option>
<option value="C/C++">C/C++</option>
</select>
</form>
Output:
Buttons:
We can create buttons using <input> element. The type of the button is specified using type attribute. There are three types of values. They are
- Submit – When we click this button the form automatically gets submitted. It sends the data to the server which is specified in the form action attribute.
Example:
<form name="input" action="" method="get">
Password: <input type="password" name="pwd">
<input type="submit" value="Submit">
</form>Output:
- Reset- When we click this button, the form automatically reset into default stage. All values get erased.
Example:
<form name="input" action="" method="get">
Username: <input type="text" name="user">
Password: <input type="password" name="pwd">
<input type="reset" value="Reset">
</form>Output:
Note: For all submit forms, a particular form action should be called. Then only it proceeds to next stage. If action is not specified, then it will be like static display page.
