In-depth understanding of Form Scripting Series first-form objects

xTable of Contents [1] Form properties [2] Form event [3] before form method

One of the first applications of JavaScript is to share the responsibility of the server to handle the form, breaking down the server-dependent situation everywhere. Although the current web and JavaScript have evolved considerably, the changes in Web forms are not obvious. Because Web Forms do not provide an out-of-the-box workaround for many common tasks, many developers will not only use JavaScript when validating forms, but also enhance the default behavior of some standard form controls. This is the first Form script series--Form Object

Form Properties

In HTML, a form is represented by a form element, whereas in JavaScript, the form corresponds to the htmlformelement type, htmlformelement inherits HtmlElement, but has its own unique properties and methods

　　A character set that the acceptcharset server can handle; equivalent to the Accept-charset attribute in HTML

Detailed information about the Accept-charset attribute

　　The URL to which the action accepts the request, equivalent to the action attribute in HTML

For more information about the Action property,

　　The encoding type of the enctype request; equivalent to the enctype attribute in HTML

Detailed information about the Enctype attribute

<formname= "form"Action="#"></form><Script>varform=Document.form;console.log (form.acceptcharset);//"'Console.log (form.action);//"file:///C:/Users/Administrator/Desktop/iframe.html#"Console.log (form.enctype);//application/x-www-form-urlencoded</Script>

　　elements A collection of all controls in a form (htmlcollection)

　　The number of controls in the length form

<formname= "form"Action="#">    <inputtype= "text">    <textarea></textarea></form>    <Script>varform=Document.form;console.log (form.elements)//[Input,textarea]Console.log (form.length)//2</Script>

　　method the type of HTTP request to send, usually "get" or "post"; the method attribute equivalent to HTML

For more information about the method attribute,

　　 name of the form, which is equivalent to the names attribute of the HTML

For more information about the Name property,

　　The name of the window that the target uses to send requests and receive responses, and the target attribute equivalent to HTML

For more information about the target property,

<formname= "form"Action="#"></form><Script>varform=Document.form;console.log (form.method);//GetConsole.log (form.name);//formConsole.log (form.target);//"'</Script>

Form Events

　　Reset Event resets all form fields to their default values

　　Submit Event Submission Form

<formname= "form"Action="#">    <inputname= "Test"value= "1">    <inputtype= "Reset">    <inputtype= "Submit"></form><Script>varform=Document.form;form.onreset= function() {Form.test.value= "2"; //If you do not use return FALSE to block the default event, reset will reset the value of Form.test to 1    return false;} Form.onsubmit= function() {Form.test.value= "3";}</Script>

Form methods

Submit () method

In JavaScript, invoking the Submit () method programmatically can also submit a form. Also, this method does not require the form to contain the Submit button, and the form can be submitted normally at any time

The submit event is not triggered when a form is submitted by invoking the Submit () method

Reset () method

When the user clicks the Reset button, the form is reset. The reset button can be created using <input> or <button> with the type attribute value of "reset"

<type= "reset"  value= "Reset Form"><  type= "reset">reset Form</button> 

Unlike invoking the Submit () method, calling the Reset () method triggers the reset event as if the reset button was clicked

After clicking the External submit button, the browser URL becomes file:///C:/inetpub/wwwroot/test.html?test=1# without triggering the OnReset event, and the value of input does not change

When you click the External reset button, the reset event is triggered, and the value of input becomes 2

<formname= "form"Action="#">    <inputname= "Test"value= "1"></form><ButtonID= "BTN1">External submissions</Button><ButtonID= "BTN2">External reset</Button><Script>varform=Document.form;form.onreset= function() {Form.test.value= "2"; return false;} Form.onsubmit= function() {Form.test.value= "3";} Btn1.onclick= function() {form.submit ();} Btn2.onclick= function() {Form.reset ();}</Script>

In-depth understanding of Form Scripting Series first-form objects