Html5引入了一些新的input標簽，它們包括number, range, email, url, color, date, datetime等。目前它們還不完全支持所有的瀏覽器。但做為一個Web Developer需要知道它們。Html5 提供了下面這些類型的<Input>標記:
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)
下面我們來看一下在Asp.net MVC application中如何使用它們, 一開始是個靜態的html代碼：
<!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>
在Opera 12.02 打開后，你可以看到這個效果：
你也可以使用 Chrome，IE 9，FF 13.01並不支持。我們看到上面呈現出原生的UI，這是我們想要的。在Asp.net MVC application中，可以這樣來實現它們：
<%= Html.TextBox("range","2",new {type="range",min="1",max="10"}) %>
上面的代碼等同於下面的html:
<input id="range" max="10" min="1" name="range" type="range" value="2">
如果你使用StrongType,那可以這樣實現:
<%= Html.TextBoxFor(m => m.MyRange, new {type="range",min="1",max="10"}) %>
其它一些您可以自行探索，HTML5 推出了一些新的輸入元素的輸入類型，例如數字、范圍、email、url、顏色、日期、日期時間等更多。 這些新的Input類型非常棒，因為它們允許您驗證用戶輸入，而無需使用任何客戶端腳本。 目前並非所有瀏覽器都支持這些輸入型的，但下一個版本的所有主要瀏覽器將支持他們。 你可以開始在ASP.net 應用程序中使用它們，並且很少或沒有額外的工作。
希望對您Web開發有幫助。更多參考：
- W3C input overview by Michael Smith
- Sandbox of all input types by Estelle Weyl
- Examples of the input types by Estelle Weyl
- JavaScript checking by type by Mike Taylor
作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發布在我的獨立博客中-Petter Liu Blog。