Getting Started with HTML Forms

Overview

The focus this week is on designing a web form. Upcoming assignments will cover using JavaScript to read the form and then form input validation (using JavaScript and functionality built into HTML and CSS).

Preparation

1. On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_7. Copy your files from the Week 6 assignment (including images and the CSS file). Open this folder in Visual Studio Code.

Add an HTML Form to Your Contact Page

2. Add an HTML form to your contact page. The form can be for signing up for a newsletter or sending a message (though we won't be covering storing the data or sending a message).

3. Set the form's id to "webForm" and its action to #, like this:

           <form id="webForm" action="#">

4. You must include the following elements/tags in your form (in addition to the HTML already present):

• fieldset.
• legend.
• label.
• text entry controls (at least 2 types).
• one text entry field with a datalist.
• one group of radio buttons.
• one group of checkboxes.
• drop-down or scrolling menu.
• reset and submit buttons (the submit button won't do anything this week).

5. The information that the form requests should be pertinent to your website. Use inputs that are most suitable for the type of data requested.

6. Every element that handles user input needs to have appropriate id and name attributes. (Labels, legends, and fieldsets may also have id or class attributes used by the CSS for styling and layout.)

7. Use CSS to position and style the form's elements. The appearance of the form should fit in with the layout of your pages and match the look and feel of the rest of your site.

8. The form won't work this week, but you should test the functionality of the form and make sure all inputs accept appropriate values entered by the user and behave as they should.

Verifying Your Work

9. Check your updated contact page with the form in two browsers. In a Word document, state which browsers you tested the pages in.

10. As with previous assignments, feel free to use your favorite AI (in chat mode) to help resolve issues in the code. Just remember that the code needs to be yours, not the AI's.

11. Go to the Nu HTML Checker tool at validator.nu to verify the HTML for the revised contact page. When the page passes, get a screenshot of the successful validation and put it in the Word document.

12. Validate the updated CSS file using the service CSS Validation Service. When the CSS passes the check, get a screenshot of the successful validation and put it in the Word document.

Submission Requirements

Add the Word document to the folder containing the complete set .html files, the .css file, and the image files used for your site.

• Compress the folder and submit the zip file as an attachment to your submission.

Competencies Measured

By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:

• Competency 1: Author well-structured, standards-compliant HTML.
  • Validate the HTML and CSS used for he form.
  • Test the form in 2 browsers and resolve any issues.
• Competency 2: Style web page content using current CSS.
  • Use CSS for form styling and layout.
• Competency 4: Code HTML forms designed for user-friendly data entry.
  • Add <form>...</form> tags with specified attributes to the contact page.
  • Include the required form elements.