Html5 Forms概述,在Html5中:node
1.表單仍然使用<form>元素做爲容器,咱們能夠在其中設置基本的提交特性瀏覽器
form的action指向一個服務器地址（接口）服務器
2.當用戶或開發人員提交頁面時,表單仍然用於向服務端發送表單中控件的值ui
注意表單項的name屬性必須有值，服務器才能獲取表單url
3.全部以前的表單控件都保持不變orm
4.仍然能夠使用腳本操做表單控件對象
5.Htnl5以前的表單接口
標籤爲inputip
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
###關閉驗證
formnovalidate屬性