1 / 26

Multimedia and the World Wide Web

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.

Download Presentation

Multimedia and the World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. What will we learn today? • How does form work • What’s in <form> • Form elements • Button • Checkbox • Radio • Text • Textarea • Hidden 2

  3. 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. 3

  4. How does form collect information • The user retrieves the form page from the web server. • The user sends the filled out form back to the sever. A CGI script running on the server retrieves and saves user’s input. • The CGI script may send some feedback to the user as confirmation. 2 1 3 4

  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. 5

  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 6

  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=…” 7

  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). 8

  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) 9

  10. Creating a form • Decide what information will be collected by this form • Decide what form controls should be used Short/long entry, single/multiple selections, limited choices, open answers, etc. • Decide the positions of these controls on your form Top-down, left-to-tight, form conventions, alignment. • Insert <form name=“…”></form> • Insert <table></table> between the form tag. (a professional-looking form always needs help from <table>.) • Locate controls in different cells according to 3. • Code for labels and each form control. 10

  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. 11

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

  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. 13

  14. Selection list • <select name=text size=value> <option>option1 <option>option2 <option>option3 </select> - 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?) 14

  15. Selection list • <select name=text size=value multiple> ... </select> - 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. 15

  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. - selectedspecifies which option is initially selected/highlighted. 16

  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. 17

  18. Check boxes <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. 18

  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. 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 19

  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. 20

  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) 21

  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. 22

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

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

  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. 25

  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) Link list Header 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. 26

More Related