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="//m.sbmmt.com" onclick="return false">PHP中文网</a>
    </body>
</html>

受返回值影响的事件有两个:onclick、onsubmit。


Weiter lernen
||
<!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>
einreichenCode zurücksetzen