Multimedia and the World Wide Web
HCI 201 Lecture Notes #5B
What will we learn today?



How does form work
What’s in <form>
Form elements






Button
Checkbox
Radio
Text
Textarea
Hidden
HCI 201 Notes #5B
2
Case Study 4
Lisa Jacobs, the director of
customer support for Jackson
Electronics, would like to have a
page for customer registration.
Instead of having to fill out and
mail back the registration card in
the product package, customers
can now do it online. The
registration information will be
sent via emails to Lisa’s assistant.
As you have guessed, Lisa asks
us to create this registration page
for her company.
HCI 201 Notes #5B
3
How does form collect information
1. The user retrieves the form page
from the web server.
2. The user sends the filled out form
back to the sever. A CGI script
running on the server retrieves and
saves user’s input.
2
1
3
3. The CGI script may send some
feedback to the user as
confirmation.
HCI 201 Notes #5B
4
CGI scripts

What’s a CGI script?
Common Gateway Interface script is any program or sets of
commands that performs tasks with the data it retrieves from the
web page.


Present static information  interact with readers.
CGI scripts made it possible for us to






Maintain online database
Publish catalogues for online purchases
Dynamically present information based on users’ profiles
Record the number of times a web page has been accessed
…
CGI scripts can be written in different programming
languages

Visual Basic, JavaScript, ASP, C/C++, Perl, etc.
HCI 201 Notes #5B
5
What’s in <form>

Function:
Contains various controls/fields to collect inputs

Attributes:
action, method, name, etc.

End tag:
</form>, never omitted.
Contains: form controls
 Used in : body_content

HCI 201 Notes #5B
6
What’s in <form>

One page can have several <form>s, one after another.
(You cannot nest one form inside another)

action
<form action=“http://www.abc.com/order.asp”>
- Gives the URL of the CGI script that will retrieve and process the
form’s data.
<form action=“mailto:email_address” method=“post”>
Create an email that looks like this:
“FirstName=Andy&LastName=Davids&Address=634+Wabash+Ave&
City=Chicago&State=IL&Date=Aug%2Fl10%2F2004&Notes=…”
HCI 201 Notes #5B
7
What’s in <form>

Method
<form method=“post (or get)”>
- Tells the script how to retrieve the data from the form
- get packages the form data by appending it to the end of the
URL specified in action. Sever retrieves the data from the
URL for the script program to process.
http://www.trackorder.com/search.asp?id=1895628
- post sends form data in a separate data stream, allowing the
server to retrieve data from name-value pairs (standard input). It
is more flexible (any info.) and safer (data will not be truncated).
HCI 201 Notes #5B
8
Form elements

Most commonly used form controls






Text boxes for (short) text and numerical entries
Radio buttons to select a single option from a predefined
group of (usually short) items
Check boxes to select any number of options from a
predefined group of items
Selection lists for long lists of options (dropdown list,
single selection list, multiple selection list)
Text areas for extended entries that might include several
lines of text.
Buttons perform certain tasks upon being clicked (button,
submit, reset)
HCI 201 Notes #5B
9
Creating a form
1. Decide what information will be collected by this form
2. Decide what form controls should be used
Short/long entry, single/multiple selections, limited choices,
open answers, etc.
3. Decide the positions of these controls on your form
Top-down, left-to-tight, form conventions, alignment.
4. Insert <form name=“…”></form>
5. Insert <table></table> between the form tag. (a
professional-looking form always needs help from <table>.)
6. Locate controls in different cells according to 3.
7. Code for labels and each form control.
HCI 201 Notes #5B
10
<input>

<input type=option name=text value=value>
name specifies the name of this input field.
- Some field might be required. (“To” is required in an email submission)
- Some CGI script is case-sensitive. (“email”≠“Email”)
value assigns an initial value to this input field.
type decides what kind of input field it is. It can be any one of the
following:
button, checkbox, hidden, image, password,
radio, reset, submit, text.
HCI 201 Notes #5B
11
Textbox

<input type=“text” name=“..” value=“..”
size=svalue maxlength=mvalue>
size defines the width of the textbox in number of characters.
The way it looks
maxlength defines the maximum number of characters
allowed in this textbox. The way it works
(what happens if size>maxlength? Or size<maxlength?)
Last Name: <input type=“text” name=“LastName”>
label (e.g., “Last Name”) is a text description next to the
input field so that users would know what to enter.
Lisa wants to use limit-sized textbox for the first 8 fields.
HCI 201 Notes #5B
12
Textbox

<input type=text name=state value=“IL” …>
value defines the default value of this field, which is the value
that appears in the input box when the form is initially displayed.
- Save time (if most of the users will enter the same value)
- Increase accuracy (reduce typos)
- Editable

<input type=password name=pswd>
- Prevent critical information from being seen on screen (in * or ).
- Does not mean this information is encrypted during transmission
via a secured conntection.
- Good for login password, but might be less welcome for 16-digit
credit card number.
- name, size, maxlength.
HCI 201 Notes #5B
13
Selection list

