HTML5 Forms

The following file is required for this lesson:

• responsive-form.zip

Introduction

This lesson builds on the form concepts taught in COMP1017.

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps

1. Download the responsive-form.zip file and extract its contents to a folder named responsive-form.
2. The output of this lesson should look like:
   
   1. Wide width version:
      
   2. Narrow width version:
      
3. The first step is to build the form in HTML, thus add the following to your index.html:
   
   1. Add a <section> for your form (the paragraph has lorem ipsum text):
      
   2. Add a <form> below the div:
      
   3. To group the form elements nively, add a <fieldset> to the form:
      
   4. Add a flex container div:
      
   5. Add the input fields of the form:
      
   6. Add the submit button:
      
4. Refresh your browser to see:
   
   Question: What are the next steps?
5. Open your styles.css file and add the following style rules:
   
   1. Add the :root style rule:
      
      The :root style rule:
      
      Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
   2. Style the basic elements of the web page:
      
      Notice the use of one of the :root defined colours.
   3. Start styling the form by styling the <fieldset>:
      
      Notice the use of more :root defined colours.
   4. Style the input fields and theier associated labels:
      
   5. Style the submit button:
      
   6. Style the anchpr elements of the form:
      
6. Refresh your browser and make the width wider to see something like:
   
   Question: What is next?
7. Add the following media queries to your styles.css and refresh your browser after each is added to see the effects:
   
   1. Add the following media query to affect the flex container:
      
      
      Question: What are the changes?
   2. Add the following media query to affect form in the section:
      
      
      Question: What are the changes?
   3. Add a media query for the max width:
      
      
      Question: What are the changes?
8. You should now experiment with different browser widths to see the full effect of the styling and media queries.

Module Home

DMIT1530 Home