javaScript知識點回顧(四十):form物件
阿新 • • 發佈:2019-02-17
form物件
一個<form>標記,就是一個<form>物件。
form物件的屬性
name:表單的名稱,主要用來讓JS來控制表單。
action:表單的資料處理程式(PHP檔案)。
method:表單的提交方式,取值:GET、POST
enctype:表單資料的編碼方式。
form物件的方法
submit():提交表單,與<input type = “submit” />功能一樣。
reset():重置表單,與重置按鈕功能一樣。
form物件的事件
onsubmit:當單擊提交按鈕時發生,並資料發往伺服器之前發生。主要用來“在表單提交之前進行表單驗證”。
onreset:當單擊重置按鈕時發生。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //獲取form物件 var formObj = document.form1; //增加method屬性 formObj.method = "post"; //增加action屬性 formObj.action = "login.php"; } </script> </head> <body> <form name="form1"> 使用者名稱:<input type="text" name="username" /> 密碼:<input type="password" name="userpwd" /> <input type="submit" value="提交表單" /> </form> </body> </html>
獲取表單元素
通過網頁元素的id來獲取物件。document.getElementById(id)
通過HTML標籤名來獲取物件。parentNode.getElementsByTagName(tagName)
通過name屬性來獲取表單元素物件。表單中所有元素的起點都必須是document物件。
語法:document.formObj.elementObj
訪問方式是三層結構。其中,formObj代表表單物件,elementObj代表表單元素物件。
舉例:document.form1.username.value.length
事件返回值
事件的返回值,會影響物件的預設動作。如:<a>標記的預設動作是開啟一個網址。
如果事件返回false,則阻止預設動作的執行;如果事件返回true或空,則預設動作繼續執行。
受返回值影響的事件有兩個:onclick、onsubmit。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <body> <a href="http://www.php.cn" onclick="return false">PHP中文網</a> </body> </html>