Published: October 6, 2011
Updated: October 30, 2011
In Form Attributes
Referring to the form created in the simple form hub (code snippet provided at the end of this hub for reference), you may notice that in some of the tags there were a couple of extra attributes. For instance, the <form> tag contained the name attribute. This attribute permits the programmer to refer back to the form after the visitor fills out the form, which the following code snippet demonstrates:
Running the preceding script causes the browser to look inside the current HTML document for an element named "contactForm," specified by the document.contactForm... portions of lines 2,3, and 4. Within this element are three child elements named "fname", "lname", and "email" also specified in those lines.
The browser retrieves the values for those three elements and assigns those values to three variables declaired in lines 2, 3, and 4 of the script. A variable is an area in memory that a programmer specifies as an area for temporary storage. The programmer may then manipulate the information stored in the variable.
Lines 6, 7, and 8 of the script then direct the browser to display the values contained in those variables on the screen and add labels to the displayed values. The document.writeln() functions accomplish this task. Whatever is included within the opening and closing parenthesis "()" of the method will be displayed. Information contained within quotation marks in the parenthesis is displayed as literal values, The plus sign in the statements adds or concatenates variable information to the literal text.
Line 10 of the script displays a confirmation message.
Note: You include the above script within the <head> element that precedes the body of the document and the script would run after the user submits the form. This script would cause the browser to erase the form the user used to enter the data and replace the form with the information included in the script.
Simple Contact form Code
<center> <form action="retrieveInfo.asp" method="get" id="contactForm" name="contactForm"> <table><tr><th colspan="2">Simple Contact Form</th></tr> <tr><td>First Name: </td><td><input id="fname" name="fname" /></td></tr> <tr><td>Last Name: </td><td><input id="lname" name="lname" /></td></tr> <tr><td>E-mail: </td><td><input id="email" name="email" /></td></tr> <tr><td></td><td><input type="submit" value="Submit" /></td></tr> <tr><td colspan="2">Submit Form for more Information</td></tr> </table> </form> </center>
What do you think?
Your comments are always welcome.