Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
1 of 103 3/13/2007 4:59 PM
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Images and FormsMarch 13, 2007
Harvard University Division of Continuing Education
Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Copyright 1998-2007 David P. Heitmeyer
Instructor email: [email protected] Course staff email: [email protected]
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
2 of 103 3/13/2007 4:59 PM
Images and XHTML
img elements should contain height, width, and alt attributes.
alt: requiredheight and width: helpful
Example 7.1
Example 7.1 Source:
Example 7.1 Rendered:
<img src="shield.png" alt="Harvard Shield, 'Veritas'" height="328" width="281" /> 1. 2.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
3 of 103 3/13/2007 4:59 PM
Graphics: Resources
Books
Lynda Weinman
designing web graphics.4, Fourth EditionNew Riders PublishingISBN: 0735710791
Jennifer Niederst
Learning Web Design: A Beginner's Guide to HTML, Graphics, and BeyondO'ReillyISBN: 0596004842
Tools
Adobe PhotoshopAdobe FireworksJasc Paint ShopThe Gimp
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
4 of 103 3/13/2007 4:59 PM
Graphics: Very Practical Helpful Hints
Use binary mode when transferring graphic files via FTP.Remember that UNIX is case-sensitive.
image.GIFimage.gif
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
5 of 103 3/13/2007 4:59 PM
Color Depth
Bits Colors
1 21 = 2
2 22 = 4
3 23 = 8
4 24 = 16
5 25 = 32
6 26 = 64
7 27 = 128
8 28 = 256
16 216 = 65,536
24 224 = 1.7 x 106 (millions)
32 232 = 4.3 x 109
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
6 of 103 3/13/2007 4:59 PM
Color Units
Name
As defined in XHTML/HTML:
black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal,aqua
RGB
256 colors in each channel (Red, Green, Blue). Values can be
decimal numbers (0 to 255)hexadecimal numbers (00 to ff)percentages (0 to 100%)
Example 7.2
Example 7.2 Source:
Example 7.2 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div style="background-color: #990000; color: white; padding: 0.5em; margin: 0.25em; " > 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 2.<div style="background-color: #900; color: white; padding: 0.5em; ; margin: 0.25em;" > 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 4.<div style="background-color: rgb(153,0,0); color: white; padding: 0.5em; ; margin: 0.25em5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 6.<div style="background-color: rgb(60%,0%,0%); color: white; padding: 0.5em; ; margin: 0.257. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 8.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
7 of 103 3/13/2007 4:59 PM
Red-Green-Blue (RGB) Color
RGB color is a 24-bit system (16 million colors)8 bits (256 colors) for each channel (red, green, blue).
28x28x28 = 2(8 + 8 + 8) = 224x = 16,777,216
Based on the properties of light not dyes
Each channel can be expressed as a number from 0 to 255.Specifying values:
Hexadecimal: #RRGGBBRR is the hexadecimal value of the red channelGG is the hexadecimal value of the green channelBB is the hexadecimal value of the blue channel
Percentage (0% - 100%)Number (0 - 255)
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
8 of 103 3/13/2007 4:59 PM
Decimal and Hexadecimal numbers
Decimal Hexadecimal
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F
16 10
17 11
18 12
... ...
255 FF
Sample conversion calculation:
Resources
Interactive ColorsUnivox Internet: RGF 2 Hex Tool http://www.univox.com/home/support/rgb2hex.html
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
9 of 103 3/13/2007 4:59 PM
Web Safe Color Palette
Web Safe Color Palette used to very important, but is increasingly less so for desktopbrowsers. May become more important due to mobile devices.
The Browser-Safe Web Palette from lynda.com
The Web Safe Color Palette consists of 216 colors that are shared by Macintosh and Windows 8-bitsystem palettes. Six values each for R, G, and B are present.
6 red x 6 green x 6 blue = 63 = 216 colors
Decimal Percent Hexadecimal
0 0% 00
51 20% 33
102 40% 66
153 60% 99
204 80% CC
255 100% FF
Web Safe Color PaletteWeb Palette from Web Design in a Nutshell
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
10 of 103 3/13/2007 4:59 PM
Monitor Calibration and Gamma Correction
Monitor Calibration
Color calibration may differ significantly between monitors.
Gamma Correction
Gamma determines the brightness and contrast of the display. The native gamma settings aredifferent for Macintosh (1.8), PC (2.5), and UNIX. Images displayed on a Macintosh are typicallybrighter than the same image displayed on a PC.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
11 of 103 3/13/2007 4:59 PM
Download times
How long does 226 kb of content take to download?
Download Time Calculator
How long to download 226 kb on a 56,000 bps ("56k") modem?
226 kb = 226 kb * 1024 bytes/kb * 8 bits/byte = 1,851,392 bits 1,851,392 bits / 56,000 bits/s = 33 s
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
12 of 103 3/13/2007 4:59 PM
An aside: Broadband Use
The site websiteoptimization.com publishes Bandwith Reports. that include reports on broadband penetration by country.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
13 of 103 3/13/2007 4:59 PM
Vector Graphics and Bitmap Graphics
Bitmap Graphic
Bitmap Graphic Formats on the Web
JPEGGIFPNG
Graphic type in which each pixel that comprises the image is described.
A 100 x 100 pixel bitmap image must encode information about 10,000 pixels.A 200 x 200 pixel bitmap image must encode information about 40,000 pixels.
Vector Graphic
Vector Graphic Formats on the Web
SVGSWF (Flash)
Graphic type in which the image is described by a mathematical description.
Amount of information encoded is independent of the scale of image. For example, a circle is described by the equation
x2 + y2 = r2 whether or not the radius is 100 pixels or 1000 pixels
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
14 of 103 3/13/2007 4:59 PM
Zoom: Bitmap & Vector
Bitmap
Original image: Magnified (16x)
Vector
Original image: Magnified (16x)
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
15 of 103 3/13/2007 4:59 PM
Common Graphic Formats for the Web
Graphics Interchange Format (GIF).gif
Joint Photographic Experts Group (JPEG).jpg.jpeg
Portable Network Graphic (PNG).png
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
16 of 103 3/13/2007 4:59 PM
Graphics Format for the Web
Graphics Interchange Format: GIF
8 bit indexed (256 colors)LZW Compression (lossless)transparencyanimation
Typically used for:
cartoon images/icons/logosanimated banners/icons
Joint Photographic Experts Group: JPEG
24 bit (17 million colors)"lossy" compression compression works well for gradual color changesno transparencyno animation
Typically used for:
photographsimages with color gradients
Portable Network Graphic: PNG
8 bit indexed24 or 32 bit (4 billion colors)lossless compressiontransparency (color and alpha-channel)no animation (animation supported through MNG extension)
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
17 of 103 3/13/2007 4:59 PM
Sample Images
GIF 13,452 bytes
JPEG 16,255 bytes
PNG; 8 bit 11,215 bytes
PNG; 24 bit 34,385 bytes
Original image from Macromedia Fireworks tutorial
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
18 of 103 3/13/2007 4:59 PM
Palettes
Palettes
Exact (if 256 or fewer colors)Adaptive (weighted based upon colorsin document)Web Palette (216 Web Safe Colors)System
WindowsMacintosh
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
19 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
8 bit; 256 colors
67,986 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
20 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
7 bit; 128 colors
55,374 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
21 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
6 bit; 64 colors
44,255 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
22 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
5 bit; 32 colors
34,568 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
23 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
4 bit; 16 colors
26,957 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
24 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
3 bit; 8 colors
20,573 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
25 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
2 bit; 4 colors
14,000 bytesOriginal image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
26 of 103 3/13/2007 4:59 PM
GIF Images and Bit Depth
1 bit; 2 colors
8,189 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
27 of 103 3/13/2007 4:59 PM
Dither
When converting an image to an 8-bit palette (256 colors) and there are more than 256 colors in theoriginal image, two options are:
shift colorsdither
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
28 of 103 3/13/2007 4:59 PM
Dither: Example 1
Converting the "Sail boat" image to a 3-bit grayscale GIF image:
Dither 21,283 bytes
Color shift 13,160 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
29 of 103 3/13/2007 4:59 PM
Dither: Example 2
As an example, consider a 200 x 200 pixel blue (00E5E5) square. Note that 00E5E5 is midwaybetween the Web safe colors, 00CCCC and 00FFFF.
Color: 00E5E5 2 bit; exact palette 303 bytes
Dithered 2 bit; Web palette; dithered 601 bytes
Zoom in (32x)
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
30 of 103 3/13/2007 4:59 PM
Aliased and Anti-aliased Text
Aliased
1,569 bytes
Anti-aliased
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
31 of 103 3/13/2007 4:59 PM
3,960 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
32 of 103 3/13/2007 4:59 PM
GIF Compression
LZW compression works on horizontal blocks of the same color. Here are two images that areidentical except for a 90 degree rotation.
464 bytes
1,365 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
33 of 103 3/13/2007 4:59 PM
GIF: decreasing file size
use minimum acceptable bit depthdo not dither imagesuse aliased text
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
34 of 103 3/13/2007 4:59 PM
GIF: Transparency
GIF 87a and 89a formats allow one of the indexed colors to be transparent. Background colors andimages will show through the transparent part of the image. The background of the table is green(00FF00)
Transparency: Size (bytes):
none 9,142 bytes
white 9,299 bytes
crimson 9,340 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
35 of 103 3/13/2007 4:59 PM
GIF: animation
271,798 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
36 of 103 3/13/2007 4:59 PM
GIF: animation
Banner advertisements
Demonstrations
Icons
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
37 of 103 3/13/2007 4:59 PM
Aside: Banner Advertisements
The Interactive Advertising Bureau (IAB) has established guidelines for sizes of banner ads(interactive marketing units; IMUs)A common size is 728 x 90 pixels:
Interactive Advertising BureauAd Unit Guidelines
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
38 of 103 3/13/2007 4:59 PM
JPEG
24 bit (17 million colors)"lossy" compression compression works well for gradual color changesno transparencyno animation
Typically used for:
photographsimages with color gradients
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
39 of 103 3/13/2007 4:59 PM
JPEG
The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0 to100). The image quality is inversely related to the amount of compression since the compressionalgorithm is "lossy".
0 Quality 100
smaller file size
larger file size
lower quality
higher quality
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
40 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 82 (original image)
27,740 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
41 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 60
20,204 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
42 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 50
17,873 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
43 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 40
15,485 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
44 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 30
12,380 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
45 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 20
9,428 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
46 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 10
5,928 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
47 of 103 3/13/2007 4:59 PM
JPEG: Compression
Quality: 2
2,378 bytes
Original image from Digital Stock
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
48 of 103 3/13/2007 4:59 PM
Cartoon Art
GIF 1,511 bytes
PNG; 8 bit 1,031 bytes
PNG; 24 bit 1,944 bytes
JPEG (Quality 6) 1,530 bytes
JPEG (Quality 100) 14,660 bytes
Original image from the works of David P. Heitmeyer
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
49 of 103 3/13/2007 4:59 PM
Text as Images
Aliased Text
GIF 981 bytes
PNG; indexed 830 bytes
JPEG (Quality: lower) 1,517 bytes
JPEG (Quality: higher) 10,982 bytes
Anti-aliased Text
GIF 2,404 bytes
PNG; indexed 2,317 bytes
JPEG (Quality: lower) 2,853 bytes
JPEG (Quality: higher) 11,014 bytes
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
50 of 103 3/13/2007 4:59 PM
Photographs
GIF 13,452 bytes
JPEG 16,255 bytes
PNG; 8 bit 11,215 bytes
PNG; 24 bit 34,384 bytes
Original image from Fireworks tutorial
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
51 of 103 3/13/2007 4:59 PM
Fireworks: Export
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
52 of 103 3/13/2007 4:59 PM
Images and Links
entire image parts of image (imagemaps)
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
53 of 103 3/13/2007 4:59 PM
Images and Links: Entire Image
Example 7.3
Example 7.3 Source:
Example 7.3 Rendered:
<a href="http://www.college.harvard.edu" ><img src="shield.gif" alt="[Veritas]" border="1. 2.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
54 of 103 3/13/2007 4:59 PM
Imagemaps
Server-sideClient-side
Client-side Imagemaps
usemap attribute for imgmap element
area elementattributes
shape=circleshape=rectshape=polycoords
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
55 of 103 3/13/2007 4:59 PM
Imagemaps I: an example
Example 7.4
Example 7.4 Source:
Example 7.4 Rendered:
<img src="imagemap.gif" width="500" height="300" usemap="#harvard" border="0" alt="[H1. <map id="harvard" name="harvard" > 2. <area shape="circle" coords="426,74, 74" href="http://www.harvard.edu/" alt="[Harv3. <area shape="poly" coords="17,286,198,251,101,140" href="http://www.fas.harvard.edu4. <area shape="rect" coords="169,99,347,203" href="http://www.dce.harvard.edu/" alt=5. </map> 6. 7.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
56 of 103 3/13/2007 4:59 PM
Imagemaps: II
Image
Client-side Imagemap
Example 7.5
Example 7.5 Source:
Example 7.5 Rendered:
Units are in Pixels, (0,0) is the upper left corner of the image.Circle: center (106, 18); radius = 17Rectangle: vertices at (1,4), (60,4), (1,32), (60,32)Triangle: vertices at (170,0), (150,32), (190,32)
<map id="client-side-shapes" name="client-side-shapes" > 1. <area shape="circle" coords="106,18,17" href="http://en.wikipedia.org/wiki/Circle" al2. <area shape="rect" coords="1,4,60,32" href="http://en.wikipedia.org/wiki/Rectangle" a3. <area shape="poly" coords="150,34,190,34,170,0" href="http://en.wikipedia.org/wiki/Tri4.</map> 5.<img usemap="#client-side-shapes" src="shapes.gif" width="192" height="39" align="bott6. 7.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
57 of 103 3/13/2007 4:59 PM
Vector Graphics and the Web
Scalable Vector Graphics (SVG)Macromedia's Flash
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
58 of 103 3/13/2007 4:59 PM
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)is a language for describing two dimensional graphics in XML. The language allows for vectorobjects, bitmap images, and text. SVG is sponsored by the W3C.
Adobe's SVG Zonehas information on Adobe's SVG Viewer Plug-in and examples of SVG. Firefox displays SVGnatively.
SVG can be included in pages with the object element or with the non-standard embed element.
object
Example 7.6
Example 7.6 Source:
Example 7.6 Rendered:
Massachusetts SVG
<p><a href="ma.svg" >Massachusetts SVG</a></p> 1.<object data="ma.svg" type="image/svg+xml" height="215" width="430" > 2. <object data="ma.png" type="image/png" /> 3.</object> 4.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
59 of 103 3/13/2007 4:59 PM
Building XHTML/HTML Forms and Using CGI Programs
Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. Often,the information is sent to a program running under the Common Gateway Interface (CGI).
We are not yet discussing writing CGI programs -- only using them!
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
60 of 103 3/13/2007 4:59 PM
HTTP Client and Server
HTTP client makes request to server. Server responds to client.
HTTP client makes request to server. Server invokes CGI program; CGI program generatesresponse, returns content to server, which then responds to client.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
61 of 103 3/13/2007 4:59 PM
The "form" element
The form element:Attributes
method (GET|POST)action (URL of CGI program)enctype
Each element within a form has a name associated with it. When the information is sent back to theserver, the CGI program will access the information by name. Thus, the front-end form and theback-end process must use the same names.
Example 7.7
Example 7.7 Source:
Example 7.7 Rendered:
Email Address: Submit Query
<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
62 of 103 3/13/2007 4:59 PM
"Echo" program: http://minerva.dce.harvard.edu/cgi-bin/echo.cgi
While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo backthe name/value information your form submitted ( http://minerva.dce.harvard.edu/cgi-bin/echo.cgi).
The echo.cgi doesn't really "do" anything. It simply takes input and creates a page that displays theinput that it was given.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
63 of 103 3/13/2007 4:59 PM
Form Input Elements: text field
Example 7.8
Example 7.8 Source:
Example 7.8 Rendered:
Email Address: Year of Birth: Year of Birth:
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Email Address: 2. <input type="text" name="email" size="50" /> 3. <br/> Year of Birth: 4. <input type="text" name="year_of_birth" size="50" maxlength="4" /> 5. <br/> Year of Birth: 6. <input type="text" name="year_of_birth_2" size="5" maxlength="4" /> 7. <br/> 8. <input type="submit" name="action" value="Proceed" /> </div> 9.</form> 10.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
64 of 103 3/13/2007 4:59 PM
Form Input Elements: radio buttons
Example 7.9
Example 7.9 Source:
Example 7.9 Rendered:
Email Address: Please send me spam:
yes no
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Email Address: 2. <input type="text" name="email" size="50" /> 3. <br/> Please send me spam: 4. <br/> 5. <input type="radio" name="spam" value="yes" checked="checked" />yes 6. <br/> 7. <input type="radio" name="spam" value="no" />no 8. <br/> 9. <input type="submit" name="action" value="Proceed" /> </div> 10.</form> 11.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
65 of 103 3/13/2007 4:59 PM
Form Input Elements: checkbox
Example 7.10
Example 7.10 Source:
Example 7.10 Rendered:
What ice cream do you like? Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> What ice cream do you like? 2. <br/> 3. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 4. <br/> 5. <input type="checkbox" name="icecream" value="herrell's chocolate pudding" />Herrell6. <br/> 7. <input type="checkbox" name="icecream" value="chocolate peanut butter" /> 8. Chocolate Peanut Butter 9. <br/> 10. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 11. <br/> 12. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 13. <br/> 14. <input type="submit" name="action" value="Proceed" /> </div> 15.</form> 16.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
66 of 103 3/13/2007 4:59 PM
Form Input Elements: textarea
Example 7.11
Example 7.11 Source:
Example 7.11 Rendered:
Please enter comments:
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Please enter comments: 2. <br/> 3. <textarea rows="10" cols="50" > comments go here.... </textarea> 4. <br/> 5. <input type="submit" name="action" value="Proceed" /> </div> 6.</form> 7.
comments go here....
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
67 of 103 3/13/2007 4:59 PM
Form Input Elements: select
Example 7.12
Example 7.12 Source:
Example 7.12 Rendered:
Select your favorite New England stateSelect your favorite New England state Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <select name="state" > 3. <option value="" >Select your favorite New England state</option> 4. <option value="CT" >Connecticut</option> 5. <option value="ME" >Maine</option> 6. <option value="MA" >Massachusetts</option> 7. <option value="NH" >New Hampshire</option> 8. <option value="RI" >Rhode Island</option> 9. <option value="VT" >Vermont</option> 10. </select> 11. <br/> 12. <input type="submit" name="action" value="Proceed" /> 13. </div> 14.</form> 15.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
68 of 103 3/13/2007 4:59 PM
Form Input Elements: select
Example 7.13
Example 7.13 Source:
Example 7.13 Rendered:
Select your favorite New England states:
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Select your favorite New England states: 2. <br/> 3. <select name="state" size="3" multiple="multiple" > 4. <option value="CT" >Connecticut</option> 5. <option value="ME" >Maine</option> 6. <option value="MA" >Massachusetts</option> 7. <option value="NH" >New Hampshire</option> 8. <option value="RI" >Rhode Island</option> 9. <option value="VT" >Vermont</option> 10. </select> 11. <br/> 12. <input type="submit" name="action" value="Proceed" /> </div> 13.</form> 14.
ConnecticutMaineMassachusetts
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
69 of 103 3/13/2007 4:59 PM
Form Input Elements: password
Example 7.14
Example 7.14 Source:
Example 7.14 Rendered:
Secret word: Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Secret word: 2. <input type="password" name="secretword" size="10" /> 3. <br/> 4. <input type="submit" name="action" value="Proceed" /> </div> 5.</form> 6.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
70 of 103 3/13/2007 4:59 PM
Form Input Elements: "hidden"
Example 7.15
Example 7.15 Source:
Example 7.15 Rendered:
Proceed
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <input type="hidden" name="myhiddenvariable" value="myhiddenvalue" /> 3. <input type="submit" name="action" value="Proceed" /> 4. </div> 5.</form> 6.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
71 of 103 3/13/2007 4:59 PM
Disabled Form Input Elements
Example 7.16
Example 7.16 Source:
Example 7.16 Rendered:
Your email address: You have selected your favorite ice cream:
Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div>Your email address: 2. <input type="text" name="email" disabled="disabled" value="[email protected]"3. <div> You have selected your favorite ice cream: 4. <br/> 5. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value6. <br/> 7. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value8. <br/> 9. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value10. <br/> 11. <input type="checkbox" name="icecream" disabled="disabled" value="vanilla" /> 12. Vanilla 13. <br/> 14. <input type="checkbox" name="icecream" disabled="disabled" value="strawberry" />Str15. <br/> </div> 16.</form> 17.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
72 of 103 3/13/2007 4:59 PM
Accessible Forms
Accessible Forms Tutorials are available from The Web Standards Project.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
73 of 103 3/13/2007 4:59 PM
Label Element
label element lets us use markup to associate text with an input element.
id attribute for form inputlabel element for input labelfor attribute in label to link label element with input via the value of id
Example 7.17
Example 7.17 Source:
Example 7.17 Rendered:
Do you watch NCAA Basketball?
Yes No
Submit Query
Example 7.18
Example 7.18 Source:
Example 7.18 Rendered:
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <p>Do you watch NCAA Basketball?</p> 3. <input type="radio" name="basketball" id="basketball_y" value="Y" /> 4. <label for="basketball_y" >Yes</label> 5. <br/> 6. <input type="radio" name="basketball" id="basketball_n" value="N" /> 7. <label for="basketball_n" >No</label> 8. <br/> 9. <input type="submit" /> 10. </div> 11.</form> 12.
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> What ice cream do you like? 2. <br/> 3. <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" />4. <label for="icecream_chocolate" >Chocolate</label> 5. <br/> 6. <input type="checkbox" name="icecream" id="icecream_hcp" value="herrell's chocolate7. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut bu10. <label for="icecream_cpb" >Chocolate Peanut Butter</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /> 13. <label for="icecream_vanilla" >Vanilla</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"16. <label for="icecream_strawberry" >Strawberry</label> 17. <br/> 18. <input type="submit" name="action" value="Proceed" /> </div> 19.</form> 20.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
74 of 103 3/13/2007 4:59 PM
What ice cream do you like? Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry
Proceed
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
75 of 103 3/13/2007 4:59 PM
fieldset and legend
fieldset and legend elements can further help group related input fields.
Example 7.19
Example 7.19 Source:
Example 7.19 Rendered:
Name
First Name Last Name
Sports
Do you enjoy basketball? Yes No
Do you enjoy baseball? Yes No
Submit Query
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <fieldset> 3. <legend>Name</legend> 4. <label for="fname" >First Name </label> 5. <input type="text" name="fname" id="fname" size="30" /> 6. <br/> 7. <label for="lname" >Last Name </label> 8. <input type="text" name="lname" id="lname" size="30" /> 9. <br/> 10. </fieldset> 11. <fieldset> 12. <legend>Sports</legend> 13. <div>Do you enjoy basketball?</div> 14. <input type="radio" name="basketball" id="basketball_yes" value="Y" /> 15. <label for="basketball_yes" >Yes</label> 16. <br/> 17. <input type="radio" name="basketball" id="basketball_no" value="N" /> 18. <label for="basketball_no" >No</label> 19. <br/> 20. <div>Do you enjoy baseball?</div> 21. <input type="radio" name="baseball" id="baseball_yes" value="Y" /> 22. <label for="baseball_yes" >Yes</label> 23. <br/> 24. <input type="radio" name="baseball" id="baseball_no" value="N" /> 25. <label for="baseball_no" >No</label> 26. <br/> 27. </fieldset> 28. <input type="submit" /> 29. </div> 30.</form> 31.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
76 of 103 3/13/2007 4:59 PM
fieldset and legend
You can apply CSS rules to fieldset and legend
Example 7.20
Example 7.20 Source:
In style element (<style type="text/css">) within head element:
Example 7.20 Rendered:
With StylesWithout Styles
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <fieldset> 3. <legend>Name</legend> 4. <label for="fname" >First Name </label> 5. <input type="text" name="fname" id="fname" size="30" /> 6. <br/> 7. <label for="lname" >Last Name </label> 8. <input type="text" name="lname" id="lname" size="30" /> 9. <br/> 10. </fieldset> 11. <fieldset> 12. <legend>Sports</legend> 13. <div>Do you enjoy basketball?</div> 14. <input type="radio" name="basketball" id="basketball_y" value="Y" /> 15. <label for="basketball_y" >Yes</label> 16. <br/> 17. <input type="radio" name="basketball" id="basketball_n" value="N" /> 18. <label for="basketball_n" >No</label> 19. <br/> 20. <div>Do you enjoy baseball?</div> 21. <input type="radio" name="baseball" id="baseball_y" value="Y" /> 22. <label for="baseball_y" >Yes</label> 23. <br/> 24. <input type="radio" name="baseball" id="baseball_n" value="N" /> 25. <label for="baseball_n" >No</label> 26. <br/> 27. </fieldset> 28. <input type="submit" /> 29. </div> 30.</form> 31.
fieldset { 1. border: thin dashed #900; 2.} 3.legend { 4. font-family: Arial,Helvetica,sans-serif; 5. font-size: 1.1em; 6. font-weight: bold; 7.} 8.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
77 of 103 3/13/2007 4:59 PM
optgroup
The optgroup element allows you to group a long select list.
Example 7.21
Example 7.21 Source:
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
78 of 103 3/13/2007 4:59 PM
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <select name="school" > 2. <optgroup label="ACC" > 3. <option>Boston College</option> 4. <option>Clemson</option> 5. <option>Duke</option> 6. <option>Florida State</option> 7. <option>Georgia Tech</option> 8. <option>Maryland</option> 9. <option>Miami (FL)</option> 10. <option>North Carolina</option> 11. <option>North Carolina State</option> 12. <option>Virginia</option> 13. <option>Virginia Tech</option> 14. <option>Wake Forest</option> 15. </optgroup> 16. <optgroup label="Big 10" > 17. <option>Illinois</option> 18. <option>Indiana</option> 19. <option>Iowa</option> 20. <option>Michigan</option> 21. <option>Michigan State</option> 22. <option>Minnesota</option> 23. <option>Northwestern</option> 24. <option>Ohio State</option> 25. <option>Penn State</option> 26. <option>Purdue</option> 27. <option>Wisconsin</option> 28. </optgroup> 29. <optgroup label="Big XII" > 30. <option>Baylor</option> 31. <option>Colorado</option> 32. <option>Iowa State</option> 33. <option>Kansas</option> 34. <option>Kansas State</option> 35. <option>Missouri</option> 36. <option>Nebraska</option> 37. <option>Oklahoma</option> 38. <option>Oklahoma State</option> 39. <option>Texas</option> 40. <option>Texas A&M</option> 41. <option>Texas Tech</option> 42. </optgroup> 43. <optgroup label="Ivy League" > 44. <option>Brown</option> 45. <option>Columbia</option> 46. <option>Cornell</option> 47. <option>Dartmouth</option> 48. <option>Harvard</option> 49. <option>Penn </option> 50. <option>Princeton</option> 51. <option>Yale</option> 52. </optgroup> 53. <optgroup label="Pac 10" > 54. <option>Arizona</option> 55. <option>Arizona State</option> 56. <option>California</option> 57. <option>Oregon</option> 58. <option>Oregon State</option> 59. <option>Stanford</option> 60. <option>UCLA</option> 61. <option>USC</option> 62. <option>Washington</option> 63. <option>Washington State</option> 64. </optgroup> 65. </select> 66. <div> 67. <input type="submit" /> 68. </div> 69.</form> 70.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
79 of 103 3/13/2007 4:59 PM
Example 7.21 Rendered:
Boston CollegeBoston College
Submit Query
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
80 of 103 3/13/2007 4:59 PM
tabindex
Use the tabindex attribute to control the tabbing order of elements. tabindex can be an attribute of:
aareabuttoninputobjectselecttextarea
Example 7.22
Example 7.22 Source:
Example 7.22 Rendered:
Red: Green: Blue:
decimal percent hexadecimal
Submit
<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="app1. <table> 2. <tr> 3. <td><strong>Red:</strong> 4. <input tabindex="3" type="text" name="r" value="0" size="5" maxlength="3" /> 5. </td> 6. <td><strong>Green:</strong> 7. <input tabindex="2" type="text" name="g" value="0" size="5" maxlength="3" /> 8. </td> 9. <td><strong>Blue:</strong> 10. <input tabindex="1" type="text" name="b" value="0" size="5" maxlength="3" /> 11. </td> 12. </tr> 13. </table> 14. <div> 15. <input tabindex="6" type="radio" name="units" value="decimal" checked="checked" />16. <br/> 17. <input tabindex="5" type="radio" name="units" value="percent" />percent 18. <br/> 19. <input tabindex="4" type="radio" name="units" value="hexadecimal" /> 20. hexadecimal 21. <br/> 22. <input tabindex="7" type="submit" name="submit" value="Submit" /> </div> 23.</form> 24.
0 0 0
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
81 of 103 3/13/2007 4:59 PM
accesskey
The accesskey attribute can be used to assign an access key to an element:
aareabuttoninputlabellegendtextarea
Example 7.23
Example 7.23 Source:
Example 7.23 Rendered:
W3CHarvardCSCI E-12
Last name: First name:
Submit Query
See also: Accesskey Standards from clagnut.com
<ul> 1. <li><a href="http://www.w3.org" accesskey="w" >W3C</a> 2. </li> 3. <li><a href="http://www.harvard.edu/" accesskey="h" >Harvard</a> 4. </li> 5. <li><a href="http://cscie12.dce.harvard.edu/" accesskey="c" >CSCI E-12</a> 6. </li> 7.</ul> 8.<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="post" > 9. <div> Last name: 10. <input type="text" name="last_name" accesskey="l" /> 11. <br/> First name: 12. <input type="text" name="first_name" accesskey="f" /> 13. <br/> 14. <input type="submit" accesskey="s" /> </div> 15.</form> 16.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
82 of 103 3/13/2007 4:59 PM
Method: Get vs. Post
get: parameters and values are passed to the HTTP server via the query string in the URL.The query string is everything after the question mark ? in the URL. http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12post: parameters and values are passed to the HTTP server as part of the HTTP exchange,which is not visible to the user.
Example 7.24
Example 7.24 Source:
Example 7.24 Rendered:
Email Address: Submit Query
Example 7.25
Example 7.25 Source:
Example 7.25 Rendered:
Email Address: Submit Query
<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
83 of 103 3/13/2007 4:59 PM
Query String
Query string is everything after the question mark (?) in the URL. The query string is made ofparameter=value pairs, separated by an ampersand (&).
http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP&os=Linux
You may also see parameter/value pairs separated by a semicolon
http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David;course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP;os=Linux
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
84 of 103 3/13/2007 4:59 PM
URI Escaping
Some characters cannot be passed directly to the server; they must be URI-escaped first. Escapedcharacters are represented by a triplet consisting of the character % followed by two hexadecimal digits.
Character needing escaping:
Decimal numbers: 0 to 32 Hexadecimal: 00 to 20# % ; < > ? { } | \ ^ ~ ` [ ]Decimal numbers 126 to 255 Hexadecimal: 7F to FF
For example, a space has a decimal value of 32 (hexadecimal value of 20. Therefore a space in a URI should be encoded as %20, as in Sever%20Hall. Note: spaces are also sometimes represented as "+", as in "Sever+Hall".
echo.cgi?location=Sever%20Hallecho.cgi?location=Sever+Hall
Another example is the @sign. It has a decimal value of 64, which is a hexadecimal value of 40, so in query string thisbecomes %40.
http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?email=david_heitmeyer%40harvard.edu
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
85 of 103 3/13/2007 4:59 PM
What you need to remember about URI Escaping
Client will take care of encoding of form input elements.CGI Program will take care of decodingYour only concern in creating content: if you are writing query strings in URL links.
Don't confuse URI escaping with XHTML/HTML character entities.But do use XHTML/HTML character entities within URI strings.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
86 of 103 3/13/2007 4:59 PM
HTML Character Entities and Query Strings
If you have a URI in X/HTML, you need to use X/HTML character entities for any characters (suchas the ampersand (&) that would normally need character entities. The bottom line is URI stringsin href attributes should be treated the same, with respect to using X/HTML character entities,as text in other parts of X/HTML.
The colors.cgi script expects four parameters: r, g, b, and units. For example:
r=80g=80b=00units=hexadecimal
If I want to create links for some of the colors defined in HTML/XHTML, I can code the URLs in thehref attributes of the a elements; I need to use the HTML character entity for the ampersand (&) thatseparates the parameter=value pairs.
BlackSilverPurpleMaroonOlive
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
87 of 103 3/13/2007 4:59 PM
Using CGI Programs
ColorsRedirectMailCounterSearchWeatherMaps
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
88 of 103 3/13/2007 4:59 PM
Colors
actionhttp://cscie12.dce.harvard.edu/tools/colors.cgi
parametersrgbunits=(hexadecimal|decimal|percent)
Example 7.26
Example 7.26 Source:
Example 7.26 Rendered:
Teal
<form action="http://cscie12.dce.harvard.edu/tools/colors.cgi" method="get" > 1. <div> 2. <input type="hidden" name="r" value="00" /> 3. <input type="hidden" name="g" value="80" /> 4. <input type="hidden" name="b" value="80" /> 5. <input type="hidden" name="units" value="hexadecimal" /> 6. <input type="submit" name="color" value="Teal" /> 7. </div> 8.</form> 9.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
89 of 103 3/13/2007 4:59 PM
Colors, Part 2
Example 7.27
Example 7.27 Source:
Example 7.27 Rendered:
Red:
Green:
Blue:
decimal percent hexadecimal
Submit
<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="app1. <table> 2. <tr> 3. <td><strong>Red:</strong> 4. </td> 5. <td> 6. <input type="text" name="r" value="0" size="12" maxlength="3" /> 7. </td> 8. </tr> 9. <tr> 10. <td><strong>Green:</strong> 11. </td> 12. <td> 13. <input type="text" name="g" value="0" size="12" maxlength="3" /> 14. </td> 15. </tr> 16. <tr> 17. <td><strong>Blue:</strong> 18. </td> 19. <td> 20. <input type="text" name="b" value="0" size="12" maxlength="3" /> 21. </td> 22. </tr> 23. <tr> 24. <td/> 25. <td> 26. <input type="radio" name="units" value="decimal" checked="checked" /> 27. decimal 28. <br/> 29. <input type="radio" name="units" value="percent" />percent 30. <br/> 31. <input type="radio" name="units" value="hexadecimal" />hexadecimal 32. <br/></td> 33. </tr> 34. <tr> 35. <td/> 36. <td> 37. <input type="submit" name="submit" value="Submit" /> 38. </td> 39. </tr> 40. </table> 41.</form> 42.
0
0
0
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
90 of 103 3/13/2007 4:59 PM
Redirect
actionhttp://minerva.dce.harvard.edu/cgi-bin/redirect.cgi
parametersURL
Example 7.28
Example 7.28 Source:
Example 7.28 Rendered:
Select your destination:Select your destination: Go!
Example 7.29
Example 7.29 Source:
Example 7.29 Rendered:
<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype1. <div> 2. <select name="URL" > 3. <option value="" >Select your destination:</option> 4. <option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option> 5. <option value="http://www.w3.org/TR/html401" >HTML 4.01</option> 6. <option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option> 7. <option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option> 8. <option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option> 9. <option value="http://www.w3.org/WAI" >Web Accessibility Initiative 10. (WAI)</option> 11. <option value="http://validator.w3.org/" >XHTML/HTML Validator</option> 12. <option value="http://jigsaw.w3.org/css-validator/validator-uri.html" > 13. CSS Validator</option> 14. <option value="http://www.w3.org/People/Raggett/tidy/" >HTML 15. Tidy</option> 16. </select> 17. <input type="submit" value="Go!" /> 18. </div> 19.</form> 20.
<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype1. <div> 2. <select name="gothere" > 3. <option value="" >Select your destination:</option> 4. <option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option> 5. <option value="http://www.w3.org/TR/html401" >HTML 4.01</option> 6. <option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option> 7. <option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option> 8. <option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option> 9. <option value="http://www.w3.org/WAI" >Web Accessibility Initiative 10. (WAI)</option> 11. <option value="http://validator.w3.org/" >XHTML/HTML Validator</option> 12. <option value="http://jigsaw.w3.org/css-validator/validator-uri.html" > 13. CSS Validator</option> 14. <option value="http://www.w3.org/People/Raggett/tidy/" >HTML 15. Tidy</option> 16. </select> 17. <input type="submit" value="Go!" /> 18. </div> 19.</form> 20.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
91 of 103 3/13/2007 4:59 PM
Select your destination:Select your destination: Go!
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
92 of 103 3/13/2007 4:59 PM
FormMail Documentation. Note that this script can be used to send email only to addresses endingwith .harvard.edu
actionhttp://minerva.dce.harvard.edu/cgi-bin/FormMail
parametersrecipientsubjectemailredirectrequiredsortenv_reportprint_configprint_blank_fields...see documentation for complete list
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
93 of 103 3/13/2007 4:59 PM
Mail Form
Example 7.30
Example 7.30 Source:
Example 7.30 Rendered:
Your Email Address: Your Name: Subject: Lecture QuestionLecture Question
Message:
Send Email
<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" > 1. <div>Your Email Address: 2. <input type="text" name="email" /></div> 3. <div>Your Name: 4. <input type="text" name="realname" /></div> 5. <div>Subject: 6. <select name="subject" > 7. <option value="Lecture Question" >Lecture Question</option> 8. <option value="Assignment Question" >Assignment Question</option> 9. <option value="Syllabus Question" >Syllabus Question</option> 10. <option value="Website Question" >Website Question</option> 11. </select> </div> 12. <div>Message: 13. <br/> 14. <textarea rows="10" cols="60" name="message" > Please type message here... 15. </textarea> </div> 16. <div> 17. <input type="hidden" name="recipient" value="[email protected]" /> 18. </div> 19. <div> 20. <input type="submit" value="Send Email" /> 21. </div> 22.</form> 23.
Please type message here...
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
94 of 103 3/13/2007 4:59 PM
Mail Form
Example 7.31
Example 7.31 Source:
Example 7.31 Rendered:
Your Email Address: Your Name: What ice cream do you like?
Chocolate Vanilla Strawberry
Send Email
<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" > 1. <div>Your Email Address: 2. <input type="text" name="email" /></div> 3. <div>Your Name: 4. <input type="text" name="realname" /></div> 5. <div> 6. <input type="hidden" name="subject" value="Favorite Ice Cream" /> What ice 7. cream do you like? 8. <br/> 9. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 10. <br/> 11. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 12. <br/> 13. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 14. <br/> 15. <input type="hidden" name="recipient" value="[email protected]" /> 16. <input type="hidden" name="redirect" value="http://www.herrells.com/" /> 17. <input type="hidden" name="required" value="icecream,realname" /> </div> 18. <div> 19. <input type="submit" value="Send Email" /> 20. </div> 21.</form> 22.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
95 of 103 3/13/2007 4:59 PM
Form Data to a Database?
FAS Computer Services offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database. The data can be viewed online (in HTML) or downloaded in an Excel file.Note that a Harvard HUID and PIN are required to use this tool.
Example 7.32
Example 7.32 Source:
Example 7.32 Rendered:
What ice cream do you like? Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry
Submit Query
<form method="post" action="http://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi1. <div> 2. <input type="hidden" name="form2db" value="cscie12_test" /> 3. <!-- Your form elements go here --> 4. <div> What ice cream do you like? 5. <br/> 6. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 7. <br/> 8. <input type="checkbox" name="icecream" value="herrell's chocolate pudding" />Herre9. <br/> 10. <input type="checkbox" name="icecream" value="chocolate peanut butter" /> 11. Chocolate Peanut Butter 12. <br/> 13. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 14. <br/> 15. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 16. </div> 17. <input type="submit" /> 18. </div> 19.</form> 20.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
96 of 103 3/13/2007 4:59 PM
Count
Count 2.5 Documentation . Note that this script can be used from within the .harvard.edu domain.
actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi
parametersdf (data file)See http://minerva.dce.harvard.edu/Counter#optisrgb, prgb
Example 7.33
Example 7.33 Source:
Example 7.33 Rendered:
<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" /1. 2.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
97 of 103 3/13/2007 4:59 PM
Count
Count 2.5 Documentation. Note that this script can be used from within the .harvard.edu domain.
actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi
parametersdf (data file)See http://minerva.dce.harvard.edu/Count/docs/Count.html#optisrgb, prgb
Example 7.34
Example 7.34 Source:
Example 7.34 Rendered:
<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" /1. 2.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
98 of 103 3/13/2007 4:59 PM
Count
Changing colors:
Example 7.35
Example 7.35 Source:
Example 7.35 Rendered:
Changing digit styles:
Example 7.36
Example 7.36 Source:
Example 7.36 Rendered:
More examples are given in the documentation.
<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&srgb=00ff00&prgb=1. 2.
<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&dd=C" alt="count1. 2.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
99 of 103 3/13/2007 4:59 PM
Search
Example 7.37
Example 7.37 Source:
Example 7.37 Rendered:
Search CSCIE-12 with Google
<form method="get" action="http://www.google.com/search" > 1. <div> 2. <input type="text" name="as_q" size="50" /> 3. <input type="submit" value="Search CSCIE-12 with Google" /> 4. <input type="hidden" name="as_sitesearch" value="cscie12.dce.harvard.edu" /> 5. </div> 6.</form> 7.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
100 of 103 3/13/2007 4:59 PM
Weather
Example 7.38
Example 7.38 Source:
Example 7.38 Rendered:
Weather from weather.com:
Cambridge, MassachusettsLawrence, Kansas
Example 7.39
Example 7.39 Source:
Example 7.39 Rendered:
Input zip code: Get Forecast
<div>Weather from <a href="http://www.weather.com" >weather.com</a>:</div> 1.<ul> 2. <li><a href="http://www.weather.com/search/search?where=02138" >Cambridge, 3. Massachusetts</a> 4. </li> 5. <li><a href="http://www.weather.com/search/search?where=66045" >Lawrence, 6. Kansas</a> 7. </li> 8.</ul> 9.
<form method="get" action="http://www.weather.com/search/search" > 1. <div> Input zip code: 2. <input type="text" name="where" /> 3. <br/> 4. <input type="submit" name="submit" value="Get Forecast" /> </div> 5.</form> 6.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
101 of 103 3/13/2007 4:59 PM
Maps
http://maps.yahoo.com/
Example 7.40
Example 7.40 Source:
Example 7.40 Rendered:
1 Oxford St, Cambridge, MA 02138
edQ8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX
cszCambridge, MA 02138
countryus
new1
name
qty
<a href="http://maps.yahoo.com/maps_result?ed=Q8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX&csz=Cambrid1. 1 Oxford St, Cambridge, MA 02138 </a> 2. 3.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
102 of 103 3/13/2007 4:59 PM
Random Image
Rotating content or images can be an effective way to keep a page "fresh".
Harvard UniversityHarvard CollegeHarvard@Home
CGI program at http://minerva.dce.harvard.edu/cgi-bin/randomimg accepts a dir parameter, and returns the contents of a randomly chosen image from that directory.
[dheitmey@minerva images]$ pwd; ls -l/home/staff/dheitmey/public_html/boeing/777/images-rw-r--r-- 1 dheitmey teaching 20822 Mar 16 00:10 777200-k58103.jpg-rw-r--r-- 1 dheitmey teaching 36340 Mar 16 00:10 777200-k58224.jpg-rw-r--r-- 1 dheitmey teaching 13155 Mar 16 00:10 777200-k58379.jpg-rw-r--r-- 1 dheitmey teaching 19382 Mar 16 00:10 777200-k58432.jpg-rw-r--r-- 1 dheitmey teaching 25709 Mar 16 00:10 777200-k58533.jpg-rw-r--r-- 1 dheitmey teaching 9310 Mar 16 00:10 777200-k58557.jpg-rw-r--r-- 1 dheitmey teaching 13476 Mar 16 00:10 777200-k58784.jpg-rw-r--r-- 1 dheitmey teaching 14714 Mar 16 00:10 777200-k60629.jpg-rw-r--r-- 1 dheitmey teaching 6410 Mar 16 00:10 777300-k59953.jpg-rw-r--r-- 1 dheitmey teaching 9490 Mar 16 00:10 777300-k59962.jpg-rw-r--r-- 1 dheitmey teaching 5362 Mar 16 00:10 777300-k60026.jpg-rw-r--r-- 1 dheitmey teaching 9525 Mar 16 00:10 777300-k60609.jpg-rw-r--r-- 1 dheitmey teaching 22492 Mar 16 00:10 777-k57216.jpg-rw-r--r-- 1 dheitmey teaching 26874 Mar 16 00:10 777-k58380.jpg
Example 7.41
Example 7.41 Source:
Example 7.41 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellus facilisis ultrices. Morbicommodo accumsan arcu. Aliquam erat volutpat.
<div style="border: thin solid; width: 300px; float: left; margin-right: 1em;" > 1. <img src="http://minerva.dce.harvard.edu/cgi-bin/randomimg?dir=/home/staff/dheitmey/pu2. <p style="color: #333; text-align: center; font-size: 0.5em;" >Image courtesy 3. of <a href="http://www.boeing.com/" >Boeing</a> </p> 4.</div> 5.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellus 6. facilisis ultrices. Morbi commodo accumsan arcu. Aliquam erat volutpat. Fusce neque 7. tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquam eleifend 8. enim quis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat 9. molestie. Duis in mi. Sed ultrices enim et ante. Praesent turpis velit, semper ac, 10. sollicitudin nec, consequat sit amet, mauris. Mauris sed felis. Fusce sit amet nunc a 11. urna feugiat cursus. Pellentesque vehicula vestibulum odio. Etiam enim dolor, 12. consectetuer nec, sollicitudin in, placerat et, purus. Sed quis tortor id sapien 13. convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac massa laoreet 14. ultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue in, lorem. Cras 15. dictum fermentum ante. Aliquam lacus. Proin diam ipsum, venenatis et, tempor eu, 16. ornare id, libero. Curabitur varius semper mauris. Aenean neque nunc, commodo non, 17. posuere non, sagittis quis, massa. Vestibulum blandit. Nam adipiscing semper risus. 18. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et, neque. Proin commodo 19. pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a, nonummy non, 20. dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sit amet ipsum nec wisi 21. placerat malesuada. Mauris ut pede non enim ornare condimentum.</p> 22.
Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html
103 of 103 3/13/2007 4:59 PM
Image courtesy of Boeing
Fusce neque tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquam eleifend enimquis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat molestie. Duis in mi.Sed ultrices enim et ante. Praesent turpis velit, semper ac, sollicitudin nec, consequat sit amet,mauris. Mauris sed felis. Fusce sit amet nunc a urna feugiat cursus. Pellentesque vehiculavestibulum odio. Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quistortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac massa laoreetultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue in, lorem. Cras dictum fermentumante. Aliquam lacus. Proin diam ipsum, venenatis et, tempor eu, ornare id, libero. Curabitur variussemper mauris. Aenean neque nunc, commodo non, posuere non, sagittis quis, massa. Vestibulumblandit. Nam adipiscing semper risus. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et,neque. Proin commodo pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a,nonummy non, dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sit amet ipsumnec wisi placerat malesuada. Mauris ut pede non enim ornare condimentum.
Table of Contents | All Slides | Link List | Examples | CSCI E-12