Styling HTML Forms

The following file is required for this lesson:

• demo-form-styling.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 demo-form-styling.zip file and extract its contents to a folder named demo-form-styling.
2. The output of this lesson should look like:
   
3. The first steps are to build the web page and add the form elements. Open your index.html file and add the following code:
   1. Create the starting web page:
      
   2. Add the <header> block complete with a navigation menu:
      
   3. Add a search form after the closing div and before the closing header:
      
   4. Add a <section> inside the main <form> block:
      
4. Refresh your browser to see:
   
   Question: What are the next steps?
5. You will need to add the reset.css file and create a styles.css file to your css folder.
6. Modify your styles.css file by adding the following rules:
   
   1. Add the :root style rule:
      
   2. Add some basic styling:
      
   3. Style the .header-top class:
      
   4. Style the .sr-only class:
      
   5. Style the submit buttons for uppercase letters and rounded corners:
      
   6. Style the search form:
      
   7. Add some padding to the <section>:
      
7. Refresh your browser to see something like:
   
   Question: What needs to be done now?
8. It is time to start styling the login form. Add the following style rules:
   
   1. Add the .login-form class rule:
      
   2. Style the labels:
      
   3. Style the div elements:
      
   4. Style the input fields:
      
9. Refresh your browser to see something like:
   
   Question: What are the next steps?
10. Add more style rules to your styles.css file:
    
    1. Style the submit buttons and add a hover effect:
       
    2. Add :focus style rule:
       
       
       Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
    3. Add some error checking to the input fields:
       
11. Refresh your browser and try the form:
    
    1. Hover over an input field:
       
    2. No data entered:
       
    3. Form fields filled out:
       

Module Home

DMIT1530 Home