Scribd
Upload
1K views39 pages

HTML Tables, Frames, Forms

The document discusses various topics related to HTML tables, frames, and forms. It provides examples of how to structure HTML tables and use them to layout text and images on a webpage. It also covers how to create and structure HTML frames to divide a webpage into multiple frames that can each display a separate document. Additionally, it discusses how to create HTML forms to collect user input through elements like text fields, textareas, dropdowns, radio buttons and checkboxes, and how forms submit data to server-side programs using the action attribute.

Uploaded by

api-3760571
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
1K views39 pages

HTML Tables, Frames, Forms

The document discusses various topics related to HTML tables, frames, and forms. It provides examples of how to structure HTML tables and use them to layout text and images on a webpage. It also covers how to create and structure HTML frames to divide a webpage into multiple frames that can each display a separate document. Additionally, it discusses how to create HTML forms to collect user input through elements like text fields, textareas, dropdowns, radio buttons and checkboxes, and how forms submit data to server-side programs using the action attribute.

Uploaded by

api-3760571
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 39

Introduction to Programming

the WWW I
CMSC 10100-1
Summer 2004
Lecture 5
Today’s Topics

• HTML Tables (cont’d)


• HTML Frames
• HTML Forms

2
Review:
Typical Table Sketch Code
<table>
<caption>Sample Table</caption>
<tr>
<th>headrow-col1</th>
…
<th>headrow-coln</th>
</tr>
<tr>
<td>row1-col1</td>
…
<td>row1-coln</td>
</tr>
…
<tr>
<td>rowm-col1</td>
…
<td>rowm-coln</td>
</tr>
</table>
sampletable.html 3
Tables and Text
• Text is hard to read against a busy background
pattern, but you can lay a table containing text on
top of a background pattern without sacrificing
readability (just give the table a solid background
color)
 Examples: table_text2.html vs. table_text1.html
• Tables can also be used to separate text into two
columns (a cellpadding=“20” table attribute will
put white space between the two columns)
 Example: table_2col.html
4
Tables and Graphics
• Tables can be used to control a Web page layout
for multiple images (or images mixed with text)

• Images of different sizes can be fit together in


irregularly-shaped tables using cell-structure
diagrams

• All tables have an underlying cell structure with a


uniform number of table cells across each table row

5
Web Page Borders

• Empty table columns can be used to create


margins for text on a Web page
 Use a fixed width attribute (e.g. width=“50”) for
the empty table data element

• Put an internal table inside


 Example: innertable.html

• Note: better to control margins with CSS


6
One vs. Many

• If you have one very large table, try to break it up into a


sequence of smaller tables that can be stacked vertically on
a Web page

• Browsers download the contents of an entire table before


any of the table can be viewed

• Multiple tables will be displayed incrementally so the user will


be able to see the first part of your page while the rest of the
page is still downloading

7
Disadvantages of tables for
layout
• Complex layout requires complex tables
(lots of headaches, room for error)
• Complex tables can download, be
rendered slowly
• Scalability issues
 Not all browsers can read tables

8
HTML Frames
• HTML frames allow to display multiple
HTML documents in a same browser
window
 The browser window is divided into multiple
regions, or frames
 Each frame displays a unique web page
 Each frame is independent of the others

9
Frame Code Structure
<home>
<head>…</head>
<frameset rols=“” cols=“”>
<frame name=“frame_1” src=“page1.html”>
…
<frame name=“frame_n” src=“pagen.html”>
<noframes>
<body>
use <a href=“no.html”>no-frame version</a>
</body>
</noframes>
</frameset>
</html>
10
The Frameset Element

• The frameset tag pair should follow the


head element, replacing the body
element
• The cols and rows attributes are used to
divide the Web page into frames
• Each frame is represented by a separate
frame element

11
Setting up rows and columns

• Specify a certain number of rows or


columns of certain sizes by
<frameset cols=“100,300,*”>
• This makes a three columns of 100 pixels,
300 pixels, and the rest of the screen
• Example: frameseta.html
• Can also use percentages (n%)
• Note: use no more than one * in the list
12
The Frame Element

