Chapter 3: HTML Tables, Forms, and Lists

1
Chapter 3 HTML Tables, Forms, and Lists

• 3.1 The table Element
• 3.2 The form Element
• 3.3 Creating Pull-Down Lists
• 3.4 Combining Tables and Forms
• 3.5 E-Mailing the Contents of Forms
• 3.6 The list Elements
• 3.7 Using Frames

2
Purpose of this Material

• Tables, forms, and lists provide a way to
  organize data on a Web page.
• Forms provide the user interface that allows
  JavaScript to work.
• Lists provide a default format for organizing
  content, but they dont interact directly with
  JavaScript.
• This course is about using JavaScript/PHP
• HTML is just the interface.

3
3.1 The table Element

• Tables help to organize content and provide more
  control over how a web page uses its space.
• Tables often contain forms.
• The basic table syntax includes elements for
  defining rows and columns.

lttablegt lttrgt lttdgt lt/tdgt as many columns as
you need lt/trgt as many rows as you
need lt/tablegt
4
Radon Testing
Document 3.1 (radonTable.htm) lthtmlgtltheadgtlttitl
egtRadon Tablelt/titlegtlt/headgtltbodygtlth1gtResults
of radon testinglt/h1gtltpgtThe table below shows
some radon levels measured in residences.ltbr /gt
For values greater than or equal to 4 pCi/L,
action should be takenltbr /gt to reduce the
concentration of radon gas. For values greater
than orltbr /gtequal to 3 pCi/L, retesting is
recommended.lt/pgtlttablegt lttr
bgcolor"silver"gt lttdgtLocationlt/tdgt
lttdgtValue, pCi/Llt/tdgt lttdgtCommentslt/tdgtlt/trgt
5
Radon Testing
Document 3.1 (concluded) lttdgtID's house, 2nd
floor bedroomlt/tdgt lttdgt3.7lt/tdgt lttd
bgcolor"yellow"gtShould be retested.lt/tdgtlt/trgt
lttrgt lttdgt FJ's house, 1st floor living
roomlt/tdgt lttdgt 0.9lt/tdgt lttd
bgcolor"lightgreen"gtNo action required.lt/tdgtlt/trgt
lttrgt lttdgt MB's house, 2nd floor
bedroomlt/tdgt lttdgt2.9lt/tdgt lttd
bgcolor"lightgreen"gtNo action required.lt/tdgtlt/trgt
lt/tablegtlt/bodygtlt/htmlgt

6
More table Elements
lttablegt ltcaptiongt lt/captiongt lttrgt lt!-- Use
of th in place of td is optional. --gt ltthgt
lt/thgt lt/trgt lttrgt lttdgt
lt/tdgt lt/trgt lt/tablegt
7
Merging Rowsand Columns
Document 3.2 (cloudType.htm) lthtmlgtltheadgtlttitle
gtCloud Type Chartlt/titlegtlt/headgtltbodygtlttable
border"2"gtltcaptiongtCloud Type
Chartlt/captiongtlttrgt ltth align"center"gtAltitude
lt/thgt ltth colspan"2"gtCloud Namelt/thgtlt/trgtlttrgt
lttd align"center" rowspan"3" gtHighlt/tdgt lttd
colspan"2"gtCirruslt/tdgt lt/trgt lttrgt lttd
colspan"2"gtCirrocumuluslt/tdgt lt/trgt lttrgt lttd
colspan"2"gtCirrostratuslt/tdgtlt/trgt lt/trgtlttrgtlttd
align"center" rowspan"2"gtMiddlelt/tdgt lttd
colspan"2"gtAltocumuluslt/tdgtlt/trgt lttrgtlttd
colspan"2"gtAltostratuslt/tdgtlt/trgtlt/trgt
8
Merging Rowsand Columns
Document 3.2 (concluded) lttrgtlttd
align"center" rowspan"5"gt Lowlt/tdgt
lttdgtCumuluslt/tdgt lttdgtnonprecipitatinglt/t
dgtlt/trgtlttrgtlttdgtAltocumuluslt/tdgt
lttdgtnonprecipitatinglt/tdgtlt/trgt lttrgt
lttdgtStratocumuluslt/tdgt lttdgtnonprecipitatinglt/t
dgtlt/trgt lttrgtlttdgtCumulonimbuslt/tdgt lttd
align"center" bgcolor"silver"gtprecipitat
inglt/tdgtlt/trgt lttrgtlttdgtNimbostratuslt/tdgt lttd
align"center" bgcolor"silver"gtprecipitat
inglt/tdgtlt/trgtlt/trgtlt/tablegtlt/bodygtlt/htmlgt
9
The form Element

