（JS基礎）操做表單

<form>元素對應的時 HTMLFormElement類型，繼承自HTMLElement，於是擁有與HTMLElement相同的默認屬性。<form>元素內部還須要"內容"，而填充"內容"的元素有<input>、<button>、<textarea>、<select>、<option>等，這些成爲表單控件，表單控件都有name特性。

表單基礎知識

<form action="" method="post"> <input type="text" name="username"> // ... </form> 複製代碼

上述例子是一個簡單的<form>表單，action、method等爲<form>元素的 HTML 特性（更多查看文檔）。經過 JavaScript 也能操做指定特性。

表單對象的屬性

• acceptChartset：服務器可以處理的字符集。對應accept-chartset特性。
• action：接收表單請求的URL。對應action特性。
• elements：表單中全部控件的集合（HTMLCollection）。
• length：表單中控件的數量。
• enctype：請求的編碼類型。對應enctype特性。
• method：要發送的 HTTP 請求類型，一般get或post，默認get。對應method特性。
  
• name：表單的名稱。對應name特性。
• target：用於發送請求和接收響應的窗口名稱。對應target特性。
  

表單對象的方法

方法只有兩個，提交和重置。

關於提交：在相應的表單控件擁有焦點時，點擊回車鍵能提交表單；使用"表單提交按鈕"或回車鍵提交表單，都能觸發submit事件。

關於重置：使用"表單重置按鈕"或表單對象的reset()方法都能重置表單，都能觸發reset事件。重置的值爲控件value特性指定的值，如<input type="text" value="first">被重置後則顯示"first"。

• submit()：提交表單。不會觸發submit事件。
• reset()：將全部表單域重置爲默認值。

獲取表單對象

最簡單常見的方法就是和獲取普通元素同樣的方法獲取。下面列出兩種獲取的方法：

<form name="form1" id="myForm"></form> <form name="form2"></form>複製代碼

// 經過元素獲取的方法
let form1 = document.getElementById('myForm')
// document.forms能夠獲取頁面全部form元素
let form2 = document.forms.form2複製代碼

表單控件(字段)

表單字段指的是，表單中的表單控件（字段）。表單字段組成的集合是一個有序列表，就是表單對象的elements屬性。經過該集合能夠獲取到任意表單字段。下面給出簡單例子介紹：

<form name="form1" action="#" id="form1" target=""> <!-- div不是表單控件，因此elements不包含該對象 --> <div name="div1">div1</div> <ul> <!-- 即便是嵌套的表單控件，elements也一樣能獲取 --> <li><input type="text" name="input1" value="inputText"></li> <li><input type="text" name="input2" value="inputText"></li> <!-- name能夠相同，elements對象將相同name特性的對象歸於同一個RadioNodeList中 --> <li><input type="text" name="input2" value="inputText"></li> </ul> </form>複製代碼

let form1 = document.getElementById('form1');
// 獲取elements對象
console.log(form1.elements);    // HTMLFormControlsCollection(3)[...]
// 經過序號獲取
console.log(form1.elements[1]);    // <input type="text" name="input2" value="inputText">
// 經過"name"獲取
console.log(form1.elements['input2']);    // RadioNodeList(2)[...]
複製代碼

上述例子中，有幾點要注意的：

1. 獲取表單控件的方法有兩個：根據順序，用索引號獲取，如form1.elements[1]；根據name特性獲取，如form1.elements['input2']。
2. 根據name特性獲取表單控件，可能有三種值：
• 當不存在指定name特性的控件，返回undefined；
  
• 當指定的name特性的控件只有一個，返回控件元素對象；
  
• 當指定的name特性的控件多於一個，返回RadioNodeList類型的類數組，存放多個控件元素對象。
3. 表單控件未指定name特性時，仍然在elements對象內，即能用索引號獲取，只是沒法經過name特性獲取。
   

控件對象的屬性

除 <fieldset>元素外，全部表單控件對象都擁有相同的一組屬性。

• disabled：表示當前字段是否被禁用。布爾值，默認爲false。被禁用的字段不會被提交。
• form：指向當前字段所屬表單的指針。只讀。
• name：當前字段的字段名稱。
• readOnly：表示當前字段是否只讀。布爾值，默認爲false。
• tabIndex：當前字段的切換（tab）序號。（注意，非控件元素也能設置tab-index特性，擁有該特性的元素也能"得到焦點"，能觸發焦點事件）
• type：當前字段的類型，如"checkbox"、"radio"等。
• value：當前字段將提交給服務器的值。對於文件字段，該屬性是只讀的，包含文件路徑。
  

控件對象的方法

表單字段的方法主要是關於焦點控制的。

• focus()：使該表單字段得到焦點。
• blur()：使該表單字段失去焦點。

HTML5 爲表單字段新增了一個 autofocus屬性，如 <input type="text" autofocus>。

也能夠經過window.onload事件函數給某個表單字段得到焦點，如window.addEventListener('load', e => {document.forms[0].elements[0].focus()});。

控件對象的事件

事件只有三個：blur、focus、change。都是比較簡單的事件，不過多描述，要注意的只有change，當"單選"或"多選"發生改變也會觸發該事件。更多關於事件的介紹請點擊連接。

表單控件的類型

input

