Create Forms Using HTML5

Well I was just checking some HTML5 code, I felt like sharing something which will be beneficial for peoples new to web development. Whenever you create any web-form like registration from, comment form, feedback form etc there are fields that are required and must be filled by the user. For example you are creating a registration form and required fields are:

  • First Name
  • Last Name
  • Email
  • Mobile Number

To make sure that user has entered values in all the fields the most popular way is using javascript. But there’s a better way to do the same task using HTML5’s attribute “required“. There’s another attribute called “placeholder” which is used to set pre-text in fields of your form. Using these two attributes you can create web-forms with high performance.

You can check the LIVE DEMO.

Here is the small code that can help you in creating great web-forms

<form action="welcome.php">
First Name: <input type="text" name="firstname" required="required" placeholder="First name" /></br>
Last Name: <input type="text" name="lastname" required="required" placeholder="Last name" /></br>
E-mail: <input type="text" name="email" required="required" placeholder="E-mail" /></br>
Mobile Number: <input type="text" name="phone" required="required" placeholder="Mobile Number" /></br>
<input type="submit" value="Submit" />

NOTE: Some old browsers doesn’t have support for HTML5 including older versions of Internet Explorer.

Most of the web browsers have support for HTML5 so you can opt for using HTML5 and feel its power. For other older browsers you can use a jQuery plugin named jQuery.html5form which will enable browsers to execute HTML5’s form validation. I have not tested this plugin but you can use and comment here.

I hope this short and simple tutorial will help someone in someway 😉

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

One thought on “Create Forms Using HTML5

  1. Hi buddy,
    I am really fascinated by the features HTML 5 have. Now-a-days every site is using HTML5 and CSS3 so this browser support is not an issue anymore. i must say your article is simple and very much clear to understand the concept. Good work and god bless you!!!

    Chander Sharma

Leave a Reply

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