# javascript快速入門15--表單 大多數Web頁面與用戶之間的交互都發生在表單中，表單中有許多交互式HTML元素如：文本域，按鈕，復選框，下拉列表等。從文檔對象層次圖中可以看到，表單是包含在文檔中的，所以要訪問表單，仍然需要通過document對象來訪問 ## Form對象 表單就是指的form標簽及其里面的內容，要獲取一個表單對象，可以給某個form標簽加個id屬性，然后使用document.getElementById方法獲得。也可以使用document.getElementsByTagName("form")來獲取所有表單的集合，然后通過下標來訪問。還可以給form標簽加個name屬性，然后可以使用document.getElementsByTagName來訪問，注意，同樣要使用下標來訪問 事實上，0級DOM（0級DOM并不是任何DOM規范，事實上它是BOM的內容，但瀏覽器都實現的比較好）為我們提供了更簡單的訪問From對象的方法——使用document.formName ``` <form name="formName"></form> var fm = document.formName;//可以這樣來直接引用該表單對象 //與document.getElementsByTagName("form")相對應有document.forms集合 var fm = document.forms[0];//獲取第一個Form對象 ``` ### 訪問表單元素 Form對象有個elements屬性，包是一個含了form標簽里面的所有表單控件（input,select等標簽，但不包含如div之類的標簽）的偽數組 ``` var fm = document.forms[0]; alert(fm.elements.length);//length屬性報告了元素的個數 ``` 在之前，訪問input這類標簽和訪問其它標簽沒什么區別，可以使用ID，也可以使用className,但當它們在表單中時，可以使用它們的nam有來訪問 ``` <form name="formName"> <input name="textInput" type="text" value="文本框" /> </form> alert(document.formName.textInput.value); ``` ### Form對象相關事件及方法 當表單提交時會發生submit事件，我們可以設置事件監聽，當用戶提交表單時檢查表單內容。同時，如果用戶輸入有誤，要阻止表單提交，可以在事件處理函數里return false就行了，當正確時可以調用表單的submit方法提交表單，使用表單的submit方法時不會執行submit事件處理函數 ``` document.formName.onsubmit = function () { //檢查表單 if (result) { this.submit(); } else { return false; } }; ``` 當表單被重置時會發生reset事件，但這個事件意義不大，因為reset按鈕本身意義就不大。同時也有一個reset方法 ``` document.formName.onreset = function () { if (confirm("您真的要重置表單嗎？")) { this.reset(); } else { return false; } }; ``` ## 表單元素 ### 單選按鈕與復選框 單選按鈕與復選框有個共同的屬性——checked，指明該按鈕是否被選中。而不同的是，往往多個單選按鈕使用同一個name來分到相同的組，且只能有一個被選中，那么，使用這個name訪問它時，由于多個按鈕使用同一個名字，它會返回一個數組，而當只有一個時（事實不存在單選按鈕只有一個單獨存在的情況），它又會返回這個元素 ``` var radios = document.formName.radios;//頁面中多個單選按鈕name為radios alert(radios.length);//返回一個元素列表 var one = document.formName.one;//只有一個 alert(one.checked);//只返回這個元素 ``` 與checked類似的，它們還有個defaultChecked屬性，返回是否是在HTML指定默認選中的 ### 單行文本框與多行文本框 單行文本框即type屬性設為text的input標簽，多行文本框即textarea，它們除了與其它input標簽一樣具有的value屬性處，還具有defaultValue屬性表示文本框中的默認文本，即在HTML里所指定的value值的 文本框還有一個方法：select,可以使文本框中的文字呈選中狀態。 ### Select對象 表單元素中最復雜的就算是select對象了。select是一復合對象，它包含option標簽，也有可能包含optgroup標簽。雖然select可以多選，但我們這里只討論單選的，多選的類似！ ``` //首先，獲取select對象也是通過name（當然ID仍然有效，但name更快捷） var select = document.formName.mySel; //要獲取用戶選中了第幾項，可以使用它的selectedIndex alert(select.selectedIndex);//這個索引號是從0開始的 //select對象有個options偽數組類型的屬性，包含了所有的option，可以使用下標來訪問 alert(select.options[select.selectedIndex].value);//輸出選中項的 alert(select.options[select.selectedIndex].text);//text屬性是option包含的文本 //本來需要知道select里面有多少個option，可以通過options.length //但HTML DOM為select對象也提供了length屬性 alert(select.length);//輸出和options.length一樣 ``` 獲取選中項的值 ``` var mySel = document.formName.mySel; alert(mySel.options[mySel.selectedIndex].value); //更快捷的方法 alert(mySel.value); ``` 而向select對象中添加option，本可以使用document.createElement及appendChild等方法的，但HTML DOM為我們提供了更方便的方法了 ``` var opt = new Option("新增選項文本","選項值");//document.createElement("option"); var select = document.formName.mySel; select.add(opt,select.options[0]);//將opt添加到第一個option的后面 select.add(opt);//在IE下，沒有第二個參數時，會將opt添加到最后 //上面的代碼在FF下會出錯，必須使用下面的方法 select.add(opt,null);//但這在IE會出錯 //下面的方法可以兩全了,但長了一點 select.add(opt,select.options[select.length-1]); //刪除option的方法remove select.remove(1);//remove接收參數為要移除 ``` options數組最特殊的一個地方在于它和真正的數組十分相似，可以設置它的length來減少元素，也可以直接將元素賦給某項來修改 ``` var opts = document.formName.mySel.options; opts[0]=new Option("Text","Value"); opts.length=2;//將移去第三個之后的option opts[3]=new Options("ABC",123);//自動添加一個元素 ``` Option對象也有defaultSelected屬性返回在HTML里指定是否是默認選中項 ## 表單元素特性事件 當表單控件失去焦點時會觸發blur事件，當控件獲得焦點時又會觸發focus事件。與之對應，blur方法將使表單控件失去焦點，focus方法將使控件獲得焦點，與Form對象的submit方法一樣，使用JavaScript執行blur方法與focus方法并不會觸發相關事件監聽函數 select對象的change事件：當用戶選中一個選項，或者取消了對一個選項的選定時，就會發生change事件。 textarea對象的change事件：當用戶改變文本區域的值然后通過把鍵盤焦點移動到其他地方“確認”這些改變的時候，發生change事件。 select事件：當文本框中的文本被選中時發生