WDD 230 - Web Frontend Development I

08: Form Build

Overview

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

♨️Work with your group 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.

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.
    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 Example
    4. Email
      • email type
      • id
      • name
      • required
      • the email address must come from the byui.edu domain.
        Validate the email input using a pattern.
        e.g., ⚙️Email Input Validation - CodePen Example
      • title, the title will supplement the error message and support mouse over messaging.
        e.g., "A valid byui.edu 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 Example
    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 & Submission