Forms

Castro, p 263-292

You will notice that we don't use CGI scripts for class. This is because CGI opens your server to various kinds of potential problems. In your careers as web designers you will likely be using scripts for information gathering and shopping carts, but for this class we will only use the mailto: action. Take note of the sources Castro mentions for scripts. Coders will want to write their own in PERL, but all that is well beyond the scope of this class.

All of the form elements that we will use can be written out in HTML, and even though we are going to use Dreamweaver I want you to look at the code, at least periodically. The readings in Castro will make what we are actually doing more clear too.

In order to use form elements you have to have a form. The block level form tag is required for form elements to work. This checkbox exists outside a form tag. You can check and uncheck it all you want, but there is no system to send the information anywhere.

Open Dreamweaver and open a New blank web page. Save it wherever it needs to be (by now you had better understand where a page needs to be saved in order for your links to function correctly). Link to a relevant style sheet. Click on the Forms tab in the Insert Palette (if your Insert palette is not open, find it in the Window menu). Click on the Form button (far left end). In the Properties Palette make sure the Method is set for Post. Since we are using mailto type "mailto:mckinney@northern.edu" using your own email address (no quotes) into the field labeled Action. This is where you would type the URL of your script if you were using one. Next, type text/plain in the Enctype box (because you will be using the text MIME type for this form). Note the code for the form you have started.

So far we don't have any form elements. From the left (in the Insert Palette) first we have Text Field. With the cursor inside your Form click on the Text Field button. In the Properties Palette (under the Window menu) name your Text Field. This name will be sent to you along with the Value that your user enters into the field so make the name relevant. For example, if the viewer is to type their credit card number into the field you can name the Text Field "credit_card_number" (no quotes) and your mailed response will be "credit_card_number=Your User's Number" (no quotes). Note that you can set the width of the Text Field and the number of characters it can contain (and that there is no correlation between the two). Note also, the Password option. This will cause the Text Field to show only bullets but the message will show the actual text. Without a CGI script the Password is not checked against anything, it is not really any kind of entry key, it is informational only. (I have set the form backgrounds to be a different color to show up easier.)

This is a sample Text Field. It is 25 characters wide but you can enter 50 characters. Try it.

This one is the "Password" type. Try it too.

This one has been validated to accept only email addresses. Try to type something else then move to another text field. We'll get to validation later.

Note that there is no action to be taken. There is no Submit button. More on that later. The next button in the Insert Palette is for a Hidden Field. This is used with dynamicaly generated web pages and can be used to store data that a piece of Javascript has obtained, like a viewers IP, but we won't be using this feature.

This one is the last of the Text Field buttons and is called Text Area. Again, you can define how big the box on the screen is and how much text a viewer can enter. You have the password option here too. I have left the default sizes, and you probably can't enter more than one line of text. You need to be careful how much space you give a viewer in any text box. Some peolpe have long names and lots to say.

The next Form element is the Check Box. A Check Box can only haave two states: checked and unchecked, however, you can provide a value to be sent if the box is checked. Check Boxes do not form arrays, each one is considered as a stand-alone element. Check Boxes are used when you want someone to list all the things that are relevant.

You control the checked value and the initial state of the check box, checked or unchecked.

Next we have a Radio Button which also has only two states, checked or unchecked. Radio Buttons usually are arrayed into Radio Groups though and only one button in a group can be checked. Clicking on any other button in the group automatically unchecks the previously checked button. These are used for either-or queries, when you only want to know the one thing that is relevant. Radio Buttons are seldon used singly and viewers expect Radio Buttons to be grouped somehow. You will need to know how many buttons you want in a group before you insert the group into the form. Each group must be named.




When you want viewrs to have a choice of more that two states, but still a limited choice, you can use a Menu or List. A Menu presumes that the viewer will choose only one (state, for example) whereas in a List you can determine whether the user can select multiples only one.

This is a Menu. You can select only one item from the list.

In order to add items to the list (you need the list selected) click on List Values in the Properties palette. The default is one, you will need to click the plus sign to add more. Remember to give a value (right hand side) for each item in the list. Note: to have an item that says "Select One" you have to add it. Highlight it in the Initially Selected box in the Properties palette.

This is a List. I have set it so you can select multiple items. Hold down the Shift key to select multiple items.

See how the List and the Menu display differently?

We're not going to use the Jump Menu, which sends your viewer to a selected secondary page based on their selection from the menu. Nor are we going to use the next two items, the Image Field, which allows you to place an image in the form, and the File Field which prompt the user to browse for a file on their own computer which is then sent to you along with the form (with CGI scripts anyway). You might use the Image Field for your own unique buttons.

This button is set for Submit. This one is set to reset form (clear all entries). (These actually do nothing as they are not conected to any of the forms on this page and do not have a mailto action attatched. Check the code.)

The last element we need to look at is the button.The button has three possible states, Submit (which equals a Send command) Reset (which clears all data from the form) and None (which does nothing).

Remember to test your form, preview in multiple browsers, and that there is the Help resources within Dreamweaver if you get stuck.

Assignment: Create a working form with a mailto function. Link to an appropriate (even if its made up for this assignment) Style Sheet that provides a background image or color and at least three levels of distinctive text. The mailto: should use your email address in the Action field in the Properties palette for the whole form.

Make up a reason for the form (fantasy or real survey or whatever) and add appropriate text and instructions.

Use at least two Text Fields, one with the Password attribute, one without.

Use at least one Text Area.

Use a few Check Boxes and at least two groups of Radio Buttons (minimum of three buttons per group).

Use at least two Menu/Lists, one with a single allowed value out of at least three choices, one with multiple allowed values out of at least three choices.

Use a Submit button and a Reset button (the titles are up to you, but the function of the buttons should be clear).

Included elements can be in whatever order you deem appropriate. When you are finished and the form functions flawlessly and looks good, place it and any relevant files in a folder with your name on it and drop it in the Drop Box on the AppleServer (333spring04 folder).

Extra Credit: Use an image to send data from your form. Follow the instructions on page 286 of Castro (5th edition) "Using an Image to Submit Data."