Home > DeveloperSection > Articles > Input Types in HTML5

Input Types in HTML5

0 Comment(s)
 3786  View(s)
Rate this:

Input Types in HTML5

 HTML5 introduce 13 new Input type values for the type attribute for HTML <input> element. By using new input type values we can create more attractive page, better input control and can validate to input type values. Most of the browser does not support HTML5 new input types except “Opera”.

HTML5 new Input Types:

·         color

·         number

·         time

·         month

·         email

·         search

·         url

·         date

·         week

·         datetime

·         range

·         datetime-local

·         range

Search: This input type value specify textbox as a search box.

Search <input type="search" name="search" />

Tel,Url and Email: These input type values represent textbox as a telephone number, Web url and email address respectively.

Telephone <input type="tel" name="tel" />

Url <input type="url" name="urlname" />

Input Types in HTML5

Email <input type="email" name="sendmail" />

Date and Time: Six new input types (datetime, datetime-local, date, month week, time) specify with dates and times in one form or another.

Datetime<input type="datetime" name="date&time" />

Input Types in HTML5

Datetime-local<input type="datetime-local" name="localdate&time" />

Input Types in HTML5

Date<input type="date" name="date" />

Input Types in HTML5

Month <input type="month" name="mnth" />

Input Types in HTML5

Week  <input type="week" name="wk" />

Input Types in HTML5

Time <input type="time" name="tm" />

Input Types in HTML5

Numerical input types: two new input types (number and range) specify entered value should be numeric and given range respectively.

Number <input type="number" name="num" />

Input Types in HTML5

Range<input type="range" name="points" min="1" max="10" />

Input Types in HTML5

Color input type: The color type is used for input fields that should contain a color.

Color <input type="color" name="clr" />

Input Types in HTML5





Don't want to miss updates? Please click the below button!

Follow MindStick