Lesson 17: Forms and Controls

For this exercise, we're going to create a form with several types of input elements. We'll do this by building on your earlier files FDA.html and FDAStyle.css. We'll use FDA.html to build FDA2.html and FDAEnroll.html; well use FDAStyle.css to build FDAStyle2.css.

Let's start with the style sheet. Open FDAStyle.css in your editor and make the following changes then save the result as 'FDAStyle2.css':

• Remove the 'border' property from style rules for body, div, footer, maincontainer, and rightcolumn
• Add a new style rule for '.bold' with property font-weight: bold;
• Add a new style rule for '.controls' with these properties: font-family: monospace; font-weight: bold; font-size:12pt;
• Add a new style rule for '.in1' with properties margin-left: 3%; padding: 10px; width: 30%;
• Change '.leftcolumn' to have 'width' be only 20%
• Change '.rightcolumn' to have margin-left' be 23%

 

Next we'll build FDAEnroll.html. Open FDA.html in your editor and make the following changes then save the result as 'FDAEnroll.html':

• In the HEAD element, make sure there is just one LINK to a stylesheet, and it should point to FDAStyle2.css
• Change the text in the title_box DIV to be "Apply to enroll in the Flying Drones Academy"
• In the leftcolumn, below the link for "Customer History", add a new link to FDAEnroll with text "Sign up for our courses"
• In the rightcolumn area, replace the content with the following:
  • An h2 element with text "We need just a little information from you."
  • A P element with text "Fill in the fields below and and click the 'Apply' button."
  • A P element with classes 'bold' and 'in1' and text "All fields are required."
  • A form element with action=pretendCGI.html method=get enctype=application/x-www-form-urlencoded
  • Within the form:
    • A P element with five INPUT elements with it:
      • "Your first name:" type=text name=fName id=fn size=20 maxlength=30 required
      • "Your last name:" type=text name=lName id=ln size=30 maxlength=40 required
      • "Choose a user name:" type=text name=uName id=un size=20 maxlength=30 required
      • "Your email address:"type=email name=uEmail id=em size=20 maxlength=30 required
      • "Choose a password (minimum 10 characters):" type=password name=pwd id=pwd size=20 minlength=10 required
    • A P element for spacing
    • A P element of class 'controls' with two INPUT elements:
      • An INPUT element of type 'submit' with value "Apply"
      • An INPUT element of type 'reset' with value "Clear"
• Leave the rest as before

 

Next we'll build FDA2.html. Open FDA.html in your editor and make the following changes then save the result as 'FDA2.html':

• Change the stylesheet link to point to FDAStyle.html
• In the leftcolumn, below the link for "Customer History", add a new link to FDAEnroll with text "Sign up for our courses"

 

Now, test this works on your PC / Mac:

• Bring up FDA2.html in your browser, click on the link "Sign up for our courses" to make sure you can get to FDAEnroll
• Test the 'required' fields work by clicking on the "Apply" button
• Test the 'email' field recognizes data that is not in an email format
• Test the password 'minlength' field works by entering less than ten characters
• After filling all the fields, click on 'Apply' and examine the returned form

 

If you are able to run cgis from your server:

• In the form in FDAEnroll.html, change the 'action' attribute to be "/MyWebFiles/cgis/simple_cgi_get.php"
• Upload FDA2.html, FDAStyles.css, and FDAEnroll.html to your server
• Fill in the fields as before and click 'Apply' and view the returned data

Alternatively, you might try your hand at adding an 'onsubmit' event handler to your form that invokes a function based on the code discussed near the end of the video session ("function report()").

 

For this exercise, we're going to update FDAEnroll.html, converting it to FDAEnroll-x.html ("x" for "extra"). So Open FDA.html in your editor and make the following changes then save the result as 'FDAEnroll-x.html':

• In the form element itself, make these changes:
  • Change the action to be cgis/sample_cgi_post.php
  • Change the method to be post
  • Change the enctype to be multipart/form-data
     
• Then add a paragraph inside the form:
  • Begin with Creativity Test and skip two lines (two <br> elements)
  • Ask "What is your favorite color?" and follow with an input type=color name=fc element and skip two lines
  • Ask the user to choose two continents, follow with an input type=file name=cont[] element; accept .gif and .jpg file extensions; be sure to include 'multiple' and set the name field to be followed by '[]'
  • Ask the user to choose a prime number between 1 and 38, follow with an input type=range: min 1, max 38, step 1, value 17, name=pn; skip one line and add "current selection: 17", with a span element around the 17; use name=val
  • In this range element, add an event handler of "onchange" to update the current selection value in the "val" span (see lecture example)

For this exercise, we're going to update FDAEnroll-x.html, converting it to FDAEnroll-x2.html . So Open FDAEnroll-x.html in your editor and make the following changes then save the result as 'FDAEnroll-x2.html':

• Add a new paragraph in your form, after the "Creativity test", labeled Promotional code: and skip two lines
• Add the text "Enter your promotional code here:" followed by an <input> element
  the input element should be type=text, length and max length of 6, id and name both 'code', and a required field
• In the <form> element, add an "onsubmit" routine as "return checkCode();"
• In the <head> element, add a <script> element that contains the checkCode() function, which should verify
  • The first character is lowercase alpha
  • The second character is a dash
  • The third character is a numeric digit
  • The fourth character is an asterisk
  • The last two characters are uppercase alpha
• The checkCode() function should also issue an error message for each kind of error found, and set the focus on to the element with id=code, selecting the content