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. ie兼容性问题汇总

    1.eval函数 <script type="text/javascript"> //eval的兼容性 var s="function(){alert('te ...

  2. java多线程之线程组与线程池

    看这篇文章:http://blog.csdn.net/zen99t/article/details/50909099

  3. centos系统为php安装memcached扩展

    1. 通过yum安装 yum -y install memcached #安装完成后执行: memcached -h #出现memcached帮助信息说明安装成功 2. 加入启动服务 chkconfi ...

  4. Win7 x86内核调试与TP反调试的研究

    参考  这两天对某P双机调试的学习及成果 ,非常好的一篇分析贴. 本文在Win7 x86下的分析,在虚拟机中以/DEBUG模式启动TP游戏,系统会自动重启. 0x01 内核调试全局变量  根据软件调试 ...

  5. JS中的prototype(转载)

    本文转载自博客园. 作者:叶剑锋 出处:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 本文基于下面几个知识点: 1 原型法 ...

  6. SQL Server与Oracle有什么区别？

    1.可操作平台上: Oracle可在所有主流平台上运行,Oracle数据库采用开放的策略目标,它使得客户可以选择一种最适合他们特定需要的解决方案.客户可以利用很多种第三方应用程序.工具.而SQL Se ...

  7. [Linq To Sql]解决join时的Collation冲突

    背景 现在两表 A:

  8. Use the list and while to Build Shop car

    #Author: Gordonsalary = int(input("请输入你的工资:"))goods = [('0',"Iphone",5000),('1', ...

  9. Scrapy框架之基于RedisSpider实现的分布式爬虫

    需求:爬取的是基于文字的网易新闻数据(国内.国际.军事.航空). 基于Scrapy框架代码实现数据爬取后,再将当前项目修改为基于RedisSpider的分布式爬虫形式. 一.基于Scrapy框架数据爬 ...

  10. python占位符%s,%d,%r,%f

    input接收的所有输入默认都是字符串格式 1.%s代表字符串占位符 conn, client_addr = phone.accept() print(conn) print(client_addr) ...