HTML表单及储存

H5的特性

语义化标签

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节（section、区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
detailes	用于描述文档或文档某个部分的细节
summary	标签包含 details 元素的标题
dialog	定义对话框，比如提示框

2.新增表单控件

email:邮箱
tel:电话
url:网址
number:数字（min,max,step数字间隔,value）
range:数字选择器（min,max,step数字间隔,value）
search:搜索框
color:颜色选择器

date：选取 日 月 年
month - 选取月 年
week- 选取周和年
time- 选取时间（小时和分钟）
datetime - 选取时间、⽇、⽉、年（UTC 时间）date和time的组合

3.新增表单属性

placeholder：输入框提示信息
autofocus：指定表单获取输入焦点
required：必填字段
pattern：正则验证
form：规定输入域所属的一个或多个表单（form属性所以用表单的id）
formaction：重写表单的action属性
formmethod：重写表单的method属性
autocomplete：属性规定form或input域应该拥有自动完成功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定

<form id="testform">
    <input type="text" />  
</form> 
<input form=testform />

placeholder属性

 <input type="text" placeholder="请输入密码" />

autofocus属性，页面只能有一个

 <input type="text" autofocus />

还有type为email、number等，但是实际项目中一般使用自定义，所以这里不提。

4.新增表单验证

novalidate：表单取消验证
formnovalidate：submit元素取消验证
setCustomValidity：自定义验证信息
总体来说，这些标签就是div标签的语义化转化，过去我们曾用div来包裹某个块或者说组件，现在h5使用这些标签实现语义化，有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用：

   document.createElement('header');
    document.createElement('nav');

来解决，但是这样js创建的新元素没有样式，需要在css中定义，或者直接通过插件http://www.bootcdn.cn/html5shiv/来解决。html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

本地存储

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况:

 if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage和sessionStorage的区别在于sessionStorage基于会话，关闭浏览器之后存储消失。localStorage在各浏览器中上限不同，最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多，如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间，不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。以下是它的常用应用场景:

var userData = {
    name : 'sysuzhyupeng',
    age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData')); 

另外，浏览器提供了storage事件来监听存储:

window.addEventListener('storage', showStorageEvent, true)

cookie、localStorage和sessionStorage三者之间的区别
1.生命周期
Cookie：可设置失效时间，默认是关闭浏览器后失效
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
localStorage：除非手动清除，否则永久保存
2. 存放数据大小：
cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。

<fieldset id="filel">
			<legend>学生档案</legend>
			<div id="">
			<p>姓名：</p>
			<input type="text" name="" id="" splaceholder="请输入姓名" placeholder="请输入姓名"/>
			<p>手机号码：</p>
			<input type="tel" name="" id="" value="1"/>
			<p>邮箱地址：</p>
			<input type="email" name="" id="" value="1"/>
			<p>所属学校：</p>
			<input type="text" name="" id="" value="Android"/>
			<p>入学成绩：</p>
			<input type="number" name="" id="" value="0"/>
			<p>基础水平：</p>
			<meter value="0.3" style="width: 500px;height: 30px;"></meter>
			<p>入学日期：</p>
			<input type="datetime" name="" id="" value="2020/09/24" readonly="true"/>
			<p>入学日期：</p>
			<input type="date" name="" id="" value=""/>
			<p>课程进度：</p>
			<input type="range" name="" id="" value="10"/>
			<input type="submit" name="" id="sub1" value="保存" />
		</fieldset>