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 ASP (Active Server Pages) or PHP 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 PHP or ASP.NET if you want a higher-paying web development job.

We will do database interactions later in the semester, but for now you can 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 videos demonstrate both of these.

What to Do

  1. Create a folder named forms in your projects folder.   Create 3 pages in the projects/forms folder:
    1. form-elements.php
    2. search.php
    3. javascript1.php
    These pages should include navigation to each page and should link to one external CSS that specifies font face (redefine body tag) and link attributes (link, visited, hover, active). I encourage you to use a CSS layout provided by Dreamweaver.
  2. Use an include file for the footer or for the navigation.
  3. Open form_elements.php 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
  4. Use Spry to validate your form.
  5. Use Atomz to create a search form on search.php.  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 (http://cis9.cuyamaca.net/user.name/213portfolio.php), index your site, and paste the html code for the search form 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.
  6. Choose 1 simple JavaScript from one of the Javascript libraries listed below (or choose another) and implement them on the remaining page. Watch this video demonstration if needed.

Submitting work

Grading - 60 points

Points Requirements
10 4 pages include navigation and external CSS that specifies font face and link attributes (LVHA)
15 form-elements.php lists text boxes, text area, radio group, and checkbox and includes validation
15 search.php displays a search box that successfully searches your site
10 javascript1.php displays working JavaScript
10 include file