Using HTML5 input types in ASP.NET
HTML5 introduced several new input types for <INPUT> element. These new input types include number, range, email, url, color, date, datetime and a few more. Though these types are not fully supported by all desktop browsers any ASP.NET developer should know them because newer browser versions will definitely support them. In this Post you will learn the basics of using the new input types.
HTML5 new input types
HTML5 provides the following additional values for the type attribute of <INPUT> tag.
- Email (email)
- URL (url)
- Telephone No. (tel)
- Number (number)
- Range (range)
- Color (color)
- Date (date)
- Month (month)
- Week (week)
- Time (time)
- Date Time – UTC (datetime)
- Date Time – Local (datetime-local)
- Search (search)
These new input types provide the following three key advantages to web developers:
- They help you to restrict user entry to a fixed set of values avoiding data entry errors. For example, when you use input type as range the user can only enter or select from a fixed range of values.
- Browsers render the <INPUT> tag in a different way depending on the input type. This simplifies data entry for the end user.
It should be noted, however, that not all browsers (desktop versions) support these new input types. Also, there are certain differences (though minor) in the way the input elements are rendered and the way error messages are displayed. For example, consider the following screen shot that shows a same HTML5 page in Chrome 14 and FireFox 7.
In order to see how these new input types work, create a new HTML page and add the following markup to it.
<input type=”email” name=”email” />
<input type=”url” name=”url” />
<p>Telephone No. :</p>
<input type=”tel” name=”tel” />
<input type=”number” name=”number” min=”1″ max=”10″ step=”2″/>
<input type=”range” name=”range” min=”1″ max=”10″ step=”2″ />
<input type=”date” name=”date” />
<input type=”month” name=”month” />
<input type=”month” name=”week” />
<p>UTC Date Time :</p>
<input type=”datetime” name=”utcdatetime” />
<p>Local Date Time :</p>
<input type=”datetime-local” name=”localdatetime” />
<input type=”time” name=”time” />
<input type=”Submit” value=”Submit” />