form object

form object

A <form> tag is a <form> object.

Properties of the form object

name: The name of the form, mainly used to let JS control the form.
action: form data processing program (PHP file).
method: form submission method, values: GET, POST
enctype: encoding method of form data.

Methods of form object

submit(): Submit the form, the same function as <input type = “submit” />.
reset(): Reset the form, which has the same function as the reset button.

Events of the form object

onsubmit: Occurs when the submit button is clicked, and occurs before the data is sent to the server. Mainly used for "form validation before form submission".
onreset: Occurs when the reset button is clicked.

<!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>

##Get form elements

Get the object through the id of the web page element. document.getElementById(id)
Get the object through the HTML tag name. parentNode.getElementsByTagName(tagName)
Get the form element object through the name attribute. The starting point of all elements in the form must be a document object.

Syntax: document.formObj.elementObj
The access method is a three-tier structure. Among them, formObj represents the form object, and elementObj represents the form element object.
Example: document.form1.username.value.length

##Event return value
The return value of the event will affect the default action of the object. For example: The default action of the <a> tag is to open a URL.

If the event returns false, the execution of the default action is prevented; if the event returns true or empty, the default action continues to be executed.

<!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>

There are two events affected by the return value: onclick and onsubmit.

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

form object

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]