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. VS2015 C#取消最大化按钮,设置鼠标不可调整窗体大小

    取消最大化按钮设置  设置窗体不可被鼠标调整大小

  2. 编译驱动模块所需的Makefile

    目标定义:就是用来定义哪些内容作为模块编译,哪些内容要编译并链接进内核. obj-y += foo.o 表示要由foo.c或者foo.s文件编译得到foo.o并链接进内核: obj-m则表示该文件要作 ...

  3. Log使用

    学习参考:http://blog.csdn.net/hu_shengyang/article/details/6754031 log4j三种主要组件: logger记录对象 appender输出对象 ...

  4. windows下PTAM的编译

    前些日子在研究PTAM,以下首先说说PTAM的编译过程,我在XP几WIN7搭配vs2010中均已測试过,都能够执行. 首先下载编译PTAM所必须的库文件.下载地址我会给出 PTAM(PTAM.zip) ...

  5. php面向对象之get和set方法

    php面向对象之get和set方法 简介 1.自己写get或者set 2.用系统的魔术方法__get和__set 代码 <?php class Person{ private $userName ...

  6. Java-MyBatis-杂项: MyBatis 中 in 的用法2

    ylbtech-Java-MyBatis-杂项: MyBatis 中 in 的用法2 1.返回顶部 1. 一.简介 在SQL语法中如果我们想使用in的话直接可以像如下一样使用: select * fr ...

  7. SQL 数据库性能优化

    http://blog.csdn.net/yzllz001/article/details/54848513 1.  减少数据访问(减少磁盘访问) 2.  返回更少数据(减少网络传输或磁盘访问) 3. ...

  8. HD-ACM算法专攻系列(18)——Largest prime factor

    题目描述: 源码: 需要注意,若使用cin,cout输入输出,会超时. #include"iostream" #include"memory.h" #defin ...

  9. .NET CORE MVC网站体验

    安装SDK https://www.microsoft.com/net/download/core 运行命令行工具 mkdir coremvc cd coremvc dotnet new 文件建立成功 ...

  10. 微软认证Hyper-V咨询工程师认证课程

    课程链接:http://www.microsoftvirtualacademy.com/colleges/hyper-V-Certificate STEP 1:完成课程链接内的认证课程. STEP 2 ...