Introduction
HTML5 is the new standard for HTML that has 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls and many others.
-
The new input types are:
- Time
- Date
- Datetime
- Datetime-local
- Week
- Month
- Email
- Color
- Number
- Range
- Search
- Telephone
- URL
Advantage
These new input types are very useful for web designers. These input types reduce our dependency on client and server-side scripting, now we don't need to validate our common data types like URLs, email, dates, and so on. You know that one of the biggest pains these days while creating a website is to make those websites cross-platform based that includes Desktop, mobile and tablets, and if you are creating such web forms using HTML4 standards then you encunter many issues. That's the reason HTML5 input types are a real life-saver and makes our work much easier.
Let's see an example of cross-platform. Here, we have two browsers, the first one is desktop-based and the second one is mobile-based. We used the same code compatible with both platforms:
![1. Desktop browser vs Mobile Browser.png]()
Here, you can see that the Blackberry native keyboard picks the month, because it already knows that the input box is a month type.
Note: It is important to know that not all major browsers are able to support all the input types. Perhaps you can start using them and if they are unable to work properly then at least they'll behave as normal text fields.
Now, let's understand all the input types using examples with their outputs.
1. time
The time type control selects a time, without the time zone.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="time-input">Please choose Time:</label> <br /> <br />
<input type="time" id="time-input" /> <br />
<input type="time" id="time1" /> <br />
<input type="time" id="time2" /> <br />
<input type="time" id="time3" /> <br />
<input type="time" id="time4" /> <br />
</div>
</form>
</body>
Output:
![2. Time.png]()
2. date
The date type control is use to enter a date including month and year (without time).
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="date-input">Please choose a date:</label>
<input type="date" id="date-input" />
</div>
</form>
</body>
Output:
![3. Date.png]()
3. datetime
The datetime control enters a date and time (hour, minute, second, and fraction of a second) that is based on the UTC time zone.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="date-input">Select your Birth Date & Time(with time zone):</label>
<input type="datetime" id="date-input" />
</div>
</form>
</body>
Output:
![4.DateTime.PNG]()
4. datetime-local
The datetime-local control enters a date and time, without any time zone.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="dateTimeLocal-input">Select your Birth Date & Time(without time zone):</label> <br />
<input type="datetime-local" id="dateTimeLocal-input" /> <br />
<input type="datetime-local" id="Datetime-local1" /> <br />
<input type="datetime-local" id="Datetime-local2" /> <br />
</div>
</form>
</body>
Output:
![5. DateTimeLocal.png]()
5. week
The week type control selects a week and year.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="week-input">Select week:</label>
<input type="week" id="week-input" />
</div>
</form>
</body>
Output:
![6. Week.png]()
6. month
The month type control selects a month and year, without time zone.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="month-input">Select month:</label>
<input type="month" id="month-input" />
</div>
</form>
</body>
Output:
![7. month.png]()
7. email
The email type control enters only an e-mail address. It will automatically validate that the user enters a correct email address or not.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="email-input">Enter your E-Mail address:</label>
<input type="email" id="email-input" />
</div>
</form>
</body>
Output:
![8. email.gif]()
![8. email.png]()
8. number
The number type control accepts only a numeric value. We can also restrict the user with various restrictions like:
-
max : It specifes the maximum value
-
min : It specifes the minimum value
-
step : It specifes number of intervals
-
value : It specifes the default value
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="number-input">Select your age:</label>
<input type="number" id="number-input" min="18" max="50" />
</div>
</form>
</body>
Output:
![9. number.gif]()
![9. number.png]()
9. color
The color type control specifyies a color in the input fields.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="color-input">Select Color: </label>
<input type="color" id="color-input" />
</div>
</form>
</body>
Output:
![10. color.png]()
10. range
The range type control is a slider control so that the user can pick a number between two numbers. We can also restrict the user from entering any other value. If you are not specifying attributes then the range type control uses these default values:
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="range-input">Select Range(1-20)</label>
<input type="range" id="range-input" min="1" max="20" />
</div>
</form>
</body>
Output
![11. range.gif]()
![11. range.png]()
11. search
The search type control searches a text field in which the user can enter search strings.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="search-input">Search : </label>
<input type="search" id="search-input" />
<input type="submit">
</div>
</form>
</body>
Output:
![12. search.PNG]()
12. tel
The tel (telephone) type control enters a telephone number. It is able to validate telephone number formats.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="tel-input">Enter your Telephone Number: </label>
<input type="tel" id="tel-input" maxlength="10"/>
</div>
</form>
</body>
Output:
![13. tel.PNG]()
13. URL
The URL type control accepts only an URL address. From the input fields line-breaks are automatically removed. We can use restrict values that is entered in the control using "pattern" and "maxlength" attributes.
Example:
<body>
<form id="form1" runat="server">
<div>
<label for="url-input">Enter URL: </label>
<input type="url" id="url-input" size="40" />
</div>
</form>
</body>
Output:
![14. url.gif]()
![14. url.png]()