<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Lab 2

Materials to turn in on the server

  • In your Lab02 folder:
    • index.html
    • css folder
      • styles.css

Expand/Collapse Section ImagejQuery sliding images

Description: In this lab, you will create intelligent forms using html5

 

Expand/Collapse Section ImageExercise Specifications - Part 1 - HTML5 forms validation

  1. Images of the finished product:
    • At beginning image
    • Validated in Chrome image
    • Validated in Firefox image
    • Active validation in Firefox image
       
  2. Layout the html elements as they appear in the code.
     
  3. Add the CSS to format the document - found in the code.
    • If you add a little at a time and refresh, you get a better sense of how the CSS elements are working - giving yourself a better understanding of CSS as a whole.
    • Notice how <!-- html comments --> are used around the CSS
       
  4. Add the JavaScript to make the progress indicator work as desired.
    • Notice how <!-- html comments --> are used around the JavaScript
       
  5. Validate your HTML5 code, you should have zero errors.
     
  6. Code
    • Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
    • index page code
    • css code

 

Grading

Total 10 pts