Skip to content

Practice - Forms

Purpose

Create and style a web form.

Textbook Reference

  • Chapter 9: Forms

HTML: Build the Form

Set Up

  1. Save the practice-forms.zip in your practice folder for this course.
  2. Locate the comment <!-- ADD THE REGISTRATION FORM HERE --> in the index.html file.
  3. Add a <form> element.
    • Use method="post"
    • Use action="http://itins3.madisoncollege.edu/echo.php"

Personal Information

  1. Create a <fieldset> with the <legend>: Personal Information

  2. Add the following fields:

    Field Type Label Special Requirements
    Text *First Name: Required
    Text *Last Name: Required
    Email *Email: Required
    Text *Phone: Required

  3. Requirements to follow:

    • Add a line break (<br>) after the first three <input>elements.
    • All labels must be explicit, using the for and id attributes.
    • Validate that all data entered makes to the green Echo screen before moving on.

Experience Level

  1. Create a <fieldset> with the <legend>: Experience Level

    Field Type Label Special Requirements
    Radio Beginner Default selection (should be checked by default)
    Radio Intermediate ---
    Radio Advanced ---

  2. Requirements to follow:

    • All labels must be explicit.
    • Labels must appear after the radio button.
    • Clicking on the label should select the radio button in addition to clicking the button.
    • Only one radio button can be selected at a time
    • Validate that all radio button when selected make to the green Echo screen before moving on.

Workshop Sessions

  1. Create a <fieldset> with the <legend>: Workshop Sessions

    Field Type Label
    Checkbox Morning Flow Yoga
    Checkbox Breathwork & Meditation
    Checkbox Stress Relief Techniques
    Checkbox Sound Healing
    Checkbox Journaling & Reflection

  2. Add a line break (<br>) after the first four <label>elements.

  3. Requirements to follow:
    • All labels must be explicit.
    • Labels must appear after the checkbox button.
    • Clicking on the label should select the checkbox in addition to clicking the box.
    • All checkboxes should be able to checked at once.
    • No arrays are allowed for storing values. Use the method of creating checkboxes like demonstrated in the course website.
    • Validate that all checkboxes make to the green Echo screen before moving on.

Preferred Time

  1. Add an explicit <label> named, Select your preferred time:

  2. Add a dropdown (<select>) with:

    Field Type Label
    Option Morning
    Option Afternoon
    Option Evening

  3. Requirements to follow:

    • No fieldset required since we are not grouping multiple fields together.
    • Add a link break (<br>) element after the last <option> element.
    • Validate that all selections make it to the green Echo screen before moving on.

Additional Notes

  1. Add a <textarea> where users can enter extra information.

  2. Include an explicit label

  3. Requirements to follow:

    • No fieldset required since we are not grouping multiple fields together.
    • Add a line break (<br>) after the <label>
    • Validate that entered text in the <textarea> make it to the green Echo screen before moving on.

Contact Preferences

  1. Create a <fieldset> with the <legend>: Contact Preferences

    Field Type Label
    Checkbox Email updates
    Checkbox Text Reminders

  2. Requirements to follow:

    • All labels must be explicit.
    • All checkboxes should be able to checked at once.
    • No arrays are allowed for storing values. Use the method of creating checkboxes like demonstrated in the course website.
    • Validate that both radio selections make it to the green Echo screen before moving on.

Submit & Reset Buttons

  1. At the end of the form, add a Submit and Reset button
  2. Change the Submit button to read, "Register"
  3. Change the Reset button to read, "Clear"

Sample Output

Example output without any styles added.

Sample Form Output

CSS: Add Form Styles

  1. Create a new stylesheet named, form.css and save it in your stylesheets directory.
  2. Connect the new stylesheet to the index.html document. Make sure this stylesheet is listed after the index.html.

Test the CSS connection

Before you move on, make sure your stylesheet is properly connected to your HTML file.

  1. Open your styles.css file and add a simple, visible style, such as:

    body {
    background-color: yellow;
}

  2. Save your file and refresh your webpage.

  3. If the background changes to yellow (or whatever color you chose), your stylesheet is linked correctly
  4. Once you’ve confirmed it’s working, remove the test style.
  5. If the background does not change, double-check your tag in your HTML and your file path to fix the connection before continuing.

❗ Tip: I recommend adding a comment heading for each style section to keep your CSS document clean and easy to read.

Fieldset & Legend

Fieldset Styles

  1. Add a 1.5rem bottom margin
  2. Add 1rem padding on all sides
  3. Add a 1px solid border in the hex color: #c7ddd6 or your choice.
  4. Add a 5px border radius
  5. Add a background color of #f9fbfa or your choice.

Legend Styles

  1. Make the font bold
  2. Add a right and left padding of .5rem

Inputs

Input, Select, and Textarea

  1. Using a group selector, style the <input>, <select>, and <textarea> elements to have a 100% width.
  2. Add .4rem padding to the top, left, and bottom. (use one style rule for this!)
  3. Add a top margin of .25rem and bottom margin of .75rem. (use one style rule for this!)
  4. Add a 1px solid border in the color of #cccccc
  5. Add a border radius of 4px

Checkboxes & Radio Buttons

Use the attribute selector to target just the checkboxes and radio buttons.

  1. Using a grouped attributed selector, make the width of the radio and checkbox elements auto
  2. Add a right margin of .4rem

Textarea

  1. Make the min-height 100px

Submit & Reset Buttons

Use the attribute selector to target just the submit or reset buttons.

  1. Add a top margin or 1rem.
  2. Add a .6rem padding on all sides.
  3. Make the background color #7fb3a8 (or a color of your choice).
  4. Make the text white
  5. No border (remove it)
  6. On HOVER, the buttons should change their background color to #5f978c (or a color of your choice.)

Sample Output

Example output with styles added.

Sample Form 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 practice-forms folder along with the HTML and CSS validation.
  • All course coding standards have been followed.
  • All inputs have EXPLICIT labels
  • Each <fieldset> has a <legend>
  • Only one Radio button can be selected at one time
  • All Checkboxes in a <fieldset> can be selected at once.
  • All form data entered and selected make it to the ECHO php program on the server and display on the green display page.
  • HTML is properly indented and readable
  • CSS improves readability but stays simple

Submission

Part 1: Reflection

  1. Locate the submission link in Brightspace: Unit 3 > Practice > Practice - Forms.
  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. Describe one moment in this week’s coding practice that made you say “Oh!” or changed how you understood something. What clicked?


3. What challenges (if any) did you encounter in your learning this week? To help, try using this sentence format: This week, I struggled with ________. I think this challenge came up because ________. To work through it, I ________.


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

5. What coding concept are you most confident about right now—and why?

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)
    • stylesheets (folder)
      • form.css
      • index.css
    • validations (folder)
      • 1 HTML validation file
      • 1 CSS validation file
    • index.html

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

  4. Click "Submit"