http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FForm_ObjectJavaScript Tutorial/Form/Form Object - История изменений2026-04-04T11:34:05ZИстория изменений этой страницы в викиMediaWiki 1.30.0http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Form_Object&diff=9147&oldid=prevAdmin: 1 версия2010-05-26T08:24:50Z<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>Adminhttp://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Form_Object&diff=9146&oldid=prev в 18:52, 25 мая 20102010-05-25T18:52:56Z<p></p>
<p><b>Новая страница</b></p><div>== Form==<br />
<br />
<p>The Form object represents an HTML property created by the <form> tag.</p><br />
<p>The Form object can be used to access all the properties of the specified form.</p><br />
<p>Forms can be referenced by either the forms array or directly by name.</p><br />
<p>Form methods and properties.</p><br />
Property/Method<br />
Description<br />
action<br />
HTML ACTION attribute of Form object<br />
elements<br />
Array reflecting elements within form<br />
elements.length<br />
Length of elements array<br />
encoding<br />
HTML ENCTYPE attribute of Form object<br />
handleEvent()<br />
Handles specific event<br />
length<br />
Number of elements within form<br />
method<br />
HTML METHOD attribute of Form object<br />
name<br />
HTML NAME attribute of Form object<br />
onReset<br />
Event handler for Reset button<br />
onSubmit<br />
Event handler for Submit button<br />
reset()<br />
Resets form elements<br />
submit()<br />
Submit for data<br />
target<br />
HTML TARGET attribute of Form object<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the name property to access a form object</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function checkName(){<br />
var firstName = document.formEx.first.value;<br />
var lastName = document.formEx.last.value;<br />
alert("The name you entered is: " + firstName + " " + lastName);<br />
}<br />
--><br />
</script><br />
<form name="formEx"><br />
First Name:<br />
<input type="text" name="first" size="20"><br />
Last Name:<br />
<input type="text" name="last" size="25"><br />
<br><br><br />
Click the button to check that the information is correct.<br />
<br><br />
<input type="button" value="verify" name="check" onClick="checkName()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.action==<br />
<br />
<p>The action property represents the ACTION attribute of the HTML <form> tag.</p><br />
<p>It is typically the URL to which the form is being submitted.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the action property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getAction(){<br />
var actionValue = document.form1.action;<br />
document.form1.msg.value = "Your form was submitted to the following URL:\n " + actionValue;<br />
}<br />
--><br />
</script><br />
<form name="form1" action="http://www.wbex.ru/cgi-bin/process.pl"><br />
Enter your street address:<br />
<input type="text" name="address" size="40"><br />
<br><br><br />
<input type="button" value="Submit"onClick=getAction()><br />
<br><br><br><br />
<textarea name="msg" rows="5" cols="62"></textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.elements==<br />
<br />
<p>The elements property represents the elements array, which is used to access each element within a form.</p><br />
<p>The order of the form elements in the elements array is the order in which they appear in the HTML source.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the form elements property</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getName(){<br />
var textName = document.form1.elements[0].name;<br />
alert("The textbox name is: " + textName);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
This is a blank input textbox. Click on the button below to get the name of the textbox.<br />
<br><br />
<input type="text" name="textbox1" size=25><br />
<br><br><br />
<input type="button" value="Get Name" onClick = getName()><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.elements.length==<br />
<br />
<p>The elements.length property specifies the number of items in the elements array.</p><br />
<p>Each item in the array refers to an object in the HTML form.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the elements.length property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getNum(){<br />
var numOfElements = document.form1.elements.length;<br />
alert("The number of elements in this document are:" + numOfElements);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Dummy text box:<br />
<input type="text" name="textbox1" size="25"><br />
<br><br />
<input type="button" value="Dummy Button"><br />
<input type="text" size="20" name="Sample"><br />
<br><br><br />
Click on the button to get the number of elements in this form.<br />
<input type="button" value="Get Elements" onClick="getNum()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== form.encoding==<br />
<br />
<p>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.</p><br />
<p>Setting the encoding property will override the HTML ENCTYPE attribute.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the encoding property for the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getEncoding(){<br />
var encodingType = document.form1.encoding;<br />
alert(encodingType);<br />
}<br />
--><br />
</script><br />
<form name="form1" action="post" enctype="application/x-www-form-urlencoded"><br />
<input type="button" value="Get Encoding" onClick="getEncoding()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.handleEvent()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
form.handleEvent(event)</source><br />
<br />
<br />
<br />
== Form.length==<br />
<br />
<p>The length property represents the number of elements within a form.</p><br />
<p>This property works the same as the elements.length property.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the length property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showNumElements(){<br />
alert("There are " + document.form1.length + " elements in this document");<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Enter First Name:<br />
<input type="text" size=15><br><br />
Enter Last Name:<br />
<input type="text" size=20><br><br />
Enter address:<br />
<input type="text" size=40><br><br><br />
<input type="button" value="Submit" onClick=showNumElements()><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.method==<br />
<br />
<p>The method property of the Form object represents the type of submission, GET or POST, being used by the form.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the method property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function informMethod(){<br />
alert("The form method is:" + document.form1.method);<br />
}<br />
--><br />
</script><br />
<form name="form1" method="get"><br />
First Name:<input type=text" name="first" size=15><br />
Last Name:<input type=text" name="last" size=25><br />
<br><br />
City:<input type=text" name="city" size=20><br />
State:<input type=text" name="state" size=2 maxlength=2><br />
Zip:<input type=text" name="zip" size=5 maxlength=5><br />
<br><br><br />
Click the button to see what type of Method is used for submission.<br />
<input type="button" value="Click Here" onClick="informMethod()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.name==<br />
<br />
<p>The name property of the Form object represents the name of the form as specified in the HTML <form> tag.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Access the name property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showName(){<br />
alert("Form Name is: " + document.form1.name);<br />
}<br />
--><br />
</script><br />
<form name ="form1" ><br />
Dummy input text box.<br />
<input type= "text" size="15"><br />
<br><br><br />
Click on the button to get the name of the form<br />
<input type="button" value="click me" onclick="showName()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.onReset==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onReset="command"</source><br />
<br />
<br />
<br />
== Form.onSubmit==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onSubmit="command"</source><br />
<br />
<br />
<br />
== Form.reset()==<br />
<br />
<p>The reset method resets all the form elements to their default values.</p><br />
<p>It operates the same as a mouse click on a Reset button for the calling form.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the reset method of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function resetForm(form){<br />
document.form1.reset(form);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Field 1:<input type="text" size="20" name="text1"><br><br />
Field 2:<input type="text" size="20" name="text2"><br><br />
Field 3:<input type="text" size="20" name="text3"><br><br />
<input type="button" name=reset value="reset" onClick="resetForm(this.form)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.submit()==<br />
<br />
<p>The submit method of the Form object is used to submit a form.</p><br />
<p>It operates the same as if a Submit button was clicked.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the submit method for the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function submitForm(form){<br />
document.form1.submit(form);<br />
}<br />
--><br />
</script><br />
<form name= "form1" method="post" action="http://www.wbex.ru"><br />
This is a sample form<br />
<br><br><br />
Name:<input type="text" size="40" name="name"><br />
<br><br />
Age:<input type="text" size="3" name="age"><br />
<br><br />
Phone Number:<input type="text" size="10" name="phone"><br />
<br><br><br />
<input type= "button" value="Submit" onclick = submitForm(this.form)><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Form.target==<br />
<br />
<p>The target property represents the target window or frame in which the form results will be displayed.</p><br />
<p>This can also reflect the TARGET attribute of the HTML <form> tag.</p><br />
<p>Valid target attributes are: _blank, _parent, _self, and _top.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the target property of the Form object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function show(){<br />
var tar = document.form1.target;<br />
if(tar == "_self"){<br />
alert("this window");<br />
} else{<br />
alert("The target has not been specifically specified");<br />
}<br />
}<br />
--><br />
</script><br />
<form name="form1" action="post" target="_self"><br />
<br><br><br><br />
<input type="button" value="submit" onClick="show()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Using the Forms Array==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the forms array to access a form element</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function showFormName(){<br />
var name = document.forms[0].name;<br />
alert("The name of the form is: " + name);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
This text box belongs to a form.<br />
<input type="text" name="street"><br />
<br><br><br />
Click on the button to get the name of the form.<br />
<br><br />
<input type="button" value="Get Form name" onClick="showFormName()"><br />
</form><br />
<form name="form2"><br />
This is the second form in the document. It contains a FileUpload object.<br />
<input type="file" name="uploadbox" size="25"><br />
</form><br />
</body><br />
</html></source></div>