HTML5 Basic Form Elements

HTML5 Basic

Not many developers liked creating forms with validations and users too found it sometime annoying if form submission does not work properly due to scripts, but HTML5 it makes life much easier for developers and users. HTML5 got plethora of new advanced and easier form elements for browser based validations option to use much neater css style techniques. In my previous post I have discussed how to create basic HTML5 form, if you missed Basic HTML5 form post, then you can click here to visit it.

Of course as I mentioned in my previous post that, there are some web browser limitation when it comes to HTML5, though all the major web browsers supports form elements, even though if some form elements do not support particular web browser then it will continue to work as regular text fields.

In this post I am going to focus on few important INPUT TYPES, there are some brand new awesome input types ?

NOTE – every field has “Title” option, this allows to displays custom error message for that particular field.

All screenshots are taken from Google chrome 22x

Website/URL field

Telephone field

Tip – pattern option to check if input numbers are entered in given format.

Email field

Search field

Range field

Tip – min and max options to define range

Color field

Date field

Alright, I’m ending this post here for more tips and information please stay tuned, see you in my next post with more HTML5 stuff.