Project 4: Dynamic Form

Purpose:

This project is intended to give students experience creating a Web-based form with validation behaviors. The bulk of the page will be created using XHTML form elements, combined with basic block-level elements, such as paragraphs and tables. The validation behaviors will be added using Dreamweaver®, which can be used to insert automatically written JavaScript functions into the source code of the Web page to accomplish the validation of specific elements.

In this project, your grade will be based on how well you format the form below and how effectively it validates user input as specified in the following instructions.

The form that you create should render as closely as possible to the one below.

Project Constraints and Objectives:

• Use Dreamweaver® (preferrably CS3) to create your XHTML pages and site. You must not use MS-Word®, FrontPage®, or any other web authoring software.
• Create a folder on your computer named "project4" to serve as the root folder for your single project file.
• Create a valid XHTML file named "listingform.htm" in your "project4" folder. Your file will contain a few CSS rules in an embedded style sheet that defines the following styles for your page:
  
  • A document body with background color of #CCCCCC gray and and using the font family list of: Tahoma, Verdana, Arial, Helvetica, sans-serif.
  • Headings of level 2 must be centered.
  • Form fieldsets should have a border color of #3366CC and have their box-model properties set to use the following padding: top = 0 pixels, bottom = 2 pixels, sides = 4 pixels.
• Title your Web page "Project 4 - Listing Form".
• Start with a level 2 heading of "Listing Form".
• Define a single form element to contain the form. Within it create the form elements seen in the illustration above. The form element should be assigned the following attributes:
  
  • ID = "listing"
  • Name = "listing"
  • Action = "" (null string)
  • Method = "post"
• Note the use of the star (*) to indicate required fields in the illustration above. These should also appear on your form. You must use Dreamweaver's form validation behaviors for this. (See Exercise 3 in Chapter 14 of your Dreamweaver textbook for guidance.) Also, the email field must be defined such that it will accept only entries that conform to the standard email format "username@hostname".
• You can use non-blank spaces (character entity  ) to space out many of the textbox input elements on the same line. Use bordeless tables to arrange the groups of checkboxes.
• The values for the menu items must be defined as follows (default value shown below emphasized)
  
  • State: only "AL", "FL", "GA", "NC", "SC", and "MS".
  • Faces: "East", "North", "South", and "West".
  • Acres: "Under 1/4", "1/4-1/2", "1/2-3/4", "3/4-1", "1-1.5", "1.5-2", "2-5", and "Over 5".
  • Electric: "City", "County", "Other", and "None".
  • Water: "City", "Well", and "None".
  • Waste: "Sewer", "Septic", and "None".
• Do not use any other images, color, etc., or other multimedia content on this project.
• Place a comment near the beginning of each file (but below the preamble) identifying yourself as the author and noting the date. Remember that XHTML comment tags look like this:
  <!-- Comment here -->
  and CSS comment tags look like this:
  /* Comment here */
• Use the [W3C Markup Validation Service] to validate your code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your page's source code.
• Use the [W3C CSS Validation Service] to validate your use of CSS in each file you wrote. Be aware that the CSS validator has limitations interpreting HTML or XHTML on files sent from your computer. So you must either:
  
  • Upload your site to a Web server and use the "Validate by URI" tab to check either and XHTML or CSS files by providing their URL.
  • Use the "Validate by Direct Input" tab to check CSS rules (only), copied from within an embedded style sheet (in the head section of an XHTML file) or from within an inline style (in a style attribute within the body section of an XHTML file).

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create a simple form with just a few fields; then validate it. If it validates, then try adding some more elements and validate again, etc.
• Many systems are "case sensitive", so pay attention to upper and lowercase when typing id's and other property values. Save your work after each change before trying to view it in your browser. Also, you must press the RELOAD (a.k.a. REFRESH) button on the browser's button bar to see any changes made to a page since the previous rendering of it.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. Schedule your time to allow some breaks between working sessions.

Submission:

Your web site should be submitted via the "Assignments" tool in the . After completing this project, simply login to the and click on the Assignments link on the left side of the screen. Select Project 4: Dynamic Form and type your name in the Submission box. Use the Add Attachments button to attach your "listingform.htm" file (no compressed zip archive is necessary for this single file) to the submission and press the Submit button.