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