The previous lesson of the html lessons series was about image and anchor tags in html. In this lesson we will look into html form elements.
Why Use Html Form?
Html form is used to submit data to a server side language like php to be processed. In web pages we may submit a user registration data through html form or we may send a user login data to the server side to check if it is valid and the user is authorized to login. An html form starts with a form tag and ends with a matching closing form tag. i.e
<form action="#" method="GET"></form>
In the above form the action="#" means that we want to submit the data to the page we are on currently if we wanted to submit the data to some other page then we would have specified the file name like action="login.php". The method="GET" means that the method we want to use to submit the form data is GET. There are two methods of submitting a form data i.e GET and POST. The true power of use of the html form action and method is beyond the scope of html and cannot be demonstrated without php so for now it would be good to understand just the basics of them. The html form data is submitted through html form fields and a few of the form elements are discussed below:
Input Text Field:
Input text field is used to submit the text data entered in the input field. The input text field in a form can be created using an input tag like this:
<input type="text" name="fname" />
There is no separate closing tag for an input tag. The type text in the above field specifies that the data entered in the field would be text and the name attribute is assigned to distinguish it from other form elements.
Input Password Field:
Input password field is used for password data of the user to be entered in the form. Password field can be created in the form using the type password for the input field.
<input type="password" name="pass" />
Select Element:
Select element is used to create a dropdown of the options to be selected from. Select list can be created using select tag. The select list of months can be created like this:
<select>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
</select>
Radio Buttons:
Radio buttons in a form are generally used for the gender selection option of the user. Input type radio is used to create radio buttons in an html form.
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
Male
Female
Check Boxes:
Check boxes are used to select one or more options from the provided options by checking the check boxes. Input type checkbox is used to create check boxes in html form.
<input type="checkbox" value="Maths">I study Maths
<input type="checkbox" value="English">I study English
<input type="checkbox" value="Physics">I study Physics
I study Maths
I study English
I study Physics
Submit Button:
Submit button is used to submit the form data to the server side language using one of the methods. Submit button is created by keeping the input type submit.
<input type="submit" value="Submit">
Related Posts
Why Use Html Form?
Html form is used to submit data to a server side language like php to be processed. In web pages we may submit a user registration data through html form or we may send a user login data to the server side to check if it is valid and the user is authorized to login. An html form starts with a form tag and ends with a matching closing form tag. i.e
<form action="#" method="GET"></form>
In the above form the action="#" means that we want to submit the data to the page we are on currently if we wanted to submit the data to some other page then we would have specified the file name like action="login.php". The method="GET" means that the method we want to use to submit the form data is GET. There are two methods of submitting a form data i.e GET and POST. The true power of use of the html form action and method is beyond the scope of html and cannot be demonstrated without php so for now it would be good to understand just the basics of them. The html form data is submitted through html form fields and a few of the form elements are discussed below:
Input Text Field:
Input text field is used to submit the text data entered in the input field. The input text field in a form can be created using an input tag like this:
<input type="text" name="fname" />
There is no separate closing tag for an input tag. The type text in the above field specifies that the data entered in the field would be text and the name attribute is assigned to distinguish it from other form elements.
Input Password Field:
Input password field is used for password data of the user to be entered in the form. Password field can be created in the form using the type password for the input field.
<input type="password" name="pass" />
Select Element:
Select element is used to create a dropdown of the options to be selected from. Select list can be created using select tag. The select list of months can be created like this:
<select>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
</select>
Radio Buttons:
Radio buttons in a form are generally used for the gender selection option of the user. Input type radio is used to create radio buttons in an html form.
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
Male
Female
Check Boxes:
Check boxes are used to select one or more options from the provided options by checking the check boxes. Input type checkbox is used to create check boxes in html form.
<input type="checkbox" value="Maths">I study Maths
<input type="checkbox" value="English">I study English
<input type="checkbox" value="Physics">I study Physics
I study Maths
I study English
I study Physics
Submit Button:
Submit button is used to submit the form data to the server side language using one of the methods. Submit button is created by keeping the input type submit.
<input type="submit" value="Submit">
Basics of Html
Html Text Tags
Html Image and Anchor Tags
Html Tables
Row and Column Span in html
Iframe tag in html
Simple 2 column layout of a web page
3 column layout of a web page
No comments:
Post a Comment