您当前的位置:
【整理】html5知识点3
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 oninput="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