Transcript Creating Web Page Forms

Gathering Requirements
What do users want?
Information Gathering
Techniques
• Surveys
• Interviews
• Focus Groups
Surveys
• Paper surveys
• Electronic surveys
• E-mail
– in-text
– attachments
• Web-based
– processing data
• Phone Surveys
Interviews
• Personal
– Come prepared
– Tape recorder
– Open versus Closed questions
• Phone
– Cold call
– Selected users
Focus Groups
• Room setting
– small versus large groups
– moderator
– synergy
• Electronic
– Group decision support systems
• Cost prohibitive
– Platform Issues
What to Use?
• Ask some questions
–
–
–
–
Do users have e-mail addresses?
Can you meet with them personally?
Snail mail addresses only?
Does a Website exist?
• More than likely use a combination of two
or more techniques.
Think About
• What techniques might you use?
• Team will be asked to provide information
gathering techniques, plans and tools in
reports.
– Initial: tools, techniques, any preliminary
results
– Final: tools, techniques, results
• Link to how the Website meets the needs
Creating Web Page Forms
Paperwork with a New Twist
What are Forms?
• On the Website
– input data
– guestbooks
• Behind the scenes
– files
– databases
Behind the Scenes
• Active Server Pages
• Common Gateway Interface Script
– CGI
– receives data from the Web page and then
processes the data to create information
• Server-side
Other CGI Uses
•
•
•
•
•
Hit-Counters
Server-side maps
Message and Web Boards
E-mail lists
Cookies
CGI Made With. . .
•
•
•
•
•
•
•
AppleScript
C/C++
Perl
TCL (Tool Command Language)
Visual Basic
Java
Depends on the System
Where to get them. . .
• Ask your ISP what CGIs are available
• In UNIX system, in cgi-bin directory
• We will use GForm
– on homepages.wmich.edu
– http://homepages.wmich.edu/documentation/gform/
• FormMail (v 1.9) at Matt's Script Archive is
good as well
End-User Side
• Online Forms
– input boxes for text and numbers
– radio buttons (option buttons) to select a single
option
– check boxes to specify an item as present or
absent
– text areas for expanded input
Form Element
• Each element is a field in the form and will
have a value
• Need the <form> first though
<form name="reg">
Form Elements and HTML layout tags
</form>
<form>
• Can use most HTML tags in the FORM to
specify layouts and presentation of material
Input Boxes
<input type="option" name="text">
–
–
–
–
–
–
–
–
–
–
button
checkbox
hidden
image
password
radio
reset
submit
text
textarea
Input Box Size and Length
• Some input boxes (like text) allow you to
set their size
<input size="value"> (in characters)
• Can also limit the amount of text entered
– <input maxlength=“value”> (in characters)
<input size="9" maxlength="9">
Value Property
• Can set a default with " "
– <input value=" ">
– <input value="United States">
United States
Selection Lists
• Used to allow a user to view a list and select
one or a multiple number of items
• How many pizzas versus choosing the
toppings on a pizza
• Similar to list tags <ul> and <ol>
Selecting One Item
<select name="numberofpizzas">
<option>1
<option>2
<option>3
</select>
Multiple Items
<select multiple name="toppings">
<option value="1">mushrooms
<option value="2">olives
<option value="3">green peppers
<option value="4" selected>anchovies
</select>
• The VALUE and the SELECTED are optional and
can be used with both types of lists
Selection List Appearance
• <select size="value">
– show more or less of the list
– by default shows one item in a drop-down box
<select multiple name="toppings" size="3">
RADIO
<input type="radio" name="text" value="value">
<input type="radio" name="whypizza" value="party">
<input type="radio" name="whypizza" value="lunch">
Why Pizza
party
lunch
CHECKBOXES
<input type="checkbox" name="text">
<input type="checkbox" name="hungry"
value="yes">
Set a default
<input type="checkbox" name="hungry"
value="yes" checked>
TEXTAREA
<textarea rows="value" cols="value"
name="text">
default text
</textarea>
* Close out the TEXTAREA tag
TEXTAREA Example
<textarea rows="3" name="comments">Enter
Comments</textarea>
COLS or ROWS optional -- can choose
default
WRAP Property
<textarea rows="value" cols="value"
name="text" wrap="option">default text</textarea>
OFF = all text in a single line scrolling off the page
VIRTUAL = text wraps automatically in Web window. Still
sent to CGI in a single line
PHYSICAL=text wraps automatically in Web window. Line
wrap info sent to CGI as well
FORM Buttons
• Need to have a means for users to perform
actions
<input type="submit" name="Submit"
value="Send Information">
<input type="reset" name="Reset"
value="Clear Information">
<input type="button">
PROPERTIES
• How the form is handled.
– ACTION
– METHOD
– ENCTYPE
Properties (cont.)
<form action="url">
Location of CGI script
<form method="type">
Get versus Post
– Get attaches information to the end of the URL
specified in the ACTION area (e.g. server-side maps)
– Post is the preferred method -- use it with Gform
– Post sends the form information as a separate data
stream/file
ENCTYPE
• Various options like multiple form data, etc.
• Default value is text -- what GForm uses
MAILTO
• Can also have the form data sent to an email address instead of a file or a database
<form action="mailto:[email protected]"
method="post">
Most Important
• Go through the Chapter 6 tutorial
• Go through the GForm instructions and
tutorial (link on Resource Site)
• Try linking your Gform and making it work
– Take my example and modify it on your site
• Ask Questions