HTML
HTML

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.

  • color
  • date
  • datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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.

Input Radio

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:

Gender:
Male
Female

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.

Input Checkbox

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:

Hobbies :
Reading Books
Listening To Music
Playing CricketNote: On clicking checkbox ,it will be marked as checked. So values which are checked will be accepted as user’s choice.

Form <select> Element

Form <select> element functioning is same as of <input> element type radio but when the list of options is very long then <select> element is used not the radio button. Form <select> element create a drop-down list of options and user can select his option from the list. As usually choose country whenever you register on an social network site. List of countries is so long that we can’t give radio buttons to choose from them. So we use <select> element there. Here is the expample to create a <select> element :

<form>
Your Country
<select name='country'>
<option>India</option>
<option>US</option>
<option>Australia</option>
<option>Russia</option>
<option>Canada</option>
</select>
</form>

Output of above code is :

Your Country
Explaination: For <select> element ,we create list items or options with <option> tag. All the options are inclosed in <option> tag with starting tag as <option> and closing tag as </option>.

Form <textarea> Element

All the above explained elements take a small input as name,email ,mobile etc. But we need a long text input in our form for bigger inputs from users like any message, description or feedback. So we have one more element for long inputs that is called textarea. The <textarea> element is multi-line, it has attribute of ‘rows’ and ‘cols’. Rows set lines of input area and cols set the width of input area. Lets create a textarea :

<form >
Message
<textarea name='message' rows='5' cols='8' ></textarea>
</form>

Output:

Message

Form Reset Button

Mostly in form we have a reset button. This reset button don’t do anything special but just clear all filled values from input elements. Means if someone want to reset the form he don’t need to refresh page , just reset button do it easily. Reset button is added as :

<form>
    <input type='text' name='name' value='' placeholder='name'>
    <input type='reset' name='reset' value='reset'>
</form>

Output:

Explaination: I have created a from with one input for name and a reset button. Just enter something into input and press ‘Reset’ button. Filled value will be cleared.

 

 

Form Submit Button

Mostly in form we have a reset button. This reset button don’t do anything special but just clear all filled values from input elements. Means if someone want to reset the form he don’t need to refresh page , just reset button do it easily. Reset button is added as :

<form action='form-submit.php' method='post'>
    <input type='text' name='name' value='' placeholder='name'>
    <input type='submit' name='reset' value='Submit'>
</form>

Output:

Explaination: I have created a from with one input for name and a Submit button. When you press the submit button it will send all filled values to the page assigned in form ‘action’ attribute. Action attribute is important attribute of a form. This defines the page where all form data will be sent.

 

This is all about the HTML Form. We have described all of its elements , so we can create a form in html easily. This all was about designing. For functioning like how we get and use submitted data, we will create a new post in PHP. For any doubt and question comment below. Thank You. Keep coding.


Subscribe To Our Newsletter


Facebook By Weblizar Powered By Weblizar
View Comments
There are currently no comments.

one × 5 =