Html5 controls


Using HTML5 input types in ASP.NET

Introduction

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.
  • They allow you to validate user input without using any client side script. For example, when you wish to ensure that email address or URL is in proper format you need not resort to JavaScript to do the job. The input control itself can determine if the entered value is valid or not.
  • 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.

<!DOCTYPE html>

<html lang=”en”>

<head>

<title></title>

</head>

<body>

<form id=”form1″>

 

<p>Email :</p>

<input type=”email” name=”email” />

 

<p>URL :</p>

<input type=”url” name=”url” />

 

<p>Telephone No. :</p>

<input type=”tel” name=”tel” />

 

<p>Number :</p>

<input type=”number” name=”number” min=”1″ max=”10″ step=”2″/>

 

<p>Range :</p>

<input type=”range” name=”range” min=”1″ max=”10″ step=”2″ />

 

<p>Date :</p>

<input type=”date” name=”date” />

 

<p>Month :</p>

<input type=”month” name=”month” />

 

<p>Week :</p>

<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” />

 

<p>Time :</p>

<input type=”time” name=”time” />

 

<input type=”Submit” value=”Submit” />

</form>

</body>

</html>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s