form對象LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

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。

下一節

<!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>
提交重置程式碼
章節課件