Creating HTML Forms

Module W26h

Overview

This module gives you a chance to practice creating a form and sending it to yourself by email. You'll be creating a form to collect survey information from people - you get to choose what topic you're surveying. You'll be filling in the form and emailing it to yourself to make sure all the information comes through.

You're creating a Website for a small Web-based survey firm. The firm needs to create on-line surveys for several clients, including these:

• Automobile dealership: vehicle types and colors people would dream of driving
• Computer equipment retailer: size and type of computer equipment people are thinking of buying
• Election campaign: school reform issues currently concerning citizens
• Consumer confidence: what people feel the economy will do in the next six months, and what type of purchases they are planning for that period

Choose one of these survey topics (or another of your choice) and create a Web-based information gathering form.

Form Tag

Your Form tag tells the browser that a form needs to be displayed, how to send it, and what to do with it when it arrives.

• How to send it: Use the POST method.
• What to do with it: Email it to yourself so you can see what's coming in.

Fields to Include

You'll need to plan what information is needed for the survey you're constructing.

Note that all the surveys will need basic demographic information, such as age, gender, zip code, type of living arrangement (household size, apartment vs. home rental vs. home ownership) and income level.

For this assignment, please include fields of these types:

• Text
• Radio button
• Checkbox
• Menu
• Text area

In addition, you should include a Reset button and, of course, a Submit button.

Each field should be clearly labelled so users will know what sort of answer is expected. Internally, the fields should be given clear, concise names so that when the submitted forms are viewed in an email message, the content will be clear and easy to understand.

The page you create should have an attractive layout, including appropriate headings. The fields should be laid out using a table to keep them neatly lined up. You may want to use a background image, and perhaps iconic images to draw the users' attention to certain parts of the form - but images are optional.

Testing

When you're done with the form itself, you'll need to test it by filling in the form two or three times and checking the email to make sure it transmits the required information reliably.

Note that lab and class computers at WCC don't have default email programs set up, so you may have to use a computer elsewhere to test your forms.

When your form is sending information reliably from your workstation, FTP it up to the server. Test it a couple times more, just to be sure it's still working. If you put in images, are they showing?

Submitting

When you're sure your form is working well on the server, you're ready to submit it to your instructor. Here's what to do:

1. Fill in the form completely and submit the form.
2. When you receive the email message from the form, forward it to the instructor with the URL of your form. Be sure to fill in the Subject line with the information required by your instructor.
3. You're done!