LEARNING MODULE: Forms

Activity: In-Form-ed Super Hero Presentation

By the end of this lab you should understand ...

 

Lab Directions

  1. Using a form, create a survey to collect information that you might think be your super hero might be interested in collecting. The survey could be to collect information about visitor's interests, hobbies, favorite music, favorite sports/teams, favorite pizza, etc. As an example, view a sample Transportation Survey.

  2. Before you begin coding, it will be helpful to sketch out your form on paper. Your sketch will be due on May 4, 2012

  3. Review the course materials on XHTML forms, observing examples of various form element.

  4. Your survey form should include at least one of the following form elements:

    • Text input field

    • Radio button selection

    • Selection field (ie, the select element)

    • Check box selection

    • Textarea field

    • Fieldset and legend for grouping of form elements

    • Submit and Clear buttons (ie, the Submit and Reset values)

  5. Create a separate css file to apply some style rules to your table

  6. For EACH sample element, include a comment to your script describing how the tag element behaves. For example, the comment for your radio button selection should say something like: radio buttons support mutually exclusive choices

  7. Validate your XHTML file and your css file  using the W3C Validator (do not post pages that are not validated).

  8. Add links for your form page that link both to your hero home page (index.html) and your hero table page and edit your hero home page and hero table page to include links to your survey page.

  9. Use a File Transfer (FTP) program (WinSCP, Putty, Cyberduck, etc.) to post your lab (html file and css file) directly to your hero subdirectory.

  10. Add links for your hero survey form (hero_form.html) to your class home page in your N241 directory

  11. NOTE: YOUR FORM WILL NOT ACTUALLY PROCESS DATA. THIS SKILL WILL BE TAUGHT IN THE NEXT WEB RELATED COURSE, N341.