To implement dynamic interaction, you must have more sophisticated knowledge about form objects (form) and Frame objects (Frames).
Basic knowledge of forms
Form objects enable designers to interact with client users with different elements of a form, without having to enter data first before they can dynamically alter the behavior of Web documents.
1. What is a Form object
form: It forms the basic element of a Web page. Usually a Web page has a form or several forms, using the forms[] array to achieve access to different forms.
<form name=form1>
<input type=text...>
<input type=text...>
<inpup byne=text...>
</form>
<form name=form2>
<input type=text...>
<input type=text...>
</form>
There are three basic elements in forms[0], and there are only two elements in forms[1].
The main function of a Form object is the ability to directly access a form in an HTML document, which encapsulates the relevant HTML code:
<form
name = "Names of tables"
Target = "Submit window for specified information"
Action = "URL for Receive form program"
method = Information data transfer mode (Get/post)
enctype = "Form encoding mode"
[onsubmit = "JavaScript code"]>
</Form>
2, the Form object method
The method of a Form object has only one--submit () method, the main function of which is to implement the submission of form information. If you submit a mytest form, the following format is used:
Document.mytest.submit ()
3, the properties of the Form object
Properties in form objects mainly include the following: Elements name Action target encoding method.
In addition to elements, several others reflect the state of the corresponding property in the identity in the form, which is usually an individual form identity, while elements is often an array of multiple form element values, for example:
Elements[0]. MYTABLE.ELEMENTS[1]
4. Accessing Form objects
Accessing a Form object in JavaScript can be implemented in two different ways:
(1) by accessing the form
You must first specify its form name in the properties of the Form object, and then you can access the form through the following identities: document. Mytable ().
(2) Access to the form through the array
In addition to using the form name to access the form, you can also use the Form object array to visit the form object. However, it is important to note that the form object is provided by the browser environment, and the array subscript provided by the browser environment is 0 to N. Therefore, you can implement access to form objects in the following formats:
Document.forms[0]
DOCUMENT.FORMS[1]
DOCUMENT.FORMS[2] ...
5. Prerequisites for referencing forms
The condition you want to refer to a form in JavaScript is that you must first create the form in the page with an identity and place the definition form part before the reference.
Basic elements in a form
The basic elements in a form consist of buttons, radio buttons, check buttons, submit buttons, reset buttons, text boxes, and so on.
To access these basic elements in JavaScript, you must implement an array subscript or form element name that corresponds to a particular form element. Each element is referenced primarily through the attributes or methods of the element. The basic format of its references is shown below:
Formname.elements[].methadname (form name. element name or array. method)
Formname.elemaent[].propertyname (form name. element name or array. Attribute)
The following are described separately:
1. Text single row INPUT element
Function: Implement effective control of elements in the text identity.
Basic properties:
Name: Sets the information names when submitting information. Corresponds to name in the HTML document.
Value: Used to set the information that appears in the window corresponding to the value in the HTML document.
DefaultValue: Include the default value for the text element
Basic methods:
Blur (): Moves the current focus to the background.
Select (): Highlight text.
Main events:
Onfocus: This event occurs when text gets the focus.
OnBlur: This event occurs when the focus is lost from the element.
Onselect: The file is generated when the text is highlighted.
OnChange: When the value of the text element changes, the file is generated.
Cases:...
<form name= "Test" >
<input type= "text" name= "test" value= "This is a JavaScript" >
</form>
...
<script language = "Javascirpt" >
Document.mytest.value= "That is a Javascript";
Document.mytest.select ();
Document.mytest.blur ();
</script>
2, textarea multiple rows of input elements
Function: Implement to control the elements in the textarea.
Basic properties
Name: Sets the information names when submitting the information, corresponding to the name of the HTML document textarea.
Value: Used to set the information that appears in the window corresponding to the value in the HTML document.
Default value: The defaults for the element.
Method:
Blur (): Lose input focus
Select (): After text is highlighted
Event:
OnBlur: This event occurs when the input focus is lost
Onfocus: When the input gets focus, the file is generated
Onchange: When the literal value changes, the event is generated
Onselect: When the text is highlighted, the file is generated
3. Select Selection Element
Function: Implements control of scrolling selection elements.
Property:
Name: Sets the information names when submitting information, corresponding to name in the document select.
Length: Length in the corresponding document select
Options: Arrays that make up multiple options
Selectindex; the subscript indicates an option
Each option in the select contains the following properties:
Text: Options corresponding to the type
Selected: Indicates whether the current option is selected
Index: Indicates the location of the current option
defaultselected: Default option
Event:
OnBlur: When the Select option loses focus, the file is generated.
Onfocas: When the select gets focus, the file is generated.
Onchange: The event is generated when the option state changes.
4, button buttons
Function: Implements control of button buttons.
Property:
Name: Sets the information names when submitting information, corresponding to the name of the button in the document.
Value: Used to set the information that appears in the window corresponding to the value in the HTML document.
Method:
Click () This method is similar to a pressed button.
Event:
OnClick when the button button is clicked, the event is generated.
Cases:
<form name= "Test" >
<input type= "button" Name= "Testcall" Onclick=tmyest () >
</form>
...
<script language= "Javascirpt" >
Document.elements[0].value= "MyTest"; Accessing through elements
Or
Document.testcallvalue= "MyTest"; Access by name
</script>
.....
5. CheckBox check box
Function: Enforces control over an element in a check box.
Property:
Name: Sets the information names when submitting information.
Value: Used to set the information that appears in the window corresponding to the value in the HTML document.
Checked: This property indicates the state of the box true/false.
Defauitchecked: Default state
Method:
Click () This method causes an item in the box to be selected.
Event:
OnClick: This event occurs when the selection of the box is selected.
6, Radio Wireless button
Function: Implement a radio button control with a single radio function.
Property:
Name: Sets the information names when submitting the information, corresponding to the name of the radio in the HTML document
Value: Used to set the information that appears in the corresponding HTML document in the window, corresponding to the name of the radio in the HTML document.
Length: The number of buttons in the radio button.
Defalechecked: Default button.
Checked: Indicates whether the check is still not selected.
Index: The location of the selected button.
Method:
Chick (): Select a button.
Event:
OnClick: When the button is clicked, the event is generated.
7, Hidden: Hidden
Function: Implements control over an AREA element that has no display text and can enter characters.
Property:
Name: Sets the information names when submitting the information, corresponding to the name in the hidden of the HTML document.
Value: Used to set the information that appears in the corresponding HTML document in the window, corresponding to the value in the HTML document hidden.
Defaleitvalue: Default Value
8, password Password
Function: Enforces control over elements that have password input.
Property:
Name: Sets the information names when submitting the information, corresponding to the name in the password in the HTML document.
Value: Used to set the information that appears in the corresponding HTML document in the window, corresponding to the value in the password in the HTML document.
Defaultvalu: Default Value
Method
Select (): Highlight Enter password field.
Blur (): Causes this loss Passward input focus.
Focus (): Gets password input focal point.
9, submit the submission element
Function: Implement a control with a Submit function button.
Property:
Name: Sets the information to be submitted when submitting information, corresponding to the HTML document submit.
Value: Used to set the information that appears in the corresponding HTML document in the window, corresponding to the value in the HTML document.
Method
Click () is equivalent to pressing the submit button.
Event:
OnClick () produces the event when the button is pressed.
Iii. examples
Below we show that by clicking on a button (red) To change the window color, click "Invoke Dynamic button document" to invoke a dynamic button document.
Test8_1.htm
<script language= "JavaScript" >
The original color
Document.bgcolor= "Blue";
document.vlinkcolor= "White";
Document.linkcolor= "Yellow";
Document.alinkcolor= "Red";
Change color dynamically
function ChangeColor () {
Document.bgcolor= "Red";
Document.vlinkcolor= "Blue";
Document.linkcolor= "Green";
Document.alinkcolor= "Blue";
}
</script>
</HEAD>
<body bgcolor= "White" >
<a href= "test8_2.htm" > Invoke dynamic button document </a>
<form >
<input type= "button" value= "Red" onclick= "ChangeColor ()" >
</form>
</BODY>
</HTML>
The output results are shown in Figure 1.
Figure 1
Dynamic button program.
Test8_2.htm
<HTML>
<HEAD>
</HEAD>
<p align= "center" > </p>
<div align= "center" ><center>
<table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<TD width= "100%" ><form name= "Form2" onsubmit= "null" >
<p><input type= "Submit" Name= "banner" value= "Submit"
onclick= "alert" (' Your have to put ', ' action=[url]\ ' on the form
tag!! ') " > <br>
<script language= "JavaScript" >
var id,pause=0,position=0;
function Banner () {
Variables Declaration
var i,k,msg= "Enter what you want here";//Increase MSG
k= (30/msg.length) +1;
for (i=0;i<=k;i++) msg+= "" +MSG;
Show it to the window
Document.form2.banner.value=msg.substring (position,position-30);
Set new position
if (position++==msg.length) position=0;
Repeat at entered speed
Id=settimeout ("banner ()", 60); }
End-->
Banner ();
</script></p>
</form>
</td>
</tr>
</table>
</center></div>
<p> </p>
<BODY>
<a href= "test8_1.htm" > Return </a>
</BODY>
</HTML>
The output results are shown in Figure 2.
Figure 2
This article introduces a way to implement Web page information interaction using JavaScript scripts. It mainly introduces the main functions and usage of the basic elements in the form.
