表單的基礎知識

在Javascirpt中，表單元素<form>對應的是HTMLFormElement類型，繼承了的是Element類型，有自己獨有的屬性和方法：

• acceptCharset:服務器能夠處理的字符集
• action:接受請求的URL
• elements：表單中所有空間的集合
• enctype:請求的編碼類型
• length:表單中控件的數量
• method:要發送的HTTP請求類型
• name:表單的名稱
• reset():將所有表單域重置為默認值
• submit():提交表單
• target:用于發送請求和接收相應的窗口名稱

取得<form>元素引用的方式
var firstForm = document.forms[0];
var myForm = document.forms["form2"];

提交表單

\<input type="submit" value="Submit Form">
\<button type="submit">Submit Form</button>
\<input type="image" src='graphic.gif'>

上面三種按鈕只要存在在form表單中，那么在相應表單控件擁有焦點的情況下，按回車就可以提交表單（textarea例外），觸發表單的submit事件，通常需要自定義submit事件，因此需要經常阻止表單提交來進行相應的檢查。

var form = document.getElementById("myForm")
form.submit()

注意以上這種方式提交表單是，不會觸發submit事件，因此要記得在調用此方法之前先驗證表單數據。

重置表單

\<input type="reset" value="reset Form">
\<button type="reset">reset Form</button>

表單字段

每個表單都有docuement屬性，是表單中所有表單元素(字段)的集合，順序與出現在標記中的順序對應，可以按照位置和name特性來訪問它們

var form = document.getElementById('form1')
var field1 = form.elements[0]
var field2 = form.elements['textbox1']
var fieldCount = form.elements.length

如果多個表單控件都在使用一個name，就會返回以該name命名的一個NodeList

• 共有的表單字段屬性
  • disabled:布爾值，表示當前字段是否被禁用
  • form：指向當前字段所屬表單的指針，只讀
  • name:當前字段的名稱
  • readOnly：表示當前字段是否只讀
  • tabIndex：表示當前字段切換序號
  • type:當前字段的類型
  • value：當前字段將被提交給服務器的值
• 共有的表單字段方法
  • focus()
  • blur()
• 共有的表單字段事件
  • blur
  • chagne:對于Input和textarea元素，在它們失去焦點且value值改變時觸發，對于<select>元素，在其選項發生改變時觸發
  • focus

文本框腳本

• input元素的type特性設置為'text'，通過size特性，指定能夠顯示的字符數，通過value特性，可以設置文本框的初始值，而maxlength特性則用于指定文本框可以接受的最大字符數
• textarea可以使用rows和cols指定行和列的字符數。

選擇文本

• select()方法
  在文本框獲得焦點時選擇其所有文本是非常常見的做法，因為不用一個個地刪除文本。
• 選擇(select)事件
  在選擇了文本框中的文本時就會觸發select事件。
• 取得選擇的文本
  HTML5為文本框添加了兩個屬性selectionStart和selectionEnd，
  可以通過input.value.substring(input.selectionStart,input.selectionEnd)方法獲得選擇的文本
• 選擇部分文本
  textbox.setSelectionRange(start,end)

過濾輸入

• 屏蔽字符
  • 阻止keyPress默認事件即可屏蔽所有的輸入字符
  • 監聽keyPress事件然后根據對應的字符編碼進行判斷，再決定如何響應
• 操作剪貼板
  • beforeCopy
  • copy
  • beforecut
  • cut
  • berforepaste
  • paste

自動切換焦點

原理是判斷事件對象的value.length和maxlength是否相等來進行焦點切換

HTML5約束驗證API

• 必填字段required
• 其他輸入類型
  • email
  • url
  • ...
• 數值范圍
  • number
  • range
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
    上面這些類型可以指定min屬性和max屬性還有step屬性。對應的方法有stepUp(count)和stepDowm(count)
• 輸入模式
  pattern屬性

<input type="text" pattern = "\d+" name=count>

• 檢測有效性
  • checkValidity()方法
    所有表單字段包括表單本身都支持checkValidity()方法，檢測字段是否有效，字符的值是否有效的判斷依據html5的那些約束，與pattern屬性不匹配也是無效的
  • validity屬性
    validity屬性告訴你為什么字段有效或無效，包含一系列屬性，每個屬性會返回一個布爾值（不作列舉）
• 禁用驗證
  設置novalidate屬性(也是特性)可以告訴表單不進行驗證

選擇框腳本

選擇框是通過select和option元素床架你的，為了與這個控件交互，除了所有表單共有的屬性和方法外，還提供如下特殊的屬性和方法：

• add(newOption,relOption)：向控件中插入新的<option>元素，其位置在相關項（relOption）之前
• multiple：布爾值，表示是否允許多項選擇
• options：控件中所有<option>元素的HTMLCollection
• remove(index)：移除給定位置的選項
• selectedIndex:基于0的選中項的索引，如果沒有選中項，則值為-1
• size:選擇框中可見的行數，等價于HTML中的size特性
• 如果沒有選中的項，則選擇框的value屬性保存空字符串

選擇該項

var selectedOpotion = selectbox.options[selctebox.selectedIndex]

添加選項

• Js操作DOM的方法
• var newOption = new Option('Option text','Option value')
• 使用選擇框的add()方法，若需要添加到末尾，則置第二參數為null

移除選項

• DOM的removeChild()方法
• 選擇框的remove()方法，傳入要移除選項的索引
• 將相應項設置為null ， selectbox.options[0] = null

表單序列化

隨著Ajax的出現，表單序列化已經是很常見的一種需求
瀏覽器將數據發送給服務器的過程：

• 對表單字段的名稱和值進行URL編碼，使用和號（&）分隔
• 不發送禁用的表單字段
• 只發送勾選的復選框和單選按鈕
• 不發送type為'reset'和'button'的按鈕
• 多項選擇框的每個選中的值單獨一個條目
• 單擊提交按鈕提交表單也會發送提交按鈕
• select元素的值，就是選中的option元素的value特性的值

serialize的源碼參考高程三一書p436頁

以上參考紅寶書《高程三》