用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。

不過表單的輸入框、下拉框等可以接收使用者輸入，所以用JavaScript來操作表單，可以獲得使用者輸入的內容，或者對一個輸入框設定新的內容。

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

• 文字框，對應的<input type="text">，用於輸入文字；

• 口令框，對應的<input type="password">，用於輸入口令；

• 單選框，對應的<input type="radio">，用於選擇一項；

• 複選框，對應的<input type="checkbox">

  ，用於選擇多項；

• 下拉框，對應的<select>，用於選擇一項；

• 隱藏文字，對應的<input type="hidden">，使用者不可見，但表單提交時會把隱藏文字傳送到伺服器。

獲取值

如果我們獲得了一個<input>節點的引用，就可以直接呼叫value獲得對應的使用者輸入值：

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

這種方式可以應用於text、password、hidden

// <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或者false
tue.checked; // true或者false

設定值

設定值和獲取值類似，對於text、password、hidden以及select，直接設定value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = '[email protected]'; // 文字框的內容已更新

對於單選框和複選框，設定checked為true或false即可。

提交表單

最後，JavaScript可以以兩種方式來處理表單的提交（AJAX方式在後面章節介紹）。

方式一是通過<form>元素的submit()方法提交一個表單，例如，響應一個<button>的click事件，在JavaScript程式碼中提交表單：

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器預設點選<button type="submit">時提交表單，或者使用者在最後一個輸入框按回車鍵。因此，第二種方式是響應<form>本身的onsubmit事件，在提交form時作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 繼續下一步:
    return true;
}
</script>

注意要來告訴瀏覽return true器繼續提交，如果return false，瀏覽器將不會繼續提交form，這種情況通常對應使用者輸入有誤，提示使用者錯誤資訊後終止提交form。

在檢查和修改<input>時，要充分利用<input type="hidden">來傳遞資料。

例如，很多登入表單希望使用者輸入使用者名稱和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發人員會直接修改<input>：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把使用者輸入的明文變為MD5:
    pwd.value = toMD5(pwd.value);
    // 繼續下一步:
    return true;
}
</script>

這個做法看上去沒啥問題，但使用者輸入了口令提交時，口令框的顯示會突然從幾個變成32個（因為MD5有32個字元）。

要想不改變使用者的輸入，可以利用<input type="hidden">實現：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把使用者輸入的明文變為MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>

注意到id為md5-password的<input>標記了name="password"，而使用者輸入的id為input-password的<input>沒有name屬性。沒有name屬性的<input>的資料不會被提交。