Multimedia and the World Wide Web HCI 201 Lecture Notes #5B

HCI 201 Notes #5B2 What will we learn today? How does form work What’s in Form elements Button Checkbox Radio Text Textarea Hidden

HCI 201 Notes #5B3 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 s to Lisa’s assistant. As you have guessed, Lisa asks us to create this registration page for her company.

HCI 201 Notes #5B4 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

HCI 201 Notes #5B5 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 #5B6 What’s in Function: Contains various controls/fields to collect inputs Attributes: action, method, name, etc. End tag:, never omitted. Contains: form controls Used in : body_content

HCI 201 Notes #5B7 What’s in One page can have several s, one after another. (You cannot nest one form inside another) action -Gives the URL of the CGI script that will retrieve and process the form’s data. Create an that looks like this: “FirstName=Andy&LastName=Davids&Address=634+Wabash+Ave& City=Chicago&State=IL&Date=Aug%2Fl10%2F2004&Notes=…”

HCI 201 Notes #5B8 What’s in Method - 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. - 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 #5B9 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 #5B10 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 5.Insert between the form tag. (a professional-looking form always needs help from.) 6.Locate controls in different cells according to 3. 7.Code for labels and each form control.

HCI 201 Notes #5B11 name specifies the name of this input field. - Some field might be required. (“To” is required in an submission) - Some CGI script is case-sensitive. (“ ” ≠ “ ”) 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 #5B12 Textbox 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: 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 #5B13 Textbox 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 -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 #5B14 Selection list option1 option2 option3 - name defines the name of this selection list. - Each option tag represents an entry in the list. 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 #5B15 Selection list... - 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 #5B16 Selection list option1 option2 option3 - 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 #5B17 Radio buttons Apple Grape 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 #5B18 Check boxes Apple Grape 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 #5B19 Text area 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. 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 #5B20 Buttons - 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 #5B21 Image fields (buttons) - 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 #5B22 Hidden fields -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. -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 #5B23 Additional form elements anything (text, image, HTML tags) you want to put on the button - type = button, submit, or reset. play music

HCI 201 Notes #5B24 Additional form elements Used for Home Business Government

HCI 201 Notes #5B25 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 ( ). Form alignment with. 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 #5B26 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.