<input>是表單中最經常使用的一個，根據type特性的值不一樣，生成不一樣的控件。經常使用的type值以下。更詳細的type值介紹請查看文檔。

• text：文本輸入框。
• password：密碼輸入框，字段中的字符會被遮蔽。
• number：數字輸入框，非數字沒法輸入到框內。還支持最值和步長的設置
  
• email：郵箱輸入框，自帶郵箱驗證。
• checkbox：勾選框，一般搭配<label>使用。
• radio：單選框，經過相同的name特性劃分同一組單選框，一般搭配<label>使用。
• file：文件上傳框。
• image：圖片上傳框。
• color：顏色選擇框。
• ......

除了type特性值外，還有幾個 特性是須要注意的：

1. required：表示必填字段。
2. placeholder：針對輸入框，表示輸入前的佔位顯示符。
3. pattern：針對輸入框，表示用於驗證輸入的正則表達式，如pattern="\d+"。
4. value：對於輸入框，表示初始的值；對於選擇框，表示該選項的值。
5. maxlength：針對輸入框，表示能接受的最大字符數。
6. size：針對輸入框，表示能顯示的字符數。
7. min：針對數字輸入框，表示數字輸入框能輸入的最小值。
8. max：針對數字輸入框，表示數字輸入框能輸入的最大值。

控件對象的經常使用屬性和方法：

1. value：獲取控件對象當前的值。
2. stepUp()和stepDown()：針對數字輸入框（type="number"），接收一個參數，表示在當前值的基礎上增長或減小的值。
   
3. checkValidity()：當輸入框設置了驗證條件（如type="email"等自帶驗證的或帶有required、pattern等特性的控件），使用該方法能夠獲取控件的輸入是否經過驗證，布爾值。更多請查看InputElement API的文檔。
4. validity：比checkValidity()更詳細，該屬性中包含多個屬性，都是布爾值，可獲得表單字段無效的緣由。
5. select()：針對輸入框，使該控件得到焦點，並選擇輸入框內全部文本。
6. setSelectionRange(startIndex, endIndex)：一樣針對輸入框，選擇輸入框內部分文本，但不會使控件得到焦點，因此使用前須要使用focus()取得焦點。startIndex和endIndex分別表示字符的索引。

注意，不管是使用鼠標選擇文本，仍是使用select()或setSelectionRange()方法，都會觸發輸入框的select事件。

關於禁用驗證：經過設置<form>的novalidite特性能夠禁用整個表單的驗證；經過<input type="submit">的formvalidate特性，可使該按鈕提示時禁用表單驗證。

textarea

與<input type="text">相似，都是文本輸入框，不一樣的是，<textarea>能夠輸入多行文字。

關於本文輸入的知識，上面已經說起，再也不贅述。

默認狀態，<textarea>能夠調節寬高，若想禁用，請設置 CSS 樣式：style="resize:none;"。

經過設置rows和cols特性，能夠限制<textarea>的行數和列數。

初始值必須放在起始和結束標籤的中間，即<textarea>defaultValue</textarea>。

select

<select>是一個提供 選項菜單的控件，而 <option>爲選項 菜單的項，還能用 <optgroup>包裹多個 <option>組成一個 分組，併爲分組提供命名。以上三個元素的特性請點擊各自的連接查看詳細，這裏只作簡單介紹。

簡單例子：

<select name="mySelect"> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="Group 2"> <option>Option 2.1</option> <option>Option 2.2</option> </optgroup> <optgroup label="Group 3" disabled> <option>Option 3.1</option> <option>Option 3.2</option> <option>Option 3.3</option> </optgroup> </select> 複製代碼

效果以下圖：

上述例子看出：

<select>中的multiple特性爲true時，列表能夠多選，默認爲false；經過該控件對象上的value屬性能夠訪問當前已選擇的值。

<optgroup>的label特性表示該分組的名字，僅用於顯示，對<select>的value不影響。

<option>的value值能夠省略，當其省略時取標籤內的值；selected特性表示該項是否被選中，非多選狀況下只能有一個。

選擇框控件<select>是HTMLSelectElement類型的對象，有如下屬性和方法： 

• add(newOption, relOption)：向選擇框控件中插入新<option>元素，其位置在相關項(relOption)以前。
• remove(index)：移除指定索引的選項。
  
• options：選擇框控件中全部<option>元素的HTMLCollection。
• multiple：布爾值，選擇框控件是否能夠多選。等價於multiple特性。
• selectedIndex：整型值，獲取被選中的選項的索引值(0開始)。對於未選擇任何項，值爲 -1；對於已選擇多項，只獲取較前的選項的索引值。
  
• size：選擇框控件中可見的行數。等價於size特性。
• value：表示已選擇的項的值。有三種可能：當無選中項，值爲空字符串；當有一個選中項，值爲該選項的值；當有多個選中項，值爲較前的選項的值。

datalist

<datalist id="datalistName">並不算是表單控件， 必須配合 <input list="datalistName"> 使用， 爲輸入框提供可選列表。上面已對 <option>的使用有簡單描述，很少贅述。

簡單例子：

<input type="email" list="emails" name="myEmail"/> <!-- 必須經過ID關聯 --> <datalist id="emails"> <option value="1234@qq.com"> <option value="666@qq.com"> <option value="1888888@139.com"> </datalist>複製代碼

效果圖以下：