Overview

You have added interactivity to your Web site with media. Another form of common user interaction is with forms. In this assessment, you will create a form to be used in one of your Web pages that will allow users to share or request information. Examples of types of forms to consider are:

• Request for information.
• Volunteer sign-up.
• Event registration.
• Newsletter sign-up.

Directions

Create a user-friendly and professionally designed input form on the Contact Us 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 or check boxes.
• Select box.
• Submit button. (See the Form Submission details below.)

Make sure to do the following:

• Create a Web form that functions per specifications.
• Submit error-free HTML5 and CSS code.
• Create a user-friendly layout for a Web form.
• Write developer comments to describe and explain code.

Submit Button and Form Submission

When a user form is submitted, proper UX design dictates that there is some sort of a response that lets you know your submission has been successful. This is often done through server-side scripting using PHP, which is beyond the scope of this course. Because it is an important component to any form, we have included such a page called response_page.php for your use. To enable this function, do the following:

• Add the following code to your form in the form element:
  • <form action=”response_page.php” method=”post”>
• Download the response_page.php file (given in the resources) to your computer, and then upload it to your site (also include it in your zip file submission). Note: Make sure the path to the file is correct. The PHP file should be placed in the same folder as your contact page. This is often an area where mistakes are made.

Hint: In HTML5, you can add the required attribute to input fields that specifies that the input field is required. Browsers that support this feature will not allow a form submission until that field has been filled.

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 use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C, linked in the Resources under the Suggested Resources heading. Important: Take a screen capture of each of your validation results and save it for submission.

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.

Additional Requirements

Submit your work in the courseroom using a single zip file containing the following:

• All page files including the response_page.php file.
• image_and_url.doc. Include a Word document with:
  • The URLs for each of your pages.
  • The names of the browsers you used to view the pages.
  • Pasted images from your validation screen capture.
• Any ancillary files such as graphic or photos you may have decided to include.

Upload your Web site files to your Web host.

The following resources are required to complete the assessment.

Capella Resources

• Assessment 5 Context [PDF].
  • This document offers information regarding Web forms.
• response_page.php.