用JavaScript操作表單和操作DOM是類(lèi)似的，因?yàn)楸韱伪旧硪彩荄OM樹(shù)。

不過(guò)表單的輸入框、下拉框等可以接收用戶(hù)輸入，所以用JavaScript來(lái)操作表單，可以獲得用戶(hù)輸入的內(nèi)容，或者對(duì)一個(gè)輸入框設(shè)置新的內(nèi)容。

HTML表單的輸入控件主要有以下幾種：

獲取值

如果我們獲得了一個(gè)<input>節(jié)點(diǎn)的引用，就可以直接調(diào)用value獲得對(duì)應(yīng)的用戶(hù)輸入值：

// <input type="text" id="email">var input = document.getElementById('email');input.value; // '用戶(hù)輸入的值'

這種方式可以應(yīng)用于text、password、hidden以及select。但是，對(duì)于單選框和復(fù)選框，value屬性返回的永遠(yuǎn)是HTML預(yù)設(shè)的值，而我們需要獲得的實(shí)際是用戶(hù)是否“勾上了”選項(xiàng)，所以應(yīng)該用checked判斷：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>var mon = document.getElementById('monday');var tue = document.getElementById('tuesday');mon.value; // '1'tue.value; // '2'mon.checked; // true或者falsetue.checked; // true或者false

設(shè)置值

設(shè)置值和獲取值類(lèi)似，對(duì)于text、password、hidden以及select，直接設(shè)置value就可以：

// <input type="text" id="email">var input = document.getElementById('email');input.value = 'test@example.com'; // 文本框的內(nèi)容已更新

對(duì)于單選框和復(fù)選框，設(shè)置checked為true或false即可。

HTML5控件

HTML5新增了大量標(biāo)準(zhǔn)控件，常用的包括date、datetime、datetime-local、color等，它們都使用<input>標(biāo)簽：

<input type="date" value="2015-07-01"><input type="datetime-local" value="2015-07-01T02:03:04"><input type="color" value="#ff0000">

不支持HTML5的瀏覽器無(wú)法識(shí)別新的控件，會(huì)把它們當(dāng)做type="text"來(lái)顯示。支持HTML5的瀏覽器將獲得格式化的字符串。例如，type="date"類(lèi)型的input的value將保證是一個(gè)有效的YYYY-MM-DD格式的日期，或者空字符串。

提交表單

最后，JavaScript可以以?xún)煞N方式來(lái)處理表單的提交（AJAX方式在后面介紹）。

方式一是通過(guò)<form>元素的submit()方法提交一個(gè)表單，例如，響應(yīng)一個(gè)<button>的click事件，在JavaScript代碼中提交表單：