Forms Part 1

In this tutorial we will see how to create forms in HTML. Forms are basically used to receive input from user. Forms are created using <form> tag. Form contains many elements in it. They are as follows:
Text field Text field is used to take one line input from user. It can be written as follows: <input type=”text”/>
Example <form>
Enter your state name <input type="text" name="state"/>
</form>
Note: name attribute is used to identify a particular text field. It can be any name. Output
Enter your state name  
Password field Password field is used to take password from user. They are mostly used in signin forms. It can be written as follows: <input type=”password”/> Example
<form>
Username <input type="text" name="user"/><br/><br/>
Password <input type="password" name="pass"/>
</form>
Output 
Username
Password
Radio button This element is used when you have to select one option from many options available. It can be written as follows: <input type=”radio”/> Example 
<form>
Select your gender<br/>
<input type="radio" name="gender" value="male"/> Male<br/>
<input type="radio" name="gender" value="female"/> Female
</form>
Output
Select your gender
Male
Female
Check box This element is used when you have to select more than one option from many options available. It can be written as follows: <input type=”checkbox”/> Example
<form>
You want bouquet of<br/>
<input type="checkbox" name="bouquet" value="white roses"/> White Roses<br/>
<input type="checkbox" name="bouquet" value="red roses"/> Red Roses<br/>
<input type="checkbox" name="bouquet" value="pink roses"/> Pink Roses
</form>
Output
You want bouquet of
White Roses
Red Roses
Pink Roses
Submit button This element is used to send data to server. <form> has an element action which contains page name to whom data is sent. <form> also has element method whose values are get or post. The difference between get and post is that you can see all data in address bar when you use get while data is invisible when you use post. It is written as follows: <input type=”submit”/> Example
<form action="" method="post">
Username <input type="text" name="user"/><br/><br/>
Password <input type="password" name="pass"/><br/><br/>
<input type="submit" value="Sign in"/>
</form>
Text Area Text area is just like text field. You have to use this element when you want more data from user. Text area can be written as follows: <textarea></textarea> You can also set number of rows and columns for text area. Example
<form>
Describe yourself<br/>
<textarea rows="10" cols="30"></textarea>
</form>
Output
Describe yourself

Button Button can be created as follows: <input type=”button”/> Example
<form>
<input type="button" value="Click Me"
</form>
Output 
Go to part 2