Week 10 Coding Practice

Purpose

Create and style a web form.

---

Textbook Reference

• Chapter 9: Forms

---

Instructions

This practice is to be completed using the following:

• Learn & Practice - Part 1
• Learn & Practice - Part 2

• week10Demo_forms.zip

• Save the week10Demo_forms.zip as your codingPractice10 file in your practice folder for this course

• Follow all the step in both the Learn & Practice pages carefully and to build the web form and style it.

• Make sure your form works properly – and all values pass to the server before you validate or submit.

Tip!

Watch the videos this week if you get stuck, they are a great resource for this practice.

---

Sample Output

---

HTML Validation

1. Go to https://validator.w3.org/
2. Click on the Validate by File Upload
3. Click on the Choose file button and navigate to the location of your HTML document.
4. Click the Check button
5. Print it as a PDF and save it into a folder named validations in your practice10 folder
   • Name the PDF formValidation.pdf.

---

CSS Validation

1. Go to https://jigsaw.w3.org/css-validator/
2. Click on the by File Upload option
3. Click on the Choose file button and navigate to the location of your CSS document.
4. Click the Check button
5. Print and save as a PDF and save the validation in a folder called validations in your practice10 folder
   • Name the PDF formCssValidation.pdf

---

Grading Criteria

• The correct file directory structure exists in the practice10 folder along with the HTML and CSS validation.
• All course coding standards have been followed.
• Correct implementation of form fields (text ,radio , checkbox, select, and textarea).
• Default text has been added to the first name field.
• Default selections have been added to the radio and checkbox fields.
• Placeholder text has been added to first name, last name, password, and instruction fields.
• A size and maximum length have been added to the first name field.
• The password has been made required.
• Explicit labels have been added to every form field.
• All form fields go to the Echo server.
• The form has been styled to match the sample output.
• Reflection questions are answered honestly and thoroughly.

---

Submission

Part 1: Reflection

1. Locate the submission link for Practice 9 in Brightspace (Module 2 > Week 10 > Week 10 Coding Practice).
2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
3. Answer the questions in the Brightspace.

1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. What did you find particularly insightful this week?


3. What part of the learning or coding process did you find most challenging? How did you overcome it?


4. What questions (if any) do you have about the material covered this week?

5. How do semantic HTML elements (like <fieldset>, <legend>, and <label>) contribute to the functionality and clarity of a form?

Part 2: Upload .zip

1. Compress your entire practice10 folder to a .zip (zipped) file.

2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:

   • images (folder)
     • with images
   • stylesheets (folder)
     • forms.css
   • validations (folder)
     • 1 HTML validation file
     • 1 CSS validation file
   • forms.html

3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

4. Click "Submit"