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
<html>
<head>
<title> Using the name property to access a form object</title>
</head>
<body>
<script language = "JavaScript">
<!--
function checkName(){
var firstName = document.formEx.first.value;
var lastName = document.formEx.last.value;
alert("The name you entered is: " + firstName + " " + lastName);
}
-->
</script>
<form name="formEx">
First Name:
<input type="text" name="first" size="20">
Last Name:
<input type="text" name="last" size="25">
<br><br>
Click the button to check that the information is correct.
<br>
<input type="button" value="verify" name="check" onClick="checkName()">
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the action property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getAction(){
var actionValue = document.form1.action;
document.form1.msg.value = "Your form was submitted to the following URL:\n " + actionValue;
}
-->
</script>
<form name="form1" action="http://www.wbex.ru/cgi-bin/process.pl">
Enter your street address:
<input type="text" name="address" size="40">
<br><br>
<input type="button" value="Submit"onClick=getAction()>
<br><br><br>
<textarea name="msg" rows="5" cols="62"></textarea>
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the form elements property</title>
</head>
<body>
<script language="JavaScript">
<!--
function getName(){
var textName = document.form1.elements[0].name;
alert("The textbox name is: " + textName);
}
-->
</script>
<form name="form1">
This is a blank input textbox. Click on the button below to get the name of the textbox.
<br>
<input type="text" name="textbox1" size=25>
<br><br>
<input type="button" value="Get Name" onClick = getName()>
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the elements.length property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getNum(){
var numOfElements = document.form1.elements.length;
alert("The number of elements in this document are:" + numOfElements);
}
-->
</script>
<form name="form1">
Dummy text box:
<input type="text" name="textbox1" size="25">
<br>
<input type="button" value="Dummy Button">
<input type="text" size="20" name="Sample">
<br><br>
Click on the button to get the number of elements in this form.
<input type="button" value="Get Elements" onClick="getNum()">
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the encoding property for the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getEncoding(){
var encodingType = document.form1.encoding;
alert(encodingType);
}
-->
</script>
<form name="form1" action="post" enctype="application/x-www-form-urlencoded">
<input type="button" value="Get Encoding" onClick="getEncoding()">
</form>
</body>
</html>
Form.handleEvent()
Syntax
form.handleEvent(event)
Form.length
The length property represents the number of elements within a form.
This property works the same as the elements.length property.
<html>
<head>
<title> Using the length property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function showNumElements(){
alert("There are " + document.form1.length + " elements in this document");
}
-->
</script>
<form name="form1">
Enter First Name:
<input type="text" size=15><br>
Enter Last Name:
<input type="text" size=20><br>
Enter address:
<input type="text" size=40><br><br>
<input type="button" value="Submit" onClick=showNumElements()>
</form>
</body>
</html>
Form.method
The method property of the Form object represents the type of submission, GET or POST, being used by the form.
<html>
<head>
<title> Using the method property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function informMethod(){
alert("The form method is:" + document.form1.method);
}
-->
</script>
<form name="form1" method="get">
First Name:<input type=text" name="first" size=15>
Last Name:<input type=text" name="last" size=25>
<br>
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>
<br><br>
Click the button to see what type of Method is used for submission.
<input type="button" value="Click Here" onClick="informMethod()">
</form>
</body>
</html>
Form.name
The name property of the Form object represents the name of the form as specified in the HTML <form> tag.
<html>
<head>
<title>Access the name property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function showName(){
alert("Form Name is: " + document.form1.name);
}
-->
</script>
<form name ="form1" >
Dummy input text box.
<input type= "text" size="15">
<br><br>
Click on the button to get the name of the form
<input type="button" value="click me" onclick="showName()">
</form>
</body>
</html>
Form.onReset
Syntax
onReset="command"
Form.onSubmit
Syntax
onSubmit="command"
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.
<html>
<head>
<title> Using the reset method of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function resetForm(form){
document.form1.reset(form);
}
-->
</script>
<form name="form1">
Field 1:<input type="text" size="20" name="text1"><br>
Field 2:<input type="text" size="20" name="text2"><br>
Field 3:<input type="text" size="20" name="text3"><br>
<input type="button" name=reset value="reset" onClick="resetForm(this.form)">
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the submit method for the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function submitForm(form){
document.form1.submit(form);
}
-->
</script>
<form name= "form1" method="post" action="http://www.wbex.ru">
This is a sample form
<br><br>
Name:<input type="text" size="40" name="name">
<br>
Age:<input type="text" size="3" name="age">
<br>
Phone Number:<input type="text" size="10" name="phone">
<br><br>
<input type= "button" value="Submit" onclick = submitForm(this.form)>
</form>
</body>
</html>
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.
<html>
<head>
<title> Using the target property of the Form object</title>
</head>
<body>
<script language="JavaScript">
<!--
function show(){
var tar = document.form1.target;
if(tar == "_self"){
alert("this window");
} else{
alert("The target has not been specifically specified");
}
}
-->
</script>
<form name="form1" action="post" target="_self">
<br><br><br>
<input type="button" value="submit" onClick="show()">
</form>
</body>
</html>
Using the Forms Array
<html>
<head>
<title> Using the forms array to access a form element</title>
</head>
<body>
<script language = "JavaScript">
<!--
function showFormName(){
var name = document.forms[0].name;
alert("The name of the form is: " + name);
}
-->
</script>
<form name="form1">
This text box belongs to a form.
<input type="text" name="street">
<br><br>
Click on the button to get the name of the form.
<br>
<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>