<select name=text size=value>
<option>option1
<option>option2
<option>option3
</select>
- name defines the name of this selection list.
- Each option tag represents an entry in the list. </option>
can be omitted.
- size is the number of entries in the selection list. When size
equals to the number of options, we have a list without scrollbar.
size=1  dropdown menu. (what if size > or < # of options?)
HCI 201 Notes #5B
14
Selection list

<select name=text size=value multiple>
...
</select>
- No width. The width of a selection list is decided by the widest
item in the list.
- No height. The height of a selection list is decided by the
number of options available in the list.
- multiple (with no value) allows the user to select multiple
items from the list.
*Form will send a name/value pair to the CG script for each selected
items. The script should be able to handle one field with multiple values.
HCI 201 Notes #5B
15
Selection list

<select name=text size=value>
<option value=1>option1
<option value=2 selected>option2
<option value=3>option3
</select>
- option# is the value displayed in the selection list (for users).
- value is what’s been sent to the CGI script for processing.
- selected specifies which option is initially selected/highlighted.
HCI 201 Notes #5B
16
Radio buttons
<input type=radio name=fruits value=a>Apple
<input type=radio name=fruits value=g>Grape
<input type=radio name=fruits value=b>Banana
- type=radio indicates this is a radio button control.
- name must be the same for all the radio buttons in the same
group, to guarantee only one of them can be selected by the user.
- value is what will be sent to the CGI script for processing if that
radio button is selected.
- Add checked to the radio tag if it should be initially selected.
- Need labels (Apple, Grape, Banana) to tell users what they are.
HCI 201 Notes #5B
17
Check boxes
<input type=checkbox name=app value=“on”>Apple
<input type=checkbox name=gra value=“on”>Grape
<input type=checkbox name=ban value=“on”>Banana
- Similar as radio buttons, but allow users to specify multiple selections.
- type=checkbox indicates this is a checkbox control.
- Checkbox works independently, so name should be different for the
checkboxes “in the same group”.
- A checkbox has the value=“on” if it is selected. But you can
assign a different value.
- Add checked in the tag if this checkbox should be initially selected.
- Need labels (Apple, Grape, Banana) to tell users what they are.
HCI 201 Notes #5B
18
Text area
<textarea ... wrap=value>
text you want to initially display in the textarea
</textarea>
- Users’ input does not wrap in a textbox, but will be (by default)
scrolled to the left as additional texts is typed.
- To control warp:
off, no wrapping (Enter key still works), users have to scroll to
the right to see all the text. One line of text is sent to CGI script. 11
virtual, wraps automatically, but still sends all the text in one
line to CGI script. N1
physical, wraps automatically, sends the text to CGI script
with newline chars included. NN
HCI 201 Notes #5B
19
Buttons
<input type=button name=text value=text>
<input type=submit>
<input type=reset>
- Use buttons to perform an action.
- value is the text that appears on the button.
- submit and reset do not require for name and value, but you
can specify them as needed.
By default, clicking on submit will send form data to the script.
By default, clicking on reset will clear all the entered info.
- Specify event attribute onClick=“DoTask()” to perform a
pre-defined task when the button is clicked. (you can change the
default behavior of submit and reset.) --- we will learn that in week #8.
HCI 201 Notes #5B
20
Image fields (buttons)
<input type=image src=URL name=text
value=text onClick=“...”>
- Clicking on the image will perform an action.
- src is the filename or URL of the inline image.
- value assigns a value to the image (won’t show on the screen).
- Use image fields to:
- Give a fancy look to your buttons.
- Perform tasks that regular buttons cannot:
script can do different things depending on where the user
clicked within the image. (name.x_coord, name.y_coord)
HCI 201 Notes #5B
21
Hidden fields
<input type=hidden name=text value=text>
- Very very useful when you want to pass around information but
do not want your readers to see that.
- You can place the hidden field anywhere between
<form></form>.
- A good practice is to put all hidden fields in one place, and add
comments to describe the purposes of these fields.
- Can be accessed and manipulated like any other form
elements.
HCI 201 Notes #5B
22
Additional form elements
<button name=text value=text type=type>
anything (text, image, HTML tags) you want to put on the button
</button>
- type = button, submit, or reset.
<button>
<img border="0" src="playbutton.jpg"><br>
<b>play <font color=red>music</font></b>
</button>
HCI 201 Notes #5B
23
Additional form elements
<fieldset>
<legend align=top>Used for</legend>
<input type=radio name=use value=h>Home<br>
<input type=radio name=use value=b>Business<br>
<input type=radio name=use value=g>Government<br>
</fieldset>
HCI 201 Notes #5B
24
Create effective forms

Create an easy-to-follow information flow.

Predictable format and position of the controls
Group related fields

Order the “tabindex” attribute in all the controls








Structure a long form to scroll into several logical sections (<hr>).
Form alignment with <table>.
Avoid horizontal scrolling.
Help users input information correctly (limited choices, length,
type, and validation) and easily (default values, retrieve profiles).
Indicate the required fields.
No ambiguous labels, appropriate instructions.
Provide confirmation for successful submission, or feedback if
there is any mistake.
HCI 201 Notes #5B
25
Assignment 4 (due on 02/09/2005)
Header
Link
list
Info
 Create
an “index.htm” that has three
frames: Header, LinkList, and Info.
 LinkList.htm has 3 links



Home.htm (initially shown in Info.)
Registration.htm (will display in Info.)
Contact us (will open a new window)
 Registration.htm
has a form that contains:
textbox, radio button, checkbox, dropdown menu, selection list
(allow multiple selections), textarea, submit button, and reset
button.
 What should be in Header.htm, Home.htm, and Contact.htm is
up to you.
Download “A4” from COL for detailed requirements.
HCI 201 Notes #5B
26
Descargar

Recommending a Strategy