• HTML forms provide the online equivalent of a
  paper form that can be filled in by the user.
• Contents of a form can be sent back (indirectly)
  to the creator of the form or to a server
  application.
• Values entered in form fields can serve as input
  to JavaScript calculations
• The results of JavaScript calculations can change
  the values of form fields.

10
Attributes of Forms

• Forms use the ltformgt lt/formgt tag.
• The action attribute allows contents of forms to
  be sent to an email address.
• The enctype"text/plain" and method"post"
  attributes allow data to be transmitted in an
  easily readable format.
• Forms include one or more ltinput /gt tags, each of
  which defines one form field.

11
The ltinput /gt Tag's Type Attribute
"button" Provides a user-specified action when
the "button" is clicked. "checkbox" Allows a
user to select one or more value from a
list provided. "hidden" Define text fields that
are available to JavaScript, but are invisible
in the form. "password" Allows entry of text
data, but displays asterisks in the form
field. "radio" Allows only one choice from a list
of options. "reset" Returns all form fields to
their original values. "submit" Sends contents of
form (via an e-mail or to a server). "text" Accep
ts entry of text, including digits that should
be interpreted as a number..
12
Other ltinput /gt Attributes
checked Default selection for radio and checkbox
types. maxlength"" Maximum number of displayed
characters. name"" An identifier for the
field. readonly A value assigned in the HTML
code cannot be changed by the
user. size"" Maximum number of characters that
can be entered (not the same thing as
maxlength.) type"" (See previous
page.) value"" A text value initially assigned
to a field.
13
Output from Document 3.4
14
UsingForms
Document 3.4 (location.htm, partial) ltformgtPlease
enter your last name ltinput type"text"
name"last_name" size"20" maxlength"20" /gt ltbr
/gtPlease enter your latitudeltinput type"text"
name"lat" value"40" size"7" maxlength"7" /gt
N ltinput type"radio" name"NS" value"N"
checked /gt or S ltinput type"radio"
name"NS" value"S" /gtltbr /gtPlease enter your
longitudeltinput type"text" name"lon"
value"75" size"8" maxlength"8" /gt E ltinput
type"radio" name"EW" value"E" /gt or Wltinput
type"radio" name"EW" value"W" checked /gtltbr
/gtPlease enter your elevationltinput
type"text" name"elevation" size"8"
maxlength"8" /gt metersltbr /gtPlease indicate the
seasons during which your site reports
dataltbr /gtWinter ltinput type"checkbox"
name"seasons" value"Winter" /gtSpring ltinput
type"checkbox" name"seasons" value"Spring"
/gtSummer ltinput type"checkbox" name"seasons"
value"Spring" /gtFall ltinput type"checkbox"
name"seasons" value"Fall" /gtlt/formgt
15
Output from Document 3.5
The user has selected April.
16
Pull-DownList
Document 3.5 (select.htm) lthtmlgtltheadgtlttitlegtPu
ll-Down Listlt/titlegtlt/headgtltbodygtSelect a
month from this menu ltselect name"testing"gt
ltoption value"1" selectedgtJanuarylt/optiongt
ltoption value"2"gtFebruarylt/optiongt ltoption
value"3"gtMarchlt/optiongt ltoption
value"4"gtAprillt/optiongt ltoption
value"5"gtMaylt/optiongt ltoption
value"6"gtJunelt/optiongt ltoption
value"7"gtJulylt/optiongt ltoption
value"8"gtAugustlt/optiongt ltoption
value"9"gtSeptemberlt/optiongt ltoption
value"10"gtOctoberlt/optiongt ltoption
value"11"gtNovemberlt/optiongt ltoption
value"12"gtDecemberlt/optiongt lt/selectgtlt/bodygtlt
/htmlgt
17
Output from Document 3.6
18
Combining Tables and Forms
Document 3.6 (siteDefinition.htm,
partial) ltformgtlttable border"2"
cellpadding"5" cellspacing"2"
align"center"gt ltcaptiongtltfont
size"2"gtObservation Site Descritionslt/fontgtlt/
captiongt lttr bgcolor"lightblue"gt ltthgtSite
lt/thgtltthgtSite Namelt/thgtltthgtLatitudelt/thgt
ltthgtLongitudelt/tdgtltthgtElevationlt/thgt lt/trgt
lttr bgcolor"palegreen"gt lttdgtSite 1lt/tdgt
lttdgtltinput type"text" name"Name1" size"10"
maxlength"10" value"Name1" /gtlt/tdgt
lttdgtltinput type"text" name"Latitude1" size"10"
maxlength"10" value"Latitude1"
/gtlt/tdgt lttdgtltinput type"text"
name"Longitude1" size"10" maxlength"10"
value"Longitude1" /gtlt/tdgt lttdgtltinput
type"text" name"Elevation1" size"10"
maxlength"10" value"Elevation1" /gtlt/tdgt lt/trgt
19
E-Mailing the Contents of Forms

