Introduction

Forms are used to collect information from the user. To make a form work, you need to properly create the form objects on your Web page, and you need to have something process the data from the forms.

How can you process forms? Basically, you need to use a scripting language to do something with a form. You could, for example, use JavaScript or Active Server Pages (ASP) to use the information in a dynamically created Web page. You might use a Perl CGI to send the information in an e-mail message or save the information to a file. You could use ASP or Perl or PHP to interact with a database.  Applications like Dreamweaver help automate database interaction, but it is also useful to take classes in JavaScript and ASP or ASP.NET if you want a high-paying web development job.

We will do database interactions later in the semester, but you can also copy scripts available on the Web. I'd like for you to get a feel for what you can do with forms using existing scripts, so I want you to create a working search form for your site and implement a few existing JavaScripts from a JavaScript library site. The video demonstrations show both of these.

What to Do

1. Create a folder named projects in your local_root folder. Inside that folder, create a folder named forms.   Create 4 pages in the projects/forms folder:
   1. form-elements.htm
   2. search.htm
   3. javascript1.htm
   4. javascript2.htm
   These pages should include navigation to each page and should link to an external CSS that specifies font face (redefine body tag) and link attributes (link, visited, hover, active).
   
2. Open form_elements.htm and create the following form elements in a single form:
   1. text box
   2. text box - requesting email address
   3. text box - password
   4. multi-line text box (text area)
   5. checkbox
   6. radio group (3 radio buttons)
   7. submit and reset buttons
      
3. If you wish, you may use CSS to style your forms, but it isn't necessary (extra credit if you do).
4. Use Behaviors or Spry to validate your form.
5. Use Atomz to create a search form on search.htm.  This should search your cis2 site.  Start by requesting an account. You'll get an e-mail from AtomZ that will tell you how to confirm and log in. Then enter your URL entrypoint (213homework.htm), index your site, and paste the html into your web page. View the video demonstration if needed. (NOTE: interface has changed since demo was made so the screens will look a bit different.) If you wish, you may use the Google search instead.
   
6. Choose 2 JavaScripts from one of the Javascript libraries listed below (or choose another) and implement them on the remaining 2 pages. Watch this video demonstration if needed.
   • JavaScript Source
   • Yahoo Developer Resource -- see gallery
   • Dynamic Drive

Submitting work

• Add a link to this assignment from 213homework.htm.
• Upload your files to the cis2 server. Don't forget to TEST YOUR WORK on the server!
• Submit your URL to Blackboard.

Grading - 60 points