posts - 930,  comments - 588,  views - 402万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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开发有帮助。更多参考:



作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted on   PetterLiu  阅读(4243)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2007-09-30 ASP.NET生成静态页面
点击右上角即可分享
微信分享提示