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.
In the lab, the goals are:
- 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.)
- 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.
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
- ssh (Windows users use Putty) (secure "shell") -
allows you to log on to a remote computer(eg. osiris) and
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.
A form is the logical unit of information that is
transferred to an action (a URL, usually a page containing PHP code), using a method of GET
For today, the action should be one of:
|Absolute, will work even while viewing local copy
|On same server, will only
work once form is at osiris
|PHP code to simply show the values sent
<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.
You can refer to "HTML quick reference", the guide included in
the course pack, or my notes there.
The form ends, as usual, with a </form> tag. Within
it, there can be any normal HTML (be sure to label your form
elements!), and also the following value-producing tags:
- <input ...> no ending tag, which has type,
name, and gets a value. An initial value can be given. The valid
- "text" (the default), may also have size
- "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
- "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
- <textarea rows= cols= > default text
</textarea> - note the closing tag. If you want an
initial empty value, put opening and closing tags up tight
What to do today:
- 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.)
- 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.)
- 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)
- radio buttons
- select list
- Also include submit and reset buttons
- Test the working of your form by specifying as action:
is acceptable for short, as both pages are on osiris.
- 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)
- radio buttons
- select list
Things to check for:
(many antique general instructions deleted here)
- Your page contains your name, and something about you. I
always refer graduate schools and future employers to your
- your form is in, or in a page linked from index.html
- otherwise, we won't be able to find it to give you
- Your submit works, so you get results back from your form,
once it is on osiris.
Prepared by Lin