Input Elements newly introduced in HTML 5

Input Element color

• It allows the user to select a color and returns the hex value for that color. Depending on browser support, a color picker can show up in the input field.
• Example: <form> Select Color : <input type="color" ></form>

Input Element date

• It allows the user to select date, i.e. date picker with calendar.
• Example: <form>Select Date : <input type="date" ><form>

Input Element datetime

• It allows the user to select a date and time using ‘datetime-local’ type. It specifies a date and time input field, with no time zone.
• Example: <form>Birthday (date and time) : <input type="datetime-local"></form>

Input Element email

• In rendering terms, the email input type is no different than a standard text input type and allows for one or more e-mail addresses to be entered.
• Combined with the required attribute, the browser is then able to look for patterns to ensure a valid e-mail address has been entered. Naturally, this checking is rudimentary, perhaps looking for an @ character or a period (.) and not allowing spaces.
• Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.
• Example: <form>E-mail : <input type="email" required></form>

Input Element month

• It allows the user to select a month and year. I.e. date picker with month and year only.
• Example: <form>Select Month : <input type="month"></form>

Input Element number

• It used for a numeric value input only, it can also set restrictions on acceptable numbers using one of the following <input> attributes:
  • max for max allowed value
  • min for the min allowed value
  • step for the number interval
  • value for setting the default value
• Example: <form> Select Number : <input type="number" min="5" max="18" step="0.5" value="9"><form>

Input Element range

• Input range type defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100.
• In the same way as with the number type it can use the following <input> attributes to specify the range: max for max allowed value, min for the min allowed value, step for the number interval and value for setting the default value.
• Example: <form>Range : <input type="range" min="1" max="200" value="70"><form>

Input Element search

• It is used to for creating search fields. A search field looks like a regular text field but does the task of finding the content.
• Example: <form>Search : <input type="search" name="search"></form>

Input Element tel

• It is a field that is intended to be used for entering a phone numbers.
• Element tel differs from email and url in that no particular syntax is enforced. Phone numbers differ around the world, making it difficult to guarantee any type of specific notation except for allowing only numbers and perhaps a + symbol to be entered.
• It’s possible that you can validate specific phone numbers (if you can guarantee the format) using client-side validation.
• The tel type is currently only supported in Safari 8.
• Example: <form>Phone No. : <input type="tel" required></form>

Input Element time

• It is used for input field for entering time via up/down buttons. (no time zone).
• Example: <form>Select Time : <input type="time"></form>

Input Element url

• It is used for input fields that should contain a URL address. It can use the multiple attribute to enter more than one URL.
• Like type="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk).
• Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
• Example: <form>URL : <input type="url" required></form>

Input Element week

• It allows the user to select a week and year.
• Example: <form>Week : <input type="week"></form>