# New Input Types in HTML5:

1.**Date**:
The date input type allows the user to select a date from a drop-down calendar.

The date value includes the year, month, and day, but not the time.
Example:

 <form>
        <label for="mydate">Select Date:</label>
        <input type="date" value="2021-02-18" id="mydate">
        </form>


2. **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:

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


3. **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:

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


4. **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:

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


5. **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:

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


6. **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.
Example:

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


7. **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:

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


8. **Search**
The search input type can be used for creating search input fields.

A search field typically behaves like a regular text field, but in some browsers like Chrome and Safari as soon as you start typing in the search box a small cross appears on the right side of the field that lets you quickly clear the search field.
Example:

 <form>
        <label for="mysearch">Search Website:</label>
        <input type="search" id="mysearch" placeholder="Type something...">
        </form>


9. **Tel**
The tel input type can be used for entering a telephone number.

Browsers don't support tel input validation natively. However, you can use the placeholder attribute to help users in entering the correct format for a phone number, or specify a regular expression to validate the user input using the pattern attribute.
Example:

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


10. **Time**
The time input type can be used for entering a time (hours and minutes).

Browser may use 12- or 24-hour format for inputting times, based on local system's time setting.
Example:

<form>
        <label for="mytime">Select Time:</label>
        <input type="time" id="mytime">
        </form>


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

You can use the multiple attribute to enter more than one URL. Also, if required attribute is specified browser will automatically carry out validation to ensure that only text that matches the standard format for URLs is entered into the input box.
Example:

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


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

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


**Here’s a live demo of each input type:**
[www.webfx.com/blog/images/assets/cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html](https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html)