Tag Archives: input type

7 New form field types <input type> Implemented in HTML5 [Tutorial]

Things are Moving Fast! Lets Learn some HTML5!
Today we will learn some Basic Things in HTML5. We Will discuss on some of the New form field types which are implemented in HTML5. Form Field types can be classified into Dedicated UI and Input Validation.

“Dedicated UI” as the Term says it is dedicated and can be used anywhere you like… here are 3 New Form field Types which comes under “Dedicated UI”


<input type=’range’ min=’0′ max=’50’ value=’0′ />

Using Range as Input type we are defining some range with attributes min and max.. Set your Own Values for Min and Max to lengthen or shorten the Range. One Could Scroll horizontally to move pointer between Min and Max!


<input results=’10’ type=’search’ />

Get a Search Box of your Own declaring the input type as search


<input type=’text’ placeholder=’Search inside’ />

This defines some default text(place holder) in a search box.

To Learn 4 Other New form field types of HTML5 which belongs to Input Validation type lets have a look at this Code Snippet

Now Learning one by one


<input type=’color’ />

Using color as a input type you can type in your own colors to validate the form


<input type=’number’ />

if you type in wrong inputs other than number, a “red” color is highlighted as per the code!


<input type=’email’ />

Define email id using emailid input type during form validation.


<input type=’tel’ />

Adding Telephone number as Input type for form Validation!

Hope This Tutorial helped you to learn some basic things in HTML5! Lots More Coming Up, Subscribe to our feeds to get Notified

PS: Try This Only in HTML5 Supported Browser!