1 Forms (form) objects
The Form object represents a single HTML form. The HTML has a <form> tag, and a Form object is created.
Forms are used to prompt the user for input, and the input data is generally sent to the server for processing.
A collection of Form objects
Collection description
Elements[] contains an array of all the elements in the form.
Properties of the Form object
Property Description
Acceptcharset the acceptable character set of the server.
The action sets or returns the URL of the input data that will be submitted.
Enctype Sets or returns the MIME type that the form uses to encode content.
ID Sets or returns the ID of the form.
Length returns the number of elements in the form.
method sets or returns the way data is submitted to the server ("get" or "post").
Name Sets or returns the names of the forms.
Target sets or gets the target content to display in which window or frame
Methods for Form objects
Method description
Reset () Resets all elements in the form to the default values.
Submit () Submission form.
Event for Form Object
Event Handle Description
OnReset executes some code when the reset event occurs.
OnSubmit executes some code when a commit event occurs.
As long as a submit button is in the form, pressing ENTER will trigger the form's OnSubmit event by default.
2 Button Object
The button object represents one of the buttons in an HTML document that does not have a default behavior, but must have an OnClick event handle for use.
In the HTML document <input type= "button" > label every time a button object is created.
You can access the button object by using either the getElementById () or the number or name of the table cell Prime group.
The properties of the Button object
AccessKey Sets or returns the shortcut key for the Access button.
Disabled sets or returns whether the button is available.
Form returns a reference to the form that contains the button.
ID Sets or returns the ID of the button.
Name Sets or returns the names of the buttons.
TabIndex Sets or returns the tab control order of the button.
Type returns the button types in the form.
Value Sets or returns whether the button text is displayed
Method of the Button object
Blur () Moves the focus away from the element.
Click () to simulate a mouse click on a button.
Focus () gives a button a focal point.
3Checkbox objects
The checkbox object can represent a checkbox (check box) in an HTML form. Whenever a <input type= "checkbox" > tag appears in an HTML form, a CheckBox object is set up.
You can access the Checkbox object through an element array index or by using getElementById ().
Properties of the Checkbox object
Property Description
AccessKey Sets or returns a shortcut key that can access this check box.
ALT Sets or returns alternate text that is displayed when the browser does not support a checkbox.
Checked sets or returns whether the checkbox is selected.
Defaultchecked returns the default value of the Checked property.
Disabled sets or returns whether the check box should be disabled.
The form returns a reference to the form that contains the checkbox.
ID Sets or returns the ID of the checkbox.
Name Sets or returns the names of the checkboxes.
TabIndex Sets or returns the tab control order of the checkbox.
Type returns the form element types for the checkbox.
Value sets or returns the values of the CheckBox property.
<input type= "Radio" value= "No" checked= "false"/> This is not allowed to be unchecked, either do not write the checked property, or
Use the JS code to leave it unchecked.
Method of the Checkbox object
Method description
Blur () Moves the focus away from the checkbox.
Click () mimics mouse clicks in the checkbox.
Focus () adds focus to the checkbox.
CheckBox Object Event
Event description
OnBlur execute some code when the checkbox loses focus
OnClick executes some code when the checkbox is ordered
Onfocus Execute some code when the checkbox gets focused
OnMouseDown execute some code when the mouse button is pressed
OnMouseUp execute some code when the mouse button is released
4FileUpload objects
In the HTML document <input type= "file" > tag each time a FileUpload object is created.
This element contains a text input field that is used to enter the file name and a button to open the File Selection dialog box for a graphical selection of files.
The Value property of the element holds the name of the file specified by the user, but when a form containing a FILE-UPLOAD element is submitted, the browser sends the contents of the selected file to the server, not just the file name.
For security reasons, the File-upload element does not allow the HTML author or JavaScript programmer to specify a default file name. The HTML Value property is ignored, and the Value property is read-only for such elements, which means that only the user can enter a file name. When the user selects or edits a file name, the file-upload element triggers the onchange event.
You can access the FileUpload object through an array of elements or by using getElementById ().
FileUpload Object Properties
Accept to set or return a list of content types, and the server can process the form more accurately.
AccessKey Sets or returns the shortcut keys for accessing FileUpload objects.
ALT Sets or returns alternate text that is displayed when the browser does not support <input type= "file" >.
DefaultValue Sets or returns the initial value of the FileUpload object.
Disabled sets or returns whether the FileUpload object is disabled.
The form returns a reference to the form that contains the FileUpload object.
ID Sets or returns the ID of the FileUpload object.
Name Sets or returns the names of the FileUpload objects.
TabIndex Sets or returns the tab order of the FileUpload object.
Type returns the form element types, and the FileUpload object returns "file".
Value returns the file name of the FileUpload object after the user has entered it.
Methods for FileUpload objects
Method description
Blur () cancels the focus of the FileUpload object
Click () to mimic mouse clicks on the FileUpload object
Focus () lets FileUpload objects get focused
Select () Choose FileUpload Object
Events for FileUpload objects
Event description
OnBlur executing code when the FileUpload object loses focus
OnClick executes the code when the FileUpload object is clicked by the mouse
onfocus executing code when the FileUpload object gets focused
Onselectstart executing code when FileUpload object is selected
5Hidden objects
The Hidden object represents a hidden input field in an HTML form.
This type of input element is actually hidden. The Value property of this invisible form element holds an arbitrary string to be submitted to the WEB server. This type of element is used if you want to submit data that is not directly entered by the user.
When the <input type= "hidden" > Label appears in the HTML form, it means that the hidden object is set up.
You use the element array index (number or name) based on the form, or use getElementById () to access the Hidden object.
Hidden properties of an object
Property Description
The form returns a reference to a form that contains a hidden field.
ID Sets or returns the ID of the hidden field.
Name Sets or returns the names of hidden fields.
Type returns the form type of the hidden input field.
Value Sets or returns the value of the hidden field.
6Password objects
The Password object represents a password field in an HTML form.
HTML <input type= "password" > tags each time a form appears, a password object is created.
The text input field is used by the user to enter some sensitive data, such as a password. When the user enters, his input is masked (for example, using an asterisk *) to prevent the next person from seeing the input content behind him. However, it is important to note that when the form is submitted, the input is sent in clear text.
Similar to an element of type "text", when the user changes the display value, it triggers the onchange event handle.
You can access the Password object based on the number or name of the element group index of the form, or you can use getElementById ().
Password properties of an object
Property Description
AccessKey Sets or returns the keyboard shortcut for accessing the password field.
DefaultValue Sets or returns the default value for the password field.
Disabled sets or returns whether the password field should be disabled.
The form returns a reference to the form that contains this password field.
ID Sets or returns the ID of the password field.
MaxLength Sets or returns the maximum number of characters that can be entered in the Password field.
Name Sets or returns the names of the password fields.
ReadOnly Sets or returns the contents of the Password field as read-only.
Size Sets or returns the length of the password field.
TabIndex Sets or returns the tab control order for the password field.
Type returns the form element type of the password field. Password object is displayed as "password"
Value Sets or returns the value of the password field.
Methods for Password objects
Method description
Blur () cancels the focus of the password field.
Focus () gives the password field a focal point.
Select () Select the text in the password field.
Events for Password objects
Event description
OnBlur executing code when the password field loses focus
OnClick executes the code when the user taps the password field
Onfocus Execute some code when the password field gets focused
OnKeyDown executing code when holding down a key in the password field
OnKeyPress executes some code when a key is pressed and released in the password field
OnKeyUp executes some code when a key is released in the password field
Onselectstart execute some code when the text in the Password field is selected
7Radio objects
The Radio object represents a radio button in an HTML form.
<input type= "Radio" in an HTML form > A Radio object is created every time it appears.
A radio button is one of a set of mutually exclusive option buttons. When a button is selected, the previously selected button becomes unchecked.
When the radio button is selected or unchecked, the button triggers the onclick event.
You can access the Radio object from the number or name of the table cell array, or use Getelmentbyid () to access it.
Radio properties of an object
Property Description
AccessKey Sets or returns a shortcut key to access a radio button.
Checked sets or returns the current state of the radio button (True,false is not selected when selected).
Defaultchecked Sets or returns the default value of the selected property (True if selected by default, or false).
Disabled sets or returns whether the radio button is disabled.
The form returns a reference to the form that contains the radio button.
ID Sets or returns the ID of the radio button.
Name Sets or returns the names of radio buttons.
TabIndex Sets or returns the tab control order of the radio buttons.
The type returns the form element types, and the radio button returns to "Radio".
Value Sets or returns the value of the radio button for the Value property.
Methods for Radio objects
Method description
Blur () Moves the focus away from the radio button.
Click () to simulate mouse clicks on the radio button.
Focus () assigns the spotlight to the radio button.
Events for Radio objects
Event description
OnBlur executing the code when the radio button loses focus
OnClick executes some code when the user clicks the radio button
Onfocus Execute some code when the radio button gets focused
Onselectstart execute some code when the radio button is selected
8Reset objects
The Reset object represents a reset button in an HTML form, and every time the HTML form appears <input type= "reset" > label means that reset is built.
When the reset button is clicked, the values of all input elements in the form containing it are reset to their default values. The default value is specified by the HTML Value property or by the DefaultValue property of JavaScript.
The reset button triggers the onclick event before resetting the form, and the event can be canceled by returning Fasle.
You can access the Reset object from the number or name of the table cell array, or use Getelmentbyid () to access it.
Properties of the Reset object
Property Description
AccessKey Sets or returns the shortcut key that accesses the reset button.
Disabled sets or returns whether the Reset button should be disabled.
The form returns a reference to the Form object that contains this reset button.
ID Sets or returns the ID of the reset button.
Name Sets or returns the names of the reset buttons.
TabIndex Sets or returns the tab control order of the reset button.
Type returns the form element types, and the reset button returns to "reset".
Value Sets or returns the text displayed on the reset button.
Method of the Reset object
Method description
Blur () Moves the focus away from the reset button.
Click () to simulate a mouse click on the reset button.
Focus () focuses the reset button.
Select () Check the radio button
Events for the Reset object
Event description
OnBlur execute some code when the reset button loses focus
OnClick executes some code when the reset button is clicked
Onfocus Execute some code when the reset button gets focused
Onselectstart execute some code when the reset button is selected
9Submit objects
The Submit object represents one of the submit buttons in the HTML form (the Submit button).
In the HTML form <input type= "submit" > tag each time a Submit object is created.
The onclick event is triggered before the form is submitted, and an event can cancel the form submission by returning Fasle.
You can access the Submit object from the number or name of the singular group of the table, or use getElementById to access it.
Properties of the Submit object
Property Description
AccessKey Sets or returns the shortcut key that accesses the Submit button.
Disabled sets or returns whether the Submit button should be disabled.
The form returns a reference to the form that contains the Submit button.
ID Sets or returns the ID of the submit button.
Name Sets or returns the names of the submit buttons.
TabIndex Sets or returns the tab control order of the Submit button.
Type returns the form element, which is the Submit button, and returns "submit".
Value Sets or returns the text that is displayed on the Submit button.
Method of the Submit object
Method description
Blur () Moves the focus away from the submit button.
Click () to simulate a mouse click on the Submit button.
Focus () focuses the submit button.
Select () Check the Submit button
Events for the Submit object
Event description
OnBlur execute some code when the submit button loses focus
OnClick executes some code when the user clicks the Submit button
Onfocus Execute some code when the submit button is focused
Onselectstart execute some code when the Submit button is selected
10Text objects
The text object represents the literal input field in an HTML form.
In the HTML form <input type= "text" > Every time it appears, the text object is created.
The element can create a single line of text input fields. The onchange event is triggered when the user edits the displayed text and then shifts the input focus to other elements.
You can use HTML <textarea> tags to create multiple lines of text input. See Textarea objects.
For password text input, set the type of <input type= "text" > to "Password". See Input Password.
You can access the Text object from the number or name of the singular group of the table, or use Getelmentbyid () to access it
Properties of the Text object
Property Description
AccessKey Sets or returns the shortcut key for accessing the text field.
DefaultValue Sets or returns the default value for the Text field.
Disabled sets or returns whether the text field should be disabled.
The form returns a reference to the Form object that contains the text field.
ID Sets or returns the ID of the text field.
MaxLength Sets or returns the maximum number of characters in a text field.
Name Sets or returns the names of the text fields.
ReadOnly Sets or returns whether the text field should be read-only.
Size Sets or returns the size of the text field.
TabIndex Sets or returns the tab control order of the text field.
The type returns the Text field for the form element types, which is the word field.
Value Sets or returns the value of the text field of Value property.
Text Object method
Method description
Blur () Moves the focus away from the text field.
Focus () sets the focal point on the text field.
Click () to mimic the mouse clicking on the Text field
Select () to select the content in the text field.
Text Event description
OnBlur executes some code when the text field loses focus.
OnChange executes some code when the text field loses focus and its value changes.
OnClick executes some code when the user clicks the left mouse button in the Text field.
Onfocus executes some code when the text field gets focused.
OnKeyDown executes some code when a key is pressed in the text field.
OnKeyPress executes some code when a key is pressed and released in the text field.
OnKeyUp executes some code when the key is released in the text field.
OnSelect executes some code when the currently selected content in the Text field changes.
Onselectstart Execute some code when some text in the Text field is selected.
11Textarea objects
The Textarea object represents a text area (Text-area) in an HTML form. A TextArea object is created in the form <textarea> label every time it appears.
You can access a Textarea object by indexing an array of elements of the appropriate form, or use getElementById ().
Textarea properties of an object
Property Description
AccessKey Sets or returns keyboard shortcuts for accessing textarea.
COLS Sets or returns the width of the textarea (based on the number of words that can be accommodated per line).
DefaultValue Sets or returns the initial content in the text box.
Disabled sets or returns whether TextArea should be disabled.
The form returns a reference to the Form object that contains the textarea.
ID Sets or returns the ID of a textarea
Name Sets or returns the names of textarea.
ReadOnly Sets or returns whether the textarea should be read-only.
Rows Sets or returns the height of the textarea.
TabIndex Sets or returns the tab control order of the textarea.
Type returns the form element types. The TextArea object is returned as "textarea".
Value Sets or returns the text in the textarea.
The TextArea Wrap property defines how the input is displayed when it is larger than the text field, with the following optional values:
* The default value is Text wrap, and when the input exceeds the right edge of the text field, it automatically goes to the next line, and no line breaks appear when the data is wrapped automatically when it is submitted for processing;
* OFF, to avoid text wrapping, when the input exceeds the right border of the text field, the text will scroll to the left, you must use return to move the insertion point to the next line;
* Virtual to allow text to wrap automatically. When the input exceeds the right edge of the text field, it automatically goes to the next line, and no line breaks appear when the data is wrapped automatically when it is submitted;
* Physical, let the text wrap, when the data is submitted to process the newline character will also be submitted together processing.
Methods for Textarea objects
Method description
Blur () Moves the focus away from the textarea.
Click () to mimic mouse clicks in the TEXTAREA
Focus () sets the focal point on the textarea.
Select () selects the text in the textarea.
Events for Textarea objects
Event description
OnBlur execute code when textarea loses focus
OnChange when the textarea loses focus, the contents change and some code is executed.
OnClick executes some code when the left mouse button is clicked in textarea
Onfocus execute code when textarea gets the focus
OnKeyDown execute some code while holding down the key in textarea
OnKeyPress executes some code when textarea presses the key
OnKeyUp executes the code when the button is released in the TEXTAREA
OnSelect execute some code when certain text in textarea is selected
12Select objects
The Select object represents a drop-down list in an HTML form.
In an HTML form, a Select object is created each time a,<select> label appears.
You can access the Select object from the number or name of the singular group of the table, or use Getelmentbyid () to access it
Collection of Select objects
Collection description
Options[] Returns an array of all the options available in the drop-down list.
Properties of the Select object
Property Description
Disabled sets or returns whether the drop-down list should be disabled.
Form returns a reference to a form that contains a drop-down list.
ID Sets or returns the ID of the drop-down list.
Length returns the number of options in the drop-down list.
Multiple Sets or returns whether multiple items are selected.
Name Sets or returns the names of the drop-down lists.
SelectedIndex Sets or gets the position of the selected option in the Select object.
Size Sets or gets the number of rows in the list.
TabIndex Sets or returns the tab control order of the drop-down list.
Type returns the form type of the drop-down list.
Value returns the value of the currently selected item.
Options: reflects an array of each option in the selection list in the order in which they appear.
Selectobj.options[selectobj.selectedindex].text, returns the text of the currently selected item.
The option is selected when the value of the Select element is set to the values of one of the options.
Setting the Select element's Value property to the specified value will allow the corresponding option to be selected, this is not a problem in IE7 and Firefox, only the IE6 error, the solution is to provide a delay through the settimeout to execute this sentence. Such as:
SetTimeout (function () {document.getElementsByTagName ("select") [0].value=setareavalue[2];},1);
Methods for Select objects
Method description
The Add () drop-down list adds an option.
Blur () removes the focus from the drop-down list.
Focus () sets the focal point on the drop-down list.
Remove () removes an option from the drop-down list.
Events for Select objects
Event description
OnBlur execute some code when the drop-down list loses focus
OnChange executes some code when the drop-down list loses focus and its value changes
OnClick when the user clicks the drop-down list to execute some code
onfocus drop-down list gets the focus to execute some code
13Option objects
The option object represents one of the options in the drop-down list in the HTML form.
An option object is created in the HTML form <option> label every time it appears.
You can access the Option object from the number or name of the singular group of the table, or use Getelmentbyid () to access it.
Property Property Description for Option object
defaultselected returns the default value of the selected property.
Disabled whether the set or return option should be disabled.
The form returns a reference to the <form> element that contains the element.
ID Sets or returns the ID of the option.
Index returns the indexed position of an option in the drop-down list.
Label sets or returns the tag of the option (for option group Option-groups only).
Selected Sets or returns the current state of option (whether selected).
Text Sets or returns a plain text value for an option.
Value Sets or returns the value that it contains when the selected option is submitted to the server.
Method of the Option object
Method description
Click () to mimic the mouse by clicking option
**********************
JS to select dynamic add options operation [Ie&firefox compatibility]:
<select id= "Ddlresourcetype" onchange= "GetValue (This)" >
</select>
To dynamically delete all options in select:
document.getElementById ("Ddlresourcetype"). options.length=0;
To dynamically delete an item in Select option:
document.getElementById ("Ddlresourcetype"). Options.remove (indx);
To dynamically add an item in a SELECT option:
document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value));
Above in IE and Firefox can test success, hope you can use later.
In fact, the use of standard DOM operation is also possible, that is, Document.createelement,appendchild,removechild and the like.
Value aspect
function GetValue (obj)
{
var m=obj.options[obj.selectedindex].value
Alert (m);//Get value
var n=obj.options[obj.selectedindex].text
alert (n);//Get text
}
Detects if a check is selected
if (Objselect.selectedindex >-1) {
Description Check
} else {
Description not selected
}
Delete a selected item
Objselect.options[objselect.selectedindex] = null;
Add Item
Objselect.options[objselect.length] = new Option ("Hello", "Hello");
Modify the items in the selection
Objselect.options[objselect.selectedindex] = new Option ("Hello", "Hello");
Get the text of the selected item
Objselect.options[objselect.selectedindex].text;
Get the value of the selected item
Objselect.options[objselect.selectedindex].value;
*************************************
Basic standard properties for all HTML elements
ClassName Sets or returns the Class property of an element.
Dir Sets or returns the direction of the text.
Lang Sets or returns the language code of the element.
Title Sets or returns the caption of the element.
********************
The setattribute of the DOM element can add additional attributes to the element, as follows:
. SetAttribute ("Fileitemid", CurrentID);
The value of the CurrentID variable is the value of the property Fileitemid, and the value of the property is obtained through the attribute method of the DOM element:
. attributes["Fileitemid"].value
*******************
Form the next car automatically submit the problem:
When the form is in these cases, it has the ability to automatically submit after hitting Enter:
1. If there is a type= "submit" button in the form, the ENTER key will take effect.
2. If there is only one type= "text" Input in the form, the enter will take effect regardless of the type of the button.
3. If the button is not with input, but with a button, and there is no add Type,ie the default is type=button,fx default to Type=submit.
4. Other form elements such as textarea, select Do not affect the Radio checkbox does not affect the triggering rules, but itself in the FX will respond to the enter, under IE do not respond.
5. Type= "image" input, the effect is equivalent to type= "submit", do not know why the design of such a type, not recommended to use, should be used to add a CSS background map appropriate.
This kind of submission may not be what we want, in order to cancel this auto-commit function can be processed, is to write a meaningless text box, hidden.
Such as:
<label class= "Querylabel" > Menu name/Encoding </label>:<input type= "text" name= "KeyWord" id= "KeyWord" class= " QueryText "/>
<a href= "javascript:void (0)" data-options= "Iconcls: ' Icon-search '" class= "Easyui-linkbutton" onclick= " Normalquery (); " > Enquiry </a>
<input style= "Display:none"/>
</form>
*****************
Resolves a problem where the option for IE8 Select is too long to show the incomplete method:
First set the Select to a fixed width of 100px, and then add two more events in select: Onmouseover= "Fixwidth ()" onblur= "SetWidth ()"
The corresponding methods are:
function Fixwidth ()
{
var len = document.getElementById (' berth '). Options.length;
if (len! = 0) {
document.getElementById (' berth '). Style.width = "Auto";
}
}
function SetWidth ()
{
document.getElementById (' berth '). Style.width = "100px";
}
When the mouse is on a select, the width of the select is set to auto, so that the part that exceeds the length is visible, and when select loses focus, the width is set to 100px, which solves the problem.
18javaScript and Forms
