Improving an HTML Form
Instructions: Work with the analyze08.html file in the analyze folder and the analyzestyles08.css
file in the analyze\css folder from the Data Files for Students. The analyze08.html webpage
contains a form with various input controls. Analyze the page to determine the type of information
being collected by the form and add labels for each input control. Next, create submit and reset
buttons, and then style the form for mobile and tablet viewports. Use Figures 8-62 and 8-63 as a
guide to correct these files.
1. Correct
a. Open the analyze08.html fie in your text editor from the Data Files for Students. Modify the
comment at the top of the page to include your name and today’s date and then link the file to
analyzestyles08.css.
b. Open the analyzestyles08.css file in your text editor from the Data Files for Students and then
modify and correct the comment at the top of the document to include your name and today’s date.
c. Review the form elements within the analyze08.html file and add labels to all input controls.
Be sure to include the for attribute.
2. Improve
a. In the analyze08.html file, add submit and reset buttons.
b. Create style rules in the analyzestyles08.css fie to style the form elements for a mobile
viewport. Display input controls and label elements as block elements. Apply 1em of
bottom margin to input controls.
c. Create style rules in the analyzestyles08.css file to style the form elements for a tablet
viewport. Float the label elements left, apply 0.5em of right padding, align the text
right, and apply a width of 7em. Apply 1em of bottom margin to input controls.
d. Save all of your changes and open the analyze08.html in your browser.
e. Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/
and fix any errors that are identified.
f. Validate your HTML webpage using the W3C validator found at validator.w3.org and fix any
errors that are identified.
g. Identify at least three steps you would take to further improve this form.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.