HTML5的一大革新就是语义化标签的完善
section
w3c规范规定section是用来划分网页的,表示页面中的一个内容区块,比如章节,页眉,页脚或页面的其他部分.可以和h1,h2…等其他标签结合起来一起使用,表示文档结构
article
定义可以独立于内容其余部分的完整独立内容块,article元素就是专门为摘要设计的,比如一篇文章
aside
表示article标签内容之外的,与article标签内容相关的辅助信 息,aside元素应该被用于无关内容。
- 如果你有你认为应该与主内容分开的内容,那么aside元素是你应该正 确考虑使用的元素。
- 询问你自己aside元素中的内容是否可以被独立开来而不会影响文档或 者section中主内容的含义。
- 可以用在主要内容相关的引用,侧边栏,广告,nav元素组等
- 简单来说 :aside的内容如果被删除,剩下的内容仍然很合理
hgroup
对整个页面/页面中的一个内容区块的标题进行组合
header
一个内容区块或整个页面的头部部分
footer
整个页面或页面区块的尾部
nav
页面中导航链接的部分
figure
- 表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元
- figure元素经常用于图片
figcaption
- 代表一个图例的说明
- 代表了figure元素的一个标题或者说是其相关解释.
- 在使用figcaption时,它最好是figure块的第一个或者最后一个元素
mark
高亮显示
progress
进度条
time
<time></time>
用来表现时间或日期
<p>
我们在每天早上<time>
9:00</time>
开始营业。</p>
参数<p>
我在<time datetime=“2016-02-14T20:00Z” pudate>
这一天</time>
发布了一篇文章。</p>
wbr
<p>
一行放不下则在这换行<wbr/>
能放下则一行显示</p>
datalist
选项列表与 input 元素配合使用,可以设置提示信息
<input type="text" id="" list="shopCars"/>
<datalist id="shopCars"> <!--为表单设置可选值-->
<option value="aa"></option>
<option value="ab"></option>
<option value="c"></option>
</datalist>
details
用于描述文档或文档某个部分的细节
summary标签和details一起使用,表示标题,用户点击标题时会得到细节信息
<details>
<summary>111</summary>
<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
</details>
output
不同类型的输出,比如脚本的输出
<form oninput="x.value= parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" max="100" min="0" value="50"/>+
<input type="number" id="b" value="50"/>
<output name="x" for="a b">150</output>
</form>
新增标签的兼容问题
HTML5语义化标签在IE6-8下,对于不支持的标签不会有任何的样式,也默认的当成行内元素来出来,所以在样式表里要对这些标签定义一下 它默认的display
通过引入如下js来解决ie9以下新增标签的兼容问题
<!--[if lt IE 9]> <script type="text/javascript" src="html5.min.js"></script> <![endif]-->
Forms
新增input元素的种类:
- search : 搜索输入框
- tel : 电话号码输入框
- url : 输入url地址
- email : 邮件输入框
- number : 数字输入框
- range :特定范围内的数值选择器(通过拖动滚动条改变一定范围内的数字)
- color : 颜色选取器 只在 Opera 和 Blackberry 浏览器
- datetime : 显示完整日期和时间 UTC标准时间
- datetime-local : 显示完整日期和时间
- time : 显示时间
- month : 显示月
- week : 显示周
表单新特性
- placeholder
输入框占位符,常用作输入提示,在光标聚焦时,占位符自动消失 - autocomplete : 是否保存用户输入值
默认为on,关闭提示选择off - autofocus : 自动聚焦
- required : 此项必填,不能为空
- Pattern : 正则验证 pattern="\d{1,5}“
- form 属性 只要加上 form 属性,表单元素可以放到页面的任意位置。
- formnovalidate 和 novalidate
它俩都表示不需要验证表单,直接提交;
novalidate 用于 form 标签;
formnovalidate 用于 submit类型的提交按钮。
表单验证
validity对象,通过下面的valid可以查看验证是否通过
oText.addEventListener("invalid",fn1,false);
valid : 验证不通过时返回false
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
当表单元素验证不通过时,会触发invalid事件,
如何判断表单元素有没有验证通过?
1)所有的表单元素上有个validity对象
2)validity对象上有一些属性:valid(false) valueMissing(true) patternMismatch(true) typeMismatch(true) customError(true)
注:括号里是验证不通过时的返回值
setCustomValidity 设置自定义验证规则
<form action="" >
<!-- <input type="text" name="text" id="text1" pattern="\d{2}"/>-->
<input type="url" name="url" id="text1" />
<input type="submit" value="提交"/>
</form>
<script>
var oText = document.querySelector("#text1");
oText.addEventListener("invalid",function(){
//valid 只要验证不通过,值为false
console.log(this.validity.valueMissing);/!*配合required属性,如果为空,则这个值true*!/
},false)
oText.addEventListener("invalid",function(){
console.log(this.validity.customError)
if(this.validity.patternMismatch){
this.setCustomValidity("只能输入两位数字");//自定义验证提示信息
console.log(this.validity.customError)
}else{
this.setCustomValidity('');
}
},false)
oText.addEventListener("invalid",function(){
console.log(this.validity.typeMismatch)
},false)
</script>
全局属性
- data-yourvalue
自定义属性
data-name : dataset.name
data-name-first : dataset.nameFirst - Hidden
加上这个属性,元素则是不可见状态 - spellcheck
对你输入的内容纠错 - tabindex
按下tab键可以根据设置的顺序进行跳转 - contenteditable
<p contenteditable="true">
请您留言</p>
表示这块内容是可以编辑的 去掉则不可以修改 - desginMode
<script>
window.document.designMode = “on“</script>
HTML5表单及其验证
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架。
表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性;
当用户提交页面时,表单仍然向服务器发送表单控件的值;
之前老版本中的表单控件,如text radio checkbox等等,都可以按原有方式使用,尽管增加了新的功能;
仍然可以使用javascript操作表单控件。
1.输入型控件
Input type | 用途 | 说明 |
---|---|---|
电子邮件地址文本框 | ||
url | 网页URL文本框 | |
number | 数值的输入域 | 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) value number 规定默认值 |
range | 特定值的范围的数值,以滑动条显示 | 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 |
step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) value number 规定默认值 | ||
Date pickers | 日期,时间选择器 | 仅Opera9+支持,包含date, month, week, time, datetime, datetime-local |
search | 用于搜索引擎,比如在站点顶部显示的搜索框 | 与普通文本框用法一样,只不过这样更语文化 |
color | 颜色选择器 | 仅Opera支持 |
将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
如:
<p><label for="runnername">Runner:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>
Runner:
2.2 autocomplete
其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。
类型 | 作用 |
---|---|
on | 该字段无需保护,值可以被保存和恢复 |
off | 该字段需要保护,值不可以保存 |
unspecified | 包含<form> 的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on |
如:
<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。
2.3 autofocus
页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus
,如果设置多个则相当于未指定些行为。目前Opera10,Chrome和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用autofocus会惹恼用户。
2.4 list特性和datalist
通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Webpage:
2.5 required
required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:
Name: <input type="text" name="usr_name" required="required" />
2.6 pattern
pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
2.7 novalidate
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
如:
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
3. 表单验证
表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。
目前任何表单元素都有八种可能的验证约束条件:
名称 | 用途 | 用法 |
---|---|---|
valueMissing | 确保控件中的值已填写 | 将required属性设为true,<input type="text"required="required"/> |
typeMismatch | 确保控件值与预期类型相匹配 | <input type="email"/> |
patternMismatch | 根据pattern的正则表达式判断输入是否为合法格式 | <input type="text" pattern="[0-9]{12}"/> |
toolong | 避免输入过多字符 | 设置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea> |
rangeUnderflow | 限制数值控件的最小值 | 设置min,<input type="number" min="0" value="20"/> |
rangeOverflow | 限制数值控件的最大值 | 设置max,<input type="number" max="100" value="20"/> |
stepMismatch | 确保输入值符合min,max,step的设置 | 设置max min step,<input type="number" min="0" max="100" step="10" value="20"/> |
customError | 处理应用代码明确设置能计算产生错误 | 例如验证两次输入的密码是否一致 |
下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看:
源代码:
<form name="register1" id="register1">
<p><label for="runnername">RunnerName:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
</p>
<p><label for="phone">Tel #:</label>
<input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
placeholder="xxx-xxxx-xxxx"/></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="For confirmation only"/></p>
<p><label for="dob">DOB:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"/></p>
<p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
<p><label for="style">Shirt style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"
autocomplete="off"/></p>
<datalist id="stylelist">
<option value="White" label="1st Year"/>
<option value="Gray" label="2nd - 4th Year"/>
<option value="Navy" label="Veteran (5+ Years)"/>
</datalist>
<fieldset>
<legend>Expectations:</legend>
<p>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0"/>
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxLength="100"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
</form>
可是各个浏览器验证行为不一致,我们可能需要统一其验证行为,借助javascript我们可以统一浏览器的验证行为。
还是以上上述HTML为基础,我们为其加上相关javascript:
//自定义表单控件验证行为
var checkvalue = function(e){
var el = e.target;
var isvalid = el.checkValidity();
if(isvalid){
el.className= "";
el.parentElement.getElementsByTagName("label")[0].className="";
}else{
el.className= "error";
el.parentElement.getElementsByTagName("label")[0].className="error";
}
e.stopPropagation();
e.preventDefault();
}
//定义表单验证方法
function invalidHandler(evt) {
checkvalue(evt);
}
function loadDemo() {
var myform = document.getElementById("register1");
//注册表单的oninvlid事件
myform.addEventListener("invalid", invalidHandler, true);
for(var i=0;i< myform.elements.length-1;i++){
//注册表单元素的onchange事件,优化用户体验
myform.elements[i].addEventListener("change",checkvalue,false);
}
}
//在页面初始化事件(onload)时注册的自定义事件
window.addEventListener("load", loadDemo, false);
最后说下输入两次密码匹配的验证,写的很简单:
<form name="passwordChange">
<p><label for="password1">New Password:</label>
<input type="password" id="password1" onchange="checkPasswords()"></p>
<p><label for="password2">Confirm Password:</label>
<input type="password" id="password2" onchange="checkPasswords()"></p>
</form>
<button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>
function checkPasswords() {
var pass1 = document.getElementById("password1");
var pass2 = document.getElementById("password2");
if (pass1.value != pass2.value)
pass1.setCustomValidity("两次输入的密码不匹配");
else
pass1.setCustomValidity("");
}