html5学习笔记之二（智能表单设计）

看视频，做笔记：

一、新的输入类型

1.email：可以自动校验是否是一个电子邮件地址（不同浏览器可能提示方式不太一样），用法如下：

<input type = "email" name = "user_email" />

2.url：可以自动将提交的数据变为url，用法如下：

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

3.number：有四个属性max（最大值）、min（最小值）、step（步进修改值）、value（默认值）。用法如下：

<input type = "number" name = "points" min = "1“ max = ”10“ value = "5" />

4.range：选择一个范围内的数字作为输入，属性和number一样（两者视觉效果不一样）。用法如下：

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

5.Date Pickers：用途较广，对日期的输入比较方便，用法如下：

<input type = "date" name = "usr_date" />

<input type = "week" name = "usr_week" />

<input type = "datetime" name = "usr_time" />

<input type = "datetime-local" name = "usr_time" />

5.color：选择一种颜色，以RGB方式记录显示，可以显示色谱图案以供选择（因浏览器而定），用法如下：

<input type = "color" name = "user_color" />

6.meter：显示进度，有form、high、low、max、min、optimum、value等属性，用法如下：

<meter value = "2" min = "0" max = "10" > 2 out of 10 </meter> <br />

<meter value = "0.6" > 60% </meter>

7.progress：显示进度条，用法如下：

<progress value = "22" max = "100" > </progress>

8.datalist：自动实现下拉选择输入，用法如下：

<input list = "cars" /> //数据源来自cars

<datalist id = "cars">

<option value = "BMW">

<option value = "Ford">

<option value = "Volvo">

</datalist>

9.keygen：加密传输数据，keytype属性可以使rsa或其他加密方式，目前只能指定rsa，用法如下：

<keygen name = "security" />

10.output：计算数据并直接提交输出，用法如下：

<input name = "numa" type = "number" > + <input name = "numb" type = "number">=

<output name = "result" onforminput = "value = numa.valueAsNumber + numb.valueAsNumber"></output>

二、forms的新属性

1.Autofocus：把焦点设定到某个输入区域内：

<input type = search name = query autofocus>

2.placeholder：在文本框中显示输入的例子，提示用户按何种模式输入：

<input type = email name = email id = email placeholder = user@host.com>

3.required：必填项，免去js的校验之苦

4.autocomplete:是否自动补完文本框，值为on或off

5.autofocus：是否自动设置焦点若是hidden则不可

6.form：说明某一个文本框属于某一个form

7.formaction：本文本框将要被提交到何处

8.formenctype：指定发送的编码方式

9.formmethod：指定提交方式(post/get)

10.formtarget：提交结果显示位置

11.height：高度

12.list：输入选择项

13.multiple：允许多项

14.pattern：用正则表达式输入

15.width：定义图片的宽度

三、客户端脚本数据校验

1.require属性：必须有值输入才能通过：

<input type = email ame = email required>

2.checkValidity函数：指定验证函数：

<input type = email name = email onchange = "this.checkValidity();">

3.setCustomValidity()：指定验证函数为自己指定的验证函数：