# 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">