1.表單元素
編寫表單的三個步驟：構(gòu)建表單珍昨，服務(wù)器端處理，配置表單
以披薩預(yù)定表單為例
構(gòu)建完表單兔毙，需要服務(wù)器端提供相應(yīng)的接口處理用戶提交的數(shù)據(jù)兄春。
服務(wù)器端處理的基本信息：
https://pizza.example.com/order ? ?服務(wù)器端提供的接口地址
application/x-www-form.urlencoded ? ? ? 服務(wù)器端接收的數(shù)據(jù)需要我們用 URL 方式編碼
custname,custtel,custemail,size,topping,delivery ? ? ? 接口接受的參數(shù)信息
form 元素中的 method 定制請求方式赶舆，action 指定服務(wù)器端用來接收數(shù)據(jù)的接口地址，enctype 指定提交數(shù)據(jù)的名稱
區(qū)分每個按鈕芜茵，用 value 做屬性標識九串，可以給多個控件指定相同名稱，服務(wù)器端根據(jù)是否提交了對應(yīng)的 value 值判斷用戶是否選擇了相應(yīng)的選擇框猪钮。
驗證表單：用戶必須提供的信息，在元素上增加 required 屬性谆奥。若提交表單時未提供相應(yīng)信息拂玻，出現(xiàn)提示信息告訴用戶。
form 元素
form 的屬性標識 form 的不同特性魄懂。
1.name
通過 document.form API使用闯第，用 name 拿到 form 的節(jié)點元素
2.autocomplete
有 on 和 off 兩個值，為 on 時在填寫過程中會出現(xiàn)輸入過的值作為候選填帽，off 則不出現(xiàn)咙好。
有時設(shè)為 off 還會出現(xiàn)提示信息，與瀏覽器設(shè)置有關(guān)（密碼和表單——自動填充設(shè)置）勾效，可以在不需要默認填寫的 input 框中設(shè)置 autocomplete = “new-password”
3.elements?
elements 集合是動態(tài)節(jié)點集合
(1)該表單子孫表單控件（除圖片按鈕）
表單控件：button，fieldset杨伙，input，keygen抖苦，object膛腐，output，select，textarea
圖片按鈕：<input type = "image">
(2)歸屬于該表單的表單控件
<p><label><input name='d' form='f'></label></p>
有 input 元素的 form 屬性指定這個元素歸屬于 id 為 f 的表單贸伐，也在 elements 集合中。
4.length
等價于 elements.length 主要用于標識節(jié)點集合里面所包含的元素的個數(shù)
5.用 form 取到表單控件的方法
form.elements[index] ? ? ? ? ?form.elements[name]
form[index] ? ? ? ? ? ? ? ? ? ? ? ? form[name]
6.form[name]
通過名稱作為索引取到 input 元素
返回 id 或 name 為指定名稱的表單控件（除圖片按鈕）
如果結(jié)果為空脯丝，則返回 id 為指定名稱的 img 元素
如果有多個同名元素伏伐，則返回這些元素的節(jié)點集合
一旦用指定名稱取過該元素，則不管該元素的 id 或者 name 怎么變化材蹬，只要節(jié)點還在頁面上吝镣，均可使用原名稱獲得該元素。
7.form 的 reset() 接口
可重置元素：input闸溃，keygen拱撵，output，select乓旗，textarea
觸發(fā)表單 reset 事件昼扛，阻止該事件的默認行為可取消重置
元素重置時不再觸發(fā)元素上的 change 和 input 事件
label 元素
<label for='txtId' form='formId'> 三個屬性 htmlFor control form
for 屬性將標簽關(guān)聯(lián)到具體表單控件欲诺，指定 for 以后渺鹦，瀏覽器會自動生成 control 屬性，用來標識當前這個 label 關(guān)聯(lián)的表單控件的節(jié)點
form 屬性表示 label 所歸屬的表單塞颁，由瀏覽器動態(tài)生成吸耿。
1.htmlFor
關(guān)聯(lián)表單控件激活行為
可關(guān)聯(lián)元素：button，input（除hidden外）咽安，keygen妆棒，meter，output糕珊，progress，select澜公，textarea
label 和表單控件關(guān)聯(lián)以后喇肋，點擊 label 的行為和表單控件的行為保持一致。
2.control
如果指定了 for 屬性糊渊，則為該 for 屬性對應(yīng) Id 的可關(guān)聯(lián)元素
如果沒有指定 for 屬性慧脱，則為第一個子孫可關(guān)聯(lián)元素
3.form
關(guān)聯(lián)歸屬表單（所有表單控件都有這個屬性）
可關(guān)聯(lián)元素：button，fieldset菱鸥，input，keygen氮采，label，object主到，output，select畔师，textarea
只讀屬性牧牢，不可在程序中修改
select 元素
select 元素的屬性與接口
name 表單提交時的名稱，form.element 中用名字做索引值取節(jié)點
value 第一個選中選項的值塔鳍，沒有選中為空
multiple 多選控制
options 所有選項集合
selectedOptions 選中選項集合
selectedIndex 第一個選中選項的索引轮纫，沒選中返回 -1
add(element[,before]) 在指定位置之前添加選項，沒指定參照物在最后添加
remove([index]) 刪除某個選項
optgroup 屬性
disabled 當前分組所有選項不可選
label 必須有蜡感，對分組說明
option 屬性
disabled 當前選項不可選
label 對選項說明
value 提交表單時的數(shù)據(jù)信息
text 顯示在頁面上用戶看到的文字
index 當前選擇索引值
selected 表示選項是否被選中
defaultSelected 表示默認情況下選項是否被選中
select 選項操作
創(chuàng)建選項：
document.createElement ? ? ? ? ? ? ? ?new Option([text[,value[,defaultSelected[,selected]]]])
添加選項：insertBefore ? ? ? ? ? ? ? ? ? select.add
刪除選項：removeChild ? ? ? ? ? ? ? ? ?select.remove
textarea 元素
name 表單提交時的名稱郑兴，form.element 中用名字做索引值取節(jié)點
value 用戶輸入信息
select() 全選當前輸入內(nèi)容
selectStart 選中內(nèi)容的起始位置贝乎，沒選中內(nèi)容返回光標位置
selectEnd 選中內(nèi)容的結(jié)束位置，沒選中內(nèi)容返回光標位置
selectDirection 返回選擇的方向却舀，可設(shè)置 forward锤灿，backward
setSelectionRange(start,end[,direction]) 可用程序選中某些內(nèi)容
setRangeText(replacement[,start,end[,mode]]) 用來設(shè)置某個范圍的內(nèi)容
selectDirection 用來控制鍵盤上 shift + 方向鍵 選擇內(nèi)容的行為，當 selectDirection 為 forward 時螃诅，Shift + 方向鍵 操作 selectEnd 位置状囱；為 backward 時操作 selectStart 位置。
2.表單驗證
驗證元素
可驗證元素：button袭艺，input叨粘，select瘤睹，textarea
以下情況不做驗證：
input 元素答倡，type 屬性為 hidden，reset绸吸，button
button 元素设江，type 屬性為 reset，button
input 元素或 textarea 元素有 readonly 屬性
作為 datalist 子節(jié)點的元素
設(shè)置了 disabled 屬性的元素
驗證涉及到的屬性码俩，接口（每一個可驗證元素都可調(diào)用）
willValidate：標明元素在表單提交時是否被驗證
checkValidity()：用來驗證元素歼捏，通過驗證返回 true，否則觸發(fā)元素上的 invalid 事件
validity：用于存儲驗證結(jié)果
validationMessage：用于顯示驗證的異常信息
setCustomValidity(message)：傳入自定義消息用來設(shè)置異常情況下要顯示什么樣的信息
validity 存儲驗證過程中可能涉及的錯誤信息（這些值用于判斷值是否通過?）
valueMissing：設(shè)置了 required 沒有 value瓣履，值為 true 驗證失敗
typeMismatch：value 與使用?type 不符
patternMismatch：value 與 pattern 不匹配
tooLong：value 長度超過 maxlength 指定的長度
tooShort：value 長度小于 minlength 指定的長度
rangeUnderflow：value 值小于 min 指定的值
rangeOverflow：value 值大于 max 指定的值
stepMismatch：value 值不符合 step 指定的值
badInput：輸入不完整
customError： 使用 setCustomValidity 設(shè)置了自定義錯誤
valid：符合驗證條件练俐，true 表示驗證通過
自定義異常
禁止驗證
在表單元素上添加 novalidate 屬性腺晾，禁止表單提交時對表單的可驗證元素做表單驗證
3.表單提交
隱式提交
如：聚焦在輸入框時按回車提交表單
滿足以下任一條件
表單有非禁用的提交按鈕
沒有提交按鈕時，不超過一個元素悯蝉，類型為 text鼻由，search，url嗡靡，email，password歉井，date哈误，time躏嚎，number 之一
提交過程
瀏覽器根據(jù)表單 enctype 指定的值構(gòu)建要提交的數(shù)據(jù)結(jié)構(gòu)
使用 method 指定的方式發(fā)送數(shù)據(jù)到 action 指定的目標
瀏覽器構(gòu)建提交數(shù)據(jù)
從可提交元素中提取數(shù)據(jù)組裝成指定數(shù)據(jù)結(jié)構(gòu)的過程
可提交元素：button卢佣，input箭阶，keygen虚茶，object仇参，select诈乒，textarea
編碼方式（enctype）
application/x-www-form-urlencode[默認] ?數(shù)據(jù)格式為用 & 分隔的鍵值對
multipart/form-data 字節(jié)流格式，大多數(shù)文件上傳形式
text/plain 用換行符分隔的鍵值對怕磨，用于閱讀
特殊案例
name = 'isindex' && type = ‘text’
編碼方式為 application/x-www-form-urlencode
作為表單的第一個元素
提交時只發(fā)送 value 值肠鲫，不包含 name
name = '_charset_' && type = 'hidden'
沒有設(shè)置 value 值
提交時 value 自動用當前提交的字符集填充（_charset_=UTF-8）
可以通過調(diào)用 form 上的 submit() 用程序提交表單 form.submit()
onsubmit
表單提交事件
提交之前的數(shù)據(jù)驗證
阻止事件的默認行為可取消表單提交 event.preventDefault()
