獲取表單

1，getElementById()
2，getElementsByTagName()
3，documents.forms[] 每個form為一個陣列元素
4，document.forms[‘name’] 通過name獲取
5，docment.name 使用name直接獲取。較方便。

PS:
event.preventDefault()：方法將通知 Web 瀏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作）
IE:

window.event.returnValue = false;

function stopDefault(evt){
        var e = evt || window.event
        //非IE
        if(e && e.preventDefault)
          e.preventDefault();
        //IE
        else
          window.event.returnValue = false;
      }

使用preventDefault() 阻止預設提交行為：

      window.onload = function(){
            var submit = document.forms[0];
            submit.onsubmit = preventDefault;    // 使用所在的表單呼叫submit函式
      }

普通按鈕實現提交事件（其他元素也可以）：

    var data = document.getElementById("button");
    data.onclick = function(){
        document.forms[0].submit();
    }

獲取表單欄位

elements: 所有表單控制元件的集合，非表單控制元件會被忽略
elements.length: 獲取表單控制元件的數量
name: 獲取name屬性值
type: 獲取控制元件的type屬性，可以更改（不建議修改）
form: 獲取所在的form物件
value: 獲取表單控制元件的value值
disabled: 關閉控制元件
focus(): 自動將焦點移入
blur(): 自動將焦點移出

也可以通過name獲取
獲取表單控制元件： document.表單名.表單元素名 (在表單和控制元件都有name屬性的情況下)
訪問值： document.表單名.表單元素名.value

事件：
blur 失去焦點時觸發（滑鼠點選）
focus 獲得焦點時觸發
change 文字框的文字改變時觸發

也可以使用 elements[“name”] 獲取表單控制元件元素,如果多個元素使用同一個name，則返回一個集合

    window.onload=function(){
        var form = document.forms[0].elements;
        alert("表單控制元件的數量: "+form.length);     // 3
        alert("name: " +form[0].name);              // input
        alert("type: " +form[0].type);              // input
        alert("form: " +form[0].form);              // 物件
        alert("form[0].value: " +form[0].value);    //twilight
        form[1].disabled = true;                    // 控制元件被禁用
        form[0].focus();                            // 載入完畢時自動獲得焦點      
    }

表單如下：

    <form name="form1" method="get">
        姓名: <input type="text" name="input" size=10 />
        <input type="submit" value="提交" />
        <input type="button" value="普通按鈕" id="button" />
    </form>

文字框指令碼

value 獲取文字框中的值（HTML DOM）
defaultValue 獲取預設值
select() 選定文字

textarea沒有value屬性，但是在js中可以用value獲取textarea的文字內容

    function showValue(){
        var data = document.forms[0].elements[0];
        alert(data.value);          // 獲取文字框中的值
        alert(data.defaultValue);   // 獲取預設值
        data.select();              // 選定文字框中的文字
        date.focus();               // 自動獲得焦點
        alert("文字框的內容："+document.forms[0].elements[1].value);   // 通過value獲得textarea的內容
    }

賦值貼上

copy 複製時觸發
cut 剪下時觸發
paste 貼上時觸發
beforecopy 複製前
beforecut 剪貼前
beforepaste 貼上前

自動切換焦點

        <script>
            window.onload = function(){
                var form = document.forms[0];
                var elem = form.elements;
                elem[0].onkeyup = transform;
                elem[1].onkeyup = transform;
                elem[2].onkeyup = transform;

                function transform(evt){
                    var event = evt || window.event;
    //              alert(this);
                    var maxlength = this.maxLength;
                    var length = this.value.length;

    //              alert(maxlength+":"+length);
                    if(length==maxlength){
                        for(var i=0;i<form.length;i++){
                            if(form[i] === this){
                                form[++i].focus();
                                return;
                            }
                        }
                    }
                }
            }


        </script>

    <form>
        <input type="text" size="10" maxlength="1" />
        <input type="text" size="10" maxlength="3" />
        <input type="text" size="10" maxlength="5" />
        <input type="text" size="10" maxlength="10" />
    </form>

下拉選擇框

通過elements獲得物件

1，multiple 多選
2，selected 判斷當前物件是否被選中（由option呼叫）
3，options獲取option集合
4，value 選項的值
5，text 選項標籤中的文字
6，selectedIndex 選中的索引（從0開始），預設是-1（可改變，會自動定位）（由select物件呼叫）

options[selectIndex].value 獲取選中的value

            var form = document.form1;           // 通過name獲取表單
            var option = form.school.options;    // 獲取select標籤下的option物件集合
            alert(option[0].value);              // 獲取第一個option物件的value
            alert(form.school.selectedIndex);    // 用selectedIndex獲得選中的索引，由表單控制元件select物件呼叫

對於單選下拉框，可以用下面的方式獲取選中的物件的值：

document.form1.schools.value

但是對於複選下拉框，這種方法無法獲得選中的值，schools是select標籤上的name，但是對於複選下拉框會返回一個陣列，陣列內容是所有的option物件的集合

        alert(document.form1.schools.value);        //可以直接獲取單選下拉框中被選擇的value，但是多選下拉框不可以
        alert(document.form1.schools[0].value); //對於複選下拉框，可用select物件獲取option的value
        alert(document.form1.schools[0].selected);  //複選下拉框用selected判斷是否被選擇，而單選按鈕用checked判斷是否被選擇

新增選項：

用建構函式建立物件:

var option = new Option(“text”,”value”)
city.appendChild(option);

或者：

add(物件，位置)—–
IE : add(物件,undefined)

移除選項：

remove(index);

互換位置

insertBefore(物件，物件);

單選按鈕

用 document.myForm.gender 獲得單選按鈕陣列

訪問元素的值： document.myForm.gender[索引].value
判斷是否被選中： document.myForm.gender[索引].checked

    <form name = “myForm” >
        <input type=“radio” name=“gender” value=“male”/>
        <input type=“radio” name=“gender” value=“female”/>
    </form>