1. © Hugh McCabe 2000 Web Authoring Lecture 8
Forms
Suppose we want to allow people viewing our web site to enter information (e.g. their names, their addresses etc.).
Forms make it possible to collect and process user input, and formulate personal replies (among other things).
Lots of applications e.g.
Online Shopping
Web based surveys
etc.
Two aspects of using forms
(a) collecting input
(b) processing input
(a) is done with standard HTML but (b) is a bit trickier and is usually accomplished by writing programs which run on the server.
© Hugh McCabe 2000 Web Authoring Lecture 8 8

2. © Hugh McCabe 2000 Web Authoring Lecture 8
We will start off by just looking at (a)
Forms are comprised of one or more
text-input boxes
clickable (radio) buttons
multiple-choice checkboxes
pull-down menus
clickable images
all of which are enclosed within the <form> tag.
After the user has entered the data they usually click a submit button (or simply press return), the browser packages up the data and sends it to the server.
The server receives the data and sends it to some special program for processing. This program processes the data and sends a response back to the server which passes it back to the browser.
This response may simply be a HTML page which pops up a thank-you message or it may be the results of some calculations which were carried out on the user data …..
© Hugh McCabe 2000 Web Authoring Lecture 8 9

3. © Hugh McCabe 2000 Web Authoring Lecture 8
The <form> tag
This can be placed anywhere in the body.
There are two attributes which must be associated with the form tag.
The first is the action attribute which specifies the URL of the program which is to process the form data.
Let’s just make one up and worry about this later.
Our form tag might look like this
<form action=“ …
</form>
This is saying that a program called proc which is located in the cgi-bin directory of the server safi.ucd.ie will process the results of the form.
© Hugh McCabe 2000 Web Authoring Lecture 8 10

4. © Hugh McCabe 2000 Web Authoring Lecture 8
The second required attribute is the method attribute which dictates the method browser uses to send the data to the server.
This can be either POST or GET. The choice of which one to use is only really relevant to the people who write the programs to process forms. We won’t write these programs but rather simply use pre-existing ones.
So when we want to use a forms-processing program we have to find out whether it expects GET or POST and code out form accordingly e.g.
<form method=GET
action=“ …
</form>
© Hugh McCabe 2000 Web Authoring Lecture 8 11

5. © Hugh McCabe 2000 Web Authoring Lecture 8
A simple example:
<form method=post action=“
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Gender:
<input type=radio name=gender value=“M”> Male
<input type=radio name=gender value=“F”> Female
Income:
<select name=income size=1>
<option>Under £15,000
<option> £15,001 to £25,000
<option> £25,001 and higher
</select>
<input type=submit>
</form>
© Hugh McCabe 2000 Web Authoring Lecture 8 12

6. © Hugh McCabe 2000 Web Authoring Lecture 8
This should look like the following in a browser:
Fig.1
The first element is a conventional text-entry field, 32 characters in width but allowing the user to type up to 80 characters.
The second is a multiple-choice option allowing the user to click on one of two radio buttons
The third is a pull down menu with three options
Finally a submit button.
© Hugh McCabe 2000 Web Authoring Lecture 8 13

7. © Hugh McCabe 2000 Web Authoring Lecture 8
The Input tag
use to specify some class of form element including text fields, multiple-choice lists and submission buttons.
Two attributes which must be defined
the type attribute indicates what type of element it is
the name attribute associates a name with it (essential for form processing programs)
there is no name attribute with a submission buton.
There may be other attributes to define depending on the type.
Text-fields
This provides an empty box into which the user can type text.
The size attribute dictates the width of the text field and the maxlength attribute dictates the number of characters which the user is allowed enter.
© Hugh McCabe 2000 Web Authoring Lecture 8 14

8. © Hugh McCabe 2000 Web Authoring Lecture 8
Use the name attribute to associate a name with this field. In the previous example the name was name..
When the user presses submit, whatever text was entered into this field is sent to the server for processing along with the name.
So if I type “Hugh McCabe” into the text field and press submit part of the message sent to the server will contain something like:
name=Hugh McCabe
Masked Text Field
This is a text field where the user-typed characters don’t appear on the screen.
This is standard practice if the field is a password entry field.
To specify this, use type=password rather than type=text.
© Hugh McCabe 2000 Web Authoring Lecture 8 15

9. © Hugh McCabe 2000 Web Authoring Lecture 8
Checkboxes
Gives users convenient ways to select and deselect items on the form. They might look like this:
What pets do you own?
Dog
User has clicked on the Cat checkbox
so far.
Cat
Bird
Fish
Each of these four checkboxes are created with separate input tags whose types are set to checkbox. You choose an overall name for the whole structure and associate this with each of the checkboxes. Each is also given a value a value (which is sent to the server if the box is clicked)
So the code for this one might look like the following
© Hugh McCabe 2000 Web Authoring Lecture 8 16

