Latest Post

Saturday, 17 December 2016

13 Excellent New Input Types with Example In HTML5

HTML5 New Input Types
HTML5 introduces many new input types  to improve the user experience and to make the forms more interactive
In this section, Following are new input types and we're going to take a brief look at each input type.


  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week



Input Type - Color
The color input type provide drop-down color picker to the user to select a color and returns the hex value for that selected color.

Keep in Mind:- Internet Explorer is not support the input type="color". Currently supported by Firefox, Chrome and Opera browsers.

Example:-
<section>
<label>Select Color:</label>
<input type="color" name="codecolor">
</section>

Input Type - Date
The date input type provide a drop-down calendar to the user to select a date.

Keep in Mind:-
Internet Explorer and Firefox is not support the input type="date". Currently supported by Chrome, Safari and Opera browsers.

Example:-
<section>
<label>Select Date:</label>
<input type="date" name="mydate">
</section>

Input Type - Datetime
The datetime input type allows the user to select a date and time along with time zone.

Keep in Mind:-
Internet Explorer, Firefox, Chrome and Opera browsers is not support the input type="datetime". Currently supported Apple Safari only.

Example:-
<section>
<label>Select Date & Time:</label>
<input type="datetime" name="mydatetime">
</section>

Input Type - Datetime-local
The input type datetime-local provide dropdown to the user to select a local date and time.

Keep in Mind:- Internet Explorer and Firefox browsers is not support the input type=" datetime-local".  Currently supported by Chrome, Safari and Opera browsers.

Example:-
<section>
<label>Local Date & Time::</label>
<input type="datetime-local" name="mylocaldatetime">
</section>

Input Type - Email
The email input type allows the user to enter e-mail address. Browser will validate the entered email and ensure the valid email format.

Keep in Mind:- All major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera support the email input type.

Example:-
<section>
<label>Enter email:</label>
<input type="email" name="myemail">
</section>

Input Type - Month
The month input type provide a drop-down calendar to the user to select a month and year.

Keep in Mind:- Internet Explorer and Firefox browsers is not support the input type="month". Currently supported by Chrome, Safari and Opera browsers.

Example:-
<section>
<label>Select Month & Year:</label>
<input type="month" name="mymonth">
</section>

Input Type - Number
To enter a numerical value The input type number can be used . You can set attributes min, max, and step.

Keep in Mind:- All major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera support the email input type.

<section>
<label>Select Number:</label>
<input type="number" value="1" min="10" max="20" step="0.5" name="mynumber">
</section>

Input Type - Range
It works very similar to number input and offer a simpler control for entering a number. The range input type can be used for entering a numerical value within a specified range.

Keep in Mind:- All major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera support the email input type.

Example:-
<section>
<label>Select Number:</label>
<input type="range" value="1" min="1" max="10" step="1" name="mynumber">
</section>

Input Type - Search
The search input type provide search fields for the user.

Keep in Mind:- :- Firefox, IE 9 and earlier versions browsers is not support the input type="search". Currently supported by Chrome, Safari, IE 10+ and Opera browsers..

Example:-
<section>
<label>Enter Search:</label>
<input type="search" name="mysearch">
</section>

Input Type - Tel
The tel input type can be used to enter telephone number.

Keep in Mind:- :- Currently not supported by any browser, but it is still useful.
Example:-

Input Type - Time
The time input type can be used for entering a time.

Keep in Mind:- :- Internet Explorer and Firefox browsers is not support the input type="month". Currently supported by Chrome, Safari and Opera browsers.

Example:-
<section>
<label>Select Time: </label>
<input type="time" name="my time ">
</section>

Input Type - URL
The url input type can be used for entering URL. It also provide the url validation and user can show error message based different validation states, when an value is entered using the :valid, :invalid or :required

Keep in Mind:- All major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera support the email input type.

Example:-
<section>
<label>Enter URL: </label>
<input type="url" name="myurl" required>
</section>

Input Type - Week
The week input type provide a drop-down calendar to the user to select a week and year.

Keep in Mind:- :- Internet Explorer and Firefox browsers is not support the input type="week". Currently supported by Chrome, Safari and Opera browsers.

Example:-
<section>
<label>Select week: </label>
<input type="week" name="myweek">

</section>

Government Jobs