Scribd
Upload
26 views

HTML Frames:, and

Frames allow displaying multiple HTML documents within a single browser window. They are defined using <frameset> tags which split the window into rows and columns containing <frame> elements. While frames were popular early in HTML, their usage is now discouraged due to accessibility and usability issues. Inline frames or <iframes> embed another HTML page into the current one and offer more control over sizing and scrolling. Forms are used to collect user input through various field types like text, textarea, radio buttons, checkboxes and select menus. Attributes specify features like validation, styling and submission processing.

Uploaded by

ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

HTML Frames:, and

Frames allow displaying multiple HTML documents within a single browser window. They are defined using <frameset> tags which split the window into rows and columns containing <frame> elements. While frames were popular early in HTML, their usage is now discouraged due to accessibility and usability issues. Inline frames or <iframes> embed another HTML page into the current one and offer more control over sizing and scrolling. Forms are used to collect user input through various field types like text, textarea, radio buttons, checkboxes and select menus. Attributes specify features like validation, styling and submission processing.

Uploaded by

ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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

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

Arranging Frames
Vertical 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
Example:
<frameset rows=50%,50%">
<frame src="frameA.html" />
<frame src="frameB.html" />
</frameset>

Arranging Frames cont.


Mixed Frameset:

frameA.html:
Creates frames arranged in columns
height-25%
& rows
<html>
<frameset rows="25%,75%">
<frame src="frameA.html">
<frameset cols=70%,30%">
frameB.ht
<frame src="frameB.html">
<frame src="frameC.html">
ml:
</frameset>
height-75%
</frameset>
width-25%
</html>

Notes about HTML Frames:

frameC.htm
:
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.


iFrames:
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.

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

HTML Frames Demo


<html>

frames.ht
ml

<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:
iframewidth="600"
demo.html

<iframe name="iframeGoogle"
height="400" src="http://www.google.com"
frameborder="yes" scrolling="yes"></iframe>

HTML
Forms
Entering User Data from a
Web Page

HTML Forms

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="myForm" method="post"


action="path/to/some-script.jsp">
...
</form>

The "action" attribute


tells where the form data
11

Form Fields

Single-line text input fields:


<input type="text" name="FirstName"
value="This is a text field" />

Multi-line textarea fields:

<textarea name="Comments">This is a multiline 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 JavaScript code


12

Fieldsets

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>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
The <legend>
is the fieldset's title.
</fieldset>
</form>

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"
/>
<input type="radio" name="city"
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="submitBtn"
value="Apply Now" />

15

Other Form Controls (2)

Reset button brings the form to its


initial
<input state
type="reset" name="resetBtn"
value="Reset the form" />

Image button acts like submit but


image is displayed and click
<input type="image"
src="submit.gif"
coordinates
are sent
name="submitBtn" alt="Submit" />

Ordinary button used for Javascript,


no
default
action value="click me" />
<input
type="button"
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>

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

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" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />

19

HTML Forms Example


(2)(continued)
form.html
<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>
<br />
<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>
<p>
<input type="submit" name="submit" value="Send
Form" />

20

HTML Forms Example


(3)(continued)
form.html

21

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"
<input type="text" tabindex="10" />
Elements with negative tabindex
22

You might also like