HTML 5 Input Validations

HTML 5 Input Validation like email, number, color, datetime, datetime-local, date, month, week, range, search, url and telephone.

Till HTML 4 we used Java script for HTML input validation but in HTML 5 the inbuilt validation was born, so there is no need of java script.


Valid Input

Email Validation

<input type="email" value="no-reply@email.com" />

Number Validation

<input type="number" min="1" max="10" step=”2”/>

Color Validation

<input type="color" value="#b98b58">

Date Time

<input type="datetime" value="2011-10-23T20:35:34.32">

Date Time Local

<input type="datetime-local" value="10-23-2011T22:41">

Date

<input type="date" value="2011-11-23"/>

Month

<input type="month" value="2011-11">

Week

<input type="week" value="2011-W48">

Range

<input type="range" value="15" min="0" max="100">

Search

<input type="search"/>

Url

<input type="url" value="http://hakeemit.blogspot.com">

Tele


<input type="tel" value="[Any numeric value]"
pattern= "^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" placeholder="(555) 555-2222">

Valid Output 


Email Validation





Number Validation





Color Validation





Date Time





Date Time Local




Date




Month





Week





Range





Search





Url





Tele




pattern= "^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" placeholder="(555) 555-2222"&gt;

Comments

Popular posts from this blog

Five More Indian Languages - Google Translate