Admin: 1 версия

2010-05-26T07:21:43Z

1 версия

Новая страница

==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()">
<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>

</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<P>
<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></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>

</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><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>

</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()">
<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>

</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>
<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>

</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<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>

</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
</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>

</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>
<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>

</source>

==Use hidden field to store data==



<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" /><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>

</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>
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>

</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"><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>

</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</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>

</source>

JavaScript DHTML/Form Control/Form HTML - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)