Comp 107: Web Design
LEARNING MODULE: Forms
Activity: In-Form-ed Super Hero Presentation
By the end of this lab you should understand ...
Lab Directions
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.
Before you begin coding, it will be helpful to sketch out your form on paper. Your sketch will be due on April 22, 2014
Review the course materials on HTML5 forms, observing examples of various form element.
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)
Create a separate css file to apply some style rules to your table
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
Validate your HTML file and your css file using the W3C Validator (do not post pages that are not validated).
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.
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).
Add links for your hero survey form (hero_form.html) to your class home page.
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.