---
# System prepended metadata

title: New Input Types in HTML5

---

# New Input Types in HTML5
---


## 1. Input Type Color
#### The color input type allows the user to select a color from a color picker and returns the color value in hexadecimal format (#rrggbb). If you don't specify a value, the default is #000000, which is black.

Example:
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00" id="mycolor">


## 2. Input Type Date:
#### The date input type allows the user to select a date from a drop-down calendar.

Example:
<label for="mydate">Select Date:</label>
    <input type="date" value="2019-04-15" id="mydate">
    
## 3. Input Type Datetime-local:
#### The datetime-local input type allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes.

Example:
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local" id="mydatetime">

## 4. Input Type Email:
#### The email input type allows the user to enter e-mail address. It is very similar to a standard text input type, but if it is used in combination with the required attribute, the browser may look for the patterns to ensure a properly-formatted e-mail address should be entered.

Example:
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" required>

## 5. Input Type Month:
#### The month input type allows the user to select a month and year from a drop-down calendar.
#### The value is a string in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number.

Example:
    <label for="mymonth">Select Month:</label>
    <input type="month" id="mymonth">

## 6. Input Type Number:
#### The number input type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additional attributes min, max, and step.
#### The following example will allow you to enter a numeric value between 1 to 10.

Example:
    <label for="mynumber">Enter a Number:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">


## 7. Input Type Range:
#### The range input type can be used for entering a numerical value within a specified range. It works very similar to number input, but it offers a simpler control for entering a number.

Example:
    <label for="mynumber">Select a Number:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    

## 8. Input Type Search:
#### The search input type can be used for creating search input fields.

Example:
    <label for="mysearch">Search Website:</label>
    <input type="search" id="mysearch">
    
## 9. Input Type Tel:
#### The tel input type can be used for entering a telephone number.

Example:
    <label for="myphone">Telephone Number:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>

## 10. Input Type Time:
#### The time input type can be used for entering a time (hours and minutes).

Example:
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
    
## 11. Input Type URL:

#### The url input type can be used for entering URL's or web addresses.

Example:
    <label for="myurl">Enter Website URL:</label>
    <input type="url" id="myurl" required>

    
## 12. Input Type Week:
#### The week input type allows the user to select a week and year from a drop-down calendar.

Example:
    <label for="myweek">Select Week:</label>
    <input type="week" id="myweek">










  


