HTML5学习（二）

6.表单

html5带来了新的表单元素、新输入控件类型和新的属性，新的输入控件类型包括：

email：用于输入电子邮件地址；
url:用于输入URL；
date:用于输入日期和时间；
number:用于输入数值；
range:用于生成滑动条；
search：用于搜索框；
Data Pickers：日期选择器；
tel:用于输入电话号码；
color:用于选择颜色；

input类型-email
email类型用于应该包含e-mail地址的输入域；在提交表单时，会自动验证email域的值。

E-mail:<input type="email" name="user_email"/>

Input 类型 - url
url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证URL域的值。

homepage:<input type="url" name="user_url" />

Input 类型 - number
number类型用于应该包含数值的输入域。

Points: <input type="number" name="points" min="1" max="10" />

Input 类型 - range
range类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。

<input type="range" name="points" min="1" max="10" />

Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

Input 类型 - search
search类型用于搜索域，比如站点搜索或Google搜索，search域显示为常规的文本域。
Input 类型 - tel

<input type="tel">

Input 类型 - color

<input type="color">

---

HTML5表单元素

新的表单元素：
1）datalist
datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。ps: Option元素永远要设置value属性。

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>

2)Keygen元素
keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器，公钥可用于之后验证用户的客户端证书（client certificate）

3)output元素
output元素用于不同类型的输出，比如计算或者脚本输出：

<output id="result" onforminput="resCalc()"></output>

---

Html5新的表单属性

//新的 form 属性：
-autocomplete
-novalidate：在验证表单时不应该验证form或者input域。
//新的 input 属性：
-autocomplete:规定form或者input域应该拥有自动完成功能。

-autofocus:规定在页面加载时，域自动地获得焦点。

-form:规定输入域所属的一个或多个表单。

-form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)：表单重写属性允许重写form元素的某些属性设定。
表单重写属性：（formaction - 重写表单的 action 属性；formenctype - 重写表单的 enctype 属性；formmethod - 重写表单的 method 属性；formnovalidate - 重写表单的 novalidate 属性；formtarget - 重写表单的 target 属性）

-height 和 width：image类型的input标签的图像高度和宽度。
-list：规定输入域的datalist,datalist是输入域的选型列表。
-min, max 和 step：输入域所允许的最大最小值，step为输入域规定合法的数字间隔。

-multiple：规定输入域中可选择多个值。

-pattern (regexp)：规定用于验证input域的模式。
-placeholder：提供一种提示，描述输入域所期待的值
-required：规定毕业再提交之前填写输入域。