HTML5新增表单元素、属性、表单验证及增强的页面元素总结

 新增的表单元素与属性

    新增属性
        form属性
        在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可，如：

 代码如下 复制代码

            <form method="get" id="test">
            username:<input name="username" type="text" id="username" value="oseye">
            <input type="submit" value="提交">
            </form>
            url:<input form="test" name="url" type="text" id="url" value="http://www.oseye.net">

        点击提交即可看到url:

          

 代码如下 复制代码
  ?username=oseye&button=提交&url=http%3A%2F%2Fwww.oseye.net

        formaction属性
        HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址，如：

 代码如下 复制代码

            <form method="get" id="test">
            username:<input name="username" type="text" id="username" value="oseye">
            <input formaction="a.html" type="submit" value="提交到a.html">
            <input formaction="b.html" type="submit" value="提交到b.html">
            </form>

        formmethod属性
        既然对提交按钮有了formaction属性，就相应的有了formmethod属性：

 代码如下 复制代码

            <form method="get" id="test">
            username:<input name="username" type="text" id="username" value="oseye">
            <input formaction="a.html" formmethod="get" type="submit" value="get提交到a.html">
            <input formaction="b.html" formmethod="post" type="submit" value="post提交到b.html">
            </form>

        placeholder属性
        给文本框(text或textarea)处于未输入状态时的一种文字提示：

 代码如下 复制代码

            <input name="username" placeholder="oseye" type="text" id="username">

        autofocus属性
        自动获得焦点，一个页面只能有一个控件具有该属性：

 代码如下 复制代码

            <input name="username" autofocus type="text" id="username">

        list属性
        HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示：

 代码如下 复制代码

            order:<input list="list" name="order" autofocus type="text" id="order">
            <datalist id="list" style="display:none">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </datalist>

        autocomplete属性
        自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。

            <form action="/autocomplete.html" method="get" autocomplete="on">
            First name:<input type="text" name="fname" /><br />
            Last name: <input type="text" name="lname" /><br />
            E-mail: <input type="email" name="email" autocomplete="off" /><br />
            <input type="submit" />
            </form>

    新增元素
    HTML5大幅度地增加和改良了input元素的种类
        search 与text文本框类似，用于搜索；
        tel 与text文本框类似，用于电话；
        url 与text文本框类似，用于url格式的地址；
        email 与text文本框类似，用于email格式的地址；
        number 与text文本框类似，用于数值；
        range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
        color 颜色文本框，“#000000”格式的文字；
        file 文件选择文本框，HTML5中通过multiple属性可以多选；
        datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
        output 定义不同类型的输出；

表单验证

    自动验证
    所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
        required属性
        具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示

 代码如下 复制代码

            <form>
            <input required type="text">
            <input type="submit" value="提交">
            </form>

        pattern属性
        具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示

 代码如下 复制代码

            <form>
            <input pattern="d+" type="text">
            <input type="submit" value="提交">
            </form>

        min属性和max属性
        它们是值类型和日期类型的input元素专用属性，限制了输入的范围

 代码如下 复制代码

            <form>
            <input min="10" max="100" type="number">
            <input type="submit" value="提交">
            </form>

        step属性
        控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....

 代码如下 复制代码

            <form>
            <input min="11" max="100" step="5" type="number">
            <input type="submit" value="提交">
            </form>

    显示验证
    除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。

 代码如下 复制代码

        <form name="form1" method="post" action="">
        <input type="email" name="email" id="email">
        <input type="button" name="button" id="button" value="按钮" onClick="check()">
        </form>
        <script type="text/javascript">
        function check(){
        var email=document.getElementById("email");
        if(email.checkValidity()){
        alert("email格式正确");
        }else{
        alert("email格式不正确");
        }
        }
        </script>

    取消验证
    取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：

 代码如下 复制代码

        <form novalidate>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" value="提交">
        </form>

        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" formnovalidate name="button" id="button" value="提交">
        </form>

    据说novalidate可以用于元素，但本人没成功，有兴趣的同学可以试试。
    自定义错误
    在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息：

 代码如下 复制代码

        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" onClick="showErr();" value="提交">
        </form>
        <script type="text/javascript">
        function showErr(){
        var name=document.getElementById("name");
        if(name.value==""){
        name.setCustomValidity("不能为空");
        }   
        }
        </script>

