JavaScript DHTML/Form Control/Form HTML
Содержание
- 1 Accessing the Elements of a Form
- 2 Adjusting a CGI Submission Action
- 3 A Form for Entering a URL
- 4 Button Objects: Submit, Reset, and Button
- 5 Checking Elements on a Form
- 6 Client-Side JavaScript Objects and HTML Tags That Create Instances of Them
- 7 Creating an Example Form for User Feedback
- 8 Methods and Properties of the Form Object
- 9 Methods and Properties of the Reset Object
- 10 Methods and Properties of the Submit Object
- 11 Passing a Form Object and Form Element to Functions
- 12 Properties of the Hidden Object
- 13 Storing the last value using a Hidden object.
- 14 Submitting Forms to the Server
- 15 Use hidden field to store data
- 16 Using the document.forms Property
- 17 Using the form.elements Array
- 18 Variables in Hidden form
Accessing the Elements of a Form
<HTML>
<HEAD>
<TITLE>Multiform Document Example</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function displayFormData() {
win2=open("","window2")
win2.document.open("text/plain")
win2.document.writeln("This document has "+document.forms.length+" forms.")
var i=0;
var j=0;
for(i=0;i<document.forms.length;++i) {
win2.document.writeln("Form "+i+" has "+ document.forms[i].elements.length+" elements.")
for(j=0;j<document.forms[i].elements.length;++j) {
win2.document.writeln((j+1)+" A "+ document.forms[i].elements[j].type+" element.")
}
}
win2.document.close()
return false
}
// --></SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="nothing" onSubmit="return displayFormData()">
<H2>Form 1</H2>
<P>Text field: <INPUT TYPE="TEXT" NAME="f1-1" VALUE="Sample text"></P>
<P>Password field: <INPUT TYPE="PASSWORD" NAME="f1-2"></P>
<P>Text area field: <TEXTAREA ROWS="4" COLS="30" NAME="f1-3">Text</TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="f1-4" VALUE="Submit">
<INPUT TYPE="RESET" NAME="f1-5"></P>
</FORM>
<HR>
<FORM>
<H2>Form 2</H2>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="1" CHECKED>A</P>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="2">B</P>
<P><INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="3">C</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="1">D</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="2" CHECKED> E</P>
<P><INPUT TYPE="RADIO" NAME="f2-2" VALUE="3">F</P>
<INPUT TYPE="FILE" NAME="f2-3">
</FORM>
<HR>
<FORM>
<H2>Form 3</H2>
<INPUT TYPE="HIDDEN" NAME="f3-1">
<SELECT NAME="f3-2" SIZE="4">
<OPTION VALUE="">Item 1</OPTION>
<OPTION VALUE="">Item 2</OPTION>
<OPTION VALUE="" SELECTED>Item 3</OPTION>
<OPTION VALUE="">Item 4</OPTION>
<OPTION VALUE="">Item 5</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Adjusting a CGI Submission Action
<HTML>
<HEAD>
<TITLE>Checkbox Submission</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setAction(form) {
if (form.checkThis.checked) {
form.action = form.checkThis.value
} else {
form.action = "http://www.wbex.ru"
}
return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="">
<INPUT TYPE="checkbox" NAME="checkThis" VALUE="http://www.google.ru">Use alternate<P>
<INPUT TYPE="submit" NAME="boxChecker" onClick="return setAction(this.form)">
</FORM>
</BODY>
</HTML>
A Form for Entering a URL
<HTML>
<HEAD>
<TITLE>Load URL</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function loadFrames() {
ix = document.URLform.protocol.options.selectedIndex
urlString = document.URLform.protocol.options[ix].value+"//"
urlString += document.URLform.hostname.value
path = document.URLform.path.value
if(path.length > 0) {
if(path.charAt(0)!="/")
path = "/"+path
}
urlString += path
parent.frames[1].location.href=urlString
}
// --></SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="" NAME="URLform">
<P>Select protocol:
<SELECT NAME="protocol" SIZE="1">
<OPTION VALUE="file:" SELECTED="SELECTED">file</OPTION>
<OPTION VALUE="http:">http</OPTION>
<OPTION VALUE="ftp:">ftp</OPTION></SELECT></P>
<P>Enter host name: <INPUT TYPE="TEXT" NAME="hostname" SIZE="45"></P>
<P>Enter path: <INPUT TYPE="TEXT" NAME="path" SIZE="50"></P>
<INPUT TYPE="BUTTON" NAME="load" VALUE="Load URL" ONCLICK="loadFrames()">
</FORM>
</BODY>
</HTML>
Button Objects: Submit, Reset, and Button
<html>
<head>
<title>Online Registration</title>
<SCRIPT LANGUAGE="JavaScript">
function showHelp() {
helpWin = window.open("", "Help", "height=200,width=400")
helpWin.document.write("<body><h2>Help on Registration</h2>")
helpWin.document.write("1. step 1.<p>")
helpWin.document.write("2. step 2.<p>")
helpWin.document.write("3. step 3.<p>")
helpWin.document.write("<p>")
helpWin.document.write("<form><DIV ALIGN="CENTER">")
helpWin.document.write("<input type=button value="OK" onClick="window.close()">")
helpWin.document.write("</DIV></form></body>")
}
</SCRIPT>
</head>
<body>
<h1>Online Registration</h1>
<form method="POST">
<input type=button value="Help" onClick="showHelp()">
</p>
</form>
</body>
Checking Elements on a Form
<html>
<head>
<title>Online Registration</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkFields() {
var num = document.form1.elements.length
var validFlag = true
for (var i=0; i<num; i++) {
if ((document.form1.elements[i].value == null || document.form1.elements[i].value == "") &&
(typeof document.form1.elements[i] != "submit" || typeof document.form1.elements[i] != "reset")){
validFlag = false;
alert("The " + document.form1.elements[i].name + " field is blank.")
break ;
}
}
return validFlag;
}
// -->
</SCRIPT>
</head>
<body>
<form name="form1" method="POST" onSubmit="return checkFields()">
<p>Username:<br>
<input type=text size=25 maxlength=256 name="Username">
<br>
Email address:
<strong><br></strong>
<input type=text size=25 maxlength=256 name="EmailAddress"></p>
<input type=submit value="Register">
<input type=reset value="Clear">
</form>
</body>
</html>
Client-Side JavaScript Objects and HTML Tags That Create Instances of Them
/*
+-------------------------------------+--------------------------------------+
| JavaScript Object | Corresponding HTML Tag |
+-------------------------------------+--------------------------------------+
| Button | <input type="button"> |
+-------------------------------------+--------------------------------------+
| Checkbox | <input type="checkbox">
+-------------------------------------+--------------------------------------+
| Hidden | <input type="hidden">
+-------------------------------------+--------------------------------------+
| Fileupload | <input type="file">
+-------------------------------------+--------------------------------------+
| Password | <input type="password">
+-------------------------------------+--------------------------------------+
| Radio | <input type="radio">
+-------------------------------------+--------------------------------------+
| Reset | <input type="reset">
+-------------------------------------+--------------------------------------+
| Select | <select>
+-------------------------------------+--------------------------------------+
| Frame | <frame>
+-------------------------------------+--------------------------------------+
| Document | <body>
+-------------------------------------+--------------------------------------+
| Layer | <layer> or <ilayer>
+-------------------------------------+--------------------------------------+
| Link | <a href="">
+-------------------------------------+--------------------------------------+
| Image | <img>
+-------------------------------------+--------------------------------------+
| Area | <map>
+-------------------------------------+--------------------------------------+
| Anchor | <a name="">
+-------------------------------------+--------------------------------------+
| Applet | <applet>
+-------------------------------------+--------------------------------------+
| Plugin | <embed>
+-------------------------------------+--------------------------------------+
| Form | <form>
+-------------------------------------+--------------------------------------+
| Submit | <input type="submit">
+-------------------------------------+--------------------------------------+
| Text | <input type="text">
+-------------------------------------+--------------------------------------+
| Textarea | <textarea>
+-------------------------------------+--------------------------------------+
| Option | <option>
+-------------------------------------+--------------------------------------+
*/
Creating an Example Form for User Feedback
<html>
<head>
<script language="JavaScript">
<!--
function setStatus(str)
{
window.status = str;
return true;
}
var greeting="Hello! ";
window.defaultStatus = greeting;
// script end -->
</script>
</head>
<body>
<form action="mailto:your_mail_ID" method="post">
<select name="product" onFocus="setStatus("message.")" onBlur="setStatus("")">
<option>A
<option>B
<option>C
<option>D
<option>E
<option>F
<option>G
</select>
<br>
<font size=5>Quantity:</font>
<input type="text" name="quantity" value="1" size=4 maxlength=4 onFocus="setStatus("(1-1000).")" onBlur="setStatus("")">
<br>
<font size=5>Toastiness:</font>
<input type="text" name="toastiness" value="50" size=3 maxlength=3 onFocus="setStatus("0-100 (0=untoasted 100=burnt).")" onBlur="setStatus("")">
<br>
<font size=5>Buttered:</font>
<font size=5>Yes</font>
<input type="radio" name="buttered" value="yes" checked onClick="setStatus("?")">
<font size=5>No</font>
<input type="radio" name="buttered" value="no" onClick="setStatus("?")">
<hr>
<input type="submit" value="Start Toaster">
<input type="reset">
</form>
</body>
</html>
Methods and Properties of the Form Object
Method
+---------+----------------+-------------------------------------------------+
handleEvent() Calls the event handler associated with this event.
reset() Resets form elements to their default values.
submit() Triggers a submit event.
+---------+----------------+-------------------------------------------------+
Property
+---------+----------------+-------------------------------------------------+
action Contains the action attribute of a "form" instance.
+---------+----------------+-------------------------------------------------+
elements Array contain all the elements within "form".
+---------+----------------+-------------------------------------------------+
encoding Contains the enctype attribute of a "form" instance.
+---------+----------------+-------------------------------------------------+
length Number of elements contained in the form.
+---------+----------------+-------------------------------------------------+
method Contains the method attribute of a "form" instance.
+---------+----------------+-------------------------------------------------+
name Contains the name attribute of a "form" instance.
+---------+----------------+-------------------------------------------------+
target Contains the target attribute of a "form" instance.
+---------+----------------+-------------------------------------------------+
Methods and Properties of the Reset Object
/*
+------------+----------------+------------------------------------------+
Type Item Description
+------------+----------------+------------------------------------------+
Method
+------------+----------------+------------------------------------------+
blur() Removes focus from the button.
+------------+----------------+------------------------------------------+
click() Simulates a mouse click on the button.
+------------+----------------+------------------------------------------+
focus() Sets the focus to the button.
+------------+----------------+------------------------------------------+
handleEvent() Passes an event to the appropriate event
handler associated with a button.
+------------+----------------+------------------------------------------+
Property
+------------+----------------+------------------------------------------+
form Returns the Form object of which the button
is a member.
+------------+----------------+------------------------------------------+
name Contains the name attribute for the button.
+------------+----------------+------------------------------------------+
type Contains the type attribute for the button.
+------------+----------------+------------------------------------------+
value Contains the value attribute for the button.
+------------+----------------+------------------------------------------+
*/
Methods and Properties of the Submit Object
Method
+------------+----------------+------------------------------------------+
blur() Removes focus from the Submit button.
+------------+----------------+------------------------------------------+
click() Simulates a mouse click on the Submit button.
+------------+----------------+------------------------------------------+
focus() Gives the focus to the Submit button.
+------------+----------------+------------------------------------------+
handleEvent() Invokes the handler for the event specified;
+------------+----------------+------------------------------------------+
Property
+------------+----------------+------------------------------------------+
form Returns the entire form the Submit button is in.
+------------+----------------+------------------------------------------+
name Returns the name of the Submit button specified
by the name attribute.
+------------+----------------+------------------------------------------+
type Returns the type of this Submit button,
specified by the type attribute. This property
always returns submit.
+------------+----------------+------------------------------------------+
value Returns the value of this Submit button,
specified by the value attribute.
Passing a Form Object and Form Element to Functions
<HTML>
<HEAD>
<TITLE>Beatle Picker</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function processData(form) {
for (var i = 0; i < form.CheckBoxes.length; i++) {
if (form.CheckBoxes[i].checked) {
break;
}
}
var beatle = form.CheckBoxes[i].value;
var song = form.song.value;
alert(song + " " + beatle);
}
function verifySong(entry) {
var song = entry.value;
alert(song);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="return false">
Choose your favorite Beatle:
<INPUT TYPE="radio" NAME="CheckBoxes" VALUE="J" CHECKED>J
<INPUT TYPE="radio" NAME="CheckBoxes" VALUE="P">P
<INPUT TYPE="radio" NAME="CheckBoxes" VALUE="G">G
<INPUT TYPE="radio" NAME="CheckBoxes" VALUE="R">R<P>
Enter the name of your favorite song:<BR>
<INPUT TYPE="text" NAME="song" VALUE = "test" onChange="verifySong(this)"><P>
<INPUT TYPE="button" NAME="process" VALUE="Process Request..." onClick="processData(this.form)">
</FORM>
</BODY>
</HTML>
Properties of the Hidden Object
+------------+--------------------------------------------------------------------+
Property Description
+------------+--------------------------------------------------------------------+
form Specifies the form containing the Hidden object.
+------------+--------------------------------------------------------------------+
name Contains the name of the Hidden object.
+------------+--------------------------------------------------------------------+
type Contains the value of the type attribute of the Hidden object.
+------------+--------------------------------------------------------------------+
value Contains the value of the value attribute of the Hidden object.
+------------+--------------------------------------------------------------------+
Storing the last value using a Hidden object.
<html>
<head>
<title>Hidden Test</title>
<script language="JavaScript">
function postData(value) {
document.form1.holder2.value = document.form1.holder.value
document.form1.holder.value = value
}
function resetValue() {
var len = document.form1.itemList.length
for (var i=0; i<len; i++) {
if (document.form1.itemList[i].value == document.form1.holder2.value) {
document.form1.itemList[i].checked = "1"
break
}
}
}
</script>
</head>
<body>
<form name="form1" method="POST">
<p>
<input type=radio name="itemList" value="A" onClick="postData(this.value)">A
</p>
<p>
<input type=radio name="itemList" value="B" onClick="postData(this.value)">B
</p>
<p>
<input type=radio name="itemList" value="C" onClick="postData(this.value)">C
</p>
<p>
<input type=radio name="itemList" value="D" onClick="postData(this.value)">D</p>
<p><input type=radio name="itemList" value="E" onClick="postData(this.value)">E</p>
<p><input type=button name="UndoLast" value="Undo Last" onClick="resetValue()"></p>
<INPUT TYPE="hidden" NAME="holder" value="">
<INPUT TYPE="hidden" NAME="holder2" value="">
</form>
</body>
</html>
Submitting Forms to the Server
<html>
<head><title>For More Information</title>
<SCRIPT LANGUAGE="JavaScript">
function checkType() {
if (document.form1.rush.checked) {
document.form1.action = "http://www.wbex.ru";
}
}
</SCRIPT>
</head>
<body>
<h1>Order Form</h1>
<hr>
<form name="form1" action="http://www.wbex.ru"
method="POST" onSubmit="checkType()">
<p>Please provide the following contact information:</p>
<blockquote>
<pre>
<em>First name </em>
<input type=text size=25 maxlength=256 name="Contact_FirstName">
<em>Last name </em>
<input type=text size=25 maxlength=256 name="Contact_LastName">
<em>Title </em>
<input type=text size=35 maxlength=256 name="Contact_Title">
<em>Organization </em>
<input type=text size=35 maxlength=256 name="Contact_Organization">
<em>Work Phone </em>
<input type=text size=25 maxlength=25 name="Contact_WorkPhone">
<em>FAX </em>
<input type=text size=25 maxlength=25 name="Contact_FAX">
<em>E-mail </em>
<input type=text size=25 maxlength=256 name="Contact_Email">
<em>URL </em><input type=text size=25 maxlength=25 name="Contact_URL">
</pre>
</blockquote>
<p>Please provide the following ordering information:</p>
<blockquote>
<pre>
<strong>QTY DESCRIPTION</strong>
<input type=text size=6 maxlength=6 name="Ordering_OrderQty0">
<input type=text size=45 maxlength=256 name="Ordering_OrderDesc0">
<input type=text size=6 maxlength=6 name="Ordering_OrderQty1">
<input type=text size=45 maxlength=256 name="Ordering_OrderDesc1">
<input type=text size=6 maxlength=6 name="Ordering_OrderQty2">
<input type=text size=45 maxlength=256 name="Ordering_OrderDesc2">
<input type=text size=6 maxlength=6 name="Ordering_OrderQty3">
<input type=text size=45 maxlength=256 name="Ordering_OrderDesc3">
<input type=text size=6 maxlength=6 name="Ordering_OrderQty4">
<input type=text size=45 maxlength=256 name="Ordering_OrderDesc4">
<strong>BILLING</strong>
<em>Purchase order # </em>
<input type=text size=25 maxlength=256 name="Ordering_PONumber">
<em>Account name </em>
<input type=text size=25 maxlength=256 name="Ordering_POAccount">
<strong>SHIPPING</strong>
<em> Street address </em>
<input type=text size=35 maxlength=256 name="Ordering_StreetAddress">
<em> Address (cont.) </em>
<input type=text size=35 maxlength=256 name="Ordering_Address2">
<em>City </em>
<input type=text size=35 maxlength=256 name="Ordering_City">
<em> State/Province </em>
<input type=text size=35 maxlength=256 name="Ordering_State">
<em> Zip/Postal code </em>
<input type=text size=12 maxlength=12 name="Ordering_ZipCode">
<em> Country </em>
<input type=text size=25 maxlength=256 name="Ordering_Country">
</pre>
<pre>
<input type=checkbox name="rush" value="ON">Rush Order!
</pre>
</blockquote>
<p>
<input type=submit value="Submit Form">
<input type=reset value="Reset Form">
</p>
</form>
</body>
</html>
<html>
<head>
<title>Input form</title>
<script type="text/javascript">
window.onload=setupEvents;
function setupEvents() {
document.someForm.onsubmit=validateForm;
}
function validateForm() {
var strResults = "";
for (var i = 0; i < document.someForm.elements.length - 1; i++) {
strResults += document.someForm.elements[i].value;
}
document.someForm.elements[3].value = strResults;
document.someForm.text4.value = document.someForm.elements[3].value+"**";
return false;
}
</script>
</head>
<body>
<form name="someForm">
<input type="text" name="text1" /><br />
<input type="password" name="text2" /><br />
<input type="hidden" name="text3" value="hidden value" />
<textarea name="text4" cols=50 rows=10>The text area</textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Using the document.forms Property
<HTML>
<HEAD>
<TITLE>document.forms example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function myFunction() {
if (document.forms[0].bluish.checked) {
alert("Now going to the Blues music area...")
} else {
alert("Now going to Rock music area...")
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="theBlues">
<INPUT TYPE="checkbox" NAME="bluish">Check here if you"ve got the blues.
</FORM>
Text<HR>Text<HR>Text<HR>Text<HR>Text<HR>Text<HR>Text<HR>Text<HR>
<FORM NAME="visit">
<INPUT TYPE="button" VALUE="Visit music site" onClick="myFunction()">
</FORM>
</BODY>
</HTML>
Using the form.elements Array
<HTML>
<HEAD>
<TITLE>Elements Array</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function verifyIt() {
var form = document.forms[0]
for (i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "text" && form.elements[i].value == ""){
alert("Please fill out all fields.")
form.elements[i].focus()
break
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter your first name:<INPUT TYPE="text" NAME="firstName"><P>
Enter your last name:<INPUT TYPE="text" NAME="lastName"><P>
<INPUT TYPE="radio" NAME="gender">Male
<INPUT TYPE="radio" NAME="gender">Female <P>
Enter your address:<INPUT TYPE="text" NAME="address"><P>
Enter your city:<INPUT TYPE="text" NAME="city"><P>
<INPUT TYPE="checkbox" NAME="retired">I am retired
</FORM>
<FORM>
<INPUT TYPE="button" NAME="act" VALUE="Verify" onClick="verifyIt()">
</FORM>
</BODY>
</HTML>
Variables in Hidden form
<html>
<head>
<title>Hidden Var Test</title>
<script language="JavaScript">
var holder = ""
var backup = ""
function postData(value) {
backup = holder
holder = value
}
function resetValue() {
var len = document.form1.itemList.length
for (var i=0; i<len; i++) {
if (document.form1.itemList[i].value == backup) {
document.form1.itemList[i].checked = "1"
break
}
}
}
</script>
</head>
<body>
<form name="form1" method="POST">
<p><input type=radio name="itemList" value="A" onClick="postData(this.value)">A</p>
<p><input type=radio name="itemList" value="b" onClick="postData(this.value)">b</p>
<p><input type=radio name="itemList" value="C" onClick="postData(this.value)">C</p>
<p><input type=radio name="itemList" value="D" onClick="postData(this.value)">D</p>
<p><input type=radio name="itemList" value="E" onClick="postData(this.value)">E</p>
<p><input type=radio name="itemList" value="F" onClick="postData(this.value)">F</p>
<p><input type=radio name="itemList" value="G" onClick="postData(this.value)">G</p>
<p><input type=radio name="itemList" value="H" onClick="postData(this.value)">H</p>
<p><input type=button name="UndoLast" value="Undo Last" onClick="resetValue()"></p>
</form>
</body>
</html>