1. Introduction to the form
Form<form> is one of the most interactive forms in web pages. It receives user data through various forms, including drop-down list boxes, radio buttons, check boxes and text boxes. This article mainly introduces commonly used properties and methods in forms.
JavaScript can be very convenient to operate forms, 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, form objects. These objects can be referenced through the document.forms collection. For example, a form with a nama attribute of form1 can be used
Copy the code as follows: document.forms["form1"]
Not only that, you can also refer to form objects through the index of the form in the document. For example
Copy the code as follows: document.forms[1]
Represents the second form object in the reference document
The following is a form element that contains multiple form elements, each element has a label tag, bound to the element, so that by clicking on the text, you can set it and select it to the table, improving the user experience.
The code copy is as follows:
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">Please enter your name:</label><br><input type="text" name="name" id="name"></p>
<p><label for="passwd">Please enter your password:</label><br><input type="password" name="passwd" id="passwd"></p>
<p><label for="color">Please 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>Please 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 to do:<br>
<input type="checkbox" name="hobby" id="book" value="book"><label for="book">reading</label>
<input type="checkbox" name="hobby" id="net" value="net"><label for="net">On the Internet</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">Sleep</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>
Usually each form element should have name and id attributes, name is used to hand over to the server, and id is used for binding and function filtering.
2. Access elements in the form
Elements in the form, whether text boxes, radio buttons, drop-down buttons, drop-down list boxes or other content, are included in the form elements collection. You can use the position of the element in the collection or the name attribute of the element to obtain a reference to the element.
The code copy is as follows:
var oForm = document.forms["form1"]//Get form
var etextForm = oForm.elements[0]; //Get the first element
var etextPasswd = oForm.elements["passwd"] //Get the element with the name attribute passwd
Quote the most effective and intuitive method:
Copy the code as follows: var ethtcomments = oForm.elements.comments; //Get the element with the name attribute comments
3. Public properties and methods
All elements in the form (except hidden elements) have some common properties and methods. Here are some commonly used lists
The code copy is as follows:
var oForm = document.forms["form1"]; //Get form
var imagestcomments = oForm.elements.comments; //Get the element with the name attribute comments
alert(oForm.type); //View element type
var etextPasswd = oForm.elements["passwd"]; //Get the element with the name attribute passwd
foxtPasswd.focus(); //Focus on specific elements
4. Submission of forms
Submission in form is completed through buttons or pictures with button functions
The code copy is as follows:
<input type="submit" name="btnsubmit" id="btnSubmit" value="Submit">
<input type="image" name="picSubmit" id="picSSubmit" src="Submit.jpg">
When the user presses Enter or clicks one of the buttons, the form can be submitted without additional code. You can use the action attribute in form to detect whether to submit.
Copy the code code as follows:<form method="post" name="form1" action="javascript:alert('submited')"></form>
Users may repeatedly click the submit button during the submission process because the network speed is too slow. This is a huge burden on the server and can be prohibited by using the disabled attribute. For example:
Copy the code as follows:<input type="button" value="Submit" />