This <form> Tag is widely used in the web development for sending data to the server.
Any application form, email form, login form use this <form> Tag. The data is usually submitted to web pages developed in
ASP, PHP, ASP.net etc. These web pages access the data submitted to them and do further processing on the server, based on the requiremnt.
The <form> Tag contains Textboxes, Textarea, CheckBoxes, Radio buttons, dropdown lists and submit buttons. All these HTML elements
are created using the <input> Tag with varying "type" attribute.
The syntax of <form> Tag is as shown below.
<form action="server based webpage" method="posting method">
form elements like Textboxes, Textarea, CheckBoxes, Radio buttons etc.
</form>
Frequently used <form> Tag attributes.
| action |
The server side webpage URL of the webpage that will accept the data submitted |
| method |
The method can take two values "GET" or "POST".
This determines how the data is passed to the server side webpage. |
TextBox Fields
Single line input TextBox Fields are created using the
<input> Tag with
"type"
attribute as
"text".
<form>
Name: <Input type="text" name="txtName" >
Age: <Input type="text" name="txtAge" >
Sex: <Input type="text" name="txtSex" >
</form>
|
|
Password Fields
Password Fields are created using the
<input> Tag with
"type"
attribute as
"password".
<form>
Password: <Input type="password" name="txtPwd" value="123" >
</form>
|
|
Note: The value attribute with "123" shows in the password field as asterix or circle.
Radio Buttons
Radio Buttons created using the
<input> Tag with
"type"
attribute as
"radio".
This Radio Buttons are used when one of the options have to be choosen.
Checkboxes
Checkboxes created using the
<input> Tag with
"type"
attribute as
"checkbox".
This checkbox are used when one or more of the options have to be choosen.
Dropdown List
Dropdown List created using the
<select> Tag.
The <option> Tag is used inside the <select> Tag, to provide with different options.
This Dropdown List are used when more than one option has to be shown in a list.
<form>
<select>
<option value="Biology" > Biology </option>
<option value="Physics" selected> Physics </option>
<option value="Social" > Social </option>
</select>
</form>
|
|
Note: The attribute "selected" in the <option> Tag makes "Physics" as the selected option in the Dropdown List.
Form using Text Fields and Submit Buttton
Shown below is an classic example of web form submiting Text Fields and the server side web page processing it.
<!DOCTYPE html>
<html>
<body>
<form name="form1" action="SubmittedForm.aspx"
method="Post">
Name:<Input type="text" name="txtName" value="Harry">
Age:<Input type="text" name="txtAge" value="32">
Sex:<Input type="text" name="txtSex" value="Male">
<input type="submit" value="Submit" >
<p style="color: #990000" > On clicking the Submit Button data will be sent to </p>
</form>
</body>
</html>
|
|
Form using CheckBoxes and Submit Buttton
Shown below is an classic example of web form submiting Checkboxes and the server side web page processing it.
color
<!DOCTYPE html>
<html>
<body>
<form name="form1" action="SubmittedForm.aspx"
method="Post">
<Input type="checkbox" name="Subject" value="Physics" >
Physics
<Input type="checkbox" name="Subject" value="Biology" >
Biology
<Input type="checkbox" name="Subject" value="Social" >
Social
<input type="submit" value="Submit" >
<p style="color: #990000" > Click on the checkbox and submit using the Submit Button data will be sent to </p>
</form>
</body>
</html>
|
|