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. PHP学习总结(8)——PHP入门篇之WAMPServer集成环境安装和配置

    WampServer就是Windows Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件.WampServer是一款由法国人开发的Apac ...

  2. easy-ui采坑事件

    新用户首次登陆修改密码 imput标签中使用easyui自带的class="easyui-passwordbox"可以是密码隐藏变成黑点但是无法禁用输入法,然后果断的加了一个typ ...

  3. [SharePoint]2013装过WindowsServerAppFabricSetup_x64_6.1导致安装不能继续

    还是不要自己手动安装2013支持组件.让他自己慢慢下吧. 浪费一个星期的时间. 特此纪念! 令解http://www.cnblogs.com/jianyus/p/3287625.html

  4. HDU 4341

    分组背包而已.注意的是,每个时间T,要把一组的全加进去比较一次. #include <iostream> #include <cstdio> #include <cstr ...

  5. tomcat内存大小设置

    tomcat内存大小设置 如果安装为windows服务,需要进行内存设置的时候,选择configure...界面, 在Java Tab页面内可以进行内存参数的设置. 学习了:http://elf884 ...

  6. ZooKeeper分布式集群部署及问题

    ZooKeeper为分布式应用系统提供了高性能服务,在许多常见的集群服务中被广泛使用,最常见的当属HBase集群了,其他的还有Solr集群.Hadoop-2中的HA自己主动故障转移等. 本文主要介绍了 ...

  7. 【iOS开发系列】UIDevice设备信息

    [1] 推断是否是横向屏: BOOL b=UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation); 获取设备uniqu ...

  8. 刚接触Joomla,写一下瞎折腾的初感受~

    我这几天一直在苦苦寻找一款能够长期投靠的CMS产品,要求的是 1)必须支持命名空间 2)必须OOP + MVC分层 3)丰富分文档和使用群体,至少是出名的.免得哪一天他们解散了 4)-- 一開始我把目 ...

  9. poj--1236--Network of Schools(scc+缩点)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14062   Accepted: 56 ...

  10. hdoj--1495--非常可乐(搜索+隐式图)

    非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...