JavaScript DHTML/Form Control/Form HTML

Материал из Web эксперт
Перейти к: навигация, поиск

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

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


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

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

Text
Text
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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Form_HTML&oldid=2487»