Assessment 5 Creating a User Form-3240 -pt 5

1. Directions – Create a user-friendly and professionally designed input form on the Contact Me page. The form should be contextually relevant for the site’s purpose and intuitive for the user. At a minimum, the form must include the following functioning tags:

• Fieldset.
• Legend.
• Label.
• Textfield.
• Textarea.
• Radio buttons.
• Checkboxes.
• Select list.
• Submit button.

1. Style the form using CSS in the external CSS file used by the pages for the site so that the form has the same look and feel as the rest of the pages.
2. Download and unzip the JavaScript file provided in the file. Place the script.js file in the same directory as the HTML files for your site.
3. Add this script to the HTML file with web form by adding the following line of HTML code just above the closing </body> tag:

• <script src=”script.js”></script>

1. Edit the <form> tag for the form so that it reads:

• <form id=”webForm” action=”#”>

1. Add this line below the HTML for the submit button or after the closing </form> tag to read and display the user’s input when the submit button is clicked:

• <p><div id=”output”></div></p>
• This div must have the id “output” (all lowercase letters).
• The id must be set to “webForm” (lowercase w, uppercase F).
• The acWon must be set to”#” (no GET or POST method).

1. Confirm that the revised contact page with the form is valid HTML5 by using W3C HTML validator to check it: .

• Warnings are okay, but any errors need to be corrected.
• Put a screenshot of the successful HTML validation in a Word document.

1. Confirm that the revised CSS file is also still valid CSS3 by using the W3C CSS validator: .

• Put a screenshot of the successful CSS validation in the same Word document.

1. Test the form page in two browsers to confirm that the form displays and works correctly. Indicate which two browsers you used in the Word document with the validation screenshots.

Make sure to do the following:

• Create a web form that functions per specifications.
• Submit error-free HTML and CSS code.
• Create a user-friendly layout for a web form.
• Fix any rendering or syntax errors encountered in the HTML or CSS code.
• Use descriptive variable names appropriately and consistently.

Once completed, view your pages in your selected web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may choose to make use of AI to validate your code and help you troubleshoot and test your code if you do run into errors and issues. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Both of these services are free and you can find their links on the reading list. Important: Take a screen capture of each of your validation results and save it for submission.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down, as one error can cascade into 20 other errors. Remember, for the assessments in this course, be sure to test your web pages in at least two browsers.

Zip up the folder containing your complete site (including the script.js file) and submit it (along with the Word document) as this assessment.