HTML5(六)表單合集

2022-09-02 14:57:11 字數 2298 閱讀 1337

html5 有以下新的表單元素:

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

屬性規定 form 或 input 域應該擁有自動完成功能。當使用者在自動完成域中開始輸入時,瀏覽器應該在該域中顯示填寫的選項:

使用 元素的列表屬性與 元素繫結.

例項

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

標籤規定用於表單的金鑰對生成器字段。

當提交表單時,會生成兩個鍵,乙個是私鑰,乙個公鑰。

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

例項

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

html5 的 form 和 input 標籤新增了幾個新屬性.

屬性描述

autocomplete

規定 form 域應該擁有自動完成功能。

novalidate

規定在提交表單時不應該驗證 form域。

屬性描述

autocomplete

規定 form 域應該擁有自動完成功能。

autofocus

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

form

規定輸入域所屬的乙個或多個表單。

formaction

用於描述表單提交的url位址,覆蓋

formenctype

描述了表單提交到伺服器的資料編碼 (只對form表單中 method="post" 表單)

formmethod

定義了表單提交的方式,覆蓋了 元素的 method 屬性。

formnovalidate

描述了 input 元素在表單提交時無需被驗證,覆蓋 元素的novalidate屬性。

formtarget

指定乙個名稱或乙個關鍵字來指明表單提交資料接收後的展示。

list

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

pattern

描述了乙個正規表示式用於驗證 input 元素的值。

placeholder

提供一種提示(hint),描述輸入域所期待的值。

required

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

step

為輸入域規定合法的數字間隔。

html5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。

型別描述

email

用於應該包含 e-mail 位址的輸入域。

url用於應該包含 url 位址的輸入域。

number

用於應該包含數值的輸入域。

range

用於應該包含一定範圍內數字值的輸入域。顯示為滑動條。

date pickers

可供選取日期和時間的新輸入型別:date, month, week, time, datetime, datetime-local

search

用於搜尋域,比如站點搜尋或 google 搜尋。

color

用於建立乙個允許使用者使用顏色選擇器。

email 型別用於應該包含 e-mail 位址的輸入域。

在提交表單時,會自動驗證 email 域的值。

例項

e-mail:

url 型別用於應該包含 url 位址的輸入域。

在提交表單時,會自動驗證 url 域的值。

例項

homepage:

number 型別用於應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定:

例項

points:

range 型別用於應該包含一定範圍內數字值的輸入域。

range 型別顯示為滑動條。

您還能夠設定對所接受的數字的限定:

例項

html5 擁有多個可供選取日期和時間的新輸入型別:

下面的例子允許您從日曆中選取乙個日期:

例項

date:

search 型別用於搜尋域,比如站點搜尋或 google 搜尋。

search 域顯示為常規的文字域。

HTML5的表單功能合集

1 郵箱的自動驗證 只需要type email 2 日期的驗證 年月日 type date 3 時間的驗證 格式 00 00 type time 4 數字的驗證 可以向上加 向下減 type number 5 月份 年 月 type month 6 周 年 周 type week 7 range 範...

HTML5智慧型表單

1 便於排版的form表單 html5為了方便排版,可以使form的表單標籤脫離form的巢狀。方法 form指定id,所有的標籤標籤都新增form id屬性。例如 2 form新型別 type email 郵箱 自帶格式校驗 type url 必須帶協議 自帶格式校驗 type date 日期選擇...

HTML5表單屬性

1.6.input的formenctype屬性 用於表單提交到伺服器的資料編碼 只對form表單中method post 表單 該屬性會覆蓋form元素的enctype屬性。7 input formmethod屬性,定義了表單的提交方式,覆蓋了form元素的method屬性 8 input form...