面向HTML5 表單2 0

2021-08-09 02:14:54 字數 2782 閱讀 5148

h4已經學過的input type:

text、password、radio、checkbox、button、submit、reset、image、hidden、file
h5中新增的input type:

(1)email:

作用:郵件輸入框,在表單提交時會驗證郵箱格式(*@*),瀏覽器預設提供了錯誤訊息,內容可以定製但樣式不能定製

語法:''

(2)url:

作用:**輸入框,在表單提交時會驗證**格式(\w:),瀏覽器預設提供了錯誤訊息,內容可以定製但樣式不能定製

語法:''

(3)number:

作用:數字輸入框,限定使用者的輸入只能是整數,還可以指定數字的範圍和步長

語法:''

(4)tel:

作用:**號碼輸入框,僅在手機中顯示數字輸入鍵盤,pc瀏覽器中無特殊效果

語法:''

(5)search:

作用:搜尋輸入框,僅在手機中顯示輸入鍵盤右下角顯示乙個「搜尋」按鈕,pc瀏覽器中無特殊效果

語法:''

(6)range:

作用:範圍選擇滑塊,可以在指定的範圍內以指定的步長進行數字選擇

語法:''

(7)color:

作用:顏色選擇器,彈出當前作業系統提供的顏色選擇視窗進行顏色選擇

語法:''

(8)date:

作用:日期選擇器,彈出乙個瀏覽器自定義的日期選擇視窗——ff不支援

語法:''

(9)month:

作用:月份選擇器,彈出乙個瀏覽器自定義的月份選擇視窗——ff不支援

語法:''

(10)week:

作用:星期/周選擇器,彈出乙個瀏覽器自定義的星期選擇視窗——ff不支援

語法:''

2、新的表單元素

h4已經學過的表單元素:

input、select/option、textarea、button
h5新增了四個表單元素:

(1)datalist:資料列表,本身屬於不可見元素,用於為某個文字輸入框提供輸入建議列表
id="list2">

***option>

datalist>

type="text"

list="list2">

注意:option不能加上value值

(2)progress:進度條,顯示為乙個不斷前進的進度條

'' (3)meter:度量衡/刻度尺,以「紅/黃/綠」三個顏色表示當前值處於哪個範圍——「不可接受/可以接受/優秀」之一。

屬性:min:最小值

max:最大值

low:可接受的下限

high:可接受的上限

optimum:最優值

value:當前實際值

low < optimum < high : 黃-綠-黃

optimum < low : 綠-黃-紅

high < optimum : 紅-黃-綠

(4)output:輸出值,本身只是乙個語義標籤,功能/樣式與span一樣的。

'***'

注意:上述四個新標籤都是用於提示資訊的,不能用於提交客戶端的資料,故沒有name屬性!

3、表單元素的新屬性

h4已經學過的表單元素的屬性:

type、name、value、readonly、disabled、checked、selected
h5新增的表單元素屬性:

(1)autocomplete:自動完成,是否記錄之前曾經提交過的使用者輸入

''(2)autofocus:自動獲得輸入焦點

''(3)placeholder:佔位字元,在輸入框中沒有任何輸入時顯示的提示性文字

''(4)multiple:是否允許存在多個值,是個boolean型屬性,若宣告了此屬性,email和file輸入框中就執行輸入以逗號分隔的多個值

''(5)form:為input指定form屬性,指向某個form元素的id,就可以把該輸入框放到form元素外部

''*****上述五個通用屬性目前的瀏覽器相容性非常好*****==

(6)required:必填項

''

(7)minlength:限定最少的字元個數,不是h5標準屬性,僅chrome支援,ws中也沒有**提示

''(8)maxlength:限定最長的字元個數

''(9)min:限定最小的數值

''(10)max:限定最大的數值

''(11)pattern:輸入必須符合指定的正規表示式

''

如何自定義表單元素彈出的錯誤提示(js相關)?

html5為每個表單元素對應的js物件提供了乙個屬性:

input.validity
上述的每個錯誤,瀏覽器都有預定義的錯誤訊息;若使用者為輸入框自定義乙個錯誤訊息,瀏覽器只會自定義錯誤訊息,而不顯示預定義錯誤訊息。

指定自定義錯誤訊息:

input.setcustomvalidity('自定義錯誤訊息');
取消自定義錯誤訊息:

input.setcustomvalidity('');

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...

HTML5 表單提交

html5的確是大勢所趨 現在就來說下html 5 當你看到你的頁面標頭是這樣 證明是h5咯 以往的頁面開頭總是很長 現在簡單多了 charset utf 8 這個是編碼格式咯 或者是別的這時候就說說 吧 action 提交位址 method get post onsubmit return che...