學習HTML5表單筆記

2021-10-07 21:59:29 字數 2756 閱讀 3921

1.html5表單元素

datalist元素:用於為文字框提供乙個可選擇的列表,,使用它可為表單小部件提供建議的、自動完成的值,並使用一些option子元素來指定要顯示的值。然後使用list屬性將資料列表繫結到乙個文字域(通常指乙個《input》元素)。

一旦資料列表與表單小部件相關聯,它的選項用於自動完成使用者輸入的文字。通常,這是作為乙個下拉框向使用者展示,在輸入框中輸入可能匹配的內容。(option也可以寫成下面這樣)

2.html5表單新增屬性

①autocomplete屬性:

規定表單是否應該啟用自動完成功能:自動完成允許瀏覽器**對字段的輸入,當使用者在字段開始輸入時,瀏覽器基於之前輸入過的值,顯示出在字段中填寫的選項。當autocomplete屬性值為on時表啟用自動完成功能,off時表關閉。該屬性試用於《form》以及下面的《input》型別:text、search、telephone、email、password、datepickers、rang、color。

如:姓名的文字框autocomplete屬性值為on,會顯示之前輸入過的名字,而郵件的autocomplete屬性值為off,則不會出現之前輸入過的郵件。

②autofocus屬性:規定在頁面載入時,域自動地獲得焦點(閃爍的游標)。適用於所有input標籤的型別:

③form屬性:

規定輸入域所屬的乙個或多個表單。適用於所有input標籤的型別。form屬性必須引用所屬表單的id。

④multiple屬性:規定輸入域中可選多個值,適用於email和file型別的input標籤

⑤novalidate屬性:

規定在提交表單時不應該驗證form或input域。適用於 form ,以及 input 的下面型別:text、search、url、telephone、email、password、datepickers、range、color。

⑥pattern屬性

規定用於驗證input域的模式(pattern)。模式(pattern)是正規表示式。該屬性適用於 input 標籤的以下型別:text、search、url、telephone、email、password。

⑦placeholder屬性:

提供一種提示(hint),描述輸入域所期待的值。適用於 input 標籤的以下型別:text、search、url、telephone、email、password。提示(hint)會在輸入域為空時顯示出現,會在輸入域獲得焦點時消失。

⑧require屬性:

規定必須再提交之前填寫輸入域(不能為空),適用於 input 標籤的以下型別:text、search、url、telephone、email、password、datepickers、number、checkbox、radio、file。

3.html5輸入型別

①input型別——email

用於應該包含email位址的輸入域。在提交表單時,會自動驗證email域的值。

(要輸入正確的郵件名,如[email protected]

②input型別——url:用於應該包含url位址的輸入域。在提交表單時,會自動驗證url域的值。

(要輸入正確的url,也就是**,如

③input型別——number

用於應該包含數值的輸入域。屬性max設定允許輸入的最大值,min設定允許輸入的最小值,step設定合法數字間隔(如,step值為2,則合法數字為-2,0,2,4等)

④input型別——range

用於應該包含一定範圍內數字值的輸入域。range型別顯示為滑動條。同樣的range也有max、min、value、step屬性與上面所講的number中的一致。

⑤input型別——date pickers(日期選擇器)

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

●date:選取日、月、年。

●month: 選取月、年。

●week: 選取周、年。

●time: 選取時間(小時和分鐘)

●datetime: 選取時間、日、月、年(utc時間)注:此型別已被棄用,目前大多數瀏覽 器都不在支援。

●datetime-local:選取時間、日、月、年(本地時間)。

⑥input型別——color:用於選擇顏色

HTML表單筆記

html表單的筆記 1.表單基本的標籤 屬性 文字框和密碼 maxlength 最多輸入的字元個數 size 尺寸,設定長度 單選按鈕複選按鈕預設選中 checked checked 下拉列表預設選中 selected selected placeholder 在文字框中顯示文字,當游標置於文字框時...

HTML5 表單學習

表單仍然使用 required表示必須要填 value命名 type date 設定min,max特性,將輸入框的值限定在了最大和最小之間 type time type month type datetime type datetime local type number value為預設值,ste...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...