• Each frame tag should contain a name


attribute
 The name attribute is used for targeting links
(discuss later)
• Each frame tag should contain a src
attribute that specifies a Web page
• Can shutdown resizing by adding noresize
• Can turn off scroll bars with scrolling=“no”
• frame is a standalone(self-closing) tag

13
Some more attributes

• You may specify frameborder,


framespacing, and border attributes
• Only border seems to have a big effect
• See HTML p. 136, and W3C online for
more information
• Examples:
 frameseta1.html (border="5" framespacing="5“)
 frameseta2.html (frameborder="0" border="0"
framespacing="0“)

14
Tabular layout

• By setting both the cols and rows


attributes, you create a table of frames
<frameset rows=“20%,*” cols=“*,50%”>
• Frames are listed row by row
• Example: framesetb.html

15
Nested framesets

• Irregular layouts are useful (the equivalent


of using rowspan or colspan in a table
layout)
• You can specify a <frameset> instead of
a <frame> to create nested framesets
• Or, you can set the src for a frame to
point to a frameset file
• Example: framesetc.html
16
Linking in frames
• Each frame may contain hyperlinks

• Each hyperlink can be targeted to different


frame or a new window

• It is achieved by the target attribute of


<a> tag

17
The target attribute
• Target link to a named frame
 Example: <a href=“foo.html” target=“myframe”>
 loads the source into a frame named myframe
 useful when using frames for site navigation
• HTML defined target values
 _blank opens a new, unnamed window
 _self opens the link in the current frame (default)
 _top opens the link in the full, unframed browser window
(throws you out of the frameset)
 _parent opens the link in the immediate frameset parent
(calling frame)
• Example: framesetd1.html
18
The base tag

• Rather than specifying the target for each


link, you can add a line in head element
 Example: <base target=“right”>
 Sets default links to the frame named right
 Can also set default link targets to be “_top”
to leave the site
• Example: framesetd2.html

19
Avoid Deep Linking
• A deep link is any absolute link inside a
framed Web page that displays the
destination page inside the frame system
• Deep linking should be avoided, why?
 Copyright issues, might be illegal
• You can avoid deep links by sending them
to a new browser window
 Any link can be routed to a new browser
window with the target attribute
20
Frames for Site Navigation
• A typical frame layout uses two nested
frameset elements to divide a Web
page into three frames:
1. The title frame runs across the top of the Web
page
2. A navigational frame occupies a left-hand border
under the title frame
3. A content frame occupies the remainder of the
Web page
• Example: framesetd.html
21
Art Galleries with Frames
• A three-frame layout works well for an
online art gallery
• Fill the navigation frame with clickable
thumbnail previews
• When a user clicks on a thumbnail
preview, send the original image to the
content frame
• Example: framesete.html
22
Advantages of Frames
• Frames support intuitive site layouts that
are easy to navigate
• Site development efforts can focus on
content and navigation as independent
problems
• Scalability: write one navigation tool bar and
stick it in a frame - only change one file to
change navigation system

23
Problems with Frames
• Not all browsers support frames (try it on a palm!)
• It is difficult for others to link to content inside a
frame
• It’s easy to create deep links by accident
• Tougher to save sub-pages, messy with browser
cache
• Complex layout awkward
• Doesn’t control layout inside each frame
• It is difficult to print the entire page

24
Frames vs. tables

• Tables are tougher to code (but this is


fixable through scripting)
• Tables have wider (but not universal)
support on browsers
• Frames are really quick to get going

25
HTML Forms
• HTML Forms are used to select different kinds of
user input, defined with <form> tag
• Form contains form elements to allow the user to
enter information
 text fields
 textarea fields
 drop-down menus
 radio buttons
 checkboxes, etc
• A Web page can contain one or multiple forms
 Identified by id or name attribute
26
<form> Attributes
• action attribute
 Gives the URL of the program(CGI) to receive and process
the form’s data
• CGI is Common Gateway Interface, a protocol to handle web
data transmissions
• How does CGI work? (next slide)
• CGI programs usually kept in a cgi-bin/ directory
• Usually triggered by clicking the submit button
• action can also be a mailto: link
 Syntax: action=mailto:XXX
 Example: formeg.html

• Example:
 add.html using CGI programs in action

27
How Browsers and Web
Applications Work with CGI
Your PC WebServer
(Internetconnected) (Internetconnected)

WebBrowser
Sen
d pho
Please Enter A ne
Phone Number n um
ber WebServer receives the
request and starts up te Call C
GI
Submit Erase CGIprogram. send progr am a
phone n
numb d
er
m
t fro Look
.S e n Sendresults back Create up number
p age puter new w .
We
b
om with a eb page CGI-based
WebBrowser n ew C GI c am. nswer computer
A the progr program
WebBrowser
Phone Query
Results:

That is
John Doe's
Phone Number

28
<form> Tag Attributes
(cont’d)
• method attribute
 Sets the HTTP method by which the browser sends the form
data to the program, value can be GET or POST
• HTTP protocol specification
• Simple HTTP request and reply
 GET method:
• The form data gets appended to the request URL
 POST method:
• The form data is sent as part of the message body
 Avoid GET method in favor of POST for security reasons
• A long form content line attached to URL may crash the web server
• The GET request line is plain ASCII text sent without encryption and
will be saved in server logs
• Example:
 add.html using CGI programs in action 29
<form> Tag Attributes
(cont’d)
• enctype attribute
 Specify the content type used to submit the form to
the server when the action method is POST
 Default value application/x-www-form-urlencoded
(need not specify)
 Special cases:
• Use “text/plain” if action=mailto:XXX
• Use "multipart/form-data“ if the data sent is a file
• the id, name attributes
 Give the identification or name to a form
 Useful for multiple forms in a same page
 id is preferable
30
<input> Tag

• To define any one of a number of common


form “controls”
 Text fields (including password, hidden fields)
 multiple-choice lists
 Clickable images
 Submission buttons
• Only type and name attribute required
• No ending tag (no </input>)
31
Text Fields

• single line of text


 <input type=text name=XXX>
• Set type to password to mask text like a
password
• Set type to hidden to create a hidden field
 size and maxlength attributes
 value attributes to give default text
• Example: formeg1.html
32
Multi-line Text Area

• The <textarea> tag


• Attributes
 cols
 rows
 wrap
• Values: Off,virtual(default),physical
• Example: formeg1.html

33
Check Boxes
• Check boxes for “check all that apply” questions
 <input type=checkbox name=XXX
value=XXX>
 Make sure name identical among a group of
checkboxes
 checked attribute
• When form is submitted, names and values of
those checked boxes are sent
• Example: formeg1.html

34
Radio Buttons

• Similar as checkboxes, but only one in


the group may be selected
 <input type=radio name=XXX
value=XXX>

• Example: formeg1.html

35
Multiple Choice Elements
• The <select> tag creates either pull-down
menus or scrolling lists
• The <option> tag defines each item within a
<select> tag
• <select> tag attributes
 size attribute
• Number of rows visible at the same time
 multiple attribute
• If set, allow multiple selections
 name attribute
• Example: formeg1.html
36
Action Buttons
• Some special types of form controls
 Act immediately
 Effect can not be reversed
 Affect the entire content of the form

37
Action Buttons (cont’d)
• What are they?
 Submit buttons
• <input type=submit name=XXX value=XXX>
 Reset buttons
• <input type=reset name=XXX value=XXX>
 Regular buttons
• <input type=button name=XXX value=XXX>
 image buttons (will send form content as submit
button)
• <input type=image name=XXX src=XXX>
 *File buttons (need to deal with enctyple attribute)
• <input type=file name=XXX accept=“text/*”>
• Example: formeg1-bak.html 38
HTML Forms Resources

• HTML Forms tutorials


 http://www.webcom.com/html/tutor/forms/start.
shtml
 http://info.netmar.com/creating/forms.html

• HTML Forms and Input


 http://www.w3schools.com/html/html_forms.asp

39

You might also like