|
|
Creating Web Forms |
To work with JavaScript, you need to be aware of what HTML code is, even if you do not know all of the possible HTML tags. If you are rusty on the basics of writing web pages and using HTML, take a look at one of the tutorials found throughout the Web. Some useful tutorials may be found at the Ed Tech by Bowman web site ( http://www.edtechbybowman.net/ ).
As an introduction to HTML forms, the information form for this JavaScript and Forms site illustrates the variety of elements that can be used in an HTML form to obtain information from a person completing the form.
Complete the form and submit it.
Then view the source code. (In MSIE, go to Page/View Source menu.)
Each form must begin with a <form> HTML tag that tells how the data from the form is to be handled. For example, in the information form for this site, this tag is given by the following:
<form name="phpformmailer" action="formmailer.php" method="post">
This version of the form tag is used when some processing by the server is necessary. In this case a PHP script, called "formmailer.php" will process the information submitted by the user and will email it to the address specified in the script. If the form has been processed successfully by the PHP script, the user will be sent to a than-you page, in this case, called "FormNotice.html," which will thank the user for submitting the data. This PHP script is available here and may be freely used by others on their servers.
A sample of the emailed output from this PHP script can be viewed here
If all of the processing will be done by JavaScript on the webpage (client-side), then the form tag can be very simple. For example, the simple calculator at this site uses the following tag.
<form name="calculator">
Note: The name of the form (in this case, "calculator") is case sensitive.
There are eight basic types of input elements and control buttons that can be used in a form. Each element of a form has:
Below are the eight basic HTML tags with a brief explanation of how they can be coded with example lines from the information form that you opened at the beginning of this tutorial.
<INPUT NAME="17. name" VALUE="" MAXLENGTH="50" SIZE=50>
This type of form element allows the entry of a single line or phrase of data. Note: The number at the beginning of the name of the form element is used by the cgi script on the server to organize the data in its proper order for e-mailing back to the data collector (in this case, myself). For this cgi script, all of the numbered form elements must have the same number of digits, e.g. 1, 2 or 3 digits (in this case, two digits).
Multiple-choice tests, the main tool of standardized tests, can be designed using radio buttons to select one particular answer. Here is the code for one of the options on how well a user knows webpage authoring. (The " " codes (which force the browser to make a blank space) and the <b>tags (used to bold text) have been removed for ease of study.)
Note: For this particular CGI script to handle the value of a radio button or a check box, the value must be of the form: a number, a space, and then one "word." Thus this example uses the underscore character to combine two or more English words into one "word."
3. How would you rate your experience with webpage
authoring?<br>
<INPUT TYPE="RADIO" NAME="04.
web_authoring" VALUE="5">5 (extensive)
<INPUT TYPE="RADIO" NAME="04.
web_authoring" VALUE="4">4 (fairly
broad)
<INPUT TYPE="RADIO" NAME="04.
web_authoring" VALUE="3">3 (moderate)
<INPUT TYPE="RADIO" NAME="04.
web_authoring" VALUE="2">2 (minimal)
<INPUT TYPE="RADIO" NAME="04.
web_authoring" VALUE="1">1 (none)
If more than one choice may be selected at the same time, then the check box form element is the tool of choice. Here is the code from the information form asking who the users of this site are.
6. What is your position? (Check all that apply.)<br>
<INPUT TYPE="CHECKBOX" NAME="07.
position" VALUE="college_educator">
college educator<br>
<INPUT TYPE="CHECKBOX" NAME="08.
position" VALUE="high_school_educator">
high school educator<br>
<INPUT TYPE="CHECKBOX" NAME="09.
position"
VALUE="elem_mid_sch_educator">
elementary/middle school educator<br>
...[student options deleted]...
<INPUT TYPE="CHECKBOX" NAME="13.
position" VALUE="business_person">
consultant or business employee<br>
<INPUT TYPE="CHECKBOX" NAME="14.
position" VALUE="own_web_pages">
construct/maintain web sites for my purposes<br>
<INPUT TYPE="CHECKBOX" NAME="15.
position" VALUE="others_web_pages">
construct/maintain web sites for others (employer, other
companies/organizations)
In a selection element, the user can click on an arrow to the right of a text field box to see a list of all possible selections. This pull-down menu can be as long as the web author needs it to be. This
1. In what setting are you using this site?<br>
<SELECT NAME="01. setting" SIZE=1>
<OPTION VALUE="none selected">choose one
<OPTION VALUE="MWC_Fac_Acad_May_2002">MWC
Fac. Acad. 5-02
<OPTION VALUE="other">Other (explain at
right)
</SELECT>
The SIZE parameter specifies how many options will be visible at any one time.
If essays are your cup of tea, have no fear, textareas are just ahead.
2. How are you planning to use web forms and
JavaScript?<br>
<TEXTAREA NAME="03. use_forms_js" ROWS=3
COLS=60></TEXTAREA>
Any default text can be enclosed between the opening tag and the closing tag for the TEXTAREA form element. However, this default text is optional.
Since this particular cgi script only handles data coming from form elements, the Hidden Input field is a useful way to send some data to the email recipient without having it show up on the HTML form itself. The line below is used in an astronomy web question form to send a condensed version of the original question along with a student's answer to the professor for the course.
<INPUT TYPE="hidden" NAME="4.
Question" VALUE=
"(5/2) What was interesting, intriguing, confusing
or frustrating?">
Another use for hidden fields is to return the number of correct answers to the instructor when a student has completed an online quiz.
No form can send the data anywhere unless a procedure to submit it is invoked. The SUBMIT button is just the thing needed.
<INPUT TYPE=SUBMIT VALUE="Submit Data!">
A SUBMIT button causes the webpage to process the data in the form according to the directions given in the original FORM tag. In the case of the information form used here, it sends the form data to the appropriate CGI script located on the host webpage server.
And all of us have probably filled out a form on the web only to realize that we wanted to start over. Erasing all of the entries in a form is easy with the RESET button.
<INPUT TYPE=RESET VALUE="Clear This Form!">
Note: In the example used here, no submit button is used. Rather a generic button is generated that can call a JavaScript function [sendIt(this.form)] which will do some minimal data checking before sending it to the CGI script.
Now you can try it yourself.
1. Modify the information form for this site to collect some data that you may find useful in a project you would like to begin. (First, open the "information form" in your web browser and then save it using the "File/Save As" menu option. Save the file to your folder or disk using some name that is appropriate for your task. Remember that it must end in either .htm or .html to be recognized as the name for a web page.)
Note: There are several ways to work at creating and/or modifying an HTML form.
In either case, it is often easiest to begin with a web-page form that has already been made and then cut-and-paste the new form together.
2. Find at least one example of a web site that uses forms and/or JavaScript to do something that looks like it might be useful for us to know about.
Return to Ed Tech by Bowman Home
Created and maintained by: Richard L. Bowman ( richard.bowman@edtechbybowman.net ); last updated: 31-Mar-11.