In-depth analysis of HTML form tags

In Javascript, each <form> tag on the page is parsed as an object, that is, a form object.

You can use document. forms to obtain a set of All form objects in the document in the source order.

If a form object is defined as follows:

<form name="frm1" method="post" action="login.aspx">

Method to obtain the form object:

Document. forms ["frm1"]; // document. forms [0] based on the name attribute value; // document. frm1 Based on the index number; // obtain the object directly based on the name value

Attributes that should be noted for form forms

Elements: gets the set of all controls in a given form in the source order. However, the <input type = "image"> object is not in this set.

Var txtName = myform. elements [0]; // obtain the first element var txtName = myform. elements ["txtName"]; // obtain the element var txtName = myform.elements.txt name whose Name attribute value is "txtName"; // obtain the element whose name attribute value is "txtName"

Enctype: sets or obtains the multi-purpose Internet Mail Extension (MIME) encoding of the form. The default value of this attribute is application/x-www-form-urlencoded. to upload a file, set it to multipart/form-data.

Label in form

The <label> label should be used for the text description of each form element.

This tag is used to bind text to the corresponding form element. Its for Attribute specifies the id value of the form element to bind. After binding, click the text, and the mouse will focus on the corresponding text box or select the corresponding option.

If some desktop themes are installed, some form elements will change the color to be prompted, which greatly improves the user experience.

Sample Code:

<Form method = "post" name = "frm1"> <label for = "txt"> click I will focus on the text box </label> <input type = "text" id = "txt" name = "myname"> <br/> <label for = "rdo"> click I will select a single partition </label> <input type = "radio" id =" rdo "name =" male "/> <br/> <label for =" cbo "> click I will select the check box </label> <input type =" checkbox "id =" cbo "name =" holobby "> </form>

Note:

• Each form element should use the <label> label whenever possible to improve the user experience;
• Each form element should be assigned the name and id attributes. Name attribute: Used to submit data to the server. id attribute: used to perform operations on the client. For example, <label> label binding and CSS selector usage. (The name and id attributes should use the same or related values as much as possible .)

On the client side, Javascript operations on forms and form elements prefer to use the name attribute. For some specific form elements (such as single-choice buttons), it is easier to obtain element values by using the name attribute and transfer data to the server!

Javascript is used to operate form elements with fewer attributes:

• DefaultChecked sets or obtains the status of check boxes or radio buttons.
• DefaultValue is used to set or obtain the initial content of an object.
• Disabled sets or gets the control status.

Submit Form

Example of submitting a form:

<Form name = "frm" method = "post" action = "javascript: alert ('submitted successfully! '); "> <Input type =" button "value =" Submit function "onclick =" document. forms ['frm']. submit (); "> <input type =" button "value =" Disable repeated submission "onclick =" this. disabled = true; this. form. submit (); "> </form>

Note:

• If you use the submit () method to submit a form, the onsubmit event of the <form> form element is not triggered, which is different from that of the <input type = "submit"> submit element;
• You can use the disabled attribute in the button submission or click event to disable repeated clicking of the submit button, reducing the server's response burden;

Set text box

Control the number of characters in the text box:

