Html5笔记之第三天

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

<script type="text/javascript">
    localStorage.lastname="little_snail";
    document.write(localStorage.lastname);
</script>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

<script type="text/javascript">
    sessionStorage.lastname="little_snail";
    document.write(sessionStorage.lastname);
</script>

HTML5 的新的表单元素：

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素：

• datalist
• keygen
• output 

datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。

<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" />
    <option label="http://www.baidu.com"/>
    <option label="http://nwsuaf.edu.cn"/>
</datalist>
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <output id="result" onforminput="resCalc()"></output>
    <input type="submit" />
</form>

HTML5 的新的表单属性

本章讲解涉及 <form> 和 <input> 元素的新属性。

新的 form 属性：

• autocomplete
• novalidate

新的 input 属性：

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step
• multiple
• pattern (regexp)
• placeholder
• required 

autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释：autocomplete 适用于标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
<form action="demo_form.asp" method="get" autocomplete="on">
    First name: <input type="text" name="fname"/><br/>
    Last name: <input type="text" name="lname"/><br/>
    E-mail: <input type="email" name="email" autocomplete="off"/><br/>
    <input type="submit"/>
</form>
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。
User name: <input type="text" name="user_name"  autofocus="autofocus" />

<form id="aForm">
</form>
Last name:<input type="button" form="aForm" >

表单重写属性

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。

表单重写属性有：

• formaction - 重写表单的 action 属性
• formenctype - 重写表单的 enctype 属性
• formmethod - 重写表单的 method 属性
• formnovalidate - 重写表单的 novalidate 属性
• formtarget - 重写表单的 target 属性

注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。

<form action="demo_form.asp" method="get" id="aForm">
    E-mail: <input type="email" name="userid"/><br/>
    <input type="submit" value="Submit"/>
    <br/>
    <input type="submit" formaction="demo_admin.asp" value="Submit as admin"/>
    <br/>
    <input type="submit" formnovalidate="true" value="Submit without validation"/>
    <br/>

</form>
Last name:<input type="button" form="aForm">

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。

模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

Country code: <input type="text" name="country_code"
                     pattern="[A-z]{3}" title="Three letter country code" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。