CSS Forms & Scripting Lab (optional)

Objectives

By the end of this lab, students will be able to...

  1. Create and HTML forms using <form>, <input>, <button>,<textarea>,<label>,<fieldset> and <select> tags.
  2. Effectively use CSS to style forms according to a given style guide.
  3. Recognize and identify key components of JavaScript code to write dynamic element in HTML pages.
  4. Use JavaScript to modify the attributes of HTML elements.

Instructions

In this lab you will use CSS positioning and formatting to create a roll-over effect for the PRZ web site's main navigation. You will also work in Fireworks and Photoshop to create web-ready images in three common web formats: GIF (.gif), JPEG (.jpg) and PNG (.png) format.

If you haven't completed the CSS Formatting Lab, you can work most of the current lab using the template.html from the CSS Formatting Lab. Download and Extract the CSS Formatting lab zipped files into a directory. Otherwise, begin work from where you left off with the CSS Positioning Lab.

Otherwise, make a duplicate copy of the local directory where you have stored the CSS Positioning lab. Name this duplicate directory CSS_Rollover.

Use the Coding Forms tutorial to build your own form

Explore each of the sections in the Coding Forms Tutorial to build your own HTML form.

  1. Use the HTML editor of your choice to Create a new file called my_form.html and save it in your week6 or labs directory
  2. Review each section of the Coding Forms Tutorial, adding different elements to your my_form.html page
  3. validate your completed my_form.html page using the W3C HTML validator form.

Use the PRZ template file from your previous lab to create a Prospective Client Form

If you haven't completed the CSS Rollover Lab, you can work from either a copy of the completed CSS Positioning Lab or an extract of the zipped files from the CSS_Formatting lab. Save the files to a new directory called CSS_Forms and work from there.

Begin work from where you left off with the CSS Rollover Lab.
Make a duplicate copy of the CSS Rollover lab directory and name this duplicate directory CSS_Forms. Save your changes here.

  1. Open the contact.html file in your HTML editor of choice, replace the code in the content section with the following code and save the file as contact.html 
    
<h1>Contact Us</h1>
 <form action="http://wwwebworks.biz/bit112/showFormData.php" method="post">

   <fieldset id="personal_data">
       <legend>Personal Information</legend>
       <label>First Name:<input name="firstname" type="text" tabindex="1"/></label> 
       <label>Last Name:<input name="lastname" type="text" tabindex="2"/></label> 
       <label>Email Address:<input name="email_address" type="text" tabindex="3"/></label> 
   </fieldset>

   <fieldset id="current_help">
       <legend>Current Legal Counsel</legend>
       <p>Are you currently working with any legal professional?</p>
       <label><input name="lawyer_now" 
         type="radio" 
         value="Yes" tabindex="35"/>Yes</label>
       <label><input name="lawyer_now" 
         type="radio" 
         value="No" tabindex="35"/>No</label>
         <p>If you are currently in litigation, please briefly describe the situation
         and your current counsel in the space below:</p>
       <textarea name="current_litigation" 
         rows="10" cols="50"
         tabindex="40"/>
       </textarea>
   </fieldset>

   <fieldset id="legal_issues">
       <legend>Legal Issue(s)</legend>
       <label><input name="legal_issue_0" 
         type="checkbox" 
         value="Car Accident" tabindex="20"/>Auto Accident</label>
       <label><input name="legal_issue_1" 
         type="checkbox" 
         value="Personal Injury" tabindex="21"/>Personal Injury</label>
       <label><input name="legal_issue_2" 
         type="checkbox" 
         value="Small Claims Court" tabindex="22"/>Small Claims Court</label>
       <label><input name="legal_issue_3" 
         type="checkbox" 
         value="Summons" tabindex="23"/>Summons</label>
   </fieldset>
   <input  class="submit" type="submit" value="Send Data"/>
 </form>
  2. Contact form without StylesView the HTML in both browsers. Notice any differences you see

