【整理】html5知識(shí)點(diǎn)3
來(lái)源：程序員人生 發(fā)布時(shí)間：2016-06-03 07:58:20 閱讀次數(shù)：4363次
1、====================================================================HTML5 新的 Input 類型
HTML5 具有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。
本章全面介紹這些新的輸入類型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注意:其實(shí)不是所有的主流閱讀器都支持新的input類型，不過您已可以在所有主流的閱讀器中使用它們了。即便不被支持，依然可以顯示為常規(guī)的文本域。
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個(gè)日期選擇器選擇1個(gè)日期。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Input 類型: datetime
datetime 類型允許你選擇1個(gè)日期（UTC 時(shí)間）。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
生日 (日期和時(shí)間): <input type="datetime" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
Input 類型: datetime-local
datetime-local 類型允許你選擇1個(gè)日期和時(shí)間 (無(wú)時(shí)區(qū)).
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
生日 (日期和時(shí)間): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
Input 類型: email
email 類型用于應(yīng)當(dāng)包括 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個(gè)月份。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
Input 類型: number
number 類型用于應(yīng)當(dāng)包括數(shù)值的輸入域。
您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
數(shù)量 ( 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>
使用下面的屬性來(lái)規(guī)定對(duì)數(shù)字類型的限定：
max- 規(guī)定允許的最大值
min - 規(guī)定允許的最小值
step - 規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 ⑶,0,3,6 等）
value - 規(guī)定默許值
<!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 類型用于應(yīng)當(dāng)包括1定范圍內(nèi)數(shù)字值的輸入域。
range 類型顯示為滑動(dòng)條。
<!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 類型用于搜索域，比如站點(diǎn)搜索或 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">
電話號(hào)碼: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>
</body>
</html>
Input 類型: time
time 類型允許你選擇1個(gè)時(shí)間。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
選擇時(shí)間: <input type="time" name="usr_time">
<input type="submit">
</form>
</body>
</html>
Input 類型: url
url 類型用于應(yīng)當(dāng)包括 URL 地址的輸入域。
在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
添加你的主頁(yè): <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新標(biāo)簽。
屬性
值
描寫
accept
audio/* video/* image/* MIME_type
規(guī)定通過文件上傳來(lái)提交的文件的類型。 (只針對(duì)type="file")
align
left right top middle bottom
HTML5已廢棄，不同意使用。規(guī)定圖象輸入的對(duì)齊方式。 (只針對(duì)type="image")
alt
text
定義圖象輸入的替換文本。 (只針對(duì)type="image")
autocompleteNew
on off
autocomplete 屬性規(guī)定 <input> 元素輸入字段是不是應(yīng)當(dāng)啟用自動(dòng)完成功能。
autofocusNew
autofocus
屬性規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)當(dāng)自動(dòng)取得焦點(diǎn)。
checked
checked
checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)當(dāng)被預(yù)先選定的 <input> 元素。 (只針對(duì) type="checkbox" 或 type="radio")
disabled
disabled
disabled 屬性規(guī)定應(yīng)當(dāng)禁用的 <input> 元素。
formNew
form_id
form 屬性規(guī)定 <input> 元素所屬的1個(gè)或多個(gè)表單。
formactionNew
URL
屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。(只針對(duì) type="submit" 和 type="image")
formenctypeNew
application/x-www-form-urlencoded multipart/form-data text/plain
屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到
服務(wù)器時(shí)如何編碼(只合適 type="submit" 和 type="image")。
formmethodNew
get post
定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只合適 type="submit" 和 type="image")
formnovalidateNew
formnovalidate
formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。
formtargetNew
_blank _self _parent _top framename
規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只合適 type="submit" 和 type="image")
heightNew
pixels
規(guī)定 <input>元素的高度。(只針對(duì)type="image")
listNew
datalist_id
屬性援用 <datalist> 元素，其中包括 <input> 元素的預(yù)定義選項(xiàng)。
maxNew
number date
屬性規(guī)定 <input> 元素的最大值。
maxlength
number
屬性規(guī)定 <input> 元素中允許的最大字符數(shù)。
minNew
number date
屬性規(guī)定 <input>元素的最小值。
multipleNew
multiple
屬性規(guī)定允許用戶輸入到 <input> 元素的多個(gè)值。
name
text
name 屬性規(guī)定 <input> 元素的名稱。
patternNew
regexp
pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的
正則表達(dá)式。
placeholderNew
text
placeholder 屬性規(guī)定可描寫輸入 <input> 字段預(yù)期值的簡(jiǎn)短的提示信息 。
readonly
readonly
readonly 屬性規(guī)定輸入字段是只讀的。
requiredNew
required
屬性規(guī)定必須在提交表單之前填寫輸入字段。
size
number
size 屬性規(guī)定以字符數(shù)計(jì)的 <input> 元素的可見寬度。
src
URL
src 屬性規(guī)定顯示為提交按鈕的圖象的 URL。 (只針對(duì) type="image")
stepNew
number
step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。
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 屬性規(guī)定要顯示的 <input> 元素的類型。
value
text
指定 <input> 元素 value 的值。
widthNew
pixels
width 屬性規(guī)定 <input> 元素的寬度。 (只針對(duì)type="image")
窗口事件屬性（Window Event Attributes）
由窗口觸發(fā)該事件 (適用于 <body> 標(biāo)簽):
屬性
值
描寫
onafterprintNew
script
在打印文檔以后運(yùn)行腳本
onbeforeprintNew
script
在文檔打印之前運(yùn)行腳本
onbeforeonloadNew
script
在文檔加載之前運(yùn)行腳本
onblur
script
當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onerrorNew
script
當(dāng)毛病產(chǎn)生時(shí)運(yùn)行腳本
onfocus
script
當(dāng)窗口取得焦點(diǎn)時(shí)運(yùn)行腳本
onhaschangeNew
script
當(dāng)文檔改變時(shí)運(yùn)行腳本
onload
script
當(dāng)文檔加載時(shí)運(yùn)行腳本
onmessageNew
script
當(dāng)觸發(fā)消息時(shí)運(yùn)行腳本
onofflineNew
script
當(dāng)文檔離線時(shí)運(yùn)行腳本
ononlineNew
script
當(dāng)文檔上線時(shí)運(yùn)行腳本
onpagehideNew
script
當(dāng)窗口隱藏時(shí)運(yùn)行腳本
onpageshowNew
script
當(dāng)窗口可見時(shí)運(yùn)行腳本
onpopstateNew
script
當(dāng)窗口歷史記錄改變時(shí)運(yùn)行腳本
onredoNew
script
當(dāng)文檔履行再履行操作（redo）時(shí)運(yùn)行腳本
onresizeNew
script
當(dāng)調(diào)劑窗口大小時(shí)運(yùn)行腳本
onstorageNew
script
當(dāng) Web Storage 區(qū)域更新時(shí)（存儲(chǔ)空間中的數(shù)據(jù)產(chǎn)生變化時(shí)）運(yùn)行腳本
onundoNew
script
當(dāng)文檔履行撤消時(shí)運(yùn)行腳本
onunloadNew
script
當(dāng)用戶離開文檔時(shí)運(yùn)行腳本
表單事件(Form Events)
表單事件在HTML表單中觸發(fā) (適用于所有 HTML 元素, 但該HTML元素需在form表單內(nèi)):
屬性
值
描寫
onblur
script
當(dāng)元素失去焦點(diǎn)時(shí)運(yùn)行腳本
onchange
script
當(dāng)元素改變時(shí)運(yùn)行腳本
oncontextmenuNew
script
當(dāng)觸發(fā)上下文菜單時(shí)運(yùn)行腳本
onfocus
script
當(dāng)元素取得焦點(diǎn)時(shí)運(yùn)行腳本
onformchangeNew
script
當(dāng)表單改變時(shí)運(yùn)行腳本
onforminputNew
script
當(dāng)表單取得用戶輸入時(shí)運(yùn)行腳本
oninputNew
script
當(dāng)元素取得用戶輸入時(shí)運(yùn)行腳本
oninvalidNew
script
當(dāng)元素?zé)o效時(shí)運(yùn)行腳本
onreset
script
當(dāng)表單重置時(shí)運(yùn)行腳本。HTML 5 不支持。
onselect
script
當(dāng)選取元素時(shí)運(yùn)行腳本
onsubmit
script
當(dāng)提交表單時(shí)運(yùn)行腳本
鍵盤事件（Keyboard Events）
屬性
值
描寫
onkeydown
script
當(dāng)按下按鍵時(shí)運(yùn)行腳本
onkeypress
script
當(dāng)按下并松開按鍵時(shí)運(yùn)行腳本
onkeyup
script
當(dāng)松開按鍵時(shí)運(yùn)行腳本
鼠標(biāo)事件（Mouse Events）
通過鼠標(biāo)觸發(fā)事件, 類似用戶的行動(dòng):
屬性
值
描寫
onclick
script
當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本
ondblclick
script
當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本
ondragNew
script
當(dāng)拖動(dòng)元素時(shí)運(yùn)行腳本
ondragendNew
script
當(dāng)拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本
ondragenterNew
script
當(dāng)元素被拖動(dòng)至有效的拖放目標(biāo)時(shí)運(yùn)行腳本
ondragleaveNew
script
當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本
ondragoverNew
script
當(dāng)元素被拖動(dòng)至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本
ondragstartNew
script
當(dāng)拖動(dòng)操作開始時(shí)運(yùn)行腳本
ondropNew
script
當(dāng)被拖動(dòng)元素正在被拖放時(shí)運(yùn)行腳本
onmousedown
script
當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onmousemove
script
當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本
onmouseout
script
當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本
onmouseover
script
當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本
onmouseup
script
當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onmousewheelNew
script
當(dāng)轉(zhuǎn)動(dòng)鼠標(biāo)滾輪時(shí)運(yùn)行腳本
onscrollNew
script
當(dāng)轉(zhuǎn)動(dòng)元素的轉(zhuǎn)動(dòng)條時(shí)運(yùn)行腳本
多媒體事件(Media Events)
通過視頻（videos），圖象（images）或音頻（audio） 觸發(fā)該事件，多利用于HTML媒體元素比如 <audio>, <embed>, <img>, <object>, 和<video>):
屬性
值
描寫
onabort
script
當(dāng)產(chǎn)生中斷事件時(shí)運(yùn)行腳本
oncanplayNew
script
當(dāng)媒介能夠開始播放但可能因緩沖而需要停止時(shí)運(yùn)行腳本
oncanplaythroughNew
script
當(dāng)媒介能夠無(wú)需因緩沖而停止便可播放至結(jié)尾時(shí)運(yùn)行腳本
ondurationchangeNew
script
當(dāng)媒介長(zhǎng)度改變時(shí)運(yùn)行腳本
onemptiedNew
script
當(dāng)媒介資源元素突然為空時(shí)（網(wǎng)絡(luò)毛病、加載毛病等）運(yùn)行腳本
onendedNew
script
當(dāng)媒介已抵達(dá)結(jié)尾時(shí)運(yùn)行腳本
onerrorNew
script
當(dāng)在元素加載期間產(chǎn)生毛病時(shí)運(yùn)行腳本
onloadeddataNew
script
當(dāng)加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onloadedmetadataNew
script
當(dāng)媒介元素的延續(xù)時(shí)間和其他媒介數(shù)據(jù)已加載時(shí)運(yùn)行腳本
onloadstartNew
script
當(dāng)閱讀器開始加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onpauseNew
script
當(dāng)媒介數(shù)據(jù)暫停時(shí)運(yùn)行腳本
onplayNew
script
當(dāng)媒介數(shù)據(jù)將要開始播放時(shí)運(yùn)行腳本
onplayingNew
script
當(dāng)媒介數(shù)據(jù)已開始播放時(shí)運(yùn)行腳本
onprogressNew
script
當(dāng)閱讀器正在取媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onratechangeNew
script
當(dāng)媒介數(shù)據(jù)的播放速率改變時(shí)運(yùn)行腳本
onreadystatechangeNew
script
當(dāng)就緒狀態(tài)（ready-state）改變時(shí)運(yùn)行腳本
onseekedNew
script
當(dāng)媒介元素的定位屬性 [1] 不再為真且定位已結(jié)束時(shí)運(yùn)行腳本
onseekingNew
script
當(dāng)媒介元素的定位屬性為真且定位已開始時(shí)運(yùn)行腳本
onstalledNew
script
當(dāng)取回媒介數(shù)據(jù)進(jìn)程中（延遲）存在毛病時(shí)運(yùn)行腳本
onsuspendNew
script
當(dāng)閱讀器已在取媒介數(shù)據(jù)但在取回全部媒介文件之前停止時(shí)運(yùn)行腳本
ontimeupdateNew
script
當(dāng)媒介改變其播放位置時(shí)運(yùn)行腳本
onvolumechangeNew
script
當(dāng)媒介改變音量亦或當(dāng)音量被設(shè)置為靜音時(shí)運(yùn)行腳本
onwaitingNew
script
當(dāng)媒介已停止播放但打算繼續(xù)播放時(shí)運(yùn)行腳本
其他事件
屬性
值
描寫
onshowNew
script
當(dāng) <menu> 元素在上下文顯示時(shí)觸發(fā)
ontoggleNew
script
當(dāng)用戶打開或關(guān)閉 <details> 元素時(shí)觸發(fā)
2、====================================================================HTML5 表單元素
HTML5 新的表單元素
HTML5 有以下新的表單元素:
<datalist>
<keygen>
<output>
注意:不是所有的閱讀器都支持HTML5 新的表單元素，但是你可以在使用它們，即便閱讀器不支持表單屬性，依然可以顯示為常規(guī)的表單元素。
HTML5 <datalist> 元素
<datalist> 元素規(guī)定輸入域的選項(xiàng)列表。
<datalist> 屬性規(guī)定 form 或 input 域應(yīng)當(dāng)具有自動(dòng)完成功能。當(dāng)用戶在自動(dòng)完成域中開始輸入時(shí)，閱讀器應(yīng)當(dāng)在該域中顯示填寫的選項(xiàng)：
使用 <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種驗(yàn)證用戶的可靠方法。
<keygen>標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。
當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，1個(gè)是私鑰，1個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到
服務(wù)器。公鑰可用于以后驗(yàn)證用戶的客戶端證書（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> 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：
<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 新表單元素
標(biāo)簽
描寫
<datalist>
<input>標(biāo)簽定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來(lái)定義 input 可能的值。
<keygen>
><keygen> 標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。
<output>
<output> 標(biāo)簽定義不同類型的輸出，比如腳本的輸出。
3、=====================================================================HTML5 表單屬性
HTML5 新的表單屬性
HTML5 的 <form> 和 <input>標(biāo)簽添加了幾個(gè)新屬性.
<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
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
