HTML Frames frameset frame and iframe HTML Frames

HTML Frames provide a way to show multiple HTML documents in a single Web

Intro to Frames HTML frames allow you to display more than 1 HTML document

Arranging Frames Vertical Frameset: Creates frames arranged in columns Example: <frameset cols=“ 20%, 80%">

Arranging Frames cont. Mixed Frameset: frame. A. html: Creates frames arranged in columnsheight-25% &

Arranging Frames cont. i. Frames: Creates an inline frame (a frame inside an HTML

Frames: Review HTML frames allow you to display more than 1 HTML document in

HTML Frames – Demo frames. html <html> <head><title>Frames Example</title></head> <frameset cols="180 px, *, 150

Inline Frames: <iframe> Inline frames provide a way to show one website inside another

HTML Forms Entering User Data from a Web Page

HTML Forms are the primary method for gathering data from site visitors Create a

Form Fields Single-line text input fields: <input type="text" name="First. Name" value="This is a text

Fieldsets are used to enclose a group of related form fields: <form method="post" action="form.

Form Input Controls Checkboxes: <input type="checkbox" name="fruit" value="apple" /> Radio buttons: <input type="radio" name="title"

Other Form Controls Dropdown menus: <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option>

Other Form Controls (2) Reset button – brings the form to its initial state

Other Form Controls (3) Password input – a text field which masks the entered

Other Form Controls (4) File input – a field used for uploading files <input

form. html HTML Forms – Example <form method="post" action="apply-now. php"> <input name="subject" type="hidden" value="Class"

HTML Forms – Example (2) form. html (continued) Gender: <input name="gender" type="radio" id="gm" value="m"

HTML Forms – Example (3) form. html (continued) 21

Tab. Index The tabindex HTML attribute controls the order in which form fields and

Slides: 22

Download presentation

HTML Frames <frameset>, <frame> and <iframe>

HTML 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. 2

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: Creates frames arranged in columns Example: <frameset cols=“ 20%, 80%"> <frame src="frame 1. html" /> <frame src="frame 2. html" /> </frameset> Horizontal Frameset: Creates frames arranged in rows Example: <frameset rows=“ 50%, 50%"> <frame src="frame. A. html" /> <frame src="frame. B. html" /> </frameset>

Arranging Frames cont. Mixed Frameset: frame. A. html: Creates frames arranged in columnsheight-25% & rows <html> <frameset rows="25%, 75%"> <frame src="frame. A. html"> <frameset cols=“ 70%, 30%"> <frame src="frame. B. html"> <frame src="frame. C. html"> </frameset> </html> frame. B. html: height-75% width-25% Notes about HTML Frames: frame. C. html: width-30% height-75% • 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. i. Frames: 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 q Frame borders can be removed by adding the frameborder=“ 0” to either the <frameset…> or <iframe …> tag q 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. q 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 i. Frame • 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="180 px, *, 150 px"> <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. 8

Inline Frames: <iframe> Inline frames provide a way to show one website inside another website: iframe-demo. html <iframe name="iframe. Google" width="600" height="400" src="http: //www. google. com" frameborder="yes" scrolling="yes"></iframe> 9

HTML Forms Entering User Data from a Web Page

HTML Forms are the primary method for gathering data from site visitors Create a form block with <form></form> Example: The “method" attribute tells how the form data should be sent – via GET or POST request <form name="my. Form" method="post" action="path/to/some-script. jsp">. . . </form> The "action" attribute tells where the form data should be sent 11

Form Fields Single-line text input fields: <input type="text" name="First. Name" value="This is a text field" /> Multi-line textarea fields: <textarea name="Comments">This is a multi-line text field</textarea> Hidden fields contain data not shown to the user: <input type="hidden" name="Account" value="This is a hidden text field" /> Often used by Java. Script code 12

Fieldsets are used to enclose a group of related form fields: <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> </fieldset> </form> The <legend> is the fieldset's title. 13

Form Input Controls Checkboxes: <input type="checkbox" name="fruit" value="apple" /> Radio buttons: <input type="radio" name="title" value="Mr. " /> Radio buttons can be grouped, allowing only one to be selected from a group: <input type="radio" name="city" value="Lom" /> value="Ruse" /> 14

Other Form Controls Dropdown menus: <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> Submit button: <input type="submit" name="submit. Btn" value="Apply Now" /> 15

Other Form Controls (2) Reset button – brings the form to its initial state <input type="reset" name="reset. Btn" value="Reset the form" /> Image button – acts like submit but image is displayed and click coordinates are sent <input type="image" src="submit. gif" name="submit. Btn" alt="Submit" /> Ordinary button – used for Javascript, no default action <input type="button" value="click me" /> 16

Other Form Controls (3) Password input – a text field which masks the entered text with * signs <input type="password" name="pass" /> Multiple select field – displays the list of items in multiple lines, instead of one <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> 17

Other Form Controls (4) File input – a field used for uploading files <input type="file" name="photo" /> When used, it requires the form element to have a specific attribute: <form enctype="multipart/form-data">. . . <input type="file" name="photo" />. . . </form> 18

form. html HTML Forms – Example <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> <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" /> 19

HTML Forms – Example (2) form. html (continued) 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" /> </p> </form> 20

HTML Forms – Example (3) form. html (continued) 21

Tab. Index 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" /> 22