JavaScript Tutorial/Form/Form Object
Содержание
Form
The Form object represents an HTML property created by the <form> tag.
The Form object can be used to access all the properties of the specified form.
Forms can be referenced by either the forms array or directly by name.
Form methods and properties.
Property/Method Description action HTML ACTION attribute of Form object elements Array reflecting elements within form elements.length Length of elements array encoding HTML ENCTYPE attribute of Form object handleEvent() Handles specific event length Number of elements within form method HTML METHOD attribute of Form object name HTML NAME attribute of Form object onReset Event handler for Reset button onSubmit Event handler for Submit button reset() Resets form elements submit() Submit for data target HTML TARGET attribute of Form object
<source lang="javascript">
<html>
<head> <title> Using the name property to access a form object</title> </head> <body> <script language = "JavaScript"> </script> <form name="formEx"> First Name: <input type="text" name="first" size="20"> Last Name: <input type="text" name="last" size="25">
Click the button to check that the information is correct.
<input type="button" value="verify" name="check" onClick="checkName()"> </form> </body> </html></source>
Form.action
The action property represents the ACTION attribute of the HTML <form> tag.
It is typically the URL to which the form is being submitted.
<source lang="javascript">
<html>
<head> <title> Using the action property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1" action="http://www.wbex.ru/cgi-bin/process.pl"> Enter your street address: <input type="text" name="address" size="40">
<input type="button" value="Submit"onClick=getAction()>
<textarea name="msg" rows="5" cols="62"></textarea> </form> </body> </html></source>
Form.elements
The elements property represents the elements array, which is used to access each element within a form.
The order of the form elements in the elements array is the order in which they appear in the HTML source.
<source lang="javascript">
<html>
<head> <title> Using the form elements property</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> This is a blank input textbox. Click on the button below to get the name of the textbox.
<input type="text" name="textbox1" size=25>
<input type="button" value="Get Name" onClick = getName()> </form> </body> </html></source>
Form.elements.length
The elements.length property specifies the number of items in the elements array.
Each item in the array refers to an object in the HTML form.
<source lang="javascript">
<html>
<head> <title> Using the elements.length property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> Dummy text box: <input type="text" name="textbox1" size="25">
<input type="button" value="Dummy Button"> <input type="text" size="20" name="Sample">
Click on the button to get the number of elements in this form. <input type="button" value="Get Elements" onClick="getNum()"> </form> </body> </html></source>
form.encoding
The encoding property represents the type of encoding used by the form. It can be specified in the HTML <form> tag as the ENCTYPE attribute.
Setting the encoding property will override the HTML ENCTYPE attribute.
<source lang="javascript">
<html>
<head> <title> Using the encoding property for the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1" action="post" enctype="application/x-www-form-urlencoded"> <input type="button" value="Get Encoding" onClick="getEncoding()"> </form> </body> </html></source>
Form.handleEvent()
Syntax
<source lang="javascript">
form.handleEvent(event)</source>
Form.length
The length property represents the number of elements within a form.
This property works the same as the elements.length property.
<source lang="javascript">
<html>
<head> <title> Using the length property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> Enter First Name: <input type="text" size=15>
Enter Last Name: <input type="text" size=20>
Enter address: <input type="text" size=40>
<input type="button" value="Submit" onClick=showNumElements()> </form> </body> </html></source>
Form.method
The method property of the Form object represents the type of submission, GET or POST, being used by the form.
<source lang="javascript">
<html>
<head> <title> Using the method property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1" method="get"> First Name:<input type=text" name="first" size=15> Last Name:<input type=text" name="last" size=25>
City:<input type=text" name="city" size=20> State:<input type=text" name="state" size=2 maxlength=2> Zip:<input type=text" name="zip" size=5 maxlength=5>
Click the button to see what type of Method is used for submission. <input type="button" value="Click Here" onClick="informMethod()"> </form> </body> </html></source>
Form.name
The name property of the Form object represents the name of the form as specified in the HTML <form> tag.
<source lang="javascript">
<html>
<head> <title>Access the name property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name ="form1" > Dummy input text box. <input type= "text" size="15">
Click on the button to get the name of the form <input type="button" value="click me" onclick="showName()"> </form> </body> </html></source>
Form.onReset
Syntax
<source lang="javascript">
onReset="command"</source>
Form.onSubmit
Syntax
<source lang="javascript">
onSubmit="command"</source>
Form.reset()
The reset method resets all the form elements to their default values.
It operates the same as a mouse click on a Reset button for the calling form.
<source lang="javascript">
<html>
<head> <title> Using the reset method of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> Field 1:<input type="text" size="20" name="text1">
Field 2:<input type="text" size="20" name="text2">
Field 3:<input type="text" size="20" name="text3">
<input type="button" name=reset value="reset" onClick="resetForm(this.form)"> </form> </body> </html></source>
Form.submit()
The submit method of the Form object is used to submit a form.
It operates the same as if a Submit button was clicked.
<source lang="javascript">
<html>
<head> <title> Using the submit method for the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name= "form1" method="post" action="http://www.wbex.ru"> This is a sample form
Name:<input type="text" size="40" name="name">
Age:<input type="text" size="3" name="age">
Phone Number:<input type="text" size="10" name="phone">
<input type= "button" value="Submit" onclick = submitForm(this.form)> </form> </body> </html></source>
Form.target
The target property represents the target window or frame in which the form results will be displayed.
This can also reflect the TARGET attribute of the HTML <form> tag.
Valid target attributes are: _blank, _parent, _self, and _top.
<source lang="javascript">
<html>
<head> <title> Using the target property of the Form object</title> </head> <body> <script language="JavaScript"> </script> <form name="form1" action="post" target="_self">
<input type="button" value="submit" onClick="show()"> </form> </body> </html></source>
Using the Forms Array
<source lang="javascript">
<html>
<head> <title> Using the forms array to access a form element</title> </head> <body> <script language = "JavaScript"> </script> <form name="form1"> This text box belongs to a form. <input type="text" name="street">
Click on the button to get the name of the form.
<input type="button" value="Get Form name" onClick="showFormName()"> </form> <form name="form2"> This is the second form in the document. It contains a FileUpload object. <input type="file" name="uploadbox" size="25"> </form> </body> </html></source>
