Dom (eight) using the DOM control form

1. Introduction to the form

Form <form> is one of the most interactive forms of web pages, it receives user's data in various forms, including drop-down list box, radio button, check box and text box, this article mainly introduces the properties and methods commonly used in the form
JavaScript makes it easy to manipulate forms, such as obtaining form data for effective validation, automatically assigning values to form fields, handling form events, and so on.
At this point each form resolves to an object, the Form object, which can be referenced by the Document.forms collection, such as a form with a Nama property of Form1 that can be used

Document.forms["Form1"]

Not only that, you can also refer to a Form object by its index in the document. For example

DOCUMENT.FORMS[1]

Represents the second form object in a reference document

The following is a multiple form element, each of which has a label tag and is bound to the element so that the user experience is enhanced by clicking on the text to make and select the table.

<formMethod= "POST"name= "MyForm1"Action= "Addinfo.aspx"><P><label for= "Name">Please enter your name:</label><BR><inputtype= "text"name= "Name"ID= "Name"></P><P><label for= "passwd">Please enter your password:</label><BR><inputtype= "Password"name= "passwd"ID= "passwd"></P><P><label for= "Color">Please choose your favorite color:</label><BR><Selectname= "Color"ID= "Color">    <optionvalue= "Red">Red</option>    <optionvalue= "Green">Green</option>    <optionvalue= "Blue">Blue</option>    <optionvalue= "Yellow">Yellow</option>    <optionvalue= "Cyan">Green</option>    <optionvalue= "Purple">Purple</option></Select></P><P>Please choose your gender:<BR>    <inputtype= "Radio"name= "Sex"ID= "Male"value= "Male"><label for= "Male">Man</label><BR>    <inputtype= "Radio"name= "Sex"ID= "female"value= "female"><label for= "female">Woman</label></P><P>What do you like to do:<BR>    <inputtype= "checkbox"name= "Hobby"ID= "book"value= "book"><label for= "book">Reading</label>    <inputtype= "checkbox"name= "Hobby"ID= "NET"value= "NET"><label for= "NET">Internet</label>    <inputtype= "checkbox"name= "Hobby"ID= "Sleep"value= "Sleep"><label for= "Sleep">Go to bed</label></P><P><label for= "Comments">I want to leave a message:</label><BR><textareaname= "Comments"ID= "Comments"cols= "+"rows= "4"></textarea></P><P><inputtype= "Submit"name= "Btnsubmit"ID= "Btnsubmit"value= "Submit"><inputtype= "Reset"name= "Btnreset"ID= "Btnreset"value= "Reset"></P></form>

Typically each form element should have a name and id attribute, name is given to the server, and the ID is used for binding and feature filtering.

2. Accessing elements in a form

Elements in a form, whether text boxes, radio buttons, drop-down buttons, drop-down list boxes, or other content, are included in the elements collection of a form, and can be used to obtain a reference to an element by its position in the collection or by the element's Name property.

var oform = document.forms["Form1"]//get form        var otextform = oform.elements[0];//Get first element        var otextpasswd = oform.elements["passwd"]//Gets the element with the Name property of passwd

The most efficient and intuitive way to use is to refer to:

var otextcomments = oForm.elements.comments; Gets the element with the Name property of comments

3. Public properties and methods

All elements in the form (except the hidden elements) have some common properties, methods. Here are some common lists

var oform = document.forms["Form1"]; Get form            var otextcomments = oForm.elements.comments;//Get the name attribute for comments Element            alert (oform.type);//view element type            var otextpasswd = oform.elements["passwd"]; Gets the Name property of the passwd element            Otextpasswd.focus ();//focus on a specific element

4. Submission of the form

The submission in form is done via a button or a picture with a button function

 <  input  type  = "Submit"   name  = "Btnsubmit"   ID  = "Btnsubmit"   = "Submit"         >  <  input  type  = "image"   name  = "Picsubmit"   ID  = "Picssubmit"   src  = "Submit.jpg"  >  

When the user presses the ENTER key or clicks one of the buttons, they can complete the form submission without additional code. You can detect whether or not to commit by using the Action property in form.

<method= "POST"  name= "Form1"  action= "javascript : Alert (' submited ') "></form>

Users may repeatedly click the Submit button during the submission of a form because of slow speed, which is a huge burden to the server and can be prevented by using the disabled property. For example:

<type= "button"  value= "Submit"  onclick= " This.disabled=ture;this.form.submit (); " />

Dom (eight) using the DOM control form