HTML5新增了很多属性功能。但是有兼容性问题，因为这些表单功能新增的。我这里做了一个简单的练习，方便参考。如果完全兼容的话，那我们写表单的时候就省了很多代码以及各种判断。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>HTML5表单新功能解析</title>

        <style type="text/css">

            #da{

                width:350px;

                height:600px;

                margin:0 auto;

            }

        </style>

    </head>

    <body>

        <form action="" method="post">

            <fieldset id="da">

                <legend>HTML5新表单元素</legend>

                    <label>国家：</label>

                        <input type="text" value="" autofocus="autofocus" required="required"/><p></p>

                    <label>文件：</label>

                        <input type="file"  value="" multiple="multiple"/><p></p>

                    <label>正则：</label>

                        <input type="" name="" id="" value="" placeholder="请输入6-16的数字或字母"  pattern="^[a-zA-Z0-9]{5,12}$" required="required"/><p></p>

                    <label>邮箱：</label>

                        <input type="email" name="" id="" value="" required="required"/><p></p>

                    <label>网址：</label>

                        <input type="url" name="" id="" value="" required="required"/><p></p>

                    <label>日期：</label>

                        <input type="date" name="" id="" value="" required="required"/><p></p>

                    <label>数字：</label>

                        <input type="number" name="" id="" value="" required="required"/><p></p>

                    <label>滑块：</label>

                        <input type="range" name="" id="range" value="65" step="1" max="500" onchange="showValue(this.value)" required="required"/>

                        <span id="rangeValue"></span><p></p>

                    <label>搜索：</label>

                        <input type="search" name="" id="" value="" required="required"/><p></p>

                    <label>电话：</label>

                        <input type="tel" name="" id="" value="" required="required"/><p></p>

                    <label>颜色：</label>

                        <input type="color" name="" id="" value="" required="required"/><p></p>

                    <label>占位：</label>

                        <input type="text" name="" id="" value="" placeholder="请输入用户名" required="required"/><p></p>

                    <input type="submit" value="提交"/>

                    <input type="submit" value="查找" formnovalidate="formnovalidate"/>

            </fieldset>

        </form>

        <script type="text/javascript">

               function showValue(val){

                    document.getElementById("rangeValue").innerHTML=val;

                }

        </script>

    </body>

</html>

HTML5新表单新功能解析的更多相关文章

  1. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  2. 完善：HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  3. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  4. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  5. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  6. JS基础-表单元素-新表单元素-js概述

    1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...

  7. HTML5_01之表单新特性

    1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...

  8. H5表单新特性

    1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...

  9. Form表单 JSON Content-type解析

    Form表单 JSON Content-type解析 1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属 ...

随机推荐

  1. selenium多表单操作与多窗口，以及警告框处理

    知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...

  2. IIS日志如何记录X-Forwarded-For

    起因 最近因为某个站点的流量异常,需要统计一下服务器的来源IP,本来开一下IIS日志就能搞定的事儿,但不幸的是生产服务器使用F5做了负载均衡,IIS日志无法记录到真实IP,真实的IP在"x- ...

  3. 【转】理解JMX之介绍和简单使用

    原文链接:https://blog.csdn.net/lmy86263/article/details/71037316 近期在项目上需要添加一些功能,想把一个开源工程整合进来,虽说是整合,但是觉得跟 ...

  4. [已解决]报错: Creating Server TCP listening socket 127.0.0.1:6379: bind: No error

    问题: windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0. ...

  5. Dubbo与SpringBoot的结合

    前言 这段时间在接触分布式的内容,因为公司的技术栈是 dubbo ,所以我顺其自然地选择了 dubbo 作为我学习的框架. 看了任务清单,这篇文章应该是在6天前出来的,但是因为实习等等的一些事情耽误了 ...

  6. 可重入锁：ReentrantLock理解使用

    (一)可重入性 可重入性描述这样的一个问题:一个线程在持有一个锁的时候,它内部能否再次(多次)申请该锁.如果一个线程已经获得了锁,其内部还可以多次申请该锁成功.那么我们就称该锁为可重入锁.通过以下伪代 ...

  7. python-面向对象中的特殊方法 ,反射,与单例模式

    二,面相对象的特殊成员及相关内置函数 2.1 isinstance与issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class A: pass cl ...

  8. loj6626 幼儿园唱歌题

    题目 不难想到把\(S\)的反串\(S^R\)接到\(S\)后面,这样就可以把\(S[l_1,r_1]\)的前缀转化为\(S^R[n-r_1+1,n-l_1+1]\)的后缀 回文树上两节点的lca就是 ...

  9. 4154: [Ipsc2015]Generating Synergy

    Description 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色 区间修改单点查询kdtree #include<iostre ...

  10. servlet的ServletContext接口

    ServletContext Servlet 上下文 每个web工程都只有一个ServletContext对象,也就是不管在哪个servlet里面,获取到的这个ServletContext对象都是同一 ...