1:便于排版的Form表单

HTML5为了方便排版,可以使form的表单标签脱离form的嵌套。

方法:form指定id,所有的标签标签都添加form= id属性。

例如:

<form action="" method="post" id="register"></form>

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

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

2:form新类型

type = "email" 邮箱(自带格式校验)

type = "url"   网址,必须带协议(自带格式校验)

type = "date"  日期选择器

type = "time" 时间选择器

type = "month" 月份选择器

type = "week" 周选择器

type = "number" 数字选择器

type = "range" 滑动条

max属性

step属性(验证合法性) step="2",例如从0开始,只能选择0-2-4-6-8

type = "search" 搜索框

results="n"谷歌浏览器可用,显示搜索图标。

type = "color" 颜色选择器

3:新增的表单属性

required="required" 设置必填项

placeholder = "我是默认值" 设置默认值,不会提交到后台

autofocus = "autofocus" 自动聚焦

pattern="\d{3}" 自定义正则表达式

4:自动填充表单

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

<datalist id="movie">

<option>人在囧途</option>

<option>车在囧途</option>

<option>泰囧</option>

</datalist>

5:output标签

<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>

H5新增的标签总结的更多相关文章

  1. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  2. H5新增的标签和属性

    声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...

  3. H5新增的标签以及改良的标签

    1>OL标签的改良 start type  reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...

  4. H5新增input标签

    1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...

  5. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  6. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  7. h5废弃的标签和属性及新增的标签和属性

    一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...

  8. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  9. H5新增API

    H5新增API 选择器 querySelector()和querySelectorAll(),参数都是css选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null,后者返回符合筛选条件的所 ...

随机推荐

  1. Ubuntu中的Docker搭建Tensorflow环境

    一.docker环境安装 1)更新.安装依赖包 sudo apt-get update sudo apt-get install apt-transport-https ca-certificates ...

  2. 洛谷 U5737 纸条

    U5737 纸条 题目背景 明明和牛牛是一对要好的朋友,他们经常上课也想讲话,但是他们的班级是全校纪律最好的班级,所以他们只能通过传纸条的方法来沟通.但是他们并不能保证每次传纸条老师都无法看见,所以他 ...

  3. POJ 1091

    这题确实是好. 其实是求x1*a1+x2*a2+....M*xn+1=1有解的条件.很明显,就是(a1,a2,...M)=1了.然后,可以想象,直接求有多少种,很难,所以,求出选择哪些数一起会不与M互 ...

  4. Android框架简要介绍

    1.      Android架构直观图 下图展示了Android系统的主要组成部分: 总体上而言,Android系统结构由5个部分组成.从上到下,别人是Applications (Android应用 ...

  5. python的range()函数使用方法

    python的range()函数使用非常方便.它能返回一系列连续添加的整数,它的工作方式类似于分片.能够生成一个列表对象. range函数大多数时常出如今for循环中.在for循环中可做为索引使用.事 ...

  6. ChrisRenke/DrawerArrowDrawable源代码解析

    转载请注明出处http://blog.csdn.net/crazy__chen/article/details/46334843 源代码下载地址http://download.csdn.net/det ...

  7. 巧用select延时

    在LINUX用户态的情况下.假设想要延时的话.用sleep是最合适的,可是,在有些情况下,须要更小单位的延时,ms  us 也是要的.用循环获取到的延时是不精确的. 幸好,select函数巧用的话,是 ...

  8. VC 6.0中添加库文件和头文件 【转】

    本文转载自:http://blog.sina.com.cn/s/blog_9d3971af0102wxjq.html 加头文件包含 VC6.0中: VC6.0默认include包含路径:Tools&g ...

  9. UESTC--1262--Memory(dfs)

    Memory Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu SubmitStatus De ...

  10. Java-杂项:Java数组Array和集合List、Set、Map

    ylbtech-Java-杂项:Java数组Array和集合List.Set.Map 1.返回顶部 1. 之前一直分不清楚java中的array,list.同时对set,map,list的用法彻底迷糊 ...