<frameset>, <frame> and <iframe> HTML Frames <frameset>, <frame> and <iframe>
HTML Frames Frames provide a way to show multiple HTML documents in a single Web page The page can be split into separate views (frames) horizontally and vertically Frames were popular in the early ages of HTML development, but now their usage is rejected. We will Focus more on <iframe> Frames are not supported by all user agents (browsers, search engines, etc.) A <noframes> element is used to provide content for non-compatible agents.
Intro to Frames HTML frames allow you to display more than 1 HTML document in the same browser window. Every HTML document is called a frame and each frame is independent. There are some disadvantages of using frames: you must keep track of more HTML documents difficult to print the entire page Components of HTML Frames: Frameset element The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. Frame element The <frame> tag defines one particular window (frame) within a frameset.
Arranging Frames Vertical Frameset: Horizontal Frameset: Creates frames arranged in columns Example: <frameset cols=“20%,80%"> <frame src="frame1.html" /> <frame src="frame2.html" /> </frameset> Horizontal Frameset: Creates frames arranged in rows <frameset rows=“50%,50%"> <frame src="frameA.html" /> <frame src="frameB.html" /> </frameset>
Arranging Frames cont. Creates frames arranged in columns & rows Mixed Frameset: Creates frames arranged in columns & rows <html> <frameset rows="25%,75%"> <frame src="frameA.html"> <frameset cols=“70%,30%"> <frame src="frameB.html"> <frame src="frameC.html"> </frameset> </frameset> </html> frameA.html: height-25% frameB.html: height-75% width-25% frameC.html: width-30% height-75% Notes about HTML Frames: The frameset column or row size can also be set in pixels such as cols=“100,600“ One of the columns or rows can be set to use the remaining space of the browser window, with an asterisk (cols=“33%,*") You can not use the <body></body> tags together with the <frameset></frameset> tags!
Arranging Frames cont. iFrames: </iframe> Creates an inline frame (a frame inside an HTML page). <iframe src=“test.html"> </iframe> height=“any number” & width= “any number” can be added to the <iframe src…> tag to set the size of the iframe Frame borders can be removed by adding the frameborder=“0” to either the <frameset…> or <iframe …> tag Buttons or hyperlinks can be directed to open pages in specific frames by adding: name=“any name” to the <iframe…> or <frame src…> tag and adding: target=“same name” to the <a href…> tag of the button or hyperlink. To remove the ability for the user to resize the frames the noresize=“noresize” can be added to the <frame src…> tag.
Frames: Review HTML frames allow you to display more than 1 HTML document in the same browser window in the following ways: Vertical Frameset Horizontal Frameset Mixed Frameset iFrame Frame sizes can be set using percentages or pixels Asterisks = fill the rest of the browser window <body> tags can not used with the <frameset> tags Buttons can open pages in specific frames by naming the frame and setting the target with the same name
HTML Frames – Demo frames.html <html> <head><title>Frames Example</title></head> <frameset cols="180px,*,150px"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> Note the target attribute applied to the <a> elements in the left frame.
Inline Frames: <iframe> Inline frames provide a way to show one website inside another website: iframe-demo.html <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>
Entering User Data from a Web Page * 07/16/96 HTML Forms Entering User Data from a Web Page (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
The "action" attribute tells where the form data should be sent * 07/16/96 HTML Forms Forms are the primary method for gathering data from site visitors Create a form block with Example: The “method" attribute tells how the form data should be sent – via GET or POST request <form></form> <form name="myForm" method="post" action="path/to/some-script.jsp"> ... </form> The "action" attribute tells where the form data should be sent (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
Form Fields Single-line text input fields: Multi-line textarea fields: * 07/16/96 Form Fields Single-line text input fields: Multi-line textarea fields: Hidden fields contain data not shown to the user: Often used by JavaScript code <input type="text" name="FirstName" value="This is a text field" /> <textarea name="Comments">This is a multi-line text field</textarea> <input type="hidden" name="Account" value="This is a hidden text field" /> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
* 07/16/96 Fieldsets Fieldsets are used to enclose a group of related form fields: The <legend> is the fieldset's title. <form method="post" action="form.aspx"> <fieldset> <legend>Client Details</legend> <input type="text" id="Name" /> <input type="text" id="Phone" /> </fieldset> <legend>Order Details</legend> <input type="text" id="Quantity" /> <textarea cols="40" rows="10" id="Remarks"></textarea> </form> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
Form Input Controls Checkboxes: Radio buttons: * 07/16/96 Form Input Controls Checkboxes: Radio buttons: Radio buttons can be grouped, allowing only one to be selected from a group: <input type="checkbox" name="fruit" value="apple" /> <input type="radio" name="title" value="Mr." /> <input type="radio" name="city" value="Lom" /> <input type="radio" name="city" value="Ruse" /> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
Other Form Controls Dropdown menus: Submit button: * 07/16/96 Other Form Controls Dropdown menus: Submit button: <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> <input type="submit" name="submitBtn" value="Apply Now" /> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
Other Form Controls (2) Reset button – brings the form to its initial state Image button – acts like submit but image is displayed and click coordinates are sent Ordinary button – used for Javascript, no default action <input type="reset" name="resetBtn" value="Reset the form" /> <input type="image" src="submit.gif" name="submitBtn" alt="Submit" /> <input type="button" value="click me" />
Other Form Controls (3) Password input – a text field which masks the entered text with * signs Multiple select field – displays the list of items in multiple lines, instead of one <input type="password" name="pass" /> <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select>
Other Form Controls (4) File input – a field used for uploading files When used, it requires the form element to have a specific attribute: <input type="file" name="photo" /> <form enctype="multipart/form-data"> ... <input type="file" name="photo" /> </form>
HTML Forms – Example form.html * 07/16/96 HTML Forms – Example form.html <form method="post" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /> <fieldset><legend>Academic information</legend> <label for="degree">Degree</label> <select name="degree" id="degree"> <option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option> <option value="MBA" selected="selected">Master of Business Administration</option> </select> <br /> <label for="studentid">Student ID</label> <input type="password" name="studentid" /> </fieldset> <fieldset><legend>Personal Details</legend> <label for="fname">First Name</label> <input type="text" name="fname" id="fname" /> <label for="lname">Last Name</label> <input type="text" name="lname" id="lname" /> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
HTML Forms – Example (2) form.html (continued) <br /> Gender: * 07/16/96 HTML Forms – Example (2) form.html (continued) <br /> Gender: <input name="gender" type="radio" id="gm" value="m" /> <label for="gm">Male</label> <input name="gender" type="radio" id="gf" value="f" /> <label for="gf">Female</label> <label for="email">Email</label> <input type="text" name="email" id="email" /> </fieldset> <p> <textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND CONDITIONS...</textarea> </p> <input type="submit" name="submit" value="Send Form" /> <input type="reset" value="Clear Form" /> </form> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
HTML Forms – Example (3) form.html (continued) * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
* 07/16/96 TabIndex The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key tabindex="0" (zero) - "natural" order If X > Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" Elements with negative tabindex are skipped, however, this is not defined in the standard <input type="text" tabindex="10" /> (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*