Basic DOM Tutorials: Using DOM control forms

Basic DOM Tutorials: Using DOM control forms

1. Form Overview

Form <form> is one of the most interactive forms on a webpage. It receives user data in various forms, including drop-down list boxes, single-choice buttons, check boxes, and text boxes, this topic describes common attributes and methods in a form.
In javascript, you can easily operate forms, such as obtaining form data for effective verification, automatically assigning values to form fields, and Processing Form Events.
In this case, each form is parsed as an object, that is, a form object. These objects can be referenced through the document. forms set. For example, a form with the nama attribute of form1 can be used

Copy codeThe Code is as follows: document. forms ["form1"]

In addition, you can reference the form object through the index of the form in the document. For example

Copy codeThe Code is as follows: document. forms [1]

The second form object in the reference document.

The following is a form element that contains multiple forms. Each element is labeled with a label and bound to an element. by clicking the text, you can specify and select a table to improve the user experience.

Copy codeThe Code is as follows:
<Form method = "post" name = "myForm1" action = "addInfo. aspx">
<P> <label for = "name"> enter your name: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<P> <label for = "passwd"> enter your password: </label> <br> <input type = "password" name = "passwd" id = "passwd"> </p>
<P> <label for = "color"> select your favorite color: </label> <br>
<Select name = "color" id = "color">
<Option value = "red"> red </option>
<Option value = "green"> green </option>
<Option value = "blue"> blue </option>
<Option value = "yellow"> yellow </option>
<Option value = "cyan"> Qing </option>
<Option value = "purple"> purple </option>
</Select> </p>
<P> select your gender: <br>
<Input type = "radio" name = "sex" id = "male" value = "male"> <label for = "male"> male </label> <br>
<Input type = "radio" name = "sex" id = "female" value = "female"> <label for = "female"> female </label> </p>
<P> what do you like: <br>
<Input type = "checkbox" name = "holobby" id = "book" value = "book"> <label for = "book"> reading </label>
<Input type = "checkbox" name = "holobby" id = "net" value = "net"> <label for = "net"> surfing the Internet </label>
<Input type = "checkbox" name = "holobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleeping </label> </p>
<P> <label for = "comments"> I want to leave a message: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p>
<P> <input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit">
<Input type = "reset" name = "btnReset" id = "btnReset" value = "Reset"> </p>
</Form>

Generally, each form element should have the name and id attributes. name is used for handing over to the server, and id is used for binding and functional filtering.

2. Access elements in the form

Elements in the form, whether in the text box, single-choice button, drop-down button, drop-down list box, or other content, are included in the form's elements set, you can use the position of an element in the set or the name attribute of the element to obtain the reference of this element.

Copy codeThe Code is as follows:
Var oForm = document. forms ["form1"] // obtain the form
Var otextForm = oForm. elements [0]; // obtain the first element
Var otextPasswd = oForm. elements ["passwd"] // gets the element whose name attribute is passwd.

Reference the most effective and intuitive method:

Copy codeThe Code is as follows: var otextcomments = oForm. elements. comments; // gets the element whose name attribute is comments.

3. Public attributes and Methods

All elements (except hidden elements) in a form have common attributes and methods. Here we will list some common

Copy codeThe Code is as follows:
Var oForm = document. forms ["form1"]; // obtain the form
Var otextcomments = oForm. elements. comments; // gets the element whose name attribute is comments.
Alert (oForm. type); // view the element type
Var otextPasswd = oForm. elements ["passwd"]; // gets the element whose name attribute is passwd.
OtextPasswd. focus (); // focus on a specific element

4. Form submission

The submission in form is completed through buttons or images with button functions.

Copy codeThe Code is as follows:
<Input type = "submit" name = "btnsubmit" id = "btnSubmit" value = "Submit">
<Input type = "image" name = "picSubmit" id = "picSSubmit" src = "Submit.jpg">

When you press the Enter key or click a button, the form can be submitted without additional code. You can use the action attribute in form to check whether a request is submitted.

Copy codeThe Code is as follows: <form method = "post" name = "form1" action = "javascript: alert ('submited')"> </form>

When submitting a form, the user may repeatedly click the submit button because the network speed is too slow, which is a great burden on the server. You can disable this behavior by using the disabled attribute. For example:

Copy codeThe Code is as follows: <input type = "button" value = "Submit"/>