Html5學習高階四 表單元素和表單屬性

2022-02-28 13:39:05 字數 3122 閱讀 8284

html5 擁有若干涉及表單的元素和屬性。

本章介紹以下新的表單元素:

datalist 元素規定輸入域的選項列表。

列表是通過 datalist 內的 option 元素建立的。

如需把 datalist 繫結到輸入域,請用輸入域的 list 屬性引用 datalist 的 id:

webpage: list="url_list" name="link" />

keygen 元素的作用是提供一種驗證使用者的可靠方法。

keygen 元素是金鑰對生成器(key-pair generator)。當提交表單時,會生成兩個鍵,乙個是私鑰,乙個公鑰。

私鑰(private key)儲存於客戶端,公鑰(public key)則被傳送到伺服器。公鑰可用於之後驗證使用者的客戶端證書(client certificate)。

目前,瀏覽器對此元素的糟糕的支援度不足以使其成為一種有用的安全標準。

output 元素用於不同型別的輸出,比如計算或指令碼輸出:

input type

iefirefox

opera

chrome

safari

autocomplete

8.03.5

9.53.0

4.0autofocus

nono

10.0

3.04.0

form

nono

9.5no

noform overrides

nono

10.5

nono

height and width

8.03.5

9.53.0

4.0list

nono

9.5no

nomin, max and step

nono

9.53.0

nomultiple

no3.5

no3.0

4.0novalidate

nono

nono

nopattern

nono

9.53.0

noplaceholder

nono

no3.0

3.0required

nono

9.53.0

noautocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

注釋:autocomplete 適用於注釋:在某些瀏覽器中,您可能需要啟用自動完成功能,以使該屬性生效。

autofocus 屬性規定在頁面載入時,域自動地獲得焦點。

注釋:autofocus 屬性適用於所有 標籤的型別。

user name:
form 屬性規定輸入域所屬的乙個或多個表單。

注釋:form 屬性適用於所有 標籤的型別。

form 屬性必須引用所屬表單的 id:

last name: 

注釋:如需引用乙個以上的表單,請使用空格分隔的列表。

表單重寫屬性(form override attributes)允許您重寫 form 元素的某些屬性設定。

表單重寫屬性有:

注釋:表單重寫屬性適用於以下型別的 標籤:submit 和 image。

注釋:這些屬性對於建立不同的提交按鈕很有幫助。

height 和 width 屬性規定用於 image 型別的 input 標籤的影象高度和寬度。

注釋:height 和 width 屬性只適用於 image 型別的 標籤。

list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。

注釋:list 屬性適用於以下型別的 標籤:text, search, url, telephone, email, date pickers, number, range 以及 color。

webpage: 

id="url_list">

min、max 和 step 屬性用於為包含數字或日期的 input 型別規定限定(約束)。

max 屬性規定輸入域所允許的最大值。

min 屬性規定輸入域所允許的最小值。

step 屬性為輸入域規定合法的數字間隔(如果 step="3",則合法的數是 -3,0,3,6 等)。

注釋:min、max 和 step 屬性適用於以下型別的 標籤:date pickers、number 以及 range。

下面的例子顯示乙個數字域,該域接受介於 0 到 10 之間的值,且步進為 3(即合法的值為 0、3、6 和 9):

points:
multiple 屬性規定輸入域中可選擇多個值。

注釋:multiple 屬性適用於以下型別的 標籤:email 和 file。

select images:
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

注釋:novalidate 屬性適用於pattern 屬性規定用於驗證 input 域的模式(pattern)。

模式(pattern) 是正規表示式。

注釋:pattern 屬性適用於以下型別的 標籤:text, search, url, telephone, email 以及 password。

下面的例子顯示了乙個只能包含三個字母的文字域(不含數字及特殊字元):

country code:
placeholder 屬性提供一種提示(hint),描述輸入域所期待的值。

注釋:placeholder 屬性適用於以下型別的 標籤:text, search, url, telephone, email 以及 password。

提示(hint)會在輸入域為空時顯示出現,會在輸入域獲得焦點時消失:

required 屬性規定必須在提交之前填寫輸入域(不能為空)。

注釋:required 屬性適用於以下型別的 標籤:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

name:

HTML5表單元素

新的表單元素 1.datalist元素 規定輸入域的選項列表,datalist屬性規定form或input域應該擁有的自動完成的功能。當使用者在自動完成域中開始輸出時,瀏覽器應該在域中顯示填寫的選項。2.keygen提供一種驗證使用者的可靠方法。用於表單的金鑰對生成器字段。當提交表單時,會生成兩個鍵...

HTML 5 表單元素

html5 的新的表單元素 html5 擁有若干涉及表單的元素和屬性。本章介紹以下新的表單元素 datalist 元素 datalist 元素規定輸入域的選項列表。列表是通過 datalist 內的 option 元素建立的。如需把 datalist 繫結到輸入域,請用輸入域的 list 屬性引用 ...

HTML5表單元素

表單驗證觸發oninvalid事件 通過setcustomvalidity方法設定修改內容 action method get type text name uname pattern d required class uname type submit name form var input do...