Lecture1 B Frames&Forms

What are frames? How do they work? What’s good? What’s bad? Frames and forms

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

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

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 *

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

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

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”

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>

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

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.

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

User Input processing server client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=comp112& btnG=Google+Search& meta=

User Input server client Result <html> <head> <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8"> <title>comp112 - Google Search</title> <style><!--

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

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

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.

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>

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>

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

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

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

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

Lecture1 B Frames&Forms

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Lecture1 B Frames&Forms (20)

More from Sur College of Applied Sciences (6)

Recently uploaded (20)

Lecture1 B Frames&Forms