Javascript操作表單元素

最近處理表單輸入項時，實在厭倦了使用getElementById、getElementsByTagName等DOM方法取得元素
一般的輸入項(input、textArea)還算好處理
只是碰上了radio button或checkbox這類群組型的輸入項還是比較麻煩
後來想一想應該有更優雅的方式能處理取得表單輸入項的元素或值才對
所以就找到了用HTML Collection的解決法

DOM的forms屬性提供了網頁中的表單元素的集合
例如 document.forms[0] 便可以取得網頁中的第一個表單元素
只不過通常一個頁面也不宜放入太多表單，過於複雜的內容容易讓使用者厭煩
在頁面單純的情況下，使用 getElementById 取得表單元素也是明快的處理方式

相較於表單元素，表單元素內的輸入項的數量及類型可能會相當複雜
表單元素提供了屬性 elements 方便取得輸入項的HTML Collection物件
這時候透過HTML Collection型別的namedItem method操作輸入項會是更優雅的作法

以下示範
<form id="tForm" name="tForm">
    <input type="radio" name="tra" value="y" /></br>
    <input type="radio" name="tra" value="n" /></br>

    <input type="checkbox" name="tc" value="0" /></br>
    <input type="checkbox" name="tc" value="1" /></br>

    <input type="text" name="tex" /></br>
</form>

Javascript operation：
var f = document.getElementById("tForm");
var radioList = f.elements.namedItem('tra'); 

//return NodeList[input attribute value = "y", input attribute value = "n"]
var checkboxList = f.elements.namedItem('tc'); 
//return NodeList[input attribute value = "0", input attribute value = "1"]
var textinput = f.elements.namedItem('tex');
//return <input type="text" name="tex"> 


這個elements屬性為包含了表單的text、radio button、checkbox、select、textarea等各種輸入項的集合
所以namedItem取得輸入項會比透過getElementsByTagName分別取得textarea、select等輸入項來的方便
你可以觀察到如果符合條件的輸入項元素有複數個，則會回傳NodeList物件
所以可以透過檢查回傳的物件是否有length屬性，判斷是否為radio或checkbox輸入項

至於取值，還是只能檢查單一輸入項元素的value或是checked屬性
雖然Chrome可以對radio button進行 f.elements.namedItem('tra').value 直接取得有被勾選的value
不過在checkbox輸入項則沒辦法這樣做
而firefox則完全不支援透過NodeList的value屬性取值
所以如果表單中含有群組型輸入項，還是普通的比對輸入項吧