HTML Forms | Types of Inputs in HTML Forms

In previous post we have briefly discussed html tags and attributes. In this tutorial we will learn about html forms and input types. We have talked about html tags and discussed them in very details so today we will talk about html forms and input types used in html forms. Let's start today's discussion.

Introduction to html forms

Websites are now most important part of our businesses today and even some businesses are based on website. One of the most important part of the websites are html forms because when ever we need to get information from the user or if user want to contact with the site admin, html forms performs an important role for this purpose. Forms are the most important part in web development and used for to receive data from user. In simple words the html form is the communication source between server and client.

An html form must contain "action" attributes which specifies that where the data should be posted and another important attribute which is "method" that specified how to send form data.

Different input types are used to get user data for this purpose. The user have to fill necessary information in form and submit to the server and after receiving information we perform the required action on the form data.

Let's do code for html form

       Fill your Details
   <form action="">
        <label for="">Name*</label><br>
        <input type="text"><br><br>
        <label for="">Email*</label><br>
        <input type="email"><br><br>
        <label for="">Gender</label><br>
        <select name="" id="">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="others">Others</option>
        <label for="">City*</label><br>
        <input type="text"><br><br>
        <input type="submit" value="Send">

This is very basic html form to get user information and it will have following output in browser.

html forms

As you can see that we have input elements in html form to get data from user. The input "type" attribute specifies the type of input. For example an email input have attribute value email which means that form will accept the actual type of email with "@" sign. If this field does not exists "@" sign then an error will be shown for correct type of email. Similarly if an input have attribute value of "submit" then it will change into button for submit form.

Another element in form is "select" element which will have some option tags in it and these option tags would have specified value for each. In this way we can bound user to not add another value except of our predefined values. In this example we have select tag for gender with options "Male", "Female" and "Others".

Types of Input in html forms

There are lots of input field types to get relevant data from user, for example if we want to get file to from user then the input field will have type value of file and similarly if we want to get time then the type attribute of input will have value time.

Hope you find this tutorial useful and learn a lot from it. We will continue to sharing such tutorials for our users. Kindly share this article with your friend list to spread this information.


about the author

Tipu is web developer from Pakistan. He is very talented in developing websites in wordpress and multiple frameworks in php.

other posts by Tipu
View all Posts By Tipu

No Comments Yet!

Leave a Comment  

Your email address will not be published. Required fields are marked *