Week Six: August 1-5

Tuesday   Thursday   TO DO



Code XHTML contact forms and redirect pages. Book: Introduction, Chapter 17.


Extended DUE SATURDAY, August 4: Assignment 6





  • Creating forms - Chapter 17
  • Assignment 7 - Portal Page table Form and Response pages
  • Decide form information needed
  • Basic form creation start
  • Basic form test
  • Basic form Response Thanks page start




Using forms

  • Example: StudioBast
  • Capture basic information
  • Email contact
  • Replacement for e-mail address - required in future SCCC classes
  • We're using insecure
  • We're using form-to-email, not database


Decide form information needed

  • Contact information - first name, last name, email address
  • Demographic information - gender, location
  • Choices information - visitor needs, preferences, actions needed
  • Comment information - for items not listed in form


Form Requirements

  • Open/close form
  • Post/get (we're using post)
    • Post lets form be processed with a url like a packet of info. Good for visitors to order items, give contact info, and give feedback.
    • Get lets you collect info and append to a web page but we're not doing that. Good for creating a form that will fill in a db so a visitor can in turn GET the info to look at, like a list of past orders.
  • Form Handler: A program that runs on the web server, which takes the information entered in the HTML form by the visitor and does something with it .
  • Form elements, like text boxes, radio buttons, check boxes, dropdowns, comment areas, selection fields, etc.
  • Submit area: Submit and Reset buttons
  • Hidden part of submit area: Info for form handler, redirect page info
  • Redirect page: The page a visitor is redirected to after s/he clicks the submit button.


Form set-up (for us)

  • Form opening tag
  • Form method (what form is to do): method="post"
  • Form name: name="your_form"
  • Form action: URL for form handler: http://www.newmanic.com/formhandler3.asp


Form component code

  • Component identifer - labels that name the element.
  • Input type - whether it will be a text, radio, or other type of form input.
  • Text
  • Radio
  • Checkbox
  • Dropdown
  • Textarea


Submitting Form

  • Reset button - Allows visitor to clear the form instead of sending
  • Submit button
  • Hidden submit information fields - info for the Form Handler
  • Redirect - Page for Visitor after submitting form
    • Must redirect to an absolute URL


Testing the form

  • For us, checking email to be sure form info was received.
  • W3C Validate the form
  • Must have the redirected Thanks page uploaded on the web, not local
  • Form handler processes the form info then redirects the visitor to help visitor know something happened


Redirect - thank you page

  • Thank you page is a special redirect page
  • Use same design 'template' as the form page without the form on it
  • Have a message on the thank you page
  • Have a link to your portal or assignment page


DEMO: Contact Form - do in class as a short lab

  • Open your tabletemplate.html page, save to your web110/demos as formtemplate1.html
  • Copy the basic form module from your basicformcode.html which should have this Basic Form code, and paste it into the Content table data cell of your formtemplate1.html page.
  • After you type/do all that, make sure the form validates and add the W3C icon.
  • Save a copy of formtemplate1.html to your web110/demos as thankstemplate1.html, delete the form info and add "thank you" content
  • After you type all that, make sure the thank you page still validates.
  • Upload BOTH pages to your remote webhost web110/demos folder.
  • Test the form by looking it up on your Edison server space, filling it out, then submitting it. See if you get the Response Thank You page.
  • Then, check your email to see if the form infoormation from the newMANIC form handler came through.


TASKS - PRE Thursday work - REQUIRED

  • Reading: Chapter 17
  • Make sure to completely finish, validate, and test your Tuesday form.
  • CODE the Basic Thank-You Redirect Page if you have not finished it.
  • Create a basic table structure form SEE CODE IMAGE









  • Using tables to lay out a form structure
  • Building a template page from Comps




Using nested table to layout form

  • Table is a good way to layout information so form components are need at tidy
  • Introduce the form in some way
  • Left 'column' for the identification of form components
  • Right column for form components
  • Submit section at bottom row


DEMO Table Form (partial)

  • Create a contact.html page from your own Table Template, and save it in your web110/demos folder as tableform.html.
  • In the Table Template's content cell, between the opening and closing TD tags, open and close the Form with the form tags
  • Between the open and closing Form tags, create an 8 row 2-column table, no borders needed
  • In the first "column" cells, type the Question you want your visitor to answer
  • In the second "column" cells, type the form input format the visitor will use to answer
  • Make sure the form validates and add the W3C icon.
  • If you wish to use this same page format, ALSO create a thanks page using the page as a template.
  • Upload both files to your remote webhost web110/demos folder.
  • Test the form by filling it out, then submitting it. See if you get the redirect Thank You page.
  • Then, check your email to see if the form info came through.


DEMO: Comps-based Template Page

  • I'll build a quick and dirty starter template for my Example project
  • I'll focus on creating the page styles
  • I'll show how to style a mid-page fixed table format.









  • Assignment 6: Comps Page, 50 points, extension due SATURDAY, August 4.
  • Assignment 7: Portal Form and Redirect Page, 50 points, due Thursday, August 9.
  • Get cracking on the coding of the template of your final project site.