• Use the method and action attributes
• ltform method"post"
• action"mailtomy_mail_at_university.edu"gt
• This may not work on all computer systems.
• Note that this doesn't allow the user of an HTML
  document to directly contact the host computer,
  but acts indirectly through an e-mail client.
• The method"post" and enctype"text/plain"
  attributes deliver contents of all form fields in
  an easily readable format, embedded in the body
  of an e-mail. Output from method"get" is less
  easily readable.

20
Document 3.7 (location2.htm) lthtmlgtltheadgtlttitlegt
Location informationlt/titlegtlt/headgtltbody
bgcolor"ivory"gtltform method"post"
action"mailtomy_mail_at_university.edu"
enctype"text/plain"gt Please enter your last
name ltinput type"text" name"last_name"
size"20" maxlength"20" /gtltbr/gt Please
enter your latitude ltinput type"text"
name"lat" size"7" maxlength"7" /gt N
ltinput type"radio" name"NS" value"N" /gt or
S ltinput type"radio" name"NS" value"S"
/gtltbr/gt Please enter your longitude ltinput
type"text" name"lon" size"8"
maxlength"8" /gt E ltinput type"radio"
name"EW" value"E"gt or W ltinput type"radio"
name"EW" value"W" /gtltbr/gt Please enter your
elevation ltinput type"text" name"elevation"
size"8" maxlength"8" /gt
metersltbr/gt ltinput type"submit"
value"Click here to send your data."
/gtlt/formgtlt/bodygtlt/htmlgt
21
Output from Document 3.7
Here is what appears in the body of an
e-mail last_nameBrooks lat40 NSN lon75 EWW
elevation15
22
Using Lists
23
Lists Demo (see Document 3.8)
24
Document 3.8 (lists.htm) lthtmlgtltheadgt
lttitlegtUsing HTML Listslt/titlegtlt/headgtltbodygtThi
s page demonstrates the use of unordered,
ordered, and definition lists.ltulgt ltligt Use
unordered lists for "bulleted" items.lt/ligt ltligt
Use ordered lists for numbered items. lt/ligt ltligt
Use definition lists for lists of items to be
defined. lt/ligtlt/ulgtHere are three ways to
organize content in an HTML documentltolgt
ltligtUse a table. lt/ligt ltligtUse a list. lt/ligt
ltligtUse ltfont face"courier"gtltpregt ...
ltpregtlt/fontgt tags. lt/ligtlt/olgtThis is a
way to produce a neatly formatted glossary
list.ltdlgt ltdtgtltstronggtdefinition listlt/stronggt
(ltfont face"courier"gtltdlgtlt/fontgt)lt/dtgt
ltddgtUse this to display a list of glossary
items and their definitions. lt/ddgt
ltdtgtltstronggtordered listlt/stronggt (ltfont
face"courier"gtltolgtlt/fontgt) lt/dtgt ltddgtUse
this to display a numbered list. lt/ddgt
ltdtgtltstronggtunordered listlt/stronggt (ltfont
face"courier"gtltulgtlt/fontgt)lt/dtgt ltddgtUse
this to display a list of bulleted items.
lt/ddgtlt/dlgtlt/bodygtlt/htmlgt
25
Output from Document 3.11
26
Document 3.11 (cloud1.htm, partial) lthtmlgtltheadgt
lttitlegtCloud Observationslt/titlegtlt/headgtltbody
bgcolor"aaddff"gtlth1gtCloud Observationslt/h1gtltst
ronggt Cloud Observations lt/stronggt(Select as many
cloud types as observed.)ltbr /gtltformgtlttablegta
lttrgt lttdgtltstronggtHighlt/stronggt lt/tdgt
lttdgt ltinput type"checkbox" name"high"
value"Cirrus" /gt Cirruslt/tdgt lttdgt
ltinput type"checkbox" name"high"
value"Cirrocumulus" /gt Cirrocumulus lt/tdgt
lttdgt ltinput type"checkbox" name"high"
value"Cirrostratus" /gt Cirrostratus
lt/tdgtlt/trgt lttrgt lttd colspan"4"gtlthr
noshade color"black" /gt lt/tdgtlt/trgt lttrgt
lttdgt ltstronggtMiddlelt/stronggt lt/tdgt lttdgt
For determining if a box is checked
27
Using Frames
28
Divide up your screen
Document 3.10a frameMain.htm lthtmlgtltheadgtlttitl
egtA simple frameset documentlt/titlegtlt/headgtltfram
eset cols"30, 70" frameborder"1"gt
ltframeset rows"60, 40"gt ltframe
src"frame1.htm" scrolling"no" /gt ltframe
src"frame2.htm" /gt lt/framesetgt ltframe
name"homeFrame" src"homeFrame.htm"gtlt/framesetgt
lt/htmlgt
One .htm file for each panel in the frame
29
Heres homeFrame.htm
Document 3.10b frame1.htm lthtmlgtltheadgtlttitlegtM
y Home Framelt/titlegtlt/headgtltbody
bgcolor"lightgreen"gtlth1gtltblinkgtltfont
color"maroon"gtltbgt ltigtHome page display goes
here.lt/igtlt/bgt lt/fontgtlt/blinkgtlt/h1gtlt/bodygtlt/htmlgt
30
Heres frame1.htm
Document 3.10c frame1.htm lthtmlgtltheadgtlttitlegtT
itle Framelt/titlegtlt/headgtltbody
bgcolor"pink"gtltfont size"6"
color"navy"gtltcentergt ltbgtltigtFramesltbr /gtDemoltbr
/gtlta href"frameDescription.htm"gt ltimg
src"frame.gif" border"2"gtlt/igtlt/bgt lt/centergtlt/fon
tgtlt/agtlt/bodygtlt/htmlgt
31
Heres frame2.htm
Document 3.10d frame2.htm lthtmlgtltheadgtlttitlegtG
ossip Columnlt/titlegtlt/headgtltbody
bgcolor"lightblue"gtLinks to other stuff...ltbr
/gtlta href"gossip.htm" target"homeFrame"gt Gossip
Columnlt/agtltbr /gtlta href"photoGallery.htm"
target"homeFrame"gt Picture Gallerylt/agtltbr /gtlta
href"homeFrame.htm" target"homeFrame"gt homelt/agtlt
br /gtlt/bodygtlt/htmlgt
All displayed in homeFrame
32
Creating a Split Window
33
Split Window(cont.)
Document 3.12a (pyranometerMain.htm)   lthtmlgtlthea
dgtlttitlegtDisplay pyranometer datalt/titlegtlt/headgt
ltframeset rows"10, "gt ltframe
src"header.htm" scrolling"no" /gt ltframe
src"pyranometer.dat" /gtlt/framesetgtlt/htmlgt  
Document 3.12b (header.htm)   lthtmlgtltheadgt
lttitlegtlt/titlegtlt/headgtltbodygtltfont
face"courier" gt This is the header.ltbr /gt
mon nbsp nbspday nbsp nbsp yr nbsp
nbsphr nbsp nbsp min nbsp nbspsec
nbsp nbsp EST nbsp nbsp nbsp nbsp
nbsp PYR-1 nbspPYR-2 nbspTltbr
/gt lt/fontgtlt/bodygtlt/htmlgt