表單(一)：基礎知識

取得<form>元素引用的方式

var form = document.getElementById('form1');
var firstForm = document.forms[0]; //取得頁面中的第一個表單
var myForm = document.forms['form2']; //取得頁面中名稱為'form2'的表單
var formObj = document.forms.form2; //不推薦，，一是容易出錯，二是将來的浏覽器可能會不支援      

送出表單

定義送出按鈕

//通用送出按鈕
<input type='submit' value='submit form'/>
//自定義送出按鈕
<button type='submit'>submit form</button>
//圖像按鈕
<input type='image' src='graphic.gif'/>      

送出事件

var form = document.getElementById('myForm');
form.submit();      

這種方式無需表單包含的送出按鈕，任何時候都可以正常送出表單

var form = document.getElementById('myForm');
EventUtil.addHandle(form, 'submit', function(event){
    //取得事件對象
    event = EventUtil.getEvent(event);
    //阻止預設事件
    EventUtil.preventDefault(event);
})      

*:在第一次送出表單後，如果長時間沒有反應，使用者可能會變得不耐煩。這時候，他們也許會反複單擊送出按鈕，結果往往會很麻煩，因為伺服器要處理重複的請求，

或者造成錯誤，如果使用者是下訂單，那麼可能會多訂好幾份。解決這一個問題的辦法有兩個

1、在第一次送出表單後就禁用送出按鈕

2、利用onsubmit事件處理程式取消後續的表單送出操作

重置表單

建立重置按鈕

//通用重置按鈕
<input type='reset' value='reset form'/>
//自定義重置按鈕
<button type='reset'>reset form</button>      

點選重置按鈕

var form = document.getElementById('myForm');
form.reset();      

與調用submit()方法不同，調用reset()方法會像單擊重置按鈕一樣觸發reset事件

<form method='post' id='myForm'>
    <ul>
        <li>
            <input type='radio' name='color' value='red'/>
        </li>
        <li>
            <input type='radio' name='color' value='green'/>
        </li>
        <li>
            <input type='radio' name='color' value='blue'/>
        </li>
    </ul>
</form>

var form = document.getElementById('myForm');
var coloFields = form.elements['color']; //傳回一個NodeList