DOM Basics Tutorial: Using DOM to Control Forms_Basic Knowledge

1. Form introduction

Form

is one of the most interactive forms on a web page. It receives user data through various forms, including drop-down list boxes, radio buttons, check boxes and text boxes. This article mainly introduces the forms Commonly used attributes and methods
You can easily operate forms in JavaScript, such as obtaining form data for effective verification, automatically assigning values ​​to form fields, processing form events, etc.
At this time, each form is parsed into an object, that is, a form object. These objects can be referenced through the document.forms collection. For example, a form with a nama attribute of form1 can use

Copy code The code is as follows:

document.forms["form1"]

Not only that, you can also reference the form object through its index in the document. For example

Copy code The code is as follows:

document.forms[1]

represents the second form object in the reference document

The following is a form containing multiple form elements. Each element has a label tag and is bound to the element. In this way, the form can be set and selected by clicking on the text, which improves the user experience.

Copy code The code is as follows:

Please enter your name:
< ;/p>

Please enter your password:
< ;/p>

Please choose your favorite color:


红
Green
blue
黄
青
purple

Please select your gender:

male

female

What do you like to do:

Reading
online
sleep

I want to leave a message:

Usually each form element should have name and id attributes, name is used to hand it over to the server, and id is used for binding and function filtering.

2. Access elements in the form

The elements in the form, whether text boxes, radio buttons, drop-down buttons, drop-down list boxes or other content, are included in the elements collection of the form. You can use the position of the element in the collection or the name attribute of the element to Get a reference to this element.

Copy code The code is as follows:

var oForm = document.forms["form1"]//Get the form
          var otextForm = oForm.elements[0]; //Get the first element
           var otextPasswd = oForm.elements["passwd"] //Get the element whose name attribute is passwd

Quote using the most effective and intuitive method:

Copy code The code is as follows:

var otextcomments = oForm.elements.comments; //Get the name attribute as comments element

3. Public properties and methods

All elements in the form (except hidden elements) have some common attributes and methods. Here are some commonly used ones

Copy code The code is as follows:

var oForm = document.forms["form1"]; //Get the form
                 var otextcomments = oForm.elements.comments; //Get the element whose name attribute is comments
               alert(oForm.type); //View element type
                var otextPasswd = oForm.elements["passwd"]; //Get the element whose name attribute is passwd
​​​​​​otextPasswd.focus(); //Focus on a specific element

4. Submission of form

Submission in the form is completed through buttons or images with button functions

Copy code The code is as follows:

          

When the user presses the Enter key or clicks one of the buttons, the form submission can be completed without additional code. You can check whether to submit through the action attribute in the form.

Copy code The code is as follows:

During the process of submitting the form, the user may click the submit button repeatedly due to slow network speed, which is a huge burden on the server. This behavior can be prohibited by using the disabled attribute. For example:

Copy code The code is as follows: