zoukankan      html  css  js  c++  java
  • 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开发有帮助。更多参考:



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

  • 相关阅读:
    opencv 读写图像文件
    opencv 图像透明
    c# 异步事件
    c++读写文件
    Delphi XE UniGUI UniSession文件下载的方式(SendFile、SendStream )
    Delphi XE UniGUI ExtJS [8] 自定义JavaScript文件调用
    Delphi XE UniGUI ExtJS [7] Delhi 动态添加 ClientEvents.ExtEvents 事件
    Delphi XE UniGUI ExtJS [6] fireEvent 事件 模拟按键点击(JS、ExtJS、Delphi)
    Delphi XE UniGUI ExtJS [5] 鼠标和Key事件
    Delphi XE UniGUI ExtJS [4] Ajax、Response(响应) 的使用
  • 原文地址:https://www.cnblogs.com/wintersun/p/2709089.html
Copyright © 2011-2022 走看看