百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5新增表单元素、属性、表单验证及增强的页面元素总结
分享本文到:

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

发布时间:01/15 来源: 浏览: 关键词:
HTML新增了不少非常有用的表单元素,特别是一些表单属性,增加了少用户体验。在支持HTML5的浏览器中,表单验证也变得简单而且用户体验很好。本文总结来讲讲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用于标识“小型文本”等。

责任编辑:
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有12人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

订阅获得更多模板