Html5 Form Validation

HTML5 brings New Elements, new Attributes and New Form Controls for better, faster and smarter forms.

Using HTML5, we can create a form with inbuilt validation (i.e. no javascript required). Earlier, we were using JAVASCRIPT to control form validation. These form controls are meant for both Desktop, tablets and smartphones.

New Attributes in HTML5 Form

Attribute Name Use Example

autofocus

autofocus attribute focus that particular input on page load.

placeholder

placeholder shows hint of value. It disappear on focus or keypress. ( See exp → )

autocomplete ="on"

store value in cache & shows on keypress. ( See exp → )

autocomplete ="off"

Didn't store value in cache history. ( See exp → )

pattern

create javascript regular expression. ( See exp → )

<input type="text" pattern="^[0-9]{6}$" required >

required

will submit form only when this field is not blank. ( See exp → )

minlength

will submit form only when this field is filled with minimum 3 characters. ( See exp → )

readonly

can be copied, but non editable. ( See exp → )

list

Shows Hints on keyup stored in <datalist>. ( See exp → )


HTML5 Form New Input Types.

HTML5 also includes some new input types. These types works on both Desktops based browsers and Mobile based browsers.

Html5 Form Input types

Input Type Use Example

input type number

<input type="number" required min="5" max="10">
To Insert Number within range given. ( See exp → )

(Will not accept value outside given range)

input type email

<input type= "email" >
To insert valid email id only. ( See exp → )

( Shows @ key on smartphones and Tablets.)

input type tel

<input type= "tel" >
To insert valid Telephone No. ( See exp → ).

(Also shows Numeric Keypad on Smartphones and Tablets)

input type search

<input type="search" >
To create a search field. ( See exp → ).

input type url

<input type= "url" >
To insert valid URL. ( See exp → ).

(Also shows www and .com key on smartphones and Tablets.)

input type date

<input type= "date" >
To insert valid date. ( See exp → ).

(Also shows calender on focus in chrome and opera.)

input type month

<input type= "month" >
To insert valid month name. ( See exp → ).

(Also shows calender on focus in chrome and opera.)

input type week

<input type= "week" >
To insert valid week no. ( See exp → ).

(Also shows calender on focus in chrome and opera.)

input type datetime-local

<input type="datetime-local" >
To insert valid date. ( See exp → ).

(Also shows calender on focus in chrome and opera.)

input type time

<input type= "time" >
To insert valid time. ( See exp → ).

(Also shows clock on focus in chrome and opera.)

input type color

<input type= "color" value="#ff0000">
To insert valid hexa color code. ( See exp → ).

(Also shows colorpicker in chrome and Mobiles browsers.)

input type range

<input type= "range" min="50" max="100">
To Insert Number within range given. ( See exp → )

(Will not accept value outside given range)



HTML5 New Form Elements.

HTML5 also includes some new form Elements like meter, progress and datalist.

New Tags in HTML5 Form

New Element Use Example

html5 meter

<meter min="0" max="100" low="40"
high="90" optimum="100" value="91"> </meter>
To Insert Number within range given. ( See exp → )

( green color if value is high)

<meter min="0" max="100" low="40"
high="90" optimum="100" value="45"> </meter>
To Insert Number within range given. ( See exp → )

(yellow color if value is in between )

<meter min="0" max="100" low="40"
high="90" optimum="100" value="31"> </meter>
To Insert Number within range given. ( See exp → )

(red color if value is low)

datalist

<input type="text" list="list1">
<datalist id="list1">
<option value="html"
<option value="css"
<option value="javascript"
> </datalist>
To show hint of input type text. ( See exp → )

(will show hints on keyup)

progress

<progress > </progress>
Shows Progress bar. ( See exp → )

( without value)

<progress value="75" max="100"> </progress> Shows Progress bar with value 75.
( See exp → )

( with value 75)

IE 9 and below doesn't support html5 form elements, attributes, and new elements. Use JAVASCRIPT for form validation in IE9 and below, but within conditional comments.