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 Crossing a Bridge.

  2. Before you begin coding, it will be helpful to sketch out your form on paper. Your sketch will be due on April 22, 2014

  3. Review the course materials on HTML5 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)

    • datalist

    • Calendar

    • Color Selector

    • 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 HTML 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 to a page showing images of your form being viewed in 2 of the mobile emulators from this site 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 (yes you will have to create this folder).

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

  11. NOTE: Extra Credit if YOUR FORM WILL ACTUALLY PROCESS DATA. Hint. Our server uses PHP. Only process the data to display on page after entered.