WDD 230: Web Frontend Development I

W04: Team Activity - Form

Overview

Demonstrate your understanding of the learning activities by applying the concepts by adding an HTML frontend form.

Work with your team on applying these concepts and meeting the form specifications provided. You will submit your own, published form page for feedback and assessment.
When your groups meets, consider starting your meeting with a prayer.
Form Tips Lab

Instructions

File and Folder Setup

  1. Create a new HTML page on the wdd230 course website in the same space as the home page and name it form.html.
  2. Create a form.css file within the styles folder.

HTML

  1. In your form.html file, add the standard HTML structural components.
  2. Include your course home page's header, navigation, and footer.
  3. In the main area, create a simple form with the following fields:
    Note: Each form field element must be contained or referenced with a label element in order to be accessible. Labels ensure that form controls are announced properly by assistive technologies, like screen readers.
    1. Username
      • text type
      • id
      • name
      • required
    2. Password
      • password type
      • id
      • name
      • required
      • the user inputted value must be at least eight (8) characters long and can only be alpha-numeric
        📑pattern attribute.
      Web Lab - Form validation
    3. Password repeated for confirmation
      • password type
      • id
      • name
      • required
      • must match the first Password field input value. If it does not match, show a message and focus the user back to the first Password to try again and erase both Password values from the fields.
        Example: ⚙️ Contact Us Form with Required Matching Key Phrases - CodePen
    4. Email
      • email type
      • id
      • name
      • required
      • The email address must come from the byui.edu domain.
        Validate the email input using this pattern or one that you generate/find/build:
        "[a-zA-Z0-9._%+-]+@byui\.edu$" or [a-zA-Z0-9._%+\-]+@byui\.edu
      • title, e.g., "Please enter a valid email address"
    5. Page Rating
      • range type
      • id
      • name
      • Allow values from 1 to 10 with a step of 1
      • Display the current value to the user on any input or change to the range value.
        Example: ⚙️ Form Input: Range - CodePen
    6. Button
      • submit type that is has an appropriate text label
  4. Use a form with a get method and action that points to a confirmation page named "record.html".
    Your record page should display a simple confirmation of form submission.
    Displaying the values submitted from the form is not required on the record.html page. To properly display the values submitted from an HTML form on the action page, we would need to use server-side programming languages or other backend technology frameworks to process the form data and generate the desired output.

CSS

  1. Style the form using design principles for alignment, proximity, readability, and accessibility.
  2. Use at least three (3) :root pseudo-class CSS variables to define common property settings in your existing CSS rules.

Testing

  1. Practice good design and development by testing and adhering to
    • Course Development Standards

      🛠️Use this page audit tool to help self assess your work.

    • Run a Lighthouse report in the mobile view and check for know issues in performance, accessibility, best practices, and seo.

Submission

  1. Make sure your common home page navigation links to this form page assignment.
  2. Commit and push your local updates to your wdd230 GitHub Pages enabled repository.
  3. Submit your home page URL in I-Learn.