Multimedia and the World Wide Web

HCI 201 Lecture Notes #5B

HCI 201 Notes #5B 2

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 3

Case Study 4Lisa 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 4

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.

3.The CGI script may send some feedback to the user as confirmation.

1

2

3

HCI 201 Notes #5B 5

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 6

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 7

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 8

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 9

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 10

Creating a form

1. Decide what information will be collected by this form

2. Decide what form controls should be usedShort/long entry, single/multiple selections, limited choices, open answers, etc.

3. Decide the positions of these controls on your formTop-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 11

<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 12

Textbox

<input type=“text” name=“..” value=“..” size=svalue maxlength=mvalue>size defines the width of the textbox in number of characters. The way it looksmaxlength 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 13

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 14

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 15

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 16

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 17

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 18

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 19

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.

11virtual, wraps automatically, but still sends all the text in one line to CGI script. N1physical, wraps automatically, sends the text to CGI script with newline chars included. NN

HCI 201 Notes #5B 20

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 21

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 22

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 23

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 24

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 25

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 26

Assignment 4 (due on 02/09/2005) 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)

Header

Link list Info

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.