2-Frames and Forms (Unit-2)

WEB TECHNOLOGY
KCS-602
by
Dr. Seema Maitrey

(M.Tech(CE), Ph.D(CSE)
Department of Computer Science & Engineering
Contents
❑ FRAMES
❑ FORMS
FRAMES
▪ Frames gives us a way to merge multiple HTML Documents in a single HTML Document.
▪ A framed page is actually made up of multiple HTML pages.
▪ There is one HTML document that describes how to break up the single browser window into multiple windowpanes.
▪ Each windowpane is filled with an HTML document.
For Example : to make a framed page with a windowpane on the left and one on the right requires 3 HTML pages.
• Doc1.html and Doc2.html are the pages that contain content.

• Frames.html is the page that describes the division of the single browser window into two windowpanes.
Frame Page Architecture
▪ A <FRAMESET> element is placed in the html document before the <BODY> element.
▪ <frameset>) element is used instead of HTML Body (<body>) tag to split the browser screen into multiple pane
▪ The <FRAMESET> provides measurement to each windowpane by dividing the screen into ROWS or COLS.
▪ The <FRAMESET> will then contain <FRAME> elements, one per division of the browser window(each pane).
Frame Page Architecture
Ex:
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
o/p:
<FRAMESET COLS="50%,50%">
<frame src="https://www.kiet.edu">
<frame src="https://www.javatpoint.com">
</FRAMESET >
</HEAD>
</HTML>
Graphical view of the prev. document :
FRAMESET COLS=”50%, 50%”

FRAME FRAME
NAME= left_pane NAME=right_pane

SRC=kiet.edu SRC= javatpoint.com
<FRAMESET> Container
<FRAMESET> : The FRAMESET element creates divisions in the browser window either in rows or columns
▪ ROWS : Determines the size and number of rectangular rows within a <FRAMESET>. They are set from top of the
display area to the bottom.
▪ COLS: Determines the size and number of rectangular columns within a <FRAMESET>. They are set from left to right of
the display area.
• Absolute pixel units, I.e. “360,120”.

Possible values are:
• A percentage of screen height, e.g. “75%,25%”.
• Proportional values using the asterisk (*). This is often combined with a
value in pixels , e.g. “360,*”.
• <Frameset cols=“25,55,*”>
• <Frameset rows=“40,30,*”>
Creating a Frames Page
▪ FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will create a borderless frame.
▪ FRAMESPACING: This attribute is specified in pixels. If you go to borderless frames you will need to set
this value to zero as well, or you will have a gap between your frames where the border used to be.
▪ BORDER(thickness of the Frame): This attribute specified in pixels. A setting of zero will create a
borderless frame. Default value is 5.
▪ BORDERCOLOR: Allows to choose a color for the border.
<FRAME>
<FRAME>: This element defines a single frame within a frameset. There will be a FRAME
element for each division created by the FRAMESET element. This tag has the following
attributes:
▪ SRC: Required, as it provides the URL for the page that will be displayed in the frame.
▪ NAME: Required for frames that will allow targeting by other HTML documents. Works in
conjunction with the target attribute of the <A>, <AREA>, <BASE>, and <FORM> tags.
<FRAME>
▪ MARGINWIDTH: Optional attribute stated in pixels. Determines horizontal space between

the <FRAME> contents and the frame’s borders.
▪ MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical space between
the <FRAME> contents and the frame’s borders.
▪ SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
NORESIZE: Optional – prevents viewers from resizing the frame. By

default the user can stretch or shrink the frame’s display by selecting the
frame’s border and moving it up, down, left, or right.
<NOFRAMES>
▪ <NOFRAMES>: Frame – capable browsers ignore all HTML within this tag including the
contents of the BODY element. This element does not have any attributes.
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>
Ex: <FRAMESET COLS="23%,77%">

