Advanced HTML
Forms and Comments
My Web Page is Alive!
Forms make web pages interactive
Readers can
- Fill out text entry
- Click on radio buttons
- Select from pop-up menus
Forms make static pages become places
for
- Commerce
- Research
- feedback
Importance
- Important for e-commerce
- Establishes relationships
- Business-to-business
- Business-to-consumer
- Gather and uploads data from users
Functionality
- Create a form for the user
- Server level; what happens to the
data
- Data transferred in name-value pairs
- Value—the data being entered by
the user
- Name—the label used to identify
the value
- No two values can share the same
name
Other Options--CGI
Common Gateway Interface
Standards that lets programs operating
outside the WWW environment to interact with forms
CGI serves information
- Produce documents that web
browsers can read
- Connect to databases
- Connect to image generation
programs
- Connect to electronic mail
- Connect to almost any other
program
CGI-BIN repository of CGI programs
CGI
Programs that receive the data at the
server level
Can be written in many programming or
scripting languages
- Perl
- C++
- C
- TCL
- AppleScript
Commonly written in Perl
Web Hosts
You don’t have to write the CGI
programming
Most web hosting vendors provide
generic CGI programs
Many freeware and public domain CGI
programs on Web
Complex Behavior
- Forms do not require special
programs like C++, Perl, or Java
- Form data can be send directly by
e-mail without leaving HTML
- Forms have not always been so easy
- Netscape created an extension that
allowed form data transfer
- The Netscape extension has become
widely supported
Data Received
Form data arrives and is NOT pretty
PizzaNumber=3&optionGP=on&optiononion=on&DeliveryMethod=2nd+Day
Order for 3 pizzas with green pepper and
onions delivered by 2nd Day shipping
Data is combined into name/value pairs
Each pair is separated by ampersands
(&)
- All data that is relevant is present
- Depends on you email program
- Eudora files form data in a separate
attachments folder
- Experiment with your mail program to
see where it files form data
Form Structure
Form container places fill-out forms
within HTML
A single HTML page can have several
forms
Each must stand on its own
Forms may not be nested (form within
a form)
Attributes
Form tag
<form>…</form>
Attributes
Action (necessary)
Method (necessary)
Enctype
Action
Action attribute instructs the browser
where to send form data
This holds the email address or URL of
a CGI program that accepts the form contents
Could also hold a specific program
written in C, Perl, or Java
Example
<form
ACTION="mailto:csparks@whro.net"
OR
ACTION=/cgi-bin/email.cgi
METHOD="post"
ENCTYPE="application/x-www-form-urlencoded">
Place data here
</form>
METHOD
Explains how the post will be sent
Only two choices
POST (default method)
GET (very uncommon)
Unless instructed otherwise by your
host always use POST
ENCTYPE
Selects the data format—most leave
this attribute off
Two choices
application/x-www-form-urlencoded
This is the default
multipart/formdata
This is supported by Netscape only
While multipart/formdata is superior
but only supported by one browser you can omit the ENCTYPE attribute from the
form tag
Data Fields
Three major form types
Selection lists
Text areas
Inputs
Everything else (catch all)
Selection lists support pop-up menus
and multiple-selection forms
Text—entry fields
Input—all other elements such as
buttons, single-line data entry, etc.
INPUT tag
Most common tag
Specifies the type of form element
being created
Used with other elements
Text fields
Checkboxes
Radio buttons
Password fields
Attributes
Input has three required attributes
Type
Type=text
Name
Name=first_name
Value (only used with checkboxes and
radio buttons)
Value=exec
Type Attribute
These are the acceptable options
Text
Password
Radio
Checkbox
Button
Name Attribute
Required attribute for all form fields
Any unique identifier of your choice
No two can be alike except radio
Radio/Checkbox
Same name value for all radio buttons
or checkboxes in a group
Name Attribute
Data fields must have a name
User-defined label for the data field
Invisible to form reader
Valuable for deciphering and processing
the resulting data
Data will upload to a database only if
these labels and the & divider exist
List Boxes & Text Areas
Exception to standard rules of form
syntax
Neither uses the INPUT tag
Each has own tag set to form the
container
Selection Fields
Selection fields allow choice from a
range of values
Present options for the user to select
To establish a default the <Option
Selected> tag is used and this option will appear in the selection box
window
Example
<select name="Groceries"
multiple>
<option selected> milk
<option> bread
<option> meat
<option> vegetables
</select>
Text Input Fields
Most common type and easiest
Request brief answers
Permit single-line data entry
<input type=text>
Creates a text-based data entry field
SIZE, and MAXLENGTH attributes control
the behavior of the field (VALUE can be used)
Size
Limits the width of a text field
Value measured in number of
characters
Most browser show 20 characters if no
size coded
Example of size attribute
<input type="text"
name="Text 1" value="Text one" size=2>
<input type="text"
name="Text 1" value="Text one" size=15>
These fields will have different sizes
Maxlength
Maximum number of characters that can
be input no matter the width
Example of maxlength
<input type="text"
name="Text1" value="Text one" size = 20 maxlength=10>
Example of maximum length in characters
that can be placed in the box
Value
Provides example of type of text in box
Example of value attribute
<input type="text"
name="Text1" value="Text one">
<input type="text"
name="Text2" value="Text two">
These fields have different values
Password Input Field
Similar to text fields
Exactly like input fields and act like
text fields but you cannot see the data
<input type=password>
Tag hides the text that the reader
types
Prevents onlookers from snooping and
obtaining sensitive information
Characteristics
Accepts any alphanumeric data
Width can be specified with size
attribute
Max number of characters can be entered
not matter the width using MAXLENGTH attribute
Visual security, not encryption of data
when uploaded
Checkbox
Simple on/off entry fields
Capture non-exclusive data
Multiple options
<input type=checkbox>
Produces a selectable box
Attribute CHECKED
Causes the attribute to be chosen as
default
Characteristics
Identified by text located adjacent to
the box
Require VALUE input tag attribute
In single group, all checkboxes have
same name but different value
Only radio and checkboxes REQUIRE the
VALUE attribute
Each box has to be selected or
unselected
Example results in green box having a
check in it
<input type="checkbox"
name="red">red<br>
<input type="checkbox"
name="blue">blue<br>
<input type="checkbox"
name="green" checked>green<br>
Radio Buttons
One-of-many selections
<input type=radio>
Tag limits selection among a number of
identically named fields--exclusive
Only one button can be selected
Attributes CHECKED and VALUE
Checked selects the default
Value distinguishes between
identical named buttons
Characteristics
Identified to user by text adjacent to
tag
Require VALUE attribute
Unlimited number of radio buttons in a
single group or form
Only one radio button in a single group
can be selected
<input type="radio"
name="station" value="2WD"> 2WD
<input type="radio"
name="station" value="NPR" checked> NPR
<input type="radio"
name="station" value="WNOR"> WNOR<br>
This results in three round buttons
with NPR having a dot in the circle. You can select another choice but you
cannot select two.
Text Area Fields
<textarea>
Enter large blocks of text
Creates a multi-line text input field
Set field size with COLS and ROWS
attributes
<textarea rows=3 cols=40
name="feedback"> Enter text here </textarea>
Characteristics
Not sized with SIZE attribute
Uses ROWS and COLS attributes
Container tag
<textarea>…</textarea>
Vertical and horizontal scrollbars
appear automatically
Grayed out until needed
Text automatically word wraps in IE not
in Netscape
List Box
Selection list
List of options and only one can be
chosen
Provide many options without using
screen space
Characteristics
Container tag
<select>…</select>
Similar to ordered and unordered list
Uses <option> tag to specify the
choices in the list box
Example
What is your favorite color?
<select name=color>
<option>red
<option>blue
<option>green
</select>
Form Buttons
Mechanism for user to upload data
Submit, Reset and resubmit buttons
RESET returns form values to default
SUBMIT sends form data to the URL
specified in the ACTION attribute
Uses INPUT tag
Attribute—VALUE
Defines the button text
Characteristics
Submit executes the values of the
opening attributes in form
Reset clears the contents of the form
These two tags do not need the NAME
attribute
Choices for submit and reset buttons
<input type="reset"
value="reset">
<input type="reset"
value="reset form">
<input type="reset"
value="erase form">
<input type="submit"
value="submit">
<input type="submit"
value="send data">
<input type="submit"
value="place order">
Other Form Elements
<fieldset>
Allows grouping together of data
fields that relate to each other
Divide form into smaller parts
Places a box around a portion of the
form
<legend>
Content of a fieldset element must
begin with a legend tag to provide a caption for the group of controls
Problems
Netscape does not support formset tag
Displays form without the box around it
Caption in legend field will not
display
Forms—Web Site Interactivity
Forms rely on external resources to
produce responses
Form data can be mailed, strange format
but in your email
Forms allow interaction, commerce,
research to occur on the Web
Comments
Comments—What???
Form of document control
Elements that readers never see
Placed in HTML code to provide insight,
manageability, and commentary
Created by and for the author
Keep track of authorship, revisions,
and recurring trouble spots
<!- - and - ->
Web browser cannot see the above
command and anything written within it
<!- - Document: art.htm
Author: csparks
Source: CPS
Last Rev: 9 Feb 2001
- ->
Use when needed
Comments can be placed anywhere
The are invisible to the users
When View Source, comments can be seen
Most editors place lots of comments in
the document
Comments and Forms
Comments clarify and remind author
about the page
Forms allow interaction
Comments explain and help the author to
recall exactly how the form, page, site operates
Summary
Form is not a single HTML element
Purpose—two-fold
User side
Server side
Sophisticated and strict syntax
Data resulting from the form is
uploaded into
CGI program
E-mail account
| 
Fly