1. 程式人生 > >javaScript知識點回顧(四十):form物件

javaScript知識點回顧(四十):form物件

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或空,則預設動作繼續執行。

    <!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>
    受返回值影響的事件有兩個:onclick、onsubmit。