2012年9月30日星期日

Html5中新input标签与Asp.net MVC应用程序

Html5中新input标签与Asp.net MVC应用程序

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 打开后，你可以看到这个效果：

T_HTML5InputInASPNET_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。


TAG:
发帖者 时间：