HTML5 表單
HTML5 新的 Input 類型
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證：
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Input 類型 - email
email 類型用于應該包含 e-mail 位址的輸入域。
在送出表單時，會自動驗證 email 域的值。
E-mail: <input type="email" name="user_email" />
Input 類型 - url
url 類型用于應該包含 URL 位址的輸入域。
在送出表單時，會自動驗證 url 域的值。
Homepage: <input type="url" name="user_url" />
Input 類型 - number
number 類型用于應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
Points: <input type="number" name="points" min="1" max="10" />
請使用下面的屬性來規定對數字類型的限定：
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔（如果 step=“3”，則合法的數是 -3,0,3,6 等） |
| value | number | 規定預設值 |
Input 類型 - range
range 類型用于應該包含一定範圍内數字值的輸入域。
range 類型顯示為滑動條。
您還能夠設定對所接受的數字的限定：
<input type="range" name="points" min="1" max="10" />
請使用下面的屬性來規定對數字類型的限定：
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔（如果 step=“3”，則合法的數是 -3,0,3,6 等） |
| value | number | 規定預設值 |
Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
- date - 選取日、月、年
- month - 選取月、年
- week - 選取周和年
- time - 選取時間（小時和分鐘）
- datetime - 選取時間、日、月、年（UTC 時間）
- datetime-local - 選取時間、日、月、年（本地時間）
下面的例子允許您從月曆中選取一個日期：
Date: <input type="date" name="user_date" />
Input 類型 - search
search 類型用于搜尋域，比如站點搜尋或 Google 搜尋。
search 域顯示為正常的文本域。
HTML5 新的表單元素
HTML5 擁有若幹涉及表單的元素和屬性。
- datalist
- keygen
- output
datalist 元素
datalist 元素規定輸入域的選項清單。
清單是通過 datalist 内的 option 元素建立的。
如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
keygen 元素
keygen 元素的作用是提供一種驗證使用者的可靠方法。
keygen 元素是密鑰對生成器（key-pair generator）。當送出表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲于用戶端，公鑰（public key）則被發送到伺服器。公鑰可用于之後驗證使用者的用戶端證書（client certificate）。
目前，浏覽器對此元素的糟糕的支援度不足以使其成為一種有用的安全标準。
<form action="demo_form.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output 元素
output 元素用于不同類型的輸出，比如計算或腳本輸出：
<output id="result" onforminput="resCalc()"></output>
HTML5 新的表單屬性
新的 form 屬性：
- autocomplete
- novalidate
新的 input 屬性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
autocomplete 屬性
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
**注釋：**autocomplete 适用于
<form>
标簽，以及以下類型的
<input>
标簽：text, search, url, telephone, email, password, datepickers, range 以及 color。
當使用者在自動完成域中開始輸入時，浏覽器應該在該域中顯示填寫的選項：
<form action="demo_form.php" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
**注釋：**在某些浏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。
autofocus 屬性
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
**注釋：**autofocus 屬性适用于所有
<input>
标簽的類型。
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 屬性
form 屬性規定輸入域所屬的一個或多個表單。
**注釋：**form 屬性适用于所有
<input>
标簽的類型。
form 屬性必須引用所屬表單的 id：
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
**注釋：**如需引用一個以上的表單，請使用空格分隔的清單。
表單重寫屬性
表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。
表單重寫屬性有：
- formaction - 重寫表單的 action 屬性
- formenctype - 重寫表單的 enctype 屬性
- formmethod - 重寫表單的 method 屬性
- formnovalidate - 重寫表單的 novalidate 屬性
- formtarget - 重寫表單的 target 屬性
**注釋：**表單重寫屬性适用于以下類型的
<input>
标簽：submit 和 image。
<form action="demo_form.php" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.php" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
**注釋：**這些屬性對于建立不同的送出按鈕很有幫助。
height 和 width 屬性
height 和 width 屬性規定用于 image 類型的 input 标簽的圖像高度和寬度。
**注釋：**height 和 width 屬性隻适用于 image 類型的
<input>
标簽。
<input type="image" src="img_submit.gif" width="99" height="99" />
list 屬性
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項清單。
**注釋：**list 屬性适用于以下類型的
<input>
标簽：text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
min、max 和 step 屬性
min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（限制）。
max 屬性規定輸入域所允許的最大值。
min 屬性規定輸入域所允許的最小值。
step 屬性為輸入域規定合法的數字間隔（如果 step=“3”，則合法的數是 -3,0,3,6 等）。
**注釋：**min、max 和 step 屬性适用于以下類型的
<input>
标簽：date pickers、number 以及 range。
下面的例子顯示一個數字域，該域接受介于 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）：
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 屬性
multiple 屬性規定輸入域中可選擇多個值。
**注釋：**multiple 屬性适用于以下類型的
<input>
标簽：email 和 file。
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 屬性
novalidate 屬性規定在送出表單時不應該驗證 form 或 input 域。
**注釋：**novalidate 屬性适用于
<form>
以及以下類型的
<input>
标簽：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.php" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 屬性
pattern 屬性規定用于驗證 input 域的模式（pattern）。
模式（pattern） 是正規表達式。
**注釋：**pattern 屬性适用于以下類型的
<input>
标簽：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個隻能包含三個字母的文本域（不含數字及特殊字元）：
<input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
**注釋：**placeholder 屬性适用于以下類型的
<input>
标簽：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
<input type="search" name="user_search" placeholder="Search" />
required 屬性
required 屬性規定必須在送出之前填寫輸入域（不能為空）。
**注釋：**required 屬性适用于以下類型的
<input>
标簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />
HTML5 全局屬性
HTML5 中添加的屬性。
| 屬性 | 描述 |
|---|---|
| 規定元素内容是否可編輯。 |
| 規定元素的上下文菜單。上下文菜單在使用者點選元素時顯示。 |
| 用于存儲頁面或應用程式的私有定制資料。 |
| 規定元素是否可拖動。 |
| 規定在拖動被拖動資料時是否進行複制、移動或連結。 |
| 規定元素仍未或不再相關。 |
| 規定是否對元素進行拼寫和文法檢查。 |
| 規定是否應該翻譯元素内容。 |
HTML5事件
window 事件屬性
針對 window 對象觸發的事件（應用到
<body>
标簽）：
| 屬性 | 值 | 描述 |
|---|---|---|
| onafterprint | script | 文檔列印之後運作的腳本。 |
| onbeforeprint | script | 文檔列印之前運作的腳本。 |
| onbeforeunload | script | 文檔解除安裝之前運作的腳本。 |
| onerror | script | 在錯誤發生時運作的腳本。 |
| onhaschange | script | 當文檔已改變時運作的腳本。 |
| onmessage | script | 在消息被觸發時運作的腳本。 |
| onoffline | script | 當文檔離線時運作的腳本。 |
| ononline | script | 當文檔上線時運作的腳本。 |
| onpagehide | script | 當視窗隐藏時運作的腳本。 |
| onpageshow | script | 當視窗成為可見時運作的腳本。 |
| onpopstate | script | 當視窗曆史記錄改變時運作的腳本。 |
| onredo | script | 當文檔執行撤銷（redo）時運作的腳本。 |
| onstorage | script | 在 Web Storage 區域更新後運作的腳本。 |
| onundo | script | 在文檔執行 undo 時運作的腳本。 |
Form 事件
由 HTML 表單内的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：
| 屬性 | 值 | 描述 |
|---|---|---|
| oncontextmenu | script | 當上下文菜單被觸發時運作的腳本。 |
| onformchange | script | 在表單改變時運作的腳本。 |
| onforminput | script | 當表單獲得使用者輸入時運作的腳本。 |
| oninvalid | script | 當元素無效時運作的腳本。 |
Mouse 事件
由滑鼠或類似使用者動作觸發的事件：
| 屬性 | 值 | 描述 |
|---|---|---|
| ondrag | script | 元素被拖動時運作的腳本。 |
| ondragend | script | 在拖動操作末端運作的腳本。 |
| ondragenter | script | 當元素元素已被拖動到有效拖放區域時運作的腳本。 |
| ondragleave | script | 當元素離開有效拖放目标時運作的腳本。 |
| ondragover | script | 當元素在有效拖放目标上正在被拖動時運作的腳本。 |
| ondragstart | script | 在拖動操作開端運作的腳本。 |
| ondrop | script | 當被拖元素正在被拖放時運作的腳本。 |
| onmousewheel | script | 當滑鼠滾輪正在被滾動時運作的腳本。 |
| onscroll | script | 當元素滾動條被滾動時運作的腳本。 |
Media 事件
由媒介（比如視訊、圖像和音頻）觸發的事件（适用于所有 HTML 元素，但常見于媒介元素中，比如
<audio>
、
<embed>
、
<img>
、
<object>
以及
<video>
）:
| 屬性 | 值 | 描述 |
|---|---|---|
| oncanplay | script | 當檔案就緒可以開始播放時運作的腳本（緩沖已足夠開始時）。 |
| oncanplaythrough | script | 當媒介能夠無需因緩沖而停止即可播放至結尾時運作的腳本。 |
| ondurationchange | script | 當媒介長度改變時運作的腳本。 |
| onemptied | script | 當發生故障并且檔案突然不可用時運作的腳本（比如連接配接意外斷開時）。 |
| onended | script | 當媒介已到達結尾時運作的腳本（可發送類似“感謝觀看”之類的消息）。 |
| onerror | script | 當在檔案加載期間發生錯誤時運作的腳本。 |
| onloadeddata | script | 當媒介資料已加載時運作的腳本。 |
| onloadedmetadata | script | 當中繼資料（比如分辨率和時長）被加載時運作的腳本。 |
| onloadstart | script | 在檔案開始加載且未實際加載任何資料前運作的腳本。 |
| onpause | script | 當媒介被使用者或程式暫停時運作的腳本。 |
| onplay | script | 當媒介已就緒可以開始播放時運作的腳本。 |
| onplaying | script | 當媒介已開始播放時運作的腳本。 |
| onprogress | script | 當浏覽器正在擷取媒介資料時運作的腳本。 |
| onratechange | script | 每當回放速率改變時運作的腳本（比如當使用者切換到慢動作或快進模式）。 |
| onreadystatechange | script | 每當就緒狀态改變時運作的腳本（就緒狀态監測媒介資料的狀态）。 |
| onseeked | script | 當 seeking 屬性設定為 false（訓示定位已結束）時運作的腳本。 |
| onseeking | script | 當 seeking 屬性設定為 true（訓示定位是活動的）時運作的腳本。 |
| onstalled | script | 在浏覽器不論何種原因未能取回媒介資料時運作的腳本。 |
| onsuspend | script | 在媒介資料完全加載之前不論何種原因終止取回媒介資料時運作的腳本。 |
| ontimeupdate | script | 當播放位置改變時（比如當使用者快進到媒介中一個不同的位置時）運作的腳本。 |
| onvolumechange | script | 每當音量改變時（包括将音量設定為靜音）時運作的腳本。 |
| onwaiting | script | 當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多資料）運作腳本 |
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)