10. © Hugh McCabe 2000 Web Authoring Lecture 8
<form>
What pets do you own?
<p>
<input type=checkbox name=pets value=“dog”> Dog <br>
<input type=checkbox name=pets value=“cat”> Cat <br>
<input type=checkbox name=pets value=“bird”> Bird <br>
<input type=checkbox name=pets value=“fish”> Fish
...
</form>
The user can check as many as he/she wishes.
If cat and fish are checked then after submission the following is sent the browser
pets=cat,fish
Radio Buttons
The gender examples of figure 1 is a radio button. It’s like a checkbox except the user can only choose one from the group.
Create a radio button by setting the type attribute to radio.
© Hugh McCabe 2000 Web Authoring Lecture 8 17

11. © Hugh McCabe 2000 Web Authoring Lecture 8
So if we redo the pets example are radio buttons we use the following code:
<form>
Which is your favorite animal?
<p>
<input type=radio name=pets value=“dog”> Dog <br>
<input type=radio name=pets value=“cat”> Cat <br>
<input type=radio name=pets value=“bird”> Bird <br>
<input type=radio name=pets value=“fish”> Fish
...
</form>
And we should get
User has clicked cat
Which is your favorite animal?
Dog
Cat
Bird
Fish
© Hugh McCabe 2000 Web Authoring Lecture 8 18

12. © Hugh McCabe 2000 Web Authoring Lecture 8
If the user submits the form in this state then something like:
pets=cat
is sent to the server.
Action buttons
Other buttons can be placed on the form which cause some action to occur.
For example a submission button is crucial. When clicked a submission button causes the browser to package up the contents of the form and send it to the server.
These are easily coded as
<input type=submit>
This places a button with the default text submit query.
Alternatively supply your own text
<input type=submit value=“Submit Form”>
© Hugh McCabe 2000 Web Authoring Lecture 8 19

13. © Hugh McCabe 2000 Web Authoring Lecture 8
The reset button is fairly self-explanatory.
When clicked it causes the form to be cleared I.e. anything which the user has entered will be erased.
Note this only really makes sense if it is clicked before the user submits!
Code this as
<input type=reset>
the default text in this case will be Reset
Alternatively supply your own by saying something like
<input type=reset value=“Clear the form!”>
Multi-line text areas
Suppose you want to provide an area on your form into which the user can type comments, or suggestions or any text which will take up more than one line.
Do this using the textarea tag.
© Hugh McCabe 2000 Web Authoring Lecture 8 20

14. © Hugh McCabe 2000 Web Authoring Lecture 8
For example
<textarea name=address cols=40 rows=4>
</textarea>
This will put a box on the screen into which the user can type text. When submitted this will be packaged up and sent to the server with the name address.
Multiple Choice Elements
the <select> tag allows you to create pull-down menus and scrolling lists.
Pull-down menus are created by putting a list of <option> tags inside the <select> tag.
Each of these options are given a name and the names of the selected ones are sent to the browser after submission.
© Hugh McCabe 2000 Web Authoring Lecture 8 21

15. © Hugh McCabe 2000 Web Authoring Lecture 8
<select name=income size=1>
<option>Under £15,000
<option> £15,001 to £25,000
<option> £25,001 and higher
</select>
The above example creates a pull-down menu. The name is income. The size attributes dictates how many of the options are visible on the screen at any one time.
The result of this is shown in figure 1.
We can also set an attribute called multiple which allows the user to choose more than one of the options and essentially turns it into a scrolling list.
<select multiple name=income size=1>
<option>Under £15,000
<option> £15,001 to £25,000
<option> £25,001 and higher
</select>
© Hugh McCabe 2000 Web Authoring Lecture 8 22

16. © Hugh McCabe 2000 Web Authoring Lecture 8
The option tag can have a value associated with it, in which case that value is sent to the server if it is selected.
If no value is given, as in the previous examples, then the text of the option is sent to the server (e.g. “Under £15,000”).
Processing Forms
Another days work!
But briefly there are two options.
(a) write programs which run on the server to do it
(b) use someone else’s programs, run them on the server.
As long as we are not trying to do anything out of the ordinary or elaborate then (b) usually suffices.
For example we can easily get a program which takes form input and s it to some specified address (in fact most servers will come with a programs like this pre-installed).
© Hugh McCabe 2000 Web Authoring Lecture 8 23