HTML Forms – Defination and Usage
The HTML <form> element defines a form to take information from users. Forms are the important elements of a webpage or website. You usually see a contact form or a subscription form on every website. Contact form generally have three important inputs like Name,Email or Message and subscription form generally have only one or two field like Name and Email. So these all are inputs from the user of website.
HTML form is used to collect information from user. Lets take an example of most used social network Facebook. When we login into Facebook, we first enter username and password. These username and password elements are the part of HTML Form. They collect our information to authenticate and get our account information.
In this post we will explain how these forms are created or you can say how to use HTML <form> tag to take information from user.Its start tag is <form> and end tag is </form>. So lets create our first form and we will add input elements one by one.
Form <input> Element
The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. We add <input> elements to our form with different type attribute.
<h2>HTML Form</h2> <form> <input type="text" name="a" placeholder="Text"> <input type="number" name="b" placeholder="Number"> </form>
We added a form to our page and three input elements with different type attributes. Now when we open the page in browser we will get this :
Explaination: We added three input elements. First input element has type attribute “text” , so we can type anything in this field Number,Alphabets and Symbols. And second input element has type attribute “number” , so we can type only number in this field.
In HTML5 ,we have a long list of these type attribute.
So we can assign any of these attribute value for type as per our desired input. Try with these type attributes and make your first form.
This is something different from normal input elements. Here we provide some options for user to choose from them. Lets say when we want to ask about gender from user. We give the option to choose from Male or Female. So for these types of form element we use type attribute radio .To make a group of option we have to give same name attribute to all options input. Example :
<form> Gender: <input type='radio' name='gender' value='male'>Male <input type='radio' name='gender' value='female'>Female </form>
Output of above code:
Note: We have already assigned value to input radio elements because we are not taking value from users .We are just showing options to users to choose from. Name attribute should be same for all options to select only one out of all.
In some cases, user may have option to choose more than one option. In that situation we will use checkbox instead of radio buttons. Here user can choose multiple options at same time. This type of element is called checkbox. As user can choose multiple options ,so there is no need to make group by assigning same name. Example :
<form> Hobbies : <input type='checkbox' name='checkbox1' value='Reading'>Reading Books <input type='checkbox' name='checkbox2' value='music'>Listening To Music <input type='checkbox' name='checkbox3' value='cricket'>Playing Cricket </form>
Output of above code:
Output of above code is :