<Script language = "javascript"> function LessThan (_ textArea) {// return the boolean value required for the number of characters in the text box, return _ textArea. value. length <_ textArea. getAttribute ("maxlength") ;}</script> <label for = "name"> text box: </label> <input type = "text" name = "name" id = "name" value = "name" maxlength = "10"> </p> <br> <label for = "comments"> multi-line text box: </label> <textarea name = "comments" id = "comments" cols = "40" rows = "4" maxlength = "50" onkeypress = "return LessThan (this ); "> </textarea>

Note: maxlength in the multi-line text box <textarea> is a custom attribute. If you enter a character in <textarea>, the line feed is also a character;

When the mouse passes, the text box is automatically selected:

<Script language = "javascript"> window. onload = function () {var txtName = document. getElementsByName ("myName") [0]; txtName. onmouseover = function () {this. focus () ;}; txtName. onfocus = function () {this. select () ;}</script> <input type = "text" NAME = "myName" value = "default value selected"/>

Separated behavior and structure.

Set radio button

Obtain and set the selected radio button:

<Script language = "javascript"> // obtain the selected function getChoice () {var oForm = document. forms ["myForm1"]; // radioName is the name attribute value of a single-choice button. var aChoices = oForm. radioName; // traverse the entire Single-choice table for (I = 0; I <aChoices. length; I ++) if (aChoices [I]. checked) break; // exit alert if a selected item is found ("You selected:" + aChoices [I]. value);} // set the selected function setChoice (_ num) {var oForm = document. forms ["myForm1"]; // radioName is the name attribute value of the single-choice button oForm. radioName [_ num]. checked = true; // The checked value of other options is automatically set to false} </script> // call the code <input type = "button" value = "get selected item" onclick = "getChoice (); "/> <input type =" button "value =" set the 1st items to be selected "onclick =" setChoice (0); "/>

Make sure that the attribute values of the same group of radio buttons are the same.

Set check boxes

Set the "select all", "do not select all" and "reselect" functions of the check box:

<Script language = "javascript"> function changeBoxes (_ action) {var myForm = document. forms ["myForm1"]; // myCheckbox is the name attribute value of all check boxes var oCheckBox = myForm. myCheckbox; for (var I = 0; I <oCheckBox. length; I ++) // traverse every option if (_ action <0) // reselect oCheckBox [I]. checked =! OCheckBox [I]. checked; if the value of else // _ action is 1, all items are selected. If the value is 0, no oCheckBox [I] is selected. checked = _ action ;} </script> <form name = "myForm1"> <input type = "checkbox" name = "myCheckbox"> aa <input type = "checkbox" name = "myCheckbox"> bb <input type = "button" value = "select all" onclick = "changeBoxes (1 ); "/> <input type =" button "value =" NONE "onclick =" changeBoxes (0 ); "/> <input type =" button "value =" invert "onclick =" changeBoxes (-1); "/> </form>

Set drop-down list box

The multiple Attribute of the drop-down list box is used to set or obtain whether multiple options can be selected in the drop-down list box.

The drop-down list can only be selected by default. To select multiple items, <select multiple = "multiple">.

Type attribute: The javascript language obtains the type of the select control in the drop-down list box based on the value of the type attribute.

The value of the type attribute is select-multiple or select-one (note: the type of the drop-down list box is controlled by the multiple attribute ).

View the options in the drop-down list box (single option & multiple options ):

<Script language = "javascript"> function getSelectValue (_ myselect) {var oForm = document. forms ["myForm1"]; // obtain the drop-down menu item var oSelectBox = oForm Based on the parameter (name attribute value of the drop-down list. elements [_ myselect]; // determines whether to select one or multiple if (oSelectBox. type = "select-one") {var iChoice = oSelectBox. selectedIndex; // obtain the selected alert ("single choice, you selected" + oSelectBox. options [iChoice]. text);} else {var aChoices = new Array (); // traverse the entire drop-down menu for (var I = 0; I <oSelectBox. options. length; I ++) if (oSelectBox. options [I]. selected) // If selected // press into the array aChoices. push (oSelectBox. options [I]. text); // output result alert ("select multiple, you have selected:" + aChoices. join ());}} </script> <form method = "post" name = "myForm1"> <select id = "mysel" name = "mysel" multiple = "multiple" style = "height: 60px; "> <option value =" a "> AA </option> <option value =" B "> BB </option> <option value =" c "> CC </option> </select> <input type = "button" onclick = "getSelectValue ('mysel ') "value =" view options "/>

Option to add the drop-down list box

Append new options to the end:

<Script language = "javascript"> function AddOption (Box) {// append option to the end var oForm = document. forms ["myForm1"]; var oBox = oForm. elements [Box]; var oOption = new Option ("Table Tennis", "Pingpang"); oBox. options [oBox. options. length] = oOption ;}</script>

Insert new options to the specified position:

<Script language = "javascript"> function AddOption (_ select, _ num) {var oForm = document. forms ["myForm1"]; var oBox = oForm. elements [_ select]; var oOption = new Option ("text value", "value"); // compatible with IE7, add the Option to the end and move the oBox. options [oBox. options. length] = oOption; oBox. insertBefore (oOption, oBox. options [_ num]) ;}</script> <input type = "button" value = "Add Table Tennis" onclick = "AddOption ('myselect', 1);"/>

Note: If you directly use the insertBefore () method to insert an option, an empty option bug will appear in IE. To solve this bug of IE, you can only append the new option to the end, and then use the insertBefore () method to move it to the corresponding position.

Similar to this: to skip some bugs or restrictions in the browser, hack is usually used to achieve the intended purpose.

Replace an option:

<Script language = "javascript"> // replace option function ReplaceOption (_ select, _ num) {var oForm = document. forms ["myForm1"]; var oBox = oForm. elements [_ select]; var oOption = new Option ("text value", "value"); oBox. options [_ num] = oOption; // Replace the _ num option }</script> <input type = "button" value = "replace option" onclick = "ReplaceOption ('selname', 1 ); "/>

Use oBox. options [_ num] = oOption to directly replace the created option with the option at the specified position.

Delete an option:

<Script language = "javascript"> function RemoveOption (_ select, _ num) {var oForm = document. forms ["myForm1"]; var oBox = oForm. elements [_ select]; oBox. options [_ num] = null; // delete option} </script>  
Use oBox. options [_ num] = null to delete the option.