|
|
Devilish Delights
Creating Web Page Forms with HTML
Devilish Delights, one of the leading manufacturers of ice cream, wants to add a new flavor to their ice cream line. The company has already established a presence on the World Wide Web with pages that describe the company's products and where their products can be found. Now, Devilish Delights would like to improve upon their presence by creating an interactive form that will get customers involved in what this new flavor will be. To participate, customers would fill out an online form. The person who creates the winning flavor will receive $5,000 and random drawings from the remaining entries will win a years supply of Devilish Delights Ice Cream.
You will have to consider how this form will appear, keeping in mind that the company plans to use the form to evaluate customer information. The company wants the following to appear on the interactive form:
To see what an online form looks like, open your student textbook to page 6.4. Your form will resemble the one shown there, but will contain the information listed above.
Before you begin to create the form, you need to understand how such forms are interpreted and processed on the Web. HTML supports tags that allow you to create forms, however, it does not have the ability to process that information. One way of processing information is to sent it to a program running on the Web server, called a CGI script (Common Gateway Interface). For more information on this program, read pages 6.5-6.6 in your textbook.
Starting an Online Form with the <Form> Tag
Before you begin to plan the layout, there are several elements which are commonly used in Web page forms which needs to be addressed.
Each element in which the user can enter information is called a field. Information entered into a field is called the field value, or simply the value. Before you can create any field, you must first indicate to the browser that the page will contain fields. You do this using the <FORM> tag. The general syntax of the <FORM> tag is:
<FORM>
</FORM>
Between the <FORM> tags, you will place the various tags for each of the fields in the form. First, set up a basic HTML page in your text editor (HTML, HEAD, TITLE, BODY). The name assigned for the title will be Ice Cream Flavor Contest. Save your file, using the .html extension, under the name contestform.html.
Return to your text editor and place your cursor behind the beginning body tag and press enter to create a new blank line. You will center the companies logo here. Create a text image in flash or fireworks and export it as a gif file. Write the HTML code to center it in the blank line created under the beginning body tag. Press the enter key to insert a blank line and type in the contest form directions as follows:
Enter our flavor contest and win up to $5,000. All you have to do is fill in the following information to help develop a new flavor of ice cream. If your entry is chosen as the best, you will win the $5,000 grand prize. Random drawings from remaining entries will win a years worth of free ice cream.
Save your file and view it in a browser window. Make sure your logo is centered at the top of the page and your description of the form is aligned to the left of the page and directly under the logo.
Return to the file contestform.html in your text editor. Directly above the </BODY> tag insert the following two lines:
<FORM NAME=CON>
</FORM>
Turn to page 6.9 in your textbook. This is how your form will be laid out. Figure 6-5 shows the simple two-column table that you'll use to create the form. Now, you'll add the tags for the two-column table to the contestform.html file.
Go to the <FORM> tag in the contestform.html file. Insert the following two lines between the <FORM> AND </FORM> tags:
<TABLE>
</TABLE>
Save your changes. With the <FORM> and <TABLE> tags in place, you can now start to insert tags for each field in the form. You'll begin by learning how to create input boxes.
An input box is a single-line box into which the user can enter text or numbers. To create input boxes, you need to use the <INPUT> tag, which you will see later is also used for other types of fields. The general syntax of the <INPUT> tag is:
<INPUT TYPE=Option NAME=Text>
where Option is the type of input field, and Text is the name assigned to the input field.
The Type property can have the following values:
The input field you will first use is Text as the value for the Type property. The NAME property is required with the <INPUT> tag. When information is sent to the CGI script, field names are used to identify what values have been entered in each field.
To create an input box, use the following tag:
<INPUT NAME=text VALUE=value SIZE=value MAXLENGTH=value>
where the NAME property set the field name, the VALUE property assigns a default value to the input box, the SIZE property defines the width of the input box in number of characters, and the MAXLENGTH property defines the maximum number of characters allowed in the field.
The first part of the registration form deals with contact information for the customer. Each of the field in this section is an input box. Because input boxes are blank boxes without any accompanying text, you have to insert a text description next to each box so that the user knows what to enter. The form you will create, will also using a table to control the form's layout, so you'll have to add the appropriate row and cell tags as well.
Return to your text editor and enter the following lines between the <TABLE> and </TABLE> tags (indenting the lines will make it easier to read):
<TR>
<TD>First Name:</TD>
<TD><INPUT NAME=First Name>
Last Name: <INPUT NAME=Lastname></TD>
</TR>
<TR>
<TD>Address:</TD>
<TD><INPUT NAME=Address></TD>
</TR>
<TR>
<TD>City:</TD>
<TD><INPUT NAME=City> State: <INPUT NAME=State>
Zip: <INPUT NAME=Zip></TD>
</TR>
<TR>
<TD>Country:</TD>
<TD><INPUT NAME=Country></TD>
</TR>
Save your changes and view it in a browser.
Controlling the Size of an Input Box
By default, the browser made all the input boxes in the registration form the same size-20 characters wide. You can specify a different size. The syntax for changing the size of an input box is:
<INPUT SIZE=value>
where value is the size of the input box in number of characters.
To allow for longer names, the First and Last name fields should be increased to 25 characters. Also, the Address box needs to be larger, so you will give it the value of 50 to allow for street number and street names. The State field can be reduced to a size of three characters for state abbreviations, and the size of the Zip field should be reduced to 10 characters. The City and Country fields can remain unchanged, with the default width of 20 characters each.
Return to the contestform.html file in your text editor. For the FirstName and LastName <INPUT> tags, insert the property SIZE=25 as follows:
<TD><INPUT NAME=First Name SIZE=25>
Last Name: <INPUT NAME=Last Name SIZE=25></TD>
Continue inserting the property size with the remaining <INPUT> tags:
For the Address <INPUT> tags, insert the property SIZE=25.
For the State <INPUT> tags, insert the property SIZE=3.
For the Zip <INPUT> tags, insert the property SIZE=10.
Save your changes, and then reload the file in your Web browser.
Setting the Maximum Length for Text Input
There will be times when you want to put limitations on the text that can be entered. An example would be if you were asking for a Social Security Number. The syntax for setting the maximum length of the input is:
<INPUT MAXLENGTH=value>
where value is the maximum length of characters allowed. In the Social Security Number example, the <INPUT> tag might look like the following:
<INPUT NAME=SSNUM SIZE=9 MAXLENGTH=9>
Setting a Default Value for an Input Box
Another Property you can use with the <INPUT> tag is the VALUE property. The VALUE property is the default value of the field and is also the value that appears in the input box when the form is initially display. The syntax for the VALUE property is:
<INPUT VALUE="value">
where value is the default text or number that will appear in the field. Because Devilish Delights is mainly sold in the United States, you will make the Country field on the contest form have a default value of "United States."
Return to the contestform.html file in your text editor. Type VALUE="United States" in the Country <INPUT> tag as shown below:
<TR>
<TD>Country:</TD>
<TD><INPUT NAME=Country VALUE="United States"></TD>
</TR>
Save your changes, and then reload the file in your browser. Verify the "United States" is now automatically entered into the Country field. If customers from countries outside the United States use this Web form, they can remove the default value by selection the entire text string and pressing the Delete key.
In some instances you want to prevent the screen from displaying what the user enters into an input box. An example of this would be if you are requesting credit card information. If so, you would like to prevent the card number from being displayed on the computer monitor, as a security measure. You can accomplish this with a Password field. A Password field is identical to an input box except that the characters typed by the user are displayed as bullets or asterisks. The syntax for creating a Password field is:
<INPUT TYPE=PASSWORD>
As with input boxes, you can specify a size, maximum length and name for your password. You do not need to specify any Password fields for the registration form.
Because the first few fields you've entered deal solely with collecting contact information, you will enter a horizontal line to separate it from the rest of the form.
Return to the contestform.html file in your text editor. Directly above the </TABLE> tag, insert the following lines (indenting as needed):
<TR>
<TD COLSPAN=2><HR></TD>
</TR>
Save your changes and then reload the file in your browser, There should now be a horizontal line below the Country field.
Before going on to other tasks, test the registration form by entering some text values in it. To move from one input box to the next, you press the Tab key. To move to the previous input box, press the Tab key while holding down the Shift key. Pressing the Enter key will submit the form, but because you have not created a Submit button for the form yet, pressing the enter key will do nothing at this point.
The next part of the contest form is dedicated to collecting information on the flavor preference of individual entries. The first field you'll create in this section will record the base flavor for the new ice cream. There are four flavors that will be listed:
Because the flavors constitute a predefined list of values , you will display this information with a selection list. A selection list is a list box from which the user selects a particular value or set of values, usually by clicking the item with the mouse. Generally it's a good idea to use selection lists rather than input boxes when you have a fixed set of possible responses.
To create a selection list, use the following set of HTML tags:
<SELECTION NAME=Text>
<Option>Option 1
<Option>Option 2
</SELECT>
where Text is the name you've assigned to the selection field, and Option 1, Option 2, and so forth are the possible values displayed in the selection list. Notice that the values for each option are entered to the right of the <OPTION> tag rather than inside the tag.
To allow the user to select multiple items in the selection list, use the following tag:
<SELECT MULTIPLE>
To display several items in the selection list, or to change the selection list style from a drop-down list box to a fully displayed list box, use the following tag:
<SELECT SIZE=Value>
where Value is the number of items displayed in the list box.
Using the <SELECT> and <OPTION> Tags
Your next task is to add the flavor selection list to the contest form. Return to the contestform.html file in your text editor. Directly above the </TABLE> tag, insert the following lines (indenting where applicable):
<TR>
<TD>Base Flavor</TD>
<TD><SELECT NAME=Flavor>
<OPTION>Vanilla
<OPTION>Chocolate
<OPTION>Strawberry
<OPTION>Banana
</SELECT></TD>
</TR>
Save your changes to the file, then load the file in your Web browser. The form now contains the selection list. Note that the first item in the list is displayed in the selection list box. Click the flavor drop-down list arrow and verify that the four flavors you entered with the <OPTION> tag are displayed.
Modifying the Appearance of a Selection List
HTML provides several properties to modify the appearance and behavior of selection lists and selection options. By default, the <SELECT> tag displays only one option from the selection list, along with a drop-down list arrow to allow you to view other selection options. You can change this by modifying the SIZE property. The syntax of the SIZE property is:
<SELECT SIZE=value>
where value is the number of items that the selection list will display in the form. By specifying a SIZE value greater than 1, you change the selection list.
Return to your text editor and locate the line <TD><SELECT NAME=Flavor> and change it to read:
<TD><SELECT NAME=Flavor SIZE=4>
Save your changes and view it in your Web browser. Notice that you now can see all four selections. Return your page to view only one selection, taking out the SIZE=4 command.
In some cases you might want to make a selection list where more than one selection can be made. To learn more on how to do this, open your textbook to page 6.21 and 6.22 and read the Making Multiple Selections and Working With Option Value Sections.
Radio buttons are similar to selection lists in that they display a list of choices from which the user makes a selection. Unlike the items in a selection lists, only one radio button can be selected.
Radio buttons use the same <INPUT> tag as input boxes, except that the TYPE property is set to RADIO. The syntax for an individual radio button is:
<INPUT TYPE=RADIO NAME=text VALUE=value
where text is the name assigned to the field containing the radio button, and value is the value of the radio button, which will be sent to the CGI script if that option is selected.
To make a particular radio button the default option, use the following tag:
<SELECT TYPE=RADIO CHECKED>
Because Devilish Delights stockholders want to collect information on the age of the people participating in this contest, they have ask you to make a list of age groups to chose from. For this section you will group ages in categories. The name you'll assigned to this field will be Age Group. For this section, you will use a radio button to make a selection, because you only want the participant to chose one from the list. You have decided to group the ages as follows:
Return to the contestform.html file in your text editor. Directly above the </TABLE> tag, insert the following lines:
<TR>
<TD VALIGN=TOP>Age Group:</TD>
<TD><INPUT TYPE=RADIO NAME=AGE VALUE=CHILD>12 and under<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=TEEN>13-19<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=TWENTIES>20-30<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=THIRTIES>31-40<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=FORTIES>41-50<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=FIFTIES>51-60<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=SIXTIES>61-70<BR>
<INPUT TYPE=RADIO NAME=AGE VALUE=SEVENTIES>71 and above</TD>
</TR>
The field value sent to the CGI script is located after the value field. The name of the field is "AGE" for all radio buttons in the group. Save your changes and reload the file in your Web browser. Note that the VALIGN=TOP properly causes the table cell containing the text "Age Group:" to be aligned with the top of the cell containing the radio buttons.
The next type of input field you'll create in the contest form is the check box field. A check box is either selected or not, but unlike radio buttons, there is only one check box per field. You create check boxes using the <INPUT> tag, with the TYPE property set to CHECKBOX, as follows:
<INPUT TYPE=CHECKBOX NAME=text>
where text is the name of the field. A check box field has the value "on" if the check box is selected, and no value is assigned if the check box is left unselected.
By default, check boxes are unselected when the form open. As with radio buttons, you can use the CHECKED property to automatically select a check box. To do this, you would add CHECKED before the last bracket in your code.
You will use check boxes to list additional items that contest participants would want to include in the base flavor of their ice cream blend. The check box property gives the flexibility to chose as many additional items as they wish. The items you will list are:
Return to your text editor and the contestform.html file. Directly above the </TABLE> tag, insert the following lines:
<TR>
<TD VALIGN=TOP>Additional Items:(check all that you would include):</TD>
<TD><INPUT TYPE=CHECKBOX NAME=Pecans>Pecans<BR>
<INPUT TYPE=CHECKBOX NAME=Walnuts>Walnuts<BR>
<INPUT TYPE=CHECKBOX NAME=Marshmallows>Marshmallows<BR>
<INPUT TYPE=CHECKBOX NAME=Cherries>Cherries<BR>
<INPUT TYPE=CHECKBOX NAME=Chocolate Chips>Chocolate Chips<BR>
<INPUT TYPE=CHECKBOX NAME=Mint>Mint<BR>
<INPUT TYPE=CHECKBOX NAME=Caramel>Caramel<BR>
<INPUT TYPE=CHECKBOX NAME=Gummy Bears>Gummy Bears<BR>
<INPUT TYPE=CHECKBOX NAME=Gummy Worms>Gummy Worms<BR>
<INPUT TYPE=CHECKBOX NAME=M & M bits>M & M bits<BR>
<INPUT TYPE=CHECKBOX NAME=Candied Apple bits>Candied Apple bits<BR>
<INPUT TYPE=CHECKBOX NAME=Snickers bits>Snickers bits<BR>
<INPUT TYPE=CHECKBOX NAME=Reese Cup chunks>Reese Cup chunks</TD>
</TR>
Save your changes and view it in your Web browser. Notice that the form has lost its original state. No problem!! You just need to put in a page break here and there to return it to its original state. Locate the line that reads:
<TD VALIGN=TOP>Additional Items:(check all that you would include):</TD>
Insert two page breaks as follows:
<TD VALIGN=TOP>Additional Items:<BR>(check all that you<BR> would include):</TD>
Save these changes and again view it in you Web browser. Now doesn't that look a lot better!
Directly above the </TABLE> tag, insert the following tags:
<TR>
<TD COLSPAN=2><HR></TD>
</TR>
Return to your Web browser and reload the contestform.html file. You should now see a horizontal line below the check boxes. Click each of the check boxes you just created and verify that clicking them alternately selects and deselect them.
Adding an Additional Input Box
You now need to add an input box that will prompt the participant to include the name they would give their ice cream creation. Return to the contestform.html file in your text editor. Directly above the </TABLE> tag, insert the following lines:
<TR>
<TD>Ice Cream Name:</TD>
<TD><INPUT NAME=Name SIZE=50></TD>
</TR>
The next section of the contest form allows contest participants to write a descriptive of the taste of their ice cream recipe. Because this would take more space then a text box, the text area property allows more space to enter long strings of text. The tag used for this property is the <TEXTAREA> tag. The syntax of the <TEXTAREA> tag is:
<TEXTAREA ROWS=value COLS=value NAME=text>Default text</TEXTAREA>
where the ROWS and COLS properties define the number of rows and columns in the text box, and Default text is the text that appears in the text box when the form opens. Although it is not required, you could use default text to provide additional instructions to the user about what to enter in the text box.
The text you enter into a text box does not automatically wrap to the next row in the box. Instead, a text box acts like an input box in which the text is automatically scrolled to the left as additional text is typed. You can override this default behavior using the WRAP property. There are three values for the WRAP property.
Return to your text editor and the contestform.html file. Directly above the </TABLE> tag, insert the following lines:
<TR>
<TD VALIGN=TOP>Description of Ice Cream:</TD>
<TD>
<TEXTAREA ROWS=3 COLS=50 NAME=Description WRAP=VIRTUAL></TEXTAREA>
</TD>
</TR>
Save your changes and view it in you Web browser. Notice that the form is again stretched out. Return to the line that reads Description of Ice Cream and place a page break <BR> between words of and Ice. Resave your file and reload it in your Web browser. The form should have returned to its original state.
Up to now, all of your form elements have been input fields of one kind or another. Another type of form field is one that performs an action when activated-as a button does when the user clicks it. Buttons can be used to run programs, submit forms, or reset the form to its original state. To create a button to submit the form to the CGI script, enter the following tag:
<INPUT TYPE=SUBMIT VALUE="text">
where the VALUE property defines the text that appears on the button and specifies the value that is sent to the CGI script to indicate which button on the form has been clicked.
To create a button to cancel or reset the appearance of your form, use the TYPE property shown in the following tag:
<INPUT TYPE=RESET>
To create a button to perform an action within the Web page by running a program or script, use the following tag:
<INPUT TYPE=BUTTON>
Return to your text editor with the contestform.html file. Directly above the </TABLE> tag, insert the following tags:
<TR>
<TD COLSPAN=2 ALIGN=CENTER>
<INPUT TYPE=SUBMIT VALUE="Send Contest Form">
<INPUT TYPE=RESET VALUE="Cancel">
</TD>
</TR>
Save your changes to the file, and then reload the file in your Web browser. View your form in both Explorer and Netscape to see the difference of how each browser handles the information. Test the Cancel button by entering test values into the form and then clicking the Cancel button. The form should be returned to its initial state.
Another form element that you can use in you Web pages is the inline image. Inline images can act like Submit buttons so that when the user clicks the image, the form is submitted. You create inline images using the <INPUT> tag, but with the TYPE property set to IMAGE. The syntax for this type of form element is:
<INPUT TYPE=IMAGE SRC="URL" NAME=text VALUE="text">
where URL is the filename or URL of the inline image, text is the name of the field, and the VALUE property assigns a value to the image.
Unlike the other fields you've created, the e-mail field has a predefined value (the e-mail of who will receive the information), which contest participants should not be able to change. In fact, the e-mail address should not even be seen. To accomplish this you will use the hidden field property to prevent participants from seeing the address.
You create a hidden field using <INPUT> tag with the TYPE property set to HIDDEN. They syntax for this tag is:
<INPUT TYPE=HIDDEN NAME=text VALUE=value>
You will use the fictitious e-mail address of "adavis@devilish.com" Because the field is hidden, you can place it anywhere between the opening and closing <FORM> tags. A standard practice is to place all hidden fields in one location, usually at the beginning of the form, to make it easier to interpret you HTML code. You should also include a comment describing the purpose of the field.
Return to the contestform.html file in your text editor. Directly below the <FORM> tag, insert the following two lines:
<!--- e-mail address of the person handling
this form --->
<INPUT TYPE=HIDDEN NAME=EMAIL VALUE="adavis@devilish">
Save the changes to the file.
You now must specify where to send the form data and how to send it. To control how information entered into your form is processed, you must modify the properties of the <FORM> tag. There are three properties you'll work with: ACTION, METHOD, and ENCTYPE.
The ACTION property identifies the CGI script that will process your form. The syntax for this property is:
<FORM ACTION=URL>
where URL is the URL of the CGI script. Your Internet Service Provider or the person requesting the form design will provide this information for you. If you are provided with the fictitious URL http://www.jkson_distributor.com/cgi/mailer you would still need to determine how to send this information. The METHOD property controls how your Web browser send data to the Web server running the CGI script. The syntax for the METHOD property is:
<FORM METHOD=Type>
where type is either GET of POST.
The final form property you might have to be concerned with is the ENCTYPE property. The ENCTYPE property specifies the format of the data when it is transferred from your Web page to the CGI script. The syntax of this property is:
<FORM ENCTYPE=Text>
where Text is the data format.
If you were to use this format, you would change the <FORM> tag to read:
<FORM NAME=REG ACTION="http://www.jkson_distributor.com/cgi/mailer" METHOD=POST>
There is no need to enter this into the form, however, this lets you know how to use this method.
Using the MAILTO Action
There is a way to send form information through e-mail without using a script. This action accesses the user's won mail program and uses it to mail form information to specified e-mail address, bypassing the need for using CGI scripts on a Web server. The syntax of the MAILTO action is:
<FORM ACTION="mailto:e-mail_address" METHOD=POST>
where e-mail_address is the e-mail address of the recipient of the form information. Because the MAILTO action does not require a CGI script, you can avoid some of the problems associated with coordinating your page with a program running on the Web server.
When you click the Submit button on a form that uses the MAILTO action, the operating system invokes the mail program and receives the content for the mail message from your Web browser.
An e-mail message generated by the MAILTO action is full of special characters that must be interpreted either by you or by a special translation program before the message can be read. To see an example of an e-mail message that the MAILTO action generated for a form, turn to page 6.39 in your textbook.
Enhancing Your Forms with JavaScript
We will use a few JavaScript commands to enhance the look of your form. To get a deeper understanding to using JavaScripts in forms, turn to tutorial 8 in your textbook. You will briefly cover a few scripts.
An event is a specific action that triggers the browser to run a block of JavaScript commands. With so many different events associated with your Web objects, you need some way of telling the browser how to run a set of commands whenever a specific event occurs.
An event handler is code added to an HTML tag that is run whenever a particular event occurs. The syntax for invoking an event handler is:
<HTML_tag Properties event_handler ="JavaScript commands;">
where HTML_tag is the name of the tag, Properties are properties associated with the tag, event_handler is the name of an event handler, and JavaScript commands are the set of commands or, more often, a single command that calls a JavaScript function to be run when the event occurs.
You want to add a command that will allow participants to choose the color of the background of the form by clicking on a color. The default color for the form will be teal.
Return to your text editor with the contestform.html file open. Edit your <BODY> tag to read:
<BODY TEXT=WHITE BGCOLOR=TEAL>
Under the <FORM NAME=CON> insert the following Javascript:
<P>Change background color to:</P>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='red';">Red<BR>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='blue';">Blue<BR>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='green';">Green
Save your changes and view the form in your Web browser. The forms background should be teal. Click on the radio buttons of the color to see if the form's background changes color. Cool huh!
You now want to include the current date on the form when the form is open. This is known as the onLoad command.
Using the onLoad Event Handler
The event handler for the opining of a Web page is called onLoad. Because this handler is associated with the document object, you must place it in the <BODY> tag of the HTML file. You'll begin your work on the form by adding this event handler to the contestform.html file.
Return to your text editor with the contestform.html file open. Type onLoad="StartForm();" in the <BODY> tag of the HTML file as follows:
<BODY TEXT=WHITE BGCOLOR=TEAL onLoad="StartForm();">
Now you have to create the StartForm() function. This function will have two purposes: first, it will enter the current date into the Date field, and then it will move the cursor to the next field in the form. Because users are not expected to enter the current date themselves, this function provides a way of avoiding the Date field during data entry.
User-defined functions are usually collected together between a set of <SCRIPT> tags located in the HEAD section of the file. One user-defined function, named DateToday(), which you will now place in your contestform.html file in your text editor just below your comment line reading hide form older browers. Press the enter key to start a new line and type in the following, indenting where needed:
function DateToday() {
var Today=new Date();
var ThisDay=Today.getDate();
var ThisMonth=Today.getMonth()+1;
var ThisYear=Today.getYear();
return ThisMonth+"/"+ThisDay+"/"+ThisYear;
}
This function contain JavaScript command that you are, by now, familiar with. Now you must add the function to the contestform.htm file so that it can retrieve the current date from the DateToday() function and place it in the Date field. Directly below the script you just typed above, type in the following:
function StartForm() {
document.CON.FORMDATE.value=DateToday();
}
The startForm() function gets its values from the DateToday() function.
Adding the Focus() method to the StartForm() function
In the StartForm() function in your file, you need to add a command that places the cursor in the next field in the CON form, which is the field used for entering the first name of the participant. The field's name if FirstName, so the command to move the cursor to this field is:
document.CON.FirstName.focus();
Place this line directly under the document.CON.FORMDATE.value=DateToday line, pressing the enter key so that it is displayed on a blank line by itself.
Now you need to create the input box that the date will appear in. Find the beginning table tag (<TABLE>) and press the enter key to create a new blank line. Enter the following to create a special input box that will display the DateToday. Insert the following lines below the <TABLE> tag and just above the first name input row in your form:
<TR>
<TD>Date:</TD>
<TD><INPUT TYPE=TEXT NAME=FORMDATE SIZE=8></TD>
</TR>
Your next task will be to include an ice cream personality test that will calculate the total score automatically and store this value in the TOTAL field. The ice cream personality score when calculated will tell the participant their personality. This is just a fun gimmick that the company hopes will get you to tell others to visit this Web site.
The tastes that will be rated 0 to 5, 0 being the least liked and 5 being the most liked.
Return to your text editor and place another table row between the ice cream description row and the row that contains your submit and cancel button. Insert a new row as follows:
<TR>
<TD COLSPAN=2>Take our Ice Cream Personality Contest. Rate the following taste to determine what type of personality you have. The taste I like in Ice Cream, 0 being the least and 5 being the best, is:</TD>
</TR>
Save these changes and view them in your Web browser. The directions for filling in the personality contest should now appear between the ice cream description box and the send contest form and cancel buttons.
Next you create input boxes that will hold the number for the rating of each taste. Return to contestform.html in your text editor. Under the directions for taking the personality you just placed in you file, press the enter key to start a new line. You will now begin inserting separate rows for each of the nine taste fields. The first one is shown below, however, you will need to create the other eight on your own. The first taste field input code is:
<TR>
<TD>
Bold:
</TD>
<TD>
<INPUT NAME=BOLD VALUE=0 SIZE=1 MAXLENTH=1 onBlur="PERS();">
</TD>
</TR>
Notice that the name and INPUT NAME are the same. The rest of the values are the same for the other eight categories.
Your next task is to calculate the total Personality score automatically and store this value in the TOTAL field, which we will create a little later. Notice the code above, the function name is PERS(). Now you need to create the PERS() function. This function will add up the values entered into each of the component fields. In order to add these numbers together, you will need to use the eval() function. To get a better understanding of this function, turn to pages 8.28-8.29 in your textbook.
You will now create the eval() function which will automatically add the numbers in the input box and place it in the TOTAL input box. This function will also appear in the <HEAD> within your <SCRIPT> tags.
Return to the contestform.html file in your text editor. Just above the stop hiding comment in the script section, type in the following:
function PERS() {
var B = eval(document.CON.BOLD.value);var C = eval(document.CON.CRUNCHY.value);
var R = eval(document.CON.RICH.value);
var M = eval(document.CON.CREAMY.value);
var T = eval(document.CON.SMOOTH.value);
var S = eval(document.CON.SUBTLE.value);
var F = eval(document.CON.FRUITY.value);
var A = eval(document.CON.TART.value);
var G = eval(document.CON.TINGLING.value);
document.CON.TOTAL.value = B + C + R + M + T + S + F + A + G;
}
where CON is the name assigned to the form and the value that appears after the period is the name assigned to the input field. Next you will have to create the TOTAL input box where your score will appear.
Locate the last taste row in your contestform.html in your text editor. You will now create the total input box, placing it after your last taste input and just before your submit buttons. Enter the following to create the TOTAL field:
<TR>
<TD>
TOTAL:
</TD>
<TD>
<INPUT NAME=TOTAL VALUE=0 SIZE=1 MAXLENTH=1 onBlur="PERS();">
</TD>
</TR>
Save your changes and then load it in a Web browser. Click in each of the input boxes and type a value. In the Total input box you should see the total calculated as you enter numeric values.
Return to your text editor to enter the personality result scores. Just under the total row you just entered, type in the following:
<TR>
<TD COLSPAN=2>
Score of 25 and above your Wild and Adventurous<BR>
Score of 15-24 your Reserved and Sophisticated<BR>
Score or 14 and below, you are Shy and Timid
</TD>
</TR>
You want ensure that only the values 0, 1, 2, 3, 4, or 5 to be entered into the PERS component fields. Therefore, you have to include some way of checking the participant's entries in these fields to make sure that they are valid. If the user enters an incorrect value in one of the component fields, two things must happen:
This presents a problem because nine different component fields could be accessing the PERS() function at any time. To make this work, you have to pass information to the function, indicating which field is using it. You do this with the "this" keyword.
Return to the contestform.html file in your text editor and go to the <INPUT> tag for the Bold field. In the code onBlur="PERS();" type the word this within the parentheses as follows:
<INPUT NAME=BOLD VALUE=0 SIZE=1 MAXLENTH=1 onBlur="PERS(this);">
Repeat inserting the word this in the remaining eight category fields. Save your changes.
Now that you have added the "this" keyword, you need to make several changes to the function itself. First, the function must store the value of the active field in a variable. Then it needs to test whether or not the value of that variable is equal to 0, 1, 2, 3, 4, or 5. If it is, the function can calculate the total PERS score as before; is not, the function should alert the user that a mistake has been made and return the cursor to the appropriate field so that the user can enter the correct value.
Return to the PERS() function in the head section of your HTML file. In the line"function PERS() {" type the word field within the parentheses. Add the following two line below the function statement (indented three spaces to make the code easier to follow):
var score = field.value;
if(score==0 || score==1 || score==2 || score==3 || score==4 || score==5) {
The | symbol is often located above the \ symbol on your keyboard. You can type it by pressing the \ key while holding down the Shift key.
Insert the following commands above the last line (the closing brace}) of the function (indented three spaces):
Your PERS() changes should look like the following:
function PERS(field) {
var score = field.value; if(score==0 || score==1 || score==2 || score==3 || score==4 || score==5) {
var B = eval(document.CON.BOLD.value);
var C = eval(document.CON.CRUNCHY.value);
var R = eval(document.CON.RICH.value);
var M = eval(document.CON.CREAMY.value);
var T = eval(document.CON.SMOOTH.value);
var S = eval(document.CON.SUBTLE.value);
var F = eval(document.CON.FRUITY.value);
var A = eval(document.CON.TART.value);
var G = eval(document.CON.TINGLING.value);
document.CON.TOTAL.value = B + C + R + M + T + S + F + A + G;
} else {
//alert the user
field.focus();
}
}
Save your changes.
Notifying the User with Alert and Confirm Dialog Boxes
If the user enters an incorrect value for one of the PERS components, the form should display a dialog box informing the user of the error. To accomplish this, you can use the alert() method. The alert() method operates in the same way as the prompt() method, except that is does not provide an input box in which the user can type a response. Instead, it simply displays a dialog box containing a message. The syntax for the alert() method method is:
alert("message");
where Message is the message that will appear in the dialog box.
JavaScript provides another method called the confirm() method, which works in the same way as the prompt() and alert() methods. The confirm method displays a message in a dialog box that is similar to the alert dialog box, except that is includes both an OK button and a Cancel button. If the user clicks the OK button, the value "true" is returned. If the user clicks the Cancel button, the value returned is "false." In your program, you need to use the alert() method. You'll replace the comment line in the PERS() function with a command to alert the user that only values of 0, 1, 2, 3, 4, or 5 are allowed.
In the PERS() function, replace the comment "//alert the user" with the following line of code:
alert("You must enter a 0, 1, 2, 3, 4, of 5");
Save your changes, and then reopen the file in your Web browser. To test the revised PERS() function, you'll attempt to enter an incorrect value in the Bold field. Click the Bold input box and change its value from the default of 0 to 5, and then press the Tab key. Your Web browser should display a dialog box. Click the OK button. Your cursor is returned to the Bold input box. Note that you cannot tab out of this box or click outside it without receiving the error message. Change the value in the Bold input box to 5, and then press the Tab key. The cursor advances to the Crunchy input box. Attempt to enter values greater than 5 in the other component input boxes and verify that the alert dialog box opens when you do so.
Congratulations, you have become a master at completing forms!!!!