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. Case Study 4.
HCI 201 Lecture Notes #5B
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.
Contains various controls/fields to collect inputs
action, method, name, etc.
</form>, never omitted.
- Gives the URL of the CGI script that will retrieve and process the form’s data.
Create an email that looks like this:“FirstName=Andy&LastName=Davids&Address=634+Wabash+Ave&City=Chicago&State=IL&Date=Aug%2Fl10%2F2004&Notes=…”
<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).
Short/long entry, single/multiple selections, limited choices, open answers, etc.
Top-down, left-to-tight, form conventions, alignment.
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.
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.
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)
- 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.
- name defines the name of this selection list.
- Each optiontag represents an entry in the list. </option>
can be omitted.
- sizeis 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?)
- Nowidth. The width of a selection list is decided by the widest item in the list.
- Noheight. 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.
<option value=2 selected>option2
- option# is the value displayed in the selection list (for users).
- value is what’s been sent to the CGI script for processing.
- selectedspecifies which option is initially selected/highlighted.
<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.
<input type=checkbox name=appvalue=“on”>Apple
<input type=checkbox name=gravalue=“on”>Grape
<input type=checkbox name=banvalue=“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.
<textarea ... wrap=value>
text you want to initially display in the 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. 11
virtual, wraps automatically, but still sends all the text in one line to CGI script. N1
physical, wraps automatically, sends the text to CGI script with newline chars included. NN
<input type=button name=text value=text>
- 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.
<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)
<input type=hidden name=text value=text>
<button name=text value=text type=type>
anything (text, image, HTML tags) you want to put on the button
- type = button, submit, or reset.
<img border="0" src="playbutton.jpg"><br>
<b>play <font color=red>music</font></b>
<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>
textbox, radio button, checkbox, dropdown menu, selection list (allow multiple selections), textarea, submit button, and reset button.
Download “A4” from COL for detailed requirements.