<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your browser to support
frames.</P>
</NOFRAMES></FRAMESET>
Frames created with <FRAMESET ROWS=“50%,50%”>
Frames created with <FRAMESET COLS=“50%,50%”>
Frames created with <FRAMESET ROWS=“50%,50%” COLS=“50%,50%”>
Compound FRAMESET Divisions
▪ In this case a second FRAMESET element will be inserted in the place of the FRAME
element that would describe the second row.
▪ The second FRAMESET element will divide the remaining screen real estate into 2 columns.
▪ This nested FRAMESET will then be followed by 2 FRAME elements to describe each of the
subsequent frame divisions created.
<html>
<noframes>
<head> <p>
<title> Compound Frames Page</title> Default message
</head> </p>
<frameset rows=“120,*”> </noframes>
<frame src="d:\diya.png" name="d"> </frameset>
<frameset cols=“120,*”> </frameset>
</head>
<frame src="https://www.kiet.edu" name="k">
<frame src="assign1.txt" name="a">
Compound FRAMESET Divisions
(A frames design with a combination of rows and columns)
WELCOME
KIET
ASSIGN
Frame Formatting
Example:
<HTML> <HEAD> O/P:
<TITLE> Framed Page </TITLE> </head>
<frameset rows="30%,50%,*" frameborder="1">
<frame src="assign1.txt" scrolling="auto">
<frame src="d:\diya.png" noresize scrolling="no">
<frame src="https://www.kiet.edu" noresize scrolling="no">
</frameset>
</head>
</HTML>
TARGETS
▪ When links are used in a frame, we need to specify an additional attribute called TARGET.
▪ The TARGET attribute uses the NAME attribute of the FRAME element.
▪ If we were to place a link in doc1.html that linked to doc3.html and we wanted doc3.html to be
displayed in the right windowpane; the HTML code would appear in doc1.html as follows:
<A HREF=“doc3.html” TARGET=“right_pane”>Link to Document 3 </A>

Targeting links to frames(using name with target)
STEP DESC
1 Create frame file (frame.html)
2 Create link file: linkbyname.html
3 Create(2) file and 1 link : welcome.html, diya.png, Link- kiet.edu

Cont….
<html><head>
File: frame.html </head>
<frameset cols="30%,*" frameborder="1">
<frame src="d:\linkbyname.html" name="left">
<frameset rows="20%,50%,30%">
<frame src="" name="top">
<frame src="" name="middle">
<frame src="" name="bottom">
</frameset></frameset>
</html>
Cont….
File: linkbyname.html
<html><head>
<title>Link by name</title></head>
<h3> CLICK INDEX</h3><br><br><br>
<a href="d:\welcome.html“ target="top">WELCOME</a><br><br>
<a href="d:\diya.png" target="middle">DEEPJYOTI</a><br><br>
<a href="https://www.kiet.edu" target="bottom">KIET</a><br><br>
</html>
OUTPUT: Targeting links to frames
(1)
(2)
Special Targets
There are 4 special target names that cannot be assigned by the NAME attribute of the FRAME tag.
1. TARGET=“_top” : Loads the linked document into the full browser window with the URL specified
by the HREF attribute. All frames disappear, leaving the new linked page to occupy the entire
window. The back is turned on.
2. TARGET=“_blank” : Loads the document specified in the URL attribute into the new window. The
back is turned off. Other windows remains on.
3. TARGET=“_self” : Loads the document in the same window where the anchor was {Clicked}. This is
the default setting for linking elements.
4. TARGET=“_parent” : loads the page into the frame that is superior to

the frame the hyperlink is in or loads the new page into the immediate
frameset parent of the frame in which the hyperlink exists in.
Targeting links to 4 special windows
1. <A HREF=“welcome.html" TARGET="_blank">
If a frame contains the following link, then clicking the link will simply cause the frame which contains the link to clear, and its
content will be replaced with whatever is in stuff.htm.
2. <A HREF=“diya.png" TARGET="_self">
If a frame contains the following link, the frameset that contains the frame that contains this link will be replaced by
stuff.HTM.
3. <A HREF=“https://www.kiet.edu" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link replaces the entire browser window with the contents of
stuff.HTM.
4. <A HREF=""https://google.com" TARGET="_top">
STEP DESC
1 Create frame file (frame.html)
2 Create (4)files: linkby4target.html
3 Create(2) file, (2) link : welcome.html, diya.png, Link- kiet.edu, google.com

Cont….
<html><head>
File: frame.html </head>
<frameset cols="30%,*" frameborder="1">
<frame src="d:\linkby4target.html" name="left">
<frameset rows="20%,50%,30%">
<frame src="" name="top">
<frame src="" name="middle">
<frame src="" name="bottom">
</frameset></frameset>
</html>
Cont….
File: linkby4target.html
<html>
<head>
<title>Link by system Target </title>
</head>
<h3> CLICK INDEX</h3><br><br><br>
<a href="d:\welcome.html" target="_blank">WELCOME</a><br><br>
<a href="d:\diya.png" target="_self">DEEPJYOTI</a><br><br>
<a href="https://www.kiet.edu" target="_parent">KIET</a><br><br>
<a href="https://google.com" target="_top">GOOGLE</a><br><br>
</html>
FORMS
❖ Facilitates the user to enter data that is to be sent to the server for processing such as name, email
address, password, phone number, etc. .
❖ Used to collect information from people viewing our site
❖ The <FORM> </FORM> tag is used to create an HTML form.
❖ FORM element Attributes
▪ METHOD attribute indicates the way the Web server will organize and send you form output.
• METHOD = “post” in a form that causes changes to server data.

