JavaScript DHTML/Form Control/Form HTML
Содержание
- 1 Accessing the Elements of a Form
- 2 Form 1
- 3 Form 2
- 4 Form 3
- 5 Adjusting a CGI Submission Action
- 6 A Form for Entering a URL
- 7 Button Objects: Submit, Reset, and Button
- 8 Help on Registration
- 9 Online Registration
- 9.1 Checking Elements on a Form
- 9.2 Client-Side JavaScript Objects and HTML Tags That Create Instances of Them
- 9.3 Creating an Example Form for User Feedback
- 9.4 Methods and Properties of the Form Object
- 9.5 Methods and Properties of the Reset Object
- 9.6 Methods and Properties of the Submit Object
- 9.7 Passing a Form Object and Form Element to Functions
- 9.8 Properties of the Hidden Object
- 9.9 Storing the last value using a Hidden object.
- 9.10 Submitting Forms to the Server
- 10 Order Form
Accessing the Elements of a Form
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Multiform Document Example</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <FORM ACTION="nothing" onSubmit="return displayFormData()">
Form 1
Text field: <INPUT TYPE="TEXT" NAME="f1-1" VALUE="Sample text">
Password field: <INPUT TYPE="PASSWORD" NAME="f1-2">
Text area field: <TEXTAREA ROWS="4" COLS="30" NAME="f1-3">Text</TEXTAREA>
<INPUT TYPE="SUBMIT" NAME="f1-4" VALUE="Submit"> <INPUT TYPE="RESET" NAME="f1-5">
</FORM>
<FORM>
Form 2
<INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="1" CHECKED>A
<INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="2">B
<INPUT TYPE="CHECKBOX" NAME="f2-1" VALUE="3">C
<INPUT TYPE="RADIO" NAME="f2-2" VALUE="1">D
<INPUT TYPE="RADIO" NAME="f2-2" VALUE="2" CHECKED> E
<INPUT TYPE="RADIO" NAME="f2-2" VALUE="3">F
<INPUT TYPE="FILE" NAME="f2-3"> </FORM>
<FORM>
Form 3
<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>
</source>
Adjusting a CGI Submission Action
<source lang="html4strict">
<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<INPUT TYPE="submit" NAME="boxChecker" onClick="return setAction(this.form)"> </FORM> </BODY> </HTML> </source>
A Form for Entering a URL
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Load URL</TITLE> <SCRIPT LANGUAGE="JavaScript"></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>Enter host name: <INPUT TYPE="TEXT" NAME="hostname" SIZE="45">
Enter path: <INPUT TYPE="TEXT" NAME="path" SIZE="50">
<INPUT TYPE="BUTTON" NAME="load" VALUE="Load URL" ONCLICK="loadFrames()"> </FORM> </BODY> </HTML>
</source>
Button Objects: Submit, Reset, and Button
<source lang="html4strict">
<html> <head> <title>Online Registration</title> <SCRIPT LANGUAGE="JavaScript">
function showHelp() { helpWin = window.open("", "Help", "height=200,width=400")helpWin.document.write("<body>
Help on Registration
") helpWin.document.write("1. step 1.") helpWin.document.write("2. step 2.<p>") helpWin.document.write("3. step 3.<p>") helpWin.document.write("<p>") helpWin.document.write("<form>
helpWin.document.write("<input type=button value="OK" onClick="window.close()">")helpWin.document.write("
}
</SCRIPT>
</head>
<body>
Online Registration
<form method="POST"> <input type=button value="Help" onClick="showHelp()">
</form> </body>
</source>
Checking Elements on a Form
<source lang="html4strict">
<html> <head> <title>Online Registration</title> <SCRIPT LANGUAGE="JavaScript">
</SCRIPT> </head>
<body> <form name="form1" method="POST" onSubmit="return checkFields()">
Username:
<input type=text size=25 maxlength=256 name="Username">
Email address:
<input type=text size=25 maxlength=256 name="EmailAddress">
<input type=submit value="Register"> <input type=reset value="Clear">
</form> </body> </html>
</source>
Client-Side JavaScript Objects and HTML Tags That Create Instances of Them
<source lang="html4strict">
/* +-------------------------------------+--------------------------------------+ | 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> +-------------------------------------+--------------------------------------+
- /
</source>
Creating an Example Form for User Feedback
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</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>
Quantity:
<input type="text" name="quantity" value="1" size=4 maxlength=4 onFocus="setStatus("(1-1000).")" onBlur="setStatus("")">
Toastiness:
<input type="text" name="toastiness" value="50" size=3 maxlength=3 onFocus="setStatus("0-100 (0=untoasted 100=burnt).")" onBlur="setStatus("")">
Buttered: Yes <input type="radio" name="buttered" value="yes" checked onClick="setStatus("?")"> No <input type="radio" name="buttered" value="no" onClick="setStatus("?")">
<input type="submit" value="Start Toaster"> <input type="reset">
</form> </body> </html>
</source>
Methods and Properties of the Form Object
<source lang="html4strict"> 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.
+---------+----------------+-------------------------------------------------+
</source>
Methods and Properties of the Reset Object
<source lang="html4strict">
/* +------------+----------------+------------------------------------------+
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.
+------------+----------------+------------------------------------------+
- /
</source>
Methods and Properties of the Submit Object
<source lang="html4strict"> 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. </source>
Passing a Form Object and Form Element to Functions
<source lang="html4strict">
<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
Enter the name of your favorite song:
<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>
</source>
Properties of the Hidden Object
<source lang="html4strict">
+------------+--------------------------------------------------------------------+
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.
+------------+--------------------------------------------------------------------+
</source>
Storing the last value using a Hidden object.
<source lang="html4strict">
<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
<input type=radio name="itemList" value="B" onClick="postData(this.value)">B
<input type=radio name="itemList" value="C" onClick="postData(this.value)">C
<input type=radio name="itemList" value="D" onClick="postData(this.value)">D
<input type=radio name="itemList" value="E" onClick="postData(this.value)">E
<input type=button name="UndoLast" value="Undo Last" onClick="resetValue()">
<INPUT TYPE="hidden" NAME="holder" value=""> <INPUT TYPE="hidden" NAME="holder2" value=""> </form> </body> </html>
</source>
Submitting Forms to the Server
<source lang="html4strict">
<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>
Order Form
<form name="form1" action="http://www.wbex.ru" method="POST" onSubmit="checkType()">
Please provide the following contact information:
<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">
Please provide the following ordering information:
<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"><input type=checkbox name="rush" value="ON">Rush Order!
<input type=submit value="Submit Form"> <input type=reset value="Reset Form">
</form> </body> </html>
</source>
<source lang="html4strict">
<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" />
<input type="password" name="text2" />
<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>
</source>
Using the document.forms Property
<source lang="html4strict">
<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>
TextText
Text
Text
Text
Text
Text
Text
<FORM NAME="visit"> <INPUT TYPE="button" VALUE="Visit music site" onClick="myFunction()"> </FORM> </BODY> </HTML>
</source>
Using the form.elements Array
<source lang="html4strict">
<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">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> </source>
Variables in Hidden form
<source lang="html4strict">
<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<input type=radio name="itemList" value="b" onClick="postData(this.value)">b
<input type=radio name="itemList" value="C" onClick="postData(this.value)">C
<input type=radio name="itemList" value="D" onClick="postData(this.value)">D
<input type=radio name="itemList" value="E" onClick="postData(this.value)">E
<input type=radio name="itemList" value="F" onClick="postData(this.value)">F
<input type=radio name="itemList" value="G" onClick="postData(this.value)">G
<input type=radio name="itemList" value="H" onClick="postData(this.value)">H
<input type=button name="UndoLast" value="Undo Last" onClick="resetValue()">
</form> </body> </html>
</source>