H5新增——瘋狂的表單

阿新 • • 發佈：2020-07-17

瘋狂的表單

Html5 Forms概述,在Html5中:
	1.表單仍然使用<form>元素作為容器,我們可以在其中設定基本的提交特性
		form的action指向一個伺服器地址（介面）
	2.當用戶或開發人員提交頁面時,表單仍然用於向服務端傳送表單中控制元件的值
		注意表單項的name屬性必須有值，伺服器才能獲取表單
	3.所有之前的表單控制元件都保持不變
	4.仍然可以使用指令碼操作表單控制元件
	5.Htnl5之前的表單
		標籤為input
			type:text:文字框
			type:password:密碼框
			type:radio:單選按鈕
				注意以name分組，確保單選關係，也為了後臺能成功獲取
				必須有value屬性，為了後臺獲取後的識別（不寫統一為on）
				checked屬性,選中控制
			type:checkbox:複選框
				注意以name分組，確保為一組，也為了後臺能成功獲取
				必須有value屬性，為了後臺獲取後的識別（不寫統一為on）
				checked屬性,選中控制
			type:submit:提交按鈕
			type:reset:重置按鈕
			type:button:普通按鈕
		
		標籤為select:下拉框
			name屬性在select標籤上
			multiple:可選多項
			子項可以通過optgroup來進行分組
				label屬性用來定義組名
				子項為option標籤
					selected屬性,選中控制
					必須有value屬性,為了後臺獲取後的識別
		
		標籤為textarea:文字域
		
		標籤為button:按鈕
			type:submit:提交按鈕
			type:reset:重置按鈕
			type:button:普通按鈕
			
		標籤為lable:控制文字與表單的關係
			for屬性指向一個input的id
			
		標籤fieldset 標籤legend:來為表單分組	
				
	6.attr & prop
	7.Html5 新增

新增表單控制元件

	1.type:email :email地址型別
		當格式不符合email格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交才會通過
		在移動端獲焦的時候會切換到英文鍵盤
		
	2.type:tel :電話型別
		在移動端獲焦的時候會切換到數字鍵盤
	
	3.type:url :url型別
		當格式不符合url格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交才會通過
		
	4.type:search :搜尋型別
		有清空文字的按鈕
		
	5.type:range  :  特定範圍內的數值選擇器
		屬性:min、max、step
	
	6.
	  type:number          :  只能包含數字的輸入框
	  type:color  	       		:  顏色選擇器
	  type:datetime        	 :  顯示完整日期(移動端瀏覽器支援)
	  type:datetime-local  :  顯示完整日期，不含時區
	  type:time            :  顯示時間，不含時區
	  type:date            :  顯示日期
	  type:week            :  顯示周
	  type:month           :  顯示月

新增表單屬性

	placeholder  :  輸入框提示資訊
		適用於form,以及type為text,search,url,tel,email,password型別的input
		
	autofocus  :  指定表單獲取輸入焦點
	
	required  :  此項必填，不能為空
	
	pattern : 正則驗證  pattern="\d{1,5}
	
	formaction 在submit裡定義提交地址
	
	list和datalist  :  為輸入框構造一個選擇列表
						list值為datalist標籤的id

表單驗證反饋

validity物件，通過下面的valid可以檢視驗證是否通過，如果八種驗證都通過返回true，一種驗證失敗返回false
node.addEventListener("invalid",fn1,false);

valueMissing  	 :  輸入值為空時返回true
typeMismatch 	 :  控制元件值與預期型別不匹配返回true
patternMismatch  :  輸入值不滿足pattern正則返回true

tooLong  		 :  超過maxLength最大限制返回true
rangeUnderflow   :  驗證的range最小值返回true
rangeOverflow    :  驗證的range最大值返回true
stepMismatch     :  驗證range 的當前值 是否符合min、max及step的規則返回true

customError 不符合自定義驗證返回true
	setCustomValidity