In Javascript, each pair of tags on the page is parsed into an object, the form object. You can use document.forms to obtain a collection of all form objects in the document arranged in source order. If a form object is defined as follows: Method to obtain the form object: i> document. forms["frm1"]; // According to the name attribute value ## ii> document.forms[0]; // According to the index number iii> document.frm1; // Get the object directly based on the name value ##form form should pay attention to Properties: elements: Gets a collection of all controls in the given form in source order. But the object is not in this collection. #var txtName = myform.elements[0]; //Get the first element of the form var txtName = myform.elements["txtName"]; //Get the element whose name attribute value is "txtName" var txtName = myform.elements.txtName; //Get the element whose name attribute value is "txtName" # #enctype: Sets or gets the Multipurpose Internet Mail Extensions (MIME) encoding of the form. being ‐ being’s ’ s ’ s ’ s ’ s being being set to: multipart/form-data tag in the form: The text description of each form element should use mark! This tag is used to bind text to the corresponding form element. Its for attribute specifies the id value of the form element to which it is bound. After binding, click the text and the mouse will focus on the corresponding text box or select the corresponding option. If certain desktop themes are installed, some form elements will also change color to provide prompts, which greatly improves the user experience. Sample code: ## Click and I will focus on the text box ## ## Click and I will select the radio button ## Click and I will check the box## Note: i > Each form element should try to use the tag to improve user experience; ii > Each Each form element should be assigned a name attribute and an id attribute. The name attribute: used to submit data to the server; The id attribute: used to perform corresponding operations on the client; such as: label binding, CSS selector The use of etc. (The name attribute and id attribute should use the same or related values whenever possible.) On the client side, Javascript handles forms and form elements For operations, it is preferred to use its name attribute. Because, for some specific form elements (such as radio buttons, etc.), it is easier to obtain the element value using its name attribute, and it is also more convenient to transmit data to the server! Javascript operates form form elements, less commonly used attributes: defaultChecked sets or gets the check box or radio button status. defaultValue sets or gets the initial content of the object. disabled Sets or gets the status of the control. Submit form Example of submitting form: ## < ;form name="frm" method="post" action="javascript:alert('Submission successful!');"> Onclick = "docment.Forms ['FRM']. Submit (); onclick="this.disabled=true; this.form.submit();"> ##Note: i > If you use the submit() method to submit the form, the onsubmit event of the form element will not be triggered, This is different from submitting elements with ; ii > You can use the disabled attribute in the submit or click event of the button to disable the user from repeatedly clicking submit Button behavior, Reduce the response burden on the server; Set text box i > Control Number of characters in the text box ##</p> <p><br></p>function LessThan(_textArea){<table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td> //Returns the boolean value of whether the number of characters in the text box is required by the symbol </td></tr> <tr><td> return _textArea.value .length < _textArea.getAttribute("maxlength");</td></tr><tr><td>}</td></tr><tr><td> Text box: ## ##< label for="comments">Multi-line text box: ## Note: The maxlength in the multi-line text box is a custom attribute; if characters are entered in <textarea>, line breaks are also counted as one character;</p> <p> </p> <p><br></p> <p>ii > When the mouse passes over, the text box is automatically selected</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"> <td><script language="javascript"></td> </tr> <tr><td>window.onload = function(){</td></tr> <tr>## var txtName = document. getElementsByName("myName")[0];<td></td> </tr>## txtName.onmouseover = function(){<tr><td></td></tr> this.focus();<tr><td></td></tr> };<tr><td></td></tr> txtName.onfocus = function(){<tr><td></td></tr> this.select(); <tr> <td></td>## };</tr> <tr> <td></td>}</tr> <tr> <td></td></script></tr> <tr> <td></td><INPUT TYPE="text" NAME="myName" value="Default value is selected" /></tr> <tr><td></td></tr> </tbody></table> <p>Achieves the separation of behavior and structure. <br></p> <p></p> <p></p> <p>Set the radio button<br></p>Get the selected radio button & set the radio button to be selected<p></p> <p></p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><script language="javascript"><tbody> <tr class="firstRow"> <td></td>//Get the selected item</tr> <tr> <td></td>function getChoice(){</tr> <tr> <td></td> var oForm = document.forms["myForm1"];</tr> <tr> <td></td> // radioName is the name attribute value of the radio button</tr> <tr><td>## var aChoices = oForm.radioName;</td></tr> <tr> <td> //Traverse the entire radio option table</td> </tr> <tr><td> for(i=0;i<aChoices.length;i++) </td></tr> <tr>## if(aChoices[i].checked) <td></td> </tr> <tr> break; //Exit if the selected item is found<td></td> </tr> <tr> alert("What you selected is:"+aChoices[i].value);<td></td> </tr> <tr>}<td></td> </tr> <tr>//Set the selected item<td></td> </tr> <tr>function setChoice(_num){<td></td> </tr> <tr> var oForm = document.forms["myForm1"];<td></td> </tr> <tr> //radioName is the name attribute value of the radio button<td></td> </tr> <tr> oForm.radioName[_num].checked = true; //The checked value of other options will be automatically set to false<td></td> </tr> <tr>}<td></td> </tr> <tr></script><td> //Call code</td> <input type="button" value="Get the selected item" onclick="getChoice();" /></tr><input type="button" value="Set the first item to be selected" onclick=" setChoice(0);" /><tr><td> <br><br><p><br></p> <p>You need to ensure that the name attribute value of the same group of radio buttons is the same. </p> <p> </p> <p><br></p> <p>Set the check box</p> <p>Set the check box's "select all", "unselect all" and "inverse selection" Function</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow">##<script language="javascript"><td></td> </tr>##function changeBoxes( _action){<tr><td></td></tr> var myForm = document.forms["myForm1"];<tr><td></td></tr> //myCheckbox is the name attribute of all check boxes Value<tr> <td></td>## var oCheckBox = myForm.myCheckbox;</tr> <tr> <td></td> </tr> <tr> <td></td> for(var i=0 ;i<oCheckBox.length;i++) //Iterate through each option</tr> <tr><td>## if(_action < 0)//Reverse selection</td></tr> <tr>## oCheckBox [i].checked = !oCheckBox[i].checked;<td></td> </tr> <tr> else <td></td> </tr>## When 0, none are selected<tr><td></td></tr> oCheckBox[i].checked = _action;<tr><td></td></tr>}<tr><td></td></tr></script><tr> <td></td>##<form name="myForm1"></tr> <tr><td>##<input type="checkbox" name ="myCheckbox">aa</td></tr> <tr>##<input type="checkbox" name="myCheckbox">bb<td></td> </tr> <tr><input type="button" value="Select all" onclick="changeBoxes(1);" /><td></td> </tr> <tr><input type="button" value="Select none" onclick="changeBoxes(0);" /><td></td> </tr> <tr><input type="button" value="Inverse selection" onclick="changeBoxes(-1);" /> <td></td> </tr> <tr></form><td></td> </tr> <tr> <p><br></p> <p> </p> <p><br></p> <p>Set the drop-down list box</p> <p>The multiple attribute of the drop-down list box is used to set or get the drop-down list Whether the box can select multiple options. </p> <p>The drop-down list box can only select one item by default. If you want to set it to select multiple items, then <select multiple = "multiple">. </p> <p>type attribute: JavaScript language obtains the type of the drop-down list box select control based on the value of the type attribute. </p> <p>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) </p> <p>i > View the options of the drop-down list box (single option & multiple options)</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow">##<script language="javascript"><td></td> </tr> <tr> function getSelectValue(_myselect){<td></td> </tr> <tr> var oForm = document.forms["myForm1"];<td></td> </tr> <tr> //According to parameters (drop-down list box name attribute value) to get the drop-down menu item<td></td> </tr> <tr> var oSelectBox = oForm.elements[_myselect];<td></td> </tr> <tr> //Determine whether it is a radio selection or Multiple selection<td></td> </tr> <tr> if(oSelectBox.type == "select-one"){<td></td> </tr> <tr> var iChoice = oSelectBox.selectedIndex; //Get Selected items<td></td> </tr> <tr> alert("Single selection, you selected" + oSelectBox.options[iChoice].text);<td></td> </tr> <tr> }<td></td> </tr> <tr> else{<td></td> </tr>## var aChoices = new Array();<tr> <td></td>## //Traverse the entire drop-down menu </tr> <tr> <td></td> for(var i=0;i<oSelectBox.options.length;i++)</tr> <tr> <td></td> if(oSelectBox.options[i]. selected)//If selected</tr> <tr> <td></td> );</tr> <tr> <td></td> //Output result</tr> <tr> <td></td> alert("Multiple selection, you selected:" + aChoices.join());</tr> <tr> <td></td> }</tr> <tr> <td></td>}</tr> <tr> <td></td></script></tr> <tr> <td></td><form method="post" name="myForm1"></tr> <tr><td>##<select id="mysel" name="mysel" multiple="multiple" style ="height:60px;"></td></tr> <tr>## option value="b">BB</option><td></td> </tr> <tr> <option value="c">CC</option><td></td> </tr> <tr></select><td></td> </tr>##<input type="button" onclick="getSelectValue('mysel')" value="View options" /><tr><td></td></tr> <tr><td></td></tr> <tr><td>ii > Add options to the drop-down list box</td></tr>Append new options to the end<tr><td></td></tr> </tbody></table> <p><br><script language="javascript"></p> <p></p>##function AddOption(Box){ // Append options to the end <p></p> <p></p> var oForm = document.forms["myForm1"];<p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"> var oBox = oForm.elements[Box]; <tbody> <tr class="firstRow"><td>## var oOption = new Option("ping pong","Pingpang");</td></tr> <tr><td> oBox.options[oBox.options.length] = oOption;</td></tr> <tr><td>}</td></tr> <tr>##</script><td></td> </tr>##<p><br></p> <p>Insert new options into the specified position</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow">##<script language="javascript" ><td></td> </tr>##function AddOption(_select,_num){<tr><td></td></tr> var oForm = document.forms["myForm1"];<tr><td></td></tr> var oBox = oForm.elements[_select];<tr><td></td></tr> var oOption = new Option("text value","value value");<tr> <td></td> </tr> //Compatible with IE7, add options to the end first, then move them<tr> <td></td>## oBox.options[oBox.options.length] = oOption;</tr> <tr> <td></td> oBox.insertBefore(oOption,oBox.options[_num]);</tr> <tr> <td></td>}</tr> <tr><td>##< /script></td></tr> <tr><td><input type="button" value="Add table tennis" onclick="AddOption('myselect',1);" /></td></tr> <tr><td></td></tr> </tbody></table>#Note: If you directly use the insertBefore() method to insert options, an empty option bug will appear in IE. In order to solve this bug in IE, you can only append the new option to the end, and then use the insertBefore() method to move it to the corresponding position. <p><br> </p> <p></p> <p></p>Similar to this: In order to bypass certain bugs or limitations of the browser and achieve the intended purpose, small tricks are usually called hacks. <p><br> </p> <p>iii > Replace an option</p> <p></p> <p></p> <p><br>##<script language="javascript "></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow">//Replacement option<td></td> </tr> <tr>function ReplaceOption(_select,_num){<td></td> </tr> <tr> var oForm = document.forms["myForm1"];<td></td> </tr>## var oBox = oForm.elements[_select];<tr><td></td></tr> var oOption = new Option("text value","value value");<tr><td></td></tr> oBox.options[_num] = oOption; //Replace the _numth option<tr><td></td></tr>}<tr><td></td></tr></script><tr> <td></td>##<input type="button" value="Replacement option" onclick ="ReplaceOption('selName',1);" /></tr> <tr><td></td></tr> <tr><td>## Pass oBox.options[_num] = oOption directly The new option created replaces the option at the specified location. </td></tr> </tbody></table>iv > Delete an option<p><br></p> <p></p> <p></p>##<script language="javascript "><p></p> <p><br>function RemoveOption(_select,_num){</p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody>## var oForm = document.forms["myForm1"];<tr class="firstRow"> <td></td> </tr> var oBox = oForm.elements[_select];<tr><td></td></tr> oBox.options[_num] = null; //Delete options<tr><td> </td></tr>}<tr><td></td></tr></script><tr> <td></td>##</head></tr> <tr> <td> </td><body></tr> <tr><td>##<select id="mysel" name="mysel" multiple="multiple"></td></tr> <tr><td>......</td></tr> <tr>##<input type="button" value="Remove option" onclick="RemoveOption('mysel',1);" /><td></td> </tr> <tr><td></td></tr> <tr>Delete options directly through oBox.options[_num] = null. <td></td> </tr> </tbody></table> </tbody> </table> </tr> </tbody></table> </td></tr> </tbody> </table> </tr> </tbody></table> </tr> </tbody> </table>