• METHOD = “get” in a form that does not cause any changes in server data.
▪ ACTION attribute :
• Path to a script
Web server: machine that processes browser requests.

ELEMENTS of FORMs
❖ HTML forms are used to pass data to a server.
❖ A form can contain input elements like;
▪ text fields,
▪ checkboxes,
▪ radio buttons,
▪ submit buttons
▪ and more..
❖ A form can also contain
▪ select lists,
▪ textarea,
▪ fieldset,
▪ label elements.
The Input Element
❖ The most important form element is the input element.

❖ An input element can vary in many ways, depending on the type attribute.
❖ An input element can be of type
▪ text,
▪ checkbox,
▪ password,
▪ radio,
▪ submit,
▪ reset
▪ and more..
The Input Element
❖ INPUT element Attributes:

▪ TYPE (required)
– Defines the usage of the INPUT element
– Hidden inputs always have TYPE = “hidden”
▪ NAME provides a unique identification for INPUT element
▪ VALUE indicates the value that the INPUT element sends to the server upon submission
▪ SIZE
– For TYPE = “text”, specifies the width of the text input, measured in characters
▪ MAXLENGTH
– For TYPE = “text”, specifies the maximum number of characters that the text input will accept
(1) Text Fields
• <input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="fname" size="25"> <br>
Last name: <input type="text" name="lname" size="25">
</form>
Code above looks in a browser:
Note: The form itself is not visible. Also note that the default width of a text field is 25 characters.
(2) Password Field
• <input type="password"> defines a password field:
<form>
Password: <input type="password" name="pswd">
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
(3) Radio Buttons
• Radio buttons let a user select ONLY ONE of a limited number of choices.
• <input type="radio"> defines a radio button.
• CHECKED attribute indicates which radio button is selected initially
<form>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</form>

(4) Checkboxes
• Checkboxes let a user select NONE/ONE/MORE options of a limited number of choices.

• <input type="checkbox"> defines a checkbox.
• Used individually or in groups
• Each checkbox in a group should have same NAME
• Make sure that the checkboxes within a group have different VALUE attribute values
• Otherwise, browser will cannot distinguish between them
• CHECKED attribute checks boxes initially
<form>
<input type="checkbox" name=“java" value=“java"> I know JAVA<br>
<input type="checkbox" name="vehicle" value="Car"> I know PYTHON
</form>

(5) Submit Button
• <input type="submit"> defines a submit button.

• A submit button is used to send form data to a server.
• The data is sent to the page specified in the form's action attribute.
• The file defined in the action attribute usually does something with the received input.
• VALUE attribute changes the text displayed on the button (default is “Submit”)
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit"></form>
NOTE: If you type some characters in the text field above, and click the "Submit" button, the browser will
send your input to a page called "html_form_action.asp". The page will show you the received input
(6) Reset Button
• <input type= "reset" > defines a reset button.

• A reset button is used to clear all the entries user entered into the form.
• VALUE attribute changes the text displayed on the button (default is “Reset”)

<P>Username: <input type="text" name="user" size="25"></P>
<P>Password: <input type="password" name="pswd" size="25"></P>
<P><input type="submit" value="Submit">
<input type="reset" value="Reset"></P></form>

(7) TEXTAREA
• Inserts a scrollable multiline text box into FORM

• ROWS and COLS attributes specify the number of character rows and columns

<textarea rows=“6" cols="30"> FORTUNE RESIDENCY, GHAZIABAD, FORTUNE
RESIDENCY, GHAZIABAD , FORTUNE RESIDENCY, GHAZIABAD </textarea>
</form>

(8) SELECT
• Places a selectable list of items inside FORM
• Include NAME attribute
• Add an item to list
• Insert an OPTION element in the <SELECT>…</SELECT>tags
• Closing OPTION tag optional
• SELECTED attribute applies a default selection to list
• Change the number of list options visible
• Including the SIZE = “x” attribute inside the <SELECT> tag
• x number of options visible
<form action=""> O/P in a browser:

