Home   CGS 2820C
  Web Development 		#EW6 Grading Criteria for:
Forms, Form Controls, Form Validation, Form Action
Description:  In your editor using a table, create a working Contact form, which will be a linked through your common Menu Navigation to the rest of your Web site. Your Contact page will have the same format, layout, CSS sheet, and same Navigation as your other pages.

Server Side processing: When the processing of the data is done on the Web Server. This is the way professional forms are done.
Client Side processing : When the processing of the data is done on the Clients computer using the users email client program, such as Outlook. This is seldom done for two reasons: 1. Windows will often display a warning message indicating that a process is trying to access their email client. 2. If a form is filled out in the library or in a computer lab, typically an email client has not been configured so the from data will not be submitted.

Form Action:  What happens after submit is clicked. Usually a server-side file called to handle the submitted data.
Server side samples: <form name="contactForm" id="contactForm" action="gdform.asp" method="post">
Or action="gdForm.php"  Or action="/cgi-bin/FormMail.pl"  (check with your hosting company)
Client side sample: <form action="mailto:name@yourDomain.com" method="post" enctype="text/plain">
Form Method: Post the data to the Server or Get or download data from a database. Post is most common
Encoding Type: ASCII or Unicode
Topic Directions Points
P242 Add a Form control to your Contact page.

P246 Insert a Table inside the Form Control.
Note: DOC TYPE XHTML 1.0 Transitional does not allow <form> tags inside <table> tag - so your <form> tags need to go outside the <table> tags

Enter a nice personalize banner/masthead in the top row		 Task Panes | Tool Box | Form Controls and drag a Form control to an appropriate area inside the <body> tags of your Contact page. Insert a table  about 12 rows, 2 columns inside the <form> tags:
Table | Insert Table
Merge the columns in your first row for your form title.

Also add your Web site Navigation to your Contact Page.  Your Contact page will use the same format, layout, CSS sheet, and same Navigation as your other pages. 10 pts.

Reminder: .style1 is not a meaningful name: -5
Reminder: Every page needs a Title: -5		 10
Place the Field Labels (First Name, Last Name, City, ST, Zip, Email... ) in column 1.
Right Justify the field labels in column 1:
<td style="text-align:right">

The example at right is NOT a working form; it is just a pictorial sample, so do not highlight and copy it.


Be sure to somehow specify (in an obvious manner) which fields are required - for instance see red *s in sample form shown at the right.
 In column one, starting in row 2 type the field labels or descriptions of your form fields such as those shown below. Be sure to use your site-wide CSS and Navigation.
Title Goes Here
* First Name
* Last Name
City
ST
Zip
* Email
Gender Male    Female
Education H.S.      College
Comments
10
Place the Form Control Elements shown above (text boxes, check boxes, buttons) in column 2. Include at least: First Name, Last Name, City, ST, Zip, Email, and a Radio button, Checkbox, and Comment field.
All fields must have meaningful names 		Task Panes | Tool Box | Form Controls and drag the appropriate controls to column 2.
In Code view give an appropriate name for each control. For instance by default the "Input (text)" control for First Name will be: <input name="Text1" type="text" />
Change it to: <input name="FirstName" type="text" />
Make sure there are no spaces in the input field name.		 10
Set State (as a Dropdown, default to FL, max length =2)
<option value="FL" selected>FL</option>		 Open the text file StatesOptionValue.txt
Copy the entire file from <select> to </select>
In code view, find the State dropdown and paste the entire code from <select> to </select>		 10
P248 Radio buttons (also called option buttons) such as male/female or something similar where only one choice can be made. You must put them in a Group Box if there are multiple categories. <input type="radio" name="Gender" value="M" />Male
<input type="radio" name="Gender" value="F" />Female
Only one Radio button may be selected - make sure it has a meaningful field name.		 10
P248 Add at least one Checkbox (such Education: H.S., College or something similar). Multiple Checkboxes may be selected - make sure it has a meaningful field name. 10
P249 Add a Comment or Memo field (Text Area) Comment field allow for longer entries and will provide a scrollbar when the text area becomes longer than the length of the Text Area box. 10
P247 Add a Reset Button and add a Submit button Reset button will clear all fields 10
P253 Validate your form: Require at least 3 fields. Make sure email is both required and valid. For Expression Web see P253 - not recommended
You can validate your Expression Web form in Dreamweaver, which I recommend you do. It is much easier and you should be familiar with both editors.
In Dreamweaver: Select the [Submit] button, choose Window > Behaviors > [+] > Validate form.		 10
P243 Set the Form Action, Method and Encoding.

See HTMLformDemo-ClientSide.htm
See HTMLformDemo-ServerSide.htm
and other form demos in the same Forms folder.

Test it: Make sure you can send data to your own email.

Click to see sample submitted form data

At this point there should be:
images     [Dir]
   contact.htm
   favicon.ico
   index.htm
   portfolio.htm
   resume.htm
   yourSiteNameLayout.css
   yourXtrnlJavaScript.js		 In Expression Web, right-click the form object and choose Form Properties. Click the [Options] button on the lower-left corner.
The gdform.asp (or gdform.php) is a script name supplied by the hosting company (in this case Godaddy) to process forms. (Sample script) The form will not work unless your Web page is uploaded to the Server (as in Server side). You must also go to the Control Panel and click on Form Mail and enter your email address for the form data to be sent to.
Sample 1 for Server Side:
<form action="gdform.asp" name="contactForm" id="contactForm" method="post">
Sample 2 for Server Side:
<form name="ContactMe" id="contactMe" action="/cgi-bin/FormMail.pl" method="post">
OR
For Client Side (not recommended)
<form action="mailto:name@yourDomain.com" method="post" enctype="text/plain">		 10