H5新增的标签总结
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新增的标签总结的更多相关文章
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
- H5新增的标签以及改良的标签
1>OL标签的改良 start type reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...
- H5新增input标签
1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- h5废弃的标签和属性及新增的标签和属性
一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- H5新增API
H5新增API 选择器 querySelector()和querySelectorAll(),参数都是css选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null,后者返回符合筛选条件的所 ...
随机推荐
- ZOJ 3885 The Exchange of Items
The Exchange of Items Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. O ...
- String类常见的方法
类String public final class String extends Object implements Serializable, comparable<String>, ...
- 快速排序、查第k大
参考这里,提到两种方法,并说第二种好: http://www.cnblogs.com/qsort/archive/2011/05/09/2041653.html qsort的每一趟中,选定pivot以 ...
- HDU 2874
简单的tarjan #include <iostream> #include <cstdio> #include <cstring> #include <al ...
- 引用内部函数绑定机制,R转义字符,C++引用,别名,模板元,宏,断言,C++多线程,C++智能指针
1.引用内部函数绑定机制 #include<iostream> #include<functional> usingnamespacestd; usingnamespac ...
- 关于server和虚拟主机的差别
文章都是先由本人个人博客,孙占兴:www.teilim.com,先更新,随后CSDN博客才会更新.掌握第一动态请关注本人主站. 原文链接:http://www.teilim.com/guan-yu-y ...
- n个整数全排列的递归实现(C++)
全排列是很经常使用的一个小算法,以下是n个整数全排列的递归实现,使用的是C++ #include <iostream> using namespace std; int n = 0; vo ...
- hdoj--1171--Number Sequence(KMP)
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Linux就该这么学 20181009(第十二章 SAMBA)
参考链接https://www.linuxprobe.com Samba 跨平台的文件共享 linux-linux linux-windows /etc/samba/smb.conf 里面 []这个名 ...
- springmvc生成注册验证码
通过SPRing MVC为系统添加验证码 1:布局登陆页面,用户名,密码,填写验证码的文本框,及验证码的图片及点击换图 <%@ taglib prefix="c" uri=& ...