Lesson 8

Forms

If I were to venture a guess, I think most all of you have filled out a form on the internet and then submitted it. It can be something as simple as a username and password, or something more like your address, phone number etc. Forms bring some power to the web by allowing your users to provide you with valuable information and for them to request information from you.

Creating the form is easy. You will learn about several form tags and elements. In order to get the data once the person has submitted it is a little more complicated. Form data is submitted usually using a CGI script. CGI stands for Common Gateway Interface. It is a fancy name for a computer program that receives the data from the form and processes it. The good news is that you do not need to worry about the cgi script. For this lesson we have one already build and sitting on our www.inst5260 server. All you need to know is how to connect your form to the CGI script. Our CGI script was written in the PERL language. If you end up building forms for your school, work, or clients, you should visit with your hosting provider or server administrator about the various cgi scripts they have available and the information you need to know to use them.

For our CGI script we have to know the http address of where it is located, and then we need to know what additional data we need to pass to it. Our CGI script processes the forms data then emails it to someone. You will tell it who to email it too, along with the subject heading etc.

Here is an example of the html tags and lines you will need to start off your form. <form method=post action="http://www.inst5260.usu.edu/cgi-bin/mailto.cgi">
<input type=hidden name=recip value="you@youremailaddress.com">
<input type=hidden name=subj value="text of the subject line you want sent
along with the email ">
<input type=hidden name=followuppagevalue="http://www.inst5260.usu.edu/summer/username/directory/nameofpage.html">
this last line is the address to your follow up page you create in addition to your form. The idea here is that after the user hits the "submit" button on your form, they should be directed to a page that gives them some feedback. Something like, thanks for submitting the information", or well you get the idea. This followup page should have a way to get back to the form as well. Your follow-up page should be in the same directory as your form. But you know that by now. Here are some basic form elements you will learn about.

Here is a text box for typing in text

These are called "Radio Buttons," give them a try. Only one can be selected at a time.

These are checkboxes, you can check none, one, or as many as you want.

Bananas
Oranges
Apples
Grapes

A drop down list or menu button. Contains a
list of items for you to choose from.

Utah Idaho Nevada California New Mexico

Would be used to clear the form or
submit the form data to the CGI script.

Readings

Day 10
Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days.
ISBN 0-672-32519-5

Activities

Explore the web and find a couple of examples of forms. Most every company has a form of some kind for getting information from customers or potential customers. Technology companies may have a form under their technical support area. The goal here is to locate some examples of forms so you can see how they are designed and get some good ideas for the form you will create. You may wish to view the source code for the form page. In I.E you would go to "view|Source."

Your assignment is to create a form for the College of Education at Utah State University. They need a form that collects data from potential students so they can send them some information.

The College has determined that the following information should be collected:
First Name,
Last Name,
Gender (Male, Female hint: Radio Button),
Email,
Phone Number,
and State.
In addition checkboxes for areas of Interest which include, Communicative
Disorders and Deaf Education, Elementary Education, Family, Consumer, and
Human Development, Health, Physical Education, and Recreation, Instructional
Technology, Psychology, Secondary Education, Special Education and
Rehabilitation

Can you find an appropriate graphic to display on the page?
A text box should be created to allow students to request any additional information. This text box should scroll and allow for several lines to be visible. The form should be submitted for this activity to your email address. You will embed your email address as a hidden field within the form. You will also embed a hidden field for the subject of the email that cgi script will send to you. Save your form as lesson8.html and upload to your FTP site. Be sure to test it out once online. Your link to the CGI will be as described above in the lesson page. You should create a follow-up page and name it followup8.html and link it back to your form page for your end users.

This portion of the lesson is worth 8 points. Your page should look professional and be formatted and laid out properly.

Now using your form that you created above, apply a few styles to it. These can be internal or external styles. You might use styles for positioning if you like. This part of the lesson is worth 2 points. You will get full credit for applying at least three styles within the form page. Rename your form to lesson8styles.html and upload it. Have it link to the same follow-up page you created above. No need for styles on the follow-up but you can add them if you like.

Resources

www.webaim.org

Reflective Questions

What are some simple things you can do to insure your web pages are accessible to persons with vision loss?