Lab Exercise 8: Creating Web-Based Forms
Prerequisites:
NOTE:
You will need to complete the Exercise 7 lab assignment prior to
proceeding.
Requirements
for the feedback.html page:
1. Attached
and linked the feedback.html to the external cascading style sheet (mystyle.css). See the step-by-step demo instructions
in the Topic 4 lecture presentation (slides 26- 28) in attaching an
external CSS file to a Web page.
2. Define a Form
Area: Follow the step-by-step demo instructions in the Topic 8 lecture
demo presentation (slides 16- 19) in defining the form area in the
content AP Div container.
3. Add a Single Line
Text Field to a Form: Follow the step-by-step demo instructions in the Topic
8 lecture demo presentation (slides 21- 24 )
in adding a single line text field to the form.
4. Add a Multi-Line
Text Field to a Form: Follow the step-by-step demo instructions in the Topic
8 lecture demo presentation (slides 25- 27) in adding a multi-
line text field to the form.
5. Add a Check Box to
a Form: Follow the step-by-step demo instructions in the Topic 8 lecture
demo presentation (slides 31- 35 ) in adding
a check box to the form.
6. Add a Menu to a
Form: Follow the step-by-step demo instructions in the Topic 8 lecture
demo presentation (slides 46- 53 ) in adding
a menu to the form.
7. Add a Radio Button
to a Form: Follow the step-by-step demo instructions in the Topic 8 lecture
demo presentation (slides 39- 42) in adding radio buttons to the form.
8. Add a Submit Button
to a Form: Follow the step-by-step demo instructions in the Topic 8 lecture
demo presentation (slides 57 - 60) in adding a submit button to a form.
9. Add a Reset Button to a Form: Follow the step-by-step demo instructions in the Topic 8 lecture demo presentation (slides 62- 65) in adding a reset button to a forrm.
10. Create
and Apply a Class Style: Create a class style rule called “form-data-entry”.
For the CSS rule definition, add the style rules shown below to your external
CSS. Note: These rules can be defined in the Type Category. Apply the class
style rule to the text boxes, pull down menu, and submit/ reset buttons. Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 68 – 75) to create and
apply an ID Rule in applying the class style.
font-family: Arial,
Helvetica, sans-serif
font-size: 18px
font-color: red.
11. Preview your Web
page in your Browser. Test your form by entering data.
See the attached sample output of the Web pages
12. Save your document.
Submit:
1. Submit a screenshot images
of the Web pages displaying in your Browser on the Canvas Exercise 8 drop
box.
2. Zip up your folder and submit in the Canvas Exercise 8 drop
box.