1、html5的input标签的type类型新增介绍：

　　

2、表单新增属性介绍：

　　

3、代码示例：

<!doctype html>

<html>

    <head></head>

    <body>

        <form action="http://localhost/test.php" method="post" id="register"></form>

        <input type="text" name="user" value="" form="register" />

        <input type="password" name="pwd" value="" form="register" />

        <select name="year" form="register">

            <option value="1970">1970</option>

            <option value="1980">1980</option>

            <option value="1990">1990</option>

        </select>

        <input type="submit" value="注册" form="register" />

        <hr />

        <!--

            form: html5表单将form和它所提交的内容分开，这样有利于排版，但是需要在给提交的内容标签添加form属性。

                       例如：<input type="text" name="user" value="" form="register" />

        -->

        默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" 
　　　　　　　　　　form="register" /><br />

        邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />

        URL：<input type="url" name="url" value="" form="register" /><br />

        DATE:<input type="date" name="riqi" value="" form="register" /><br />

        TIME：<input type="time" name="shijian" value="" form="register" /><br />

        Month：<input type="month" name="yue" value="" form="register" /><br />

        WEEK：<input type="week" name="zhou" value="" form="register" /><br />

        数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />

        滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />

        搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />

        颜色：<input type="color" name="yanse" value="" form="register" /><br />

        <hr />

        自动填充表单<br />

        <input type="text" name="auto" value="" list="movie" />

        <datalist id="movie">

            <option>人在囧途</option>

            <option>车在囧途</option>

            <option>泰囧</option>

        </datalist>

        <hr />

        输出表单output<br />

        <form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">

            <input type="number" name="no1" value="" />

            <input type="number" name="no2" value="" />

            <output name="result"></output>

        </form>

    </body>

</html>

HTML5之表单新增类型介绍的更多相关文章

  1. HTML5 总结-表单-输入类型

    HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url nu ...

  2. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  3. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  4. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  5. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  7. HTML5新表单新功能解析

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

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

随机推荐

  1. ife task0003学习笔记（四）：JavaScript构造函数

    JavaScript创建对象主要是3种方法:工厂模式.构造函数模式.原型模式.其实对于构造函数的概念,我们并不陌生.在之前学习c++语言的时候,也有提到过构造函数的概念.除了创建对象,构造函数(con ...

  2. node+express搭建过程以及安装ejs模板引擎解决方案

    一.Node.js简介 1.Node.js是什么? Node.js 可以作为服务器向用户提供服务,与 PHP.Python.Ruby on Rails 相比,它跳过了 Apache.Nginx 等 H ...

  3. FZU 1924——死锁——————【topo判环】

    死锁 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pr ...

  4. 转帖：kindeditor编辑区空格被隐藏，导致所见所得不一致的解决办法

    1.修改kindereditor-all.js中的 var re = /(\s)<(/)?([\w-:]+)((?:\s+|(?:\s+[\w-:]+)|(?:\s+[\w-:]+=[^\s&q ...

  5. 常用shell脚本（持续更新中）

    1. 写一个shell脚本来得到当前的日期,时间,用户名和当前工作目录. 答案 : 输出用户名,当前日期和时间,以及当前工作目录的命令就是logname,date,who i am和pwd. #!/b ...

  6. 一个C#后台调用接口的例子

    string url = ConfigurationSettings.AppSettings["resurl"].ToString(); var wc = new WebClien ...

  7. SpringSecurity 3.2入门（4）登录密码加密

    密码admin 进行MD5 32位加密为21232F297A57A5A743894A0E4A801FC3 增加spring-security.xml文件配置如下 <!-- 认证管理器,配置Spr ...

  8. 学习总结（一）java web连接池

    大家都知道,在访问数据库时要与数据库建立连接.在jdbc中,用户与数据库建立连接后,取完数据或操作完数据后,就会断开这个连接.当下次还要访问数据库时,就会重新创建连接.这样很浪费资源,尤其是网页上有数 ...

  9. 认识Spring AOP

    Spring AOP AOP是Aspect/'æspekt/ Oriented/ɔːrɪentɪd/ Programming的缩写,意为:面向切面编程. 是什么 通过预编译方式和运行期动态代理实现程序 ...

  10. XMLHttpRequest.responseType

    "arraybuffer" "blob" "document" "json" "text"