Lesson 18: Those Other Controls

We'll be working with the DTECafe-local.html and DTECafe-remote.html files, found in your MyWebFiles directory.

We'll start with the style sheet. Open your editor and code the following style rules then save the result as 'selectStyles.css':

• Make sure 'h1' elements have red text with a font-size of 16 points
• Add a new style rule for 'p' and 'option' elements ensuring a monospace font in 12 point bold
• Add a new style rule for '.fontLabel' with these properties: position: relative; top: -5em;
• Make sure 'button' elements have a white background
• Add rules for '.up' to have margin-left be 10% and '.down' to have margin-left of 1%

If you have a remote server, upload selectStyles.css to your server, then, in either case, run some tests:

Test both DTECafe-local.html and DTECafe-remote.html pages work; we did not demonstrate what happens when you submit the forms, so you should make some selections and submit the form for both pages.

Next, replace the submit and reset buttons with 'button' elements. The submit button should have a type of 'submit', a class of 'up', and include an 'img' with 'src' of "Thumbs-up.jpg", and the reset button should have a type of 'reset', a class of 'down', and include an 'img' with 'src' of "Thumbs-down.jpg". Test the 'button' elements work the same as the earlier buttons.

Create an HTML page named 'formss.html' that helps the user to submit an application for a Nobel Prize, using a form and some controls.

The page should reference the style sheet 'formStyle.css' (which is already supplied).

Start with an 'h1' element with text "Application For Nobel Prize"

Follow with an 'h2' element with instructions to
fill in all fields then click on the SUBMIT APPLICATION button

Then the form, which should use a method of 'post' and an action of 'cgis/simple_cgi_post.php'.

(Reminder: only controls with a 'name=' attribute have their value sent to the CGI).

 

The form should include:

• A 'fieldset' comprised of 'input' fields for gathering:
  
  
  • Full name
  • Nick name
  • Maiden name
  • Other name
  • Name to submit the application under
    
    The fieldset should have a legend of "Identities"

 

• Two 'textarea's that are read-only, both 3 rows by 45 cols
  
  
  • The first textarea should contain:
    
    "Self nominations are not accepted; specify the name of the person who we should pretend is submitting this on your behalf"
    
    
  • The second textarea should contain:
    
    "Applications that are received after February 1 are automatically held over until the following year's competition"

 

• A 'select' group for the user to specify which Nobel prize they are applying for:
  
  
  • Physics
  • Chemistry
  • Medicine
  • Literature
  • Peace
  • Alchemy
  • Astrology

 

• A 'paragraph' containing
  
  
  • A 'fieldset' of five 'checkbox'es with a 'legend' of "Qualifications"
    
    
  • Text: "Specify why you are qualified to make this nomination (check all that apply):"
    
    Five checkboxes, each with a 'name' of 'qual1', as follows:
    
    
    • Advanced degree in the field
    • Over 30 years professional practice
    • Over 100 referenced publications in the field
    • I know how to throw a party
    • I have not been convicted of a felony in over five years

 

• A 'paragraph' containing
  
  
  • Text: "Specify how you will accept payment of the prize (check only one):"
    
    
  • Six radio buttons, each with a 'name' of 'qual2', as follows:
    
    
    • US Dollars
    • Euros
    • Japanese yen
    • eBay credits
    • Bitcoin
    • Shopping spree at the 99-cent store

 

• An 'input' control, type=text, maxlength=2 and length=2, nested inside a label that has the text
  
  "Explain how you plan to bring about world peace, should you win the prize (be concise yet complete):"

 

• Two 'input' elements, one type=submit, the other type=reset
  
  
  • The submit type element labled "Submit application"
  • The reset type element labeled "Chicken out"

 

Test that your form works. If you are able to upload the page to a server, check that the results are what you expected. If you don't have a server to upload to, you might try constructing a function similar to the 'showBill()' function in the DTECafe-local.html page (a bit of a challenge, but you should be able to do it by now).