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