【整理】html5知识点3
来源：程序员人生 发布时间：2016-06-03 07:58:20 阅读次数：4087次
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 类型允许你从1个日期选择器选择1个日期。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Input 类型: datetime
datetime 类型允许你选择1个日期（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 类型允许你选择1个日期和时间 (无时区).
<!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 类型允许你选择1个月份。
<!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"，则合法的数是 ⑶,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 类型用于应当包括1定范围内数字值的输入域。
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 类型允许你选择1个时间。
<!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> 元素所属的1个或多个表单。
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> 元素的作用是提供1种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，1个是私钥，1个公钥。
私钥（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
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
