lecture1 b frames&forms
DESCRIPTION
TRANSCRIPT
13/3/2006 (112:05) Frames & forms 1
• What are frames?• How do they work?• What’s good?• What’s bad?
Frames and forms
13/3/2006 (112:05) Frames & forms 2
More than html• Problems with HTML
• Repetitive entry of navigation• Maintaining menus• Selecting options more than clicking• User inputs• Getting information
• Navigation• Frames
• User input• forms
13/3/2006 (112:05) Frames & forms 3
Frames• Problem:
• You want the same navigation on every page.• You want to scroll content separately.
• Solution:• Create multiple areas, one navigation and
another for content.
• Frame• Layout – Rows and Columns • Instead of <body> uses <frameset>• Little pages within the browser that know about
each other
13/3/2006 (112:05) Frames & forms 4
Frame basics
• Columns and Rows
<frameset cols="33%,50%,17%" rows="*,200"><frame src="frame1.html"><frame src="frame2.html"><frame src="frame3.gif"><frame name="area4" src="frame4.html"><frame name="area5" src="frame5.html"><frame src="frame6.html">
</frameset>
1 2 3
4 5 6 200
33 17
*
13/3/2006 (112:05) Frames & forms 5
Frame Targets
<frameset cols="33%,50%,17%" rows="*,200">...<frame name="area4" src="frame4.html"><frame name="area5" src="frame5.html">
</frameset>
<P>Changing Area 4 to <ul> <li><A href="Great.html" target="area4">Great</A>, or back to</li> <li><A href="frame4.html" target="area4">Area 4</A></li></ul>...</P>
frameset.html
frame6.html
13/3/2006 (112:05) Frames & forms 6
Frame Targets• Names and Targets
• Name a frame and use the name as a target• Content and navigation separate
• Reserved Names• _blank Always open a new window• _self Open in current frame (default)• _parent Open one level up• _top Open in current window
13/3/2006 (112:05) Frames & forms 7
Frame Appearance• Managing look
• Border• 3D border default• Other border types
• Resizing• Move the frames around
• Scrolling• Scrollbar on by default• Remove scrollbars for control
• Margins• Just like with Tables you can insert whitespace• marginwidth=“20”
13/3/2006 (112:05) Frames & forms 8
Nested Frames• Frames can be nested
• This allows complex layouts• Also can occur because the page displayed
has frames in it
<frameset cols="33%,50%,17%" rows="*,200"><frame src=''frame1.html''><frameset cols=''*,* '' >
<frame s name="area2-1" src="frame2-1.html"><frame s name="area2-2" src="frame2-2.html">
</frameset><frame name="area3" src="frame3.html"><frame name="area4" src="frame4.html"><frame name="area5" src="frame5.html"><frame name="area6" src="frame6.html">
</frameset>
13/3/2006 (112:05) Frames & forms 9
Frames - Good and Bad• Frames are great for some things
• Allow separate navigation area• Allow other site display – Google• Great for sites were people need multiple
windows
• Frames are bad• being deprecated.• Frames were popular before search engines!• Search engines allow entry to any part of a site• Back button does not work• Navigation broken
13/3/2006 (112:05) Frames & forms 10
When to use frames• Use frame sparingly
• Do not use in pages which will be widely accessed and are quick in/quick out.
• Avoid frames for publicly available pages• Intranets OK as every comes in at the same
place.
• Frames are good for reference pages, where a static menu is important.
• There are alternatives • php, asp, server-side includes, some javascript
tricks) but these are all more sophisticated.
13/3/2006 (112:05) Frames & forms 11
User Input• Problem:
• Html static, only provides what you have written• User limited to clicking as input
• Solution• Add tools for uses to do more than click• Get the server to do more work• Get the client to do more work• Forms
• Get – add to the end of the URL• Post – send a block of additional text like the header• Mailto – write an email with the data you selected
13/3/2006 (112:05) Frames & forms 12
User Input
Get
http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta=
hl=en&q=comp112&btnG=Google+Search&meta=
processing
serverclient
13/3/2006 (112:05) Frames & forms 13
User Input
Result
<html> <head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8"><title>comp112 - Google Search</title><style><!--
serverclient
13/3/2006 (112:05) Frames & forms 14
Server-Side Processing• Deal with more than just “get”.• Advantages
• Current/Dynamic• Maintainability• Delivery of ordinary HTML• No redundant storage
• Disadvantages• Increases server load• Security issues• May be impossible for clients to get identical
information later
13/3/2006 (112:05) Frames & forms 15
Client-Side processing• Content is processed by the client.• Example: Javascript, Flash.• Advantages
• No extra load on the server• Instant responsiveness (after initial download)
• Disadvantages• More data sent• Makes the internals of your site transparent or
able to be saved locally• Requires browser support
13/3/2006 (112:05) Frames & forms 16
Forms• Two part
• The visible part shown to the user• The stuff behind the scenes, the submission and
the processing by the server
• Client side• Display options• Javascript to check valid options
• Server side• Examine request• Generate information requested• Send html file to the browser.
13/3/2006 (112:05) Frames & forms 17
Example<form id="papernav" method="get"
action="http://www.cs.otago.ac.nz/cs-bin/procind">
<p>Select a paper from the menu to go straight
to that course's web page:
<select name="papercode" size=1>
<option>---</option>
<option>COMP103</option>
<option>COMP112</option>
…
<option>COSC470</option>
<option>TELE402</option>
</select>
<input type="submit" value="Go">
</p>
</form>
13/3/2006 (112:05) Frames & forms 18
Types of input• Example
<form action="http://localhost/" method="get"> <P> First name: <input type="text" name="firstname"><BR> Last name: <input type="text" name="lastname"><BR> email: <input type="text" name="email"><BR> <input type="radio" name="sex" value="Male"> Male<BR> <input type="radio" name="sex" value="Female"> Female </p> <p>
<legend>Browsers You have used</legend><br> <input name="check1" type="checkbox" value="Safari" > Safari <input name="check1" type="checkbox" value="Mozilla" > Mozilla <input name="check1" type="checkbox" value="IE" > IE <input name="check1" type="checkbox" value="Lynx" > Lynx<br>
<input type="submit" value="Send"> <input type="reset"> </P> </form>
13/3/2006 (112:05) Frames & forms 19
Types of input• Types
• “radio” - Select only ONE option• “checkbox” - As many as you like• “text” - used for general text input• “select” - Menus with options• “input” - Select a file• Special buttons
• “submit” go to the new page• “reset” remove all the data
13/3/2006 (112:05) Frames & forms 20
Get vs Post• Get
• Bookmark links• Easy to see what is happening• Simple to process and track
• Post• Better for large amounts of information• Not displayed so a little more secure• Back button warnings
13/3/2006 (112:05) Frames & forms 21
Processing• The request needs to be processed
• Server processing• CGI Common Gateway Interface
• Read the URL or the post information• Process the information• Send back an HTML page
• Simple processing• Enter a number – is it in the right range• Have you entered all the data• Client side processing• Javascript
13/3/2006 (112:05) Frames & forms 22
Summary• Frames
• Multiple pages in one window• Targets allow menu/content split• Slowly being removed
• Server side vs Client side• Processing• When and where
• Forms• Elements Radio buttons, check boxes• Method: get, post• Action: which page