<select name="cars">
<option selected>BMW</option>
<option>Mercedes</option>
<option>Audi</option>
</select> </form>
DESIGNING FEEDBACK FORM
<HTML>
EXAMPLE: <HEAD><TITLE> Forms II</TITLE></HEAD>
<BODY>
<H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = “[email protected]">
<INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form">
<INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG>
<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Comments:</STRONG>
<TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>
</P>
<P><STRONG>Email Address:</STRONG>
<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
EXAMPLE cont….:
<P><STRONG>Things you liked:</STRONG><BR>
Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">
Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">
Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">
Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">
Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<P><STRONG>How did you get to our site?:</STRONG><BR>
Search engine
<INPUT NAME="how get to site" TYPE="radio" VALUE="search engine" CHECKED>
Links from another site
<INPUT NAME="how get to site" TYPE="radio" VALUE="link">
Deitel.com Web site
<INPUT NAME="how get to site" TYPE="radio" VALUE="deitel.com">
Reference in a book
<INPUT NAME="how get to site" TYPE="radio" VALUE="book">
Other
<INPUT NAME="how get to site" TYPE="radio" VALUE="other"></P>
EXAMPLE cont.….. : <P><STRONG>Rate our site (1-10):</STRONG>
<SELECT NAME = "rating">
<OPTION SELECTED>Amazing:-)
<OPTION>10
<OPTION>9
<OPTION>8
<OPTION>7
<OPTION>6
<OPTION>5
<OPTION>4
<OPTION>3
<OPTION>2
<OPTION>1
<OPTION>The Pits:-(
</SELECT></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries">

<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
</FORM>
</BODY>
</HTML>
EXAMPLE OUTPUT
Thank
You

2-Frames and Forms (Unit-2)

Uploaded by

Copyright:

Available Formats

2-Frames and Forms (Unit-2)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2-Frames and Forms (Unit-2)

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY

Dr. Seema Maitrey

• Doc1.html and Doc2.html are the pages that contain content.

FRAMESET COLS=”50%, 50%”

NAME= left_pane NAME=right_pane

• Absolute pixel units, I.e. “360,120”.

▪ MARGINWIDTH: Optional attribute stated in pixels. Determines horizontal space between

By default: scrolling is auto.

NORESIZE: Optional – prevents viewers from resizing the frame. By

Ex: <FRAMESET COLS="23%,77%">

<A HREF=“doc3.html” TARGET=“right_pane”>Link to Document 3 </A>

1 Create frame file (frame.html)

2 Create link file: linkbyname.html

3 Create(2) file and 1 link : welcome.html, diya.png, Link- kiet.edu

<a href="d:\welcome.html“ target="top">WELCOME</a><br><br>

<a href="d:\diya.png" target="middle">DEEPJYOTI</a><br><br>

<a href="https://www.kiet.edu" target="bottom">KIET</a><br><br>

4. TARGET=“_parent” : loads the page into the frame that is superior to

1 Create frame file (frame.html)

2 Create (4)files: linkby4target.html

3 Create(2) file, (2) link : welcome.html, diya.png, Link- kiet.edu, google.com

❖ The <FORM> </FORM> tag is used to create an HTML form.

❖ FORM element Attributes

• METHOD = “post” in a form that causes changes to server data.

Web server: machine that processes browser requests.

❖ The most important form element is the input element.

❖ INPUT element Attributes:

First name: <input type="text" name="fname" size="25"> <br>

Last name: <input type="text" name="lname" size="25">

Code above looks in a browser:

• <input type="password"> defines a password field:

Password: <input type="password" name="pswd">

Code above looks in a browser:

• <input type="radio"> defines a radio button.

• CHECKED attribute indicates which radio button is selected initially

Code above looks in a browser:

• Checkboxes let a user select NONE/ONE/MORE options of a limited number of choices.

Code above looks in a browser:

• <input type="submit"> defines a submit button.

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit"></form>

Code above looks in a browser:

• <input type= "reset" > defines a reset button.

<form name="input" action="html_form_action.asp" method="get">

Code above looks in a browser:

• Inserts a scrollable multiline text box into FORM

<form name="input" action="html_form_action.asp" method="get">

Code above looks in a browser:

<form action=""> O/P in a browser:

<INPUT TYPE = "submit" VALUE = "Submit Your Entries">

You might also like