1、====================================================================HTML5 新的 Input 类型

 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

 本章全面介绍这些新的输入类型：

 color

 date

 datetime

 datetime-local

 email

 month

 number

 range

 search

 tel

 time

 url

 week

 注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。



 Input 类型: color

 color 类型用在input字段主要用于选取颜色，如下所示：

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   选择你喜欢的颜色: <input type="color" name="favcolor"><br>

   <input type="submit">

 </form>

 </body>

 </html>





 Input 类型: date

 date 类型允许你从一个日期选择器选择一个日期。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   生日: <input type="date" name="bday">

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: datetime

 datetime 类型允许你选择一个日期（UTC 时间）。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   生日 (日期和时间): <input type="datetime" name="bdaytime">

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: datetime-local

 datetime-local 类型允许你选择一个日期和时间 (无时区).

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   生日 (日期和时间): <input type="datetime-local" name="bdaytime">

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: email

 email 类型用于应该包含 e-mail 地址的输入域。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

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

   <input type="submit">

 </form>

 <p><b>注意:</b> Internet Explorer 9  及更早IE版本不支持type="email" 。</p>

 </body>

 </html>



 Input 类型: month

 month 类型允许你选择一个月份。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   生日 ( 月和年 ): <input type="month" name="bdaymonth">

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: number

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

 您还能够设定对所接受的数字的限定：

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

   <input type="submit">

 </form>

 <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>

 </body>

 </html>

 使用下面的属性来规定对数字类型的限定：

 max- 规定允许的最大值

 min - 规定允许的最小值

 step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

 value - 规定默认值

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo_form.php" method="get">

 <input type="number" name="points" min="0" max="10" step="3" value="6">

 <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: range

 range 类型用于应该包含一定范围内数字值的输入域。

 range 类型显示为滑动条。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php" method="get">

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

 <input type="submit">

 </form>

 <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>

 </body>

 </html>



 Input 类型: search

 search 类型用于搜索域，比如站点搜索或 Google 搜索。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   Search Google: <input type="search" name="googlesearch" value="cxc"><br>

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: tel

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   电话号码: <input type="tel" name="usrtel"><br>

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: time

 time 类型允许你选择一个时间。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   选择时间: <input type="time" name="usr_time">

   <input type="submit">

 </form>

 </body>

 </html>



 Input 类型: url

 url 类型用于应该包含 URL 地址的输入域。

 在提交表单时，会自动验证 url 域的值。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   添加你的主页: <input type="url" name="homepage"><br>

   <input type="submit">

 </form>

 <p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p>

 </body>

 </html>



 Input 类型: week

 week 类型允许你选择周和年。

 <!DOCTYPE html>

 <html>

 <body>

 <form action="demo-form.php">

   选择周: <input type="week" name="year_week">

   <input type="submit">

 </form>

 </body>

 </html>



 属性

 New : HTML5新标签。

 属性
 值
 描述

 accept
 audio/* video/* image/* MIME_type
 规定通过文件上传来提交的文件的类型。 (只针对type="file")

 align
 left right top middle bottom
 HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")

 alt
 text
  定义图像输入的替代文本。 (只针对type="image")

 autocompleteNew
 on off
 autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。

 autofocusNew
 autofocus
 属性规定当页面加载时 <input> 元素应该自动获得焦点。

 checked
 checked
 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

 disabled
 disabled
 disabled 属性规定应该禁用的 <input> 元素。

 formNew
 form_id
 form 属性规定 <input> 元素所属的一个或多个表单。

 formactionNew
 URL
 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

 formenctypeNew
 application/x-www-form-urlencoded multipart/form-data text/plain
 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。

 formmethodNew
 get post
 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

 formnovalidateNew
 formnovalidate
 formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

 formtargetNew
 _blank _self _parent _top framename
 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

 heightNew
 pixels
 规定 <input>元素的高度。(只针对type="image")

 listNew
 datalist_id
 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

 maxNew
 number date
 属性规定 <input> 元素的最大值。

 maxlength
 number
 属性规定 <input> 元素中允许的最大字符数。

 minNew
 number date
 属性规定 <input>元素的最小值。

 multipleNew
 multiple
 属性规定允许用户输入到 <input> 元素的多个值。

 name
 text
  name 属性规定 <input> 元素的名称。

 patternNew
 regexp
 pattern 属性规定用于验证 <input> 元素的值的正则表达式。

 placeholderNew
 text
 placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。

 readonly
 readonly
 readonly 属性规定输入字段是只读的。

 requiredNew
 required
 属性规定必需在提交表单之前填写输入字段。

 size
 number
  size 属性规定以字符数计的 <input> 元素的可见宽度。

 src
 URL
  src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

 stepNew
 number
 step 属性规定 <input> 元素的合法数字间隔。

 type
 button 

 checkbox 

 color 

 date 

 datetime 

 datetime-local 

 email 

 file 

 hidden 

 image 

 month 

 number 

 password 

 radio 

 range 

 reset 

 search 

 submit 

 tel 

 text 

 time 

 url 

 week
 type 属性规定要显示的 <input> 元素的类型。

 value
 text
  指定 <input> 元素 value 的值。

 widthNew
 pixels
 width 属性规定 <input> 元素的宽度。 (只针对type="image")





 窗口事件属性（Window Event Attributes）

 由窗口触发该事件 (适用于 <body> 标签):

 属性
 值
 描述

 onafterprintNew
 script
 在打印文档之后运行脚本

 onbeforeprintNew
 script
 在文档打印之前运行脚本

 onbeforeonloadNew
 script
 在文档加载之前运行脚本

 onblur
 script
  当窗口失去焦点时运行脚本

 onerrorNew
 script
 当错误发生时运行脚本

 onfocus
 script
 当窗口获得焦点时运行脚本

 onhaschangeNew
 script
 当文档改变时运行脚本

 onload
 script
  当文档加载时运行脚本

 onmessageNew
 script
 当触发消息时运行脚本

 onofflineNew
 script
 当文档离线时运行脚本

 ononlineNew
 script
 当文档上线时运行脚本

 onpagehideNew
 script
 当窗口隐藏时运行脚本

 onpageshowNew
 script
 当窗口可见时运行脚本

 onpopstateNew
 script
 当窗口历史记录改变时运行脚本

 onredoNew
 script
 当文档执行再执行操作（redo）时运行脚本

 onresizeNew
 script
 当调整窗口大小时运行脚本

 onstorageNew
 script
 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本

 onundoNew
 script
 当文档执行撤销时运行脚本

 onunloadNew
 script
 当用户离开文档时运行脚本



 表单事件(Form Events)

 表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

 属性
 值
 描述

 onblur
 script
  当元素失去焦点时运行脚本

 onchange
 script
 当元素改变时运行脚本

 oncontextmenuNew
 script
 当触发上下文菜单时运行脚本

 onfocus
 script
 当元素获得焦点时运行脚本

 onformchangeNew
 script
 当表单改变时运行脚本

 onforminputNew
 script
 当表单获得用户输入时运行脚本

 oninputNew
 script
 当元素获得用户输入时运行脚本

 oninvalidNew
 script
 当元素无效时运行脚本

 onreset
 script
 当表单重置时运行脚本。HTML 5 不支持。

 onselect
 script
 当选取元素时运行脚本

 onsubmit
 script
 当提交表单时运行脚本



 键盘事件（Keyboard Events）

 属性
 值
 描述

 onkeydown
 script
 当按下按键时运行脚本

 onkeypress
 script
 当按下并松开按键时运行脚本

 onkeyup
 script
 当松开按键时运行脚本



 鼠标事件（Mouse Events）

 通过鼠标触发事件, 类似用户的行为:

 属性
 值
 描述

 onclick
 script
 当单击鼠标时运行脚本

 ondblclick
 script
 当双击鼠标时运行脚本

 ondragNew
 script
 当拖动元素时运行脚本

 ondragendNew
 script
 当拖动操作结束时运行脚本

 ondragenterNew
 script
 当元素被拖动至有效的拖放目标时运行脚本

 ondragleaveNew
 script
 当元素离开有效拖放目标时运行脚本

 ondragoverNew
 script
 当元素被拖动至有效拖放目标上方时运行脚本

 ondragstartNew
 script
 当拖动操作开始时运行脚本

 ondropNew
 script
 当被拖动元素正在被拖放时运行脚本

 onmousedown
 script
 当按下鼠标按钮时运行脚本

 onmousemove
 script
 当鼠标指针移动时运行脚本

 onmouseout
 script
 当鼠标指针移出元素时运行脚本

 onmouseover
 script
 当鼠标指针移至元素之上时运行脚本

 onmouseup
 script
 当松开鼠标按钮时运行脚本

 onmousewheelNew
 script
 当转动鼠标滚轮时运行脚本

 onscrollNew
 script
 当滚动元素的滚动条时运行脚本



 多媒体事件(Media Events)

 通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):

 属性
 值
 描述

 onabort
 script
 当发生中止事件时运行脚本

 oncanplayNew
 script
 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

 oncanplaythroughNew
 script
 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

 ondurationchangeNew
 script
 当媒介长度改变时运行脚本

 onemptiedNew
 script
 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本

 onendedNew
 script
 当媒介已抵达结尾时运行脚本

 onerrorNew
 script
 当在元素加载期间发生错误时运行脚本

 onloadeddataNew
 script
 当加载媒介数据时运行脚本

 onloadedmetadataNew
 script
 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

 onloadstartNew
 script
 当浏览器开始加载媒介数据时运行脚本

 onpauseNew
 script
 当媒介数据暂停时运行脚本

 onplayNew
 script
 当媒介数据将要开始播放时运行脚本

 onplayingNew
 script
 当媒介数据已开始播放时运行脚本

 onprogressNew
 script
 当浏览器正在取媒介数据时运行脚本

 onratechangeNew
 script
 当媒介数据的播放速率改变时运行脚本

 onreadystatechangeNew
 script
 当就绪状态（ready-state）改变时运行脚本

 onseekedNew
 script
 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本

 onseekingNew
 script
 当媒介元素的定位属性为真且定位已开始时运行脚本

 onstalledNew
 script
 当取回媒介数据过程中（延迟）存在错误时运行脚本

 onsuspendNew
 script
 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

 ontimeupdateNew
 script
 当媒介改变其播放位置时运行脚本

 onvolumechangeNew
 script
 当媒介改变音量亦或当音量被设置为静音时运行脚本

 onwaitingNew
 script
 当媒介已停止播放但打算继续播放时运行脚本



 其他事件

 属性
 值
 描述

 onshowNew
 script
 当 <menu> 元素在上下文显示时触发

 ontoggleNew
 script
 当用户打开或关闭 <details> 元素时触发



 2、====================================================================HTML5 表单元素

 HTML5 新的表单元素

 HTML5 有以下新的表单元素:

 <datalist>

 <keygen>

 <output>

 注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。



 HTML5 <datalist> 元素

 <datalist> 元素规定输入域的选项列表。

 <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

 使用 <input> 元素的列表属性与 <datalist> 元素绑定.



 <input list="browsers">

 <datalist id="browsers">

   <option value="Internet Explorer">

   <option value="Firefox">

   <option value="Chrome">

   <option value="Opera">

   <option value="Safari">

 </datalist>



 HTML5 <keygen> 元素

 <keygen> 元素的作用是提供一种验证用户的可靠方法。

 <keygen>标签规定用于表单的密钥对生成器字段。

 当提交表单时，会生成两个键，一个是私钥，一个公钥。

 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。



 <form action="demo_keygen.asp" method="get">

 用户名: <input type="text" name="usr_name">

 加密: <keygen name="security">

 <input type="submit">

 </form>



 HTML5 <output> 元素

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

 <form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0

 <input type="range" id="a" value="50">100 +

 <input type="number" id="b" value="50">=

 <output name="x" for="a b"></output>

 </form>



 HTML5 新表单元素

 标签
 描述

 <datalist>
 <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

 <keygen>
 ><keygen> 标签规定用于表单的密钥对生成器字段。

 <output>
 <output> 标签定义不同类型的输出，比如脚本的输出。



 3、=====================================================================HTML5 表单属性

 HTML5 新的表单属性

 HTML5 的 <form> 和 <input>标签添加了几个新属性.

 <form>新属性：

 autocomplete

 novalidate

 <input>新属性：

 autocomplete

 autofocus

 form

 formaction

 formenctype

 formmethod

 formnovalidate

 formtarget

 height and width

 list

 min and max

 multiple

 pattern (regexp)

 placeholder

 required

 step