zoukankan      html  css  js  c++  java
  • HTML5之三认识HTML5

    引言

         在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息(之前只能通过js和input的事件结合处理)、表单校验、日期选择控 件、颜色选择控件、范围控件、进度条、标签跨表单等功能。当然这些东西我们都可以直接通过js和dom元素配合实现这些通用的功能。这些功能或者是标签都 已经大量的使用在了现代的Web应用中,而这些公共性的东西在早期的HTML标准没有直接的标准支持,而在HTML5中,新标准直接把这些常用的基本的功 能直接加入的新的表单标签中,真正把表单功能异常的强大,那就跟我走一下HTML5智能表单之旅吧!

         由于最新版本的Opera浏览器对新型表单支持的最为完美,所以建议本blog或者以下示例请在Opera浏览器上打开.

    HTML5新增加表单标签

         新的标准中添加了很多输入型控件,比如:Number、URL、Email、Range、Color等。而他们都是以 input标签的type属性出场,那下面我一一简单介绍一下[以下所有的例子请用Opera浏览器浏览] 

    1)只能输入数字的Number类型input标签

    Html代码为:<input type="number" name="demoNumber" min="1" max="100" step="2"/>

    运行效果:

    :此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性.

    name:属性大家很熟悉了用来标识表单提交时的key值

    min:是表单标签新增加的属性标识当前输入框输入的最小值

    max:那就是最大值了

    step:是步长的意思,也就是在点击增大或者减小的时候的增加减少的步长

    小结:min,max,step是表单标签中添加的新的属性。另外就是type又增加了一个新的number类型,接受数字输入。而之前我们要做到这样的效果只能通过js在失去焦点时候判断,控制起来不那么方便,现在一切都那么简单简洁。 

    2)新型Email类型input标签

    Html代码:<input type="email" name="email" placeholder="请输入注册邮箱" />

    运行效果:

    :在上面HTML代码中,相对于之前的标签,不同点:type="email"表示当前input标签接受一 个邮箱的输入。另外就是:placeholder="请输入注册邮箱"   这个属性的功能,相信你看到此时的效果的时候你会感到非常想兴奋,而在之前实现此提示信息,需要监听一下文本框的blur事件,然后判断是否为空,为空再 去给文本框赋值一个灰色的字体提示信息,而现在只需要一个简单属性指定就可以了,浏览器都帮我们实现了。

    小结:当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式,另外placeholder属性带来的提示信息功能太强大了。

    3)新型Url类型input标签

    这里不再赘述了,跟Email类型input标签类似。只看一效果吧:

    Html代码:<input type="url" placeholder="请输入网址" name="url" />

    运行效果:

    4)新型Tel类型input标签

    Html代码:<input type="tel" placeholder="输入电话" name="phone"/>

    运行效果:

    5)新型range类型input标签

    Html代码:<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />

    运行效果:

         此类型标签的加入,输入范围内的数据变得非常简单容易,而且非常标准,用户输入可感知体验非常好。另外此标签可以跟表单新增加的Output标签一块使用,达到一个联动的效果。看demo源码:

    1
    2
    3
    4
    <form action="" method="POST" id="form1">
            <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
            <output onforminput="value=rangedemo.value">0</output>
     </form>

    运行效果:

    6)新的日期、时间、月份、星期input标签

    相信你如果做过相关的Web项目开发,肯定会遇到相关的js日期控件。而一系列版本问题,使用不方便等问题将一去不复返,因为…看下面的标签吧:

    Html代码:<input type="date" name="datedemo" />

    运行效果:

    还有其他的type:month(月)  、time、week、datetime-local、datetime。那赶紧实验一下吧。

    7)颜色选择input标签

    颜色选择器实现起来还是有点困难的,而现在一切都变得那么简单。且看代码:

    Html代码:<input type="color"/>

    运行效果:

    8)input标签自动完成功能

    如果您有一定的开发经验的话,肯定做过相关的自动完成或者输入提示功能。那这将不再那么复杂,简单几个标签就自动实现此功能,请看如下demo:

    1
    2
    3
    4
    5
    6
    <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
    <datalist id="autoNames">
           <option  value="飞龙天惊" ></option>
           <option  value="厚德IT" ></option>
           <option  value="Flydragon" ></option>
    </datalist>

    执行结果:

    HTML5表单新增属性

    Input标签新增加的特有属性

    • 1)autofocus属性

                  demo:<input type="text" autofocus="autofocus"/>  此属性可以设置当前页面中input标签加载完毕后获得焦点。

    • 2)max,min,step这些上面都介绍过了,都是跟数字相关。
    • 3)placeholder:提示信息属性,上面有demo。
    • 4)multiple:用于文件上传控件,设置此属性后,允许上传多个文件。
    • 5)校验属性:设置了required 属性后预示着当前文本框在提交前必须有数据输入,而这一切都是由浏览器自动完成。

                 这跟使用Jq Validate的时候一样的爽。而且还添加了:pattern正则表达式的校验。

                 demo:input type="text" autofocus="autofocus" required pattern="\d+" />

    • 6)另外一个比较大的改进就是增加了form属性,也就是说,任何一个标签都可以指定它所属于一个表单,而不是必须在<form></form>进行包裹了。
    • 且看demo:<input type="text" form="demoForm" name="demo"/>

    Form表单标签新增加属性

    • 1)novalidate 属性规定在提交表单时不应该验证 form 或 input 域

               demo:<form action="" method="POST" novalidate="true"></form>

    • 2)autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

    综合性实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <fieldset>
        <legend>只能表单演示:请用最新Opera 浏览器</legend>
        <form action="" method="POST" id="form1">
            <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" />
            <input type="number" name="demoNumber" min="1" max="100" step="2" />
            <input type="email" placeholder="请输入邮箱" name="mail" />
            <input type="url" name="url" placeholder="输入正确的网址" />
            <br />
            日期:<input type="datetime" name="time" />
            颜色:
            <input type="color" name="color" /><br />
            <br />
            <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
            <output onforminput="value=rangedemo.value">0</output>
            <br />
            <input type="submit" value="提交表单" />
        </form>
        表单外的input标签:
        <input type="text" form="form1" name="demo" />
    </fieldset>

     执行结果: 

    由于部分属性不能正常提交到博客园后台,上一张图片加源码:

    图片:

     

    实际运行情况:

    只能表单演示:请用最新Opera 浏览器

    日期: 颜色:

    0

    表单外的input标签:

    总结

           在新版本的表单中的确添加了很多令人兴奋的功能。其实进步不是特别大,只不过是把之前的常用的功能,加入到了标准中来定义,然后浏览器帮我们实现了很多我们原先需要自己用js实现的一些功能罢了。但是对于开发者来说,这的确是很不错的一件事情。

  • 相关阅读:
    easy ui 表单ajax和from两种提交数据方法
    easy ui 下拉级联效果 ,下拉框绑定数据select控件
    easy ui 下拉框绑定数据select控件
    easy ui 异步上传文件,跨域
    easy ui 菜单和按钮(Menu and Button)
    HTTP 错误 404.3
    EXTJS4.2 后台管理菜单栏
    HTML 背景图片自适应
    easy ui 表单元素input控件后面加说明(红色)
    EXTJS 4.2 添加滚动条
  • 原文地址:https://www.cnblogs.com/html5salon/p/2523896.html
Copyright © 2011-2022 走看看