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. java Folder transform to Source Folder

    右键文件夹然后选择Build Path ===>Use as Source Folder 里面的东西现在就可以编译了 然后想要让一个源码包变成一个文件夹的话: 只需要再次右键源码包==>选 ...

  2. CityBuilder导入OSGB，生成3DML填坑

    工具:CityBuilder 问题1:导入osgb时,中文路径报错 当导入osgb layer时,Input folder和output foder 中最好不要出现中文 否则可能报出如下错误: 日志: ...

  3. js 用简单案例举模态对话框弹出

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. MySQL查询笔试综合题练习

    题目要求: 在某个数据库下建表: create table stu( -> name char(3) not null default '', -> subject varchar(10) ...

  5. SharePoint - CAML

    1. CAML是顺序操作,如果要实现类似 “A or B or C or D” 的结果,最好写成 “(((A or B) or C) or D)”的形式,但写成 “((A or B) or (C or ...

  6. android 调试卡在：Waiting for Debugger - Application XXX is waiting for the debugger to Attach" 解决方法

    解决方法:重启adb. 步骤:cmd进入命令行,进入adb所在目录先后执行adb kill-server,adb start-server.

  7. 64位系统中连接Access数据库文件的一个问题

    近日在windows 7 64位系统中编译以前写的程序,发现在连接Access数据库时总是出现异常,提示“Microsoft.Jet.OLEDB.4.0”未在本机注册,同样的代码在32位的xp系统中却 ...

  8. SQLServer存储过程 实例，很多语法可以以后参考

    SQL代码 alter PROCEDURE sp_addnewdtgtype ( ), @dtgdllcontent image, ) ) AS BEGIN ); declare @v_count i ...

  9. 【Spring实战】—— 13 AspectJ注解切面

    前面了解了典型的AOP基于配置的使用方法,下面介绍下如何依赖于注解来实现AOP. 基于注解降低了配置文件的复杂程度,但是引入了程序间的耦合,其中的优劣待用户自己判断了. 需要注意的是,确定Aspect ...

  10. jQuery 资料

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...