Edit the layout and typography style sheet to stylize the Form

  1. Edit the CSS style sheets named layout.css and typography.css in the styles directory in the CSS_Forms directory.
  2. Apply appropriate styles in each of the style sheets, to create the following effect. Notice that you may repeat some of the same selectors used in the typography.css and/or layout.css file, but with different rulesContact form with Styles
    • Set the width of the form to 850px
    • Apply a border of 1px solid #FF9900 to to all of the fieldset elements. Give them a width of 20em, set their margin-bottom to1em and assign them 10px of padding all around.
    • For the legend elements, assign a color of #084048 and a background of #B3E2E0 with a
      border 1px solid #FF9900 and a bit more padding left and right than up and down
    • Notice the submit button has a class marker submit that allows you to apply the same
      background-image as used for the links. To finish this effect, set the border to none, and set a width of 136px and a height of 65px , its color to #084048 and its font-size at 12pt
    • Set the display property of the <label> elements to block
    • In the #personal_data , set the styles of the input elements so that they have a width of 15em, color to #084048 and background to #B3E2E0 and a border 1px solid #FF9900
    • Play around with the float:left and float:right applied to the different fieldsets (use their identity markers) to acheive the two column layout shown above.
  3. Save the CSS changes and View the HTML in both browsers.

Add the JavaScript Date Function to the Client Navigation and Update all pages in the PRZ site

Edit the first part of the Client Navigation section to replace the static text for the date with a dynamic JavaScript that updates the date automatically each dayJavaScript Date results

  1. Replace static date text with the tag <script type="text/javascript"> </script> tag
  2. Between the opening and closing script tags, add the JavaScript 
    document.write( Date().toString().substring(0,15) );
  3. Save the CSS changes and View the HTML in both browsers. correct any problems
  4. Now create an external JavaScript file called date.js (right click and save this file as date.js).
  5. Change the script tag to remove the contents of the tag and instead include a src attribute.
    6. <script type="text/javascript" src="date.js"></script>
  6. To ensure the script loads before the page does, move the script tag to the within the <head> section of the document.
  7. Add an id="date" attribute to the <p> tag where the date and time will be displayed. Notice the <p> tag is empty at first, it will be written in by the JavaScript function
    8. <p class="date" id="date"></p>
  8. JavaScript Date resultsChange the body tag to start the script running by calling the function stored in the date.js file
    9. <body onload="startTime()">
  9. Make the appropriate changes in all .html pages in the PRZ site to use the date.js functions

Use JavaScript to show and hide directions on the Offices page in the PRZ site

  1. Edit the offices.html file to add an new link tag <a href="#" onmouseover=""> around the addresses in the ordered list, within the <li> elements - one <a> tag for the Seattle office and one for the Everett office in the Content section, for example, 
    2. <a href="#" onmouseover="">Seattle Office 1915 Pacific Building, 
                                                 720 Third Avenue</a>
  2. Add an id to the <ol> tag surrounding each set of directions, id="Seattle" and id="Everett" respectively 
    <ol id="Seattle"> 
     <li>From I-5 Southbound take the James St. exit ...
  3. Add a new <li> item to the end of each set of directions 
    4. <li style="list-style-type:none;">
           <a href="#" onclick="">Close Directions</a></li>
  4. JavaScript Hide resultsCreate an in-page style that sets the display of the nested ol tags to none so that the directions do not show. Notice that nothing happens when you click the links.
  5. Create two JavaScript functions to show or hide the directions by changing the display style of the ol elements with ids. Add the following <script> tag in your <head>
    6.  <script type="text/javascript" language="javascript">
     /* Change the display of the an element identified by the id */

    
 function showDirections( id )
     {
     	document.getElementById( id ).style.display = 'block';
     }
     
     function hideDirections ( id )
     {
      	document.getElementById( id ).style.display = 'none';
     }
    </script>
  6. Call the JavaScript showDirections() function to show the element when someone mouses-over the address link by setting the onmouseover property of the links surrounding the addresses, e.g., 
    7. onmouseover="showDirections('Seattle')"
  7. Call the JavaScript hideDirections() function to hide the element when someone clicks-on the Close Directions link by setting the onclick property of the links surrounding the Close Directions
    8. onclick="hideDirections('Seattle')
  8. JavaScript Show ResultsSave the CSS changes and View the HTML in both browsers. Notice the effect when you open and close the directions info.

Upload the completed lab to your course portfolio

  1. Upload your completed Lab, and all the contents of its folder to your course portfolio site week6 or labs section. Link it to the appropriate index.html page.
  2. Be sure your page is viewable at http://studentfolders.student.cascadia.edu/bit112/