forms assignment explained

This week we learn about developing forms.

Preparation:

Text: Chapter 14 - Getting Interactive: XHTML forms

Lecture Video (optional): I WILL POST WHEN I RECORD CLASS

Example from lecture: Flower Feedback form and CSS page.

(You'll probably want to control-click (Windows) or alt-click (Mac) the HTML page link so that it opens in a new window and you can then view the source.)

CD: View lesson 6 (optional)

CCCConfer taping of lesson

https://sas.elluminate.com/p.jnlp?psid=2009-04-21.1827.M.0952E3FB5CC338370C949C3103C0A3.vcr

So far you have been developing material to present to others, a one-way street. Now you will learn how to bring information in from your visitors. As you develop your form, I suggest that you make it appropriate to the content of your final website project. Instead of being a practice or throw-away page, as the other assignments have been, you can develop a page that plays a role in your site. Do you want customers to place orders, provide feedback, or give you certain information? This is the tool to use. If you just can't think of a way to incorporate a form into your site, at least you must think up some kind of scenario for your form. If you just write things like "enter some text here" you won't get credit for this assignment.

You will use a well-known web application called "formmail.pl", a copy of which has been modified and is located on an SRJC server. This script takes the information that is entered in the form and sends it to an email address - but only to an address that is within the SRJC system.

Fortunately you have an SRJC email account that came with your student web account, and you may use it as you please! Your email address is yourusername@student.santarosa.edu. The easiest way to access your email account is to go to https://student.santarosa.edu/squirrelmail/src/login.php, bookmark it, and log in with your username and password. It's a very simple email interface, and it works just fine.

To get all this to happen, your form element will need to look like this:

<form action="http://www.santarosa.edu/cgi-bin/misc/formmail.pl" method="post">
...
</form>

When the user clicks on the "submit" button in your form, the browser will send the information that the user entered in the form to the formmail web application, and the web application will in turn send an email that contains this information. In this assignment you must provide 4 additional pieces of information to the formmail web application. You provide this additional information by inserting 4 input elements with a type attribute set to "hidden" into your form, as described below. (The precise location of these elements is not important, as long as they are inside your form element.)

Here are the 4 additional input elements that you will need to insert into your form element:

• Use an input element with the type attribute set to "hidden" and the name attribute set to "recipient" to tell the web application what email address the email should be sent to. (In this case, the email must be sent to your email account on the student server.) Here is an example:
  
  <input type="hidden" name="recipient" value="yourusername@student.santarosa.edu" />
  
  
• Use an input element with the type attribute set to "hidden" and the name attribute set to "subject" to tell the web application what the subject of the email should be. Here is an example:
  
  <input type="hidden" name="subject" value="feedback form" />
  
  
• Use an input element with the type attribute set to "hidden" and the name attribute set to "required" to require that the user fill in certain fields. If the user fails to fill in the required fields, the web application will refer the user to a webpage displaying an error message. As a matter of good practice, you should indicate on the form which fields are required. If more than one field is required, you can separate the names of the required fields with commas. Here is an example:
  
  <input type="hidden" name="required" value="firstname, lastname, email" />
  
  
• Use an input element with the type attribute set to "hidden" and the name attribute set to "redirect" to have the browser go to a webpage of your own creation after the user has clicked on the submit button. If you don't provide this element, the browser will display an ugly default "thank you" page that won't match the rest of your site. Of course, you'll also need to create the customized "thank you" page. Typically the "thank you" page will have a link on it to take the user back to your main website. Note that the value attribute must be given a complete URL as its value, not just a relative URL. Here is an example:
  
  <input type="hidden" name="redirect" value="http://student.santarosa.edu/~myusername/mythankyoupage.html" />
  

For Credit:

1. Develop an HTML page which has the following requirements (40 points total):
   • <form></form>
   • <input type="text" />
   • <input type="radio" />
   • <input type="checkbox" />
   • <input type="submit" />
   • <input type="reset" />
   • <select></select>
   • <textarea></textarea>
   • The four input elements with the type attribute set to "hidden" described above.
     
     
2. Add any CSS that is appropriate to the page. For full credit, you should place your form within a table for a professional look.
   
   
3. Add an action attribute to the form tag with a value that allows the SRJC formmail.pl script to process the form.
   
   
4. Upload your form (remember that you can't test a form unless it's on the server), and test to be sure all your hidden tags are working properly. Is the data going to the correct email address? Does the email have the proper subject line? Do you get an error if you don't enter a required field? Does the correct redirect page come up?
   
   
5. Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Links to these validators are on the resources page. Note that points will be deducted from your score for each error in your XHTML or CSS code.
   
   
6. Don't forget to also upload your css file to the server. Upload your files directly into your public_html folder, not into a subfolder.
   
   
7. Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a subfolder.
   
   
8. Update your homework page so it now links to your table code.
   Sample of homework page at this stage of the class

View a sample homework page

You do not need to submit a URL this week since the student work page has a link to your homework page, and I will grade your work from there.

http://www.santarosa.edu/~lhemenw/html2/student-work.html