| Free Tutorials |
| Internet |
 What is Internet |
| Internet Games |
| Learn TCP IP |
| HTML |
| Learn HTML |
| Learn DHTML |
| Learn CSS |
| Learn XML |
| Learn XHTML |
| Learn WML |
| Database |
| Learn Access |
| Learn Data-VB |
| Learn Oracle |
| Learn SQL |
| Programming |
| Learn ActiveX |
| Learn C++ |
| Learn CGI_Perl |
| Learn Interdev |
| Learn Java |
| Learn JavaScript |
| Learn Vbscript |
| Learn VisualBasic |
| Learn VC++ |
| Operating systems |
| Learn RedHat |
| Learn Unix |
| Learn Winnt |
It is important to remember that the purpose of forms is to collect information from users. Of course, this information needs to be used for some further purpose, usually involving processing the submitted information in some fashion. Such processing can take place at the browser, using a browser-based scripting language such as JavaScript; or it can take place on the server, using a server-based programming language such as Visual Basic. Whether processing takes place at the browser or on the server, each receives the information submitted from the form. The manner in which this takes place is important to understand when designing forms. Although we will not be discussing forms processing here, you need a general understanding of how the browser or the server identifies form information submitted to it. When a submit button or submit image is clicked, information from the form is packaged for delivery to the page identified in the action attribute of the <form> tag. When forms are submitted to a Web server, this information is transmitted by the method indicated, which can be either get or post. Usually, forms are submitted to the server using the post method. Name/Value Pairs Form information is identified and processed through names and values. Each field on a form is assigned a name when the form is created. This unique name is used to identify the particular field and to reference the value associated with it. Field values are established when the user fills out the form. When information is typed into a text field, for example, that text string becomes the value of that field and can be referenced through the name assigned to the field. Likewise, when the user clicks on a checkbox or selects from a drop-down list, the data value associated with the checkbox or menu choice is referenced through the name assigned to that particular control. Thus, form information ends up as field names and associated data values submitted by the user. The exact manner in which these name/value pairs are referenced and processed depends on whether the processing takes place at the browser or on the server. In either case, information arrives at the processing page as a string of name/value pairs in the following format: FieldName1=value1&FieldName2=value2&FieldName3=value3....Control names and their associated values are paired with an equal sign (=) and are connected with other pairs by ampersands (&). When the transmission method specified in the <form> tag is get, this string of names and values is appended to the URL address following a question mark (?). You may have noticed a similar text string in your browser's address box as you navigate the Web. When the method is post, the string is sent in a separate data stream, still in the same format. It is usually recommeded that you use the post method unless you have a reason for doing otherwise. A Form Example Let's put this all together in a simple example form. This form does not include all the possible field types, but it does illustrate the approach to creating a simple form. Membership Application Form
The form elements have been coded inside a table structure to help align the labels and fields.
<form name="MyForm" action="Members.htm" method="post">
<h2>Membership Application Form</h2> <table> <tr> <td>First Name: </td> <td><input type="text" name="FirstName" size="15" maxlength="15" /></td> </tr> <tr> <td>Last Name: </td> <td><input type="text" name="LastName" size="15" maxlength="15" /></td> </tr> <tr> <td>Gender: </td> <td><input type="radio" name="Gender" value="F" />Female <input type="radio" name="Gender" value="M" />Male</td> </tr> <tr> <td>Major: </td> <td><select name="Major"> <option>Web Development</option> <option>Multimedia</option> <option>Database Administration</option> <option>Networking</option> <option>Programming</option> <option>Systems Analysis</option> </select></td></option> </tr> <tr> <td>Reason for Joining: </td> <td><textarea name="Reason" cols="30" rows="3"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="SubmitButton" value="Submit Form" /></td> </tr> </table> </form> The first two fields are text boxes for applicants to enter their first and last names. These fields are set to a size and maximum of 15 characters in length. The next two fields comprise a set of radio buttons. The choices are mutually exclusive since both buttons have the same name. The single-character value "F" or "M" is associated with the field name when one of the buttons is clicked. Next comes a drop-down menu of choices. The value submitted for this field is the option label. A text area follows in which the applicant can enter an extended text string of sentences or paragraphs.
The action attribute of the <form> tag is the name of the Members.htm page. That is, information submitted from the form is made available to that page when it is transmitted to the server. The method is post, meaning that form name/value pairs are sent as a separate data stream to the URL. The entire set of name/value pairs for the filled-out form would resemble the following: FirstName=Alice&Lastname=Underwood&Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make+Web+pages&SubmitButton=Submit+Form Note that blank spaces in the string are replaced by the plus sign (+) when the browser issues the request. The manner in which this information is processed by the receiving page depends on the script contained on the page. Form Submission The "Membership Form" above has been designed for submission to a page containing a processing script. If you fill in all the fields and click the button, you will receive an email showing your entered information. You must enter your valid email address for the form to work properly.
|