增强的页面元素

    figure元素
    figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption：

 代码如下 复制代码

        <figure>
        <img src="logo.png">
        <figcaption>标志</figcaption>
        </figure>

    details元素
    details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法：

 代码如下 复制代码

        <details>
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School.</p>
        </details>

    不过支持的浏览器比较少。
    mark元素
    mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果：

 代码如下 复制代码

        <mark>osEye</mark> 的理念以开源项目为中心进行相关的问题讨论。

    progress元素
    可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。

 代码如下 复制代码

        <p><progress /></p>
        <p><progress value="20" max="100" /></p>
        <p><progress value="0.5" /></p>

    meter元素
    定义度量衡

 代码如下 复制代码

        <p><meter value="0.3"></p>
        <p><meter value="10" max="100" low="20"></meter></p>
        <p><meter value="20" max="100" high="60"></meter></p>
        <p><meter value="80" max="100" high="60"></meter></p>

        high:定义度量的值位于哪个点，被界定为高的值。
        low:定义度量的值位于哪个点，被界定为低的值。
        max:定义最大值。默认值是 1。
        min:定义最小值。默认值是 0。
        optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
        value:定义度量的值。
    改良的ol列表
    在HTML5中为ol元素添加了start属性和reversed属性：

 代码如下 复制代码

        <ol start="3" reversed>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        </ol>

    改良的dl列表
    dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn

 代码如下 复制代码

        <dl>
        <dt>术语1</dt>
        <dd>描述...</dd>
        <dt><dfn>名字</dfn>术语2</dt>
        <dd>描述...</dd>
        </dl>

    另外还有cite用于表示作者，small用于标识“小型文本”等。

时间： 2024-09-23 09:25:34

HTML5新增表单元素、属性、表单验证及增强的页面元素总结的相关文章

jQuery元素属性操作实例(设置、获取及删除元素属性)_jquery

本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

Dreamweaver改变元素属性行为教程

  在Dreamweaver中使用"改变属性"行为可以更改页面元素的属性值. 一.Dreamweaver改变元素属性行为 1. 选择一个页面元素或者对象. 2. 打开行为面板. 3. 点击"添加行为(+)"按钮,在弹出的下拉菜单中选择"改变属性"命令.如下图所示: 4. 打开"改变属性"对话框,如下图所示: 元素类型:选择要改变属性的元素. 元素 ID:选择的元素如果有ID,会在此处自动显示出来.如果没有ID,添加ID后,再重

项目开发中对使用的第三方库统一进行管理__添加属性表/页

最近接手的一个项目开发中用到了很多第三方库,比如boost.gdal.xerces等等这些.从接手项目到现在从中学习到了很多之前从未见识过的东西.项目绝大部分都是前辈们写的,对于里面的对第三方库的管理我感觉是很不错的,所以记录下来以备后用,好的东西同时也应该分享给更多的可能会用到的... 项目开发中,如果遇到不是自己开发的项目时,当需要另外的人去维护时,经常连正常的编译连接都不能通过,很多的都是需要设置一些工程属性什么的,搞了半天最终才能编译通过.像这些类似的体力活可能是大多数人不愿弄的. 这里

用定制标签库和配置文件实现对JSP页面元素的访问控制

js|访问|控制|页面        控制客户端访问是开发一个基于B/S的架构的系统的开发者必须考虑的问题.JSP或SERVLET规范的基于配置文件的安全策略对资源的控制是以文件为单位的,即只可以定义某个视图全部可以或全部不能被访问.一个比较复杂的系统往往要要求对视图的一部分(如JSP页面里的一个按钮)提供访问控制,只允许被某种角色的用户访问.如果采用可编程的安全策略,因为对用户角色和操作的定义在开发时不能定义,而且这种策略加大了程序员的工作量,它可能不是一种好的办法.        我采用定制

自动化测试学习（五） selenium命令之定位页面元素

定位页面元素 对于很多selenium命令,target域是必须的.Target在web页面范围内识别UI元素,它使用locatorType=location的格式.在很多情况下,locatorType可以省略,下面举例方式来描述各种类型的locatorType. 假如,有如下一段HTML代码: html> <body> <form id= "loginForm" > <input name= "username" type= &

菜鸟学自动化测试（五）-----selenium命令之定位页面元素

定位页面元素 对于很多selenium命令,target域是必须的.Target在web页面范围内识别UI元素,它使用locatorType=location的格式.在很多情况下,locatorType可以省略,下面举例方式来描述各种类型的locatorType. 假如,有如下一段HTML代码: html> <body> <form id= "loginForm" > <input name= "username" type= &

表单元素属性readonly和disabled使用对比

表单元素属性readonly和disabled在适应范围.操作.表单提交等等方面都有所不同,至于有哪些不同,感兴趣的朋友可以了解下本文   1)适应范围: readonly:input[type="text"],input[type="password"],input[type="teaxtarea"] disabled:所有的表单元素,如select, radio, checkbox, button等 2)操作: readonly:不允许用户修

《HTML5实战》——2.2 构建表单用户界面

2.2 构建表单用户界面 本节要完成的构建用户界面的任务有:定义HTML文档结构,构建表单的各个部分,以及让用户来决定究竟是保存还是提交表单的细节信息. 本节主要学习内容 利用HTML5表单< input >元素类型及属性来提供小部件及数据验证. 利用data-*属性来保存每种产品的价格. 使用< output >元素来呈现单种产品金额小计与订单金额总计. 使用表单属性formnovalidate和formaction绕过验证,保存未完成的表单. 整个UI的构建工作按照以下7步进行

jQuery表单域属性过滤器用法分析

 这篇文章主要介绍了jQuery表单域属性过滤器用法,实例分析了:checked.:enabled.:disabled:.selected等常用表单域属性过滤器使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery表单域属性过滤器用法.分享给大家供大家参考.具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域. 1. :checked选择器 用于选择所有被选中的表单域.格式: 代码如下