CS 203 Lab. 4

Date on course page

Today, you will add a form to your pages, and start thinking about learning to program in php. Next Lab you will write your own PHP script to send back something showing you have received the form information.
The week after that, you will add saving the information on a file. Note: In general only work that is linked from your index.html will receive credit.

Instructions

Please indicate that your lab is ready for marking by filling out a form that is below

In the lab, the goals are:

1. To add a form to your pages (either add to index.html, another of your pages, or put form on a new page, and put a link to it in index.html.)
2. To put your new and revised html pages on osiris. You will learn to use 3 standard command line internet services, in addition to what you learned last week. It is good to know about typing commands, because it is often faster and more convienent than using graphical interfaces.
   
• (Mac-OS) open a "Terminal" window  and type (see below  for more detail):
  
• scp - secure copy, quickest way to transfer one file to (or from) osiris
• sftp - (Secure) File transfer protocol. Allows you to put or get several files
  
• ssh (Windows users use Putty) (secure "shell") - allows you to log on to a remote computer(eg. osiris) and execute comands.
  

Please note: UNIX is case sensitive! Both user names and file names must be typed in the correct case. Lower case is the most usual.

Forms:

For today, the action should be one of:

Examples:

<form action="/jensen/echo.php" method="GET">

<form action="https://osiris.ubishops.ca/jensen/echo.php" method="POST">

GET is the default, the other option is POST. In either case a query string is formed. With GET, it is added to the URL, with POST it is transmitted like a file. This is useful of you expect a lot of text, or wish to hide passwords from prying eys.

• <input ...> no ending tag, which has type, name, and gets a value. An initial value can be given. The valid types are:
• "text" (the default), may also have size and maxlength
• "password" - like text but shows stars or spots, hiding the password.
  
• "checkbox" - can have a value, (default "on"), this would be necessary if more than one checkbox has the same name. If box not checked, nothing goes in the query string.
  
• "radio" - only one radio button of the same name may be selected. Values should be distinct within the same named group.
  
• "submit", "reset" - buttons. Value is displayed on the button. Don't need a name, clicking causes the obvious actions.
  
• "hidden" - value is passed back to the server
• <select ...> <option> .... </select> a single-select list. note: The first option is selected by default.
  
• <select MULTIPLE ...> <option> .... </select> a select list. Allows multiple items to be selected (user must use the ctrl key)
  note: when using PHP for action, NAME="...[]" that is, must end with square brackets, so you get all the selections.
  
• <textarea rows= cols= > default text </textarea> - note the closing tag. If you want an initial empty value, put opening and closing tags up tight together.
  

What to do today:

1. Have a set of pages, linked together, that tell some kind of story: About yourself, about a group, about a company you run, or imagine. (If you invent a fictious organization, be sure to put a disclaimer, saying that this is a student project, and that "Space vacations.com" is not an operating company.)
2. Make sure that you have one page with the file name index.html, then be sure that it always contains links to your other pages (use a relative link, i.e. just the file name.)
3. Construct a form on your main page or another page, to gather some information for the story you are telling. For instance, it could be a guestbook entry, an order form for a selection of books, or a quiz on some subject. A form must have a submit button and should also have a reset button. Use a reasonable variety of ways of gathering data. In fact, please use at least 3 of:
   • input ( text or password)
   • checkbox 
   • radio buttons
   • select list
   • textarea
     
4. Also include submit and reset buttons
   
5. Test the working of your form by specifying as action:
   • "https://osiris.ubishops.ca/jensen/echo.php"
   • "/jensen/echo.php" is acceptable for short, as both pages are on osiris.
     
6. Tell me what you did, by filling out this form, so that I can find your form easily, and you can tell me anything you want about it, or your pages.

Please note: for a "select multiple" php has a problem in that it will only remember the last selection. To solve it, if the action is .php, name the select with brackets, thus: flavours[] rather than flavours. This lets PHP know you want an array of values for flavours.

This comment also applies to a set of checkboxes with the same name (but also needing differing values). However, it might make more sense to just give the checkboxes differing names.

For a summary of form elements, please refer the the HTML Quick Guide included in the course pack, my form notes, or online references.

In your form, please include at least 3 of these element types:

• input ( text or password)
• checkbox 
• radio buttons
• select list
• textarea
  

Things to check for:

• Your page contains your name, and something about you. I always refer graduate schools and future employers to your student page!
• your form is in, or in a page linked from index.html -  otherwise, we won't be able to find it to give you credit.
• Your submit works, so you get results back from your form, once it is on osiris.
  

Prepared by Lin Jensen