UNIT-5
HTML <frame> Tag
HTML Frames are a powerful tool for dividing your web browser window into multiple
sections, each capable of loading content independently. This is achieved using a collection of
frames within a frameset tag.
Creating Frames:
Creating frames in HTML involves using the <frameset> tag instead of the <body> tag.
Each frame is defined by the <frame> tag, which specifies the HTML document to be loaded
into the frame. The row attribute is used to define horizontal frames, while the col attribute is
used for vertical frames. Here’s an example of how to create three horizontal frames using
the row attribute of the frameset tag.
Example:
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
</frameset>
</html>
Output:The above example basically used to create three horizontal frames: top, middle and
bottom using row attribute of frameset tag
HTML frameset Tag
The HTML <frameset> tag defines a set of frames within a web page. It specifies the
layout of multiple frames, each containing separate HTML documents, enabling the creation of
multi-pane layouts for displaying content.
Note: The <frameset> tag is not supported in HTML5.
Syntax:
<frameset cols = "pixels|%|*">
Attributes: The list of frameset attributes are given below:
Attribute Description
Defines the number of columns and their size within the frameset tag,
cols
creating vertical frames in the web browser.
Defines the number of rows and their size within the frameset tag, creating
rows
horizontal frames in the web browser.
Specifies the width of the border of each frame in pixels. A value of 0
border
indicates no border.
Specifies whether a three-dimensional border should be displayed between
frameborder
frames. Values: 0 (no border) or 1 (border).
Specifies the amount of spacing between frames in a frameset, denoted in
framespacing
pixels.
Attributes of Frameset tag:
cols: The cols attribute is used to create vertical frames in web browser. This attribute is
basically used to define the no of columns and its size inside the frameset tag. The size or width
of the column is set in the frameset in the following ways:
Use absolute value in pixel Example:
<frameset cols = "300, 400, 300">
Use percentage value Example:
<frameset cols = "30%, 40%, 30%">
Use wild card values: Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for creating vertical frame.
rows: The rows attribute is used to create horizontal frames in web browser. This
attribute is used to define no of rows and its size inside the frameset tag. The size of rows or
height of each row use the following ways:
Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
Use percentage value Example:
<frameset rows = "30%, 40%, 30%">
Use wild card values Example:
<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating horizontal frame.
Border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero
value is used for no border. Example:
<frameset border="4" frameset>
frameborder:
This attribute of frameset tag is used to specify whether the three-dimensional border
should be displayed between the frames or not for this use two values 0 and 1, where 0 defines
for no border and value 1 signifies for yes there will be border.
framespacing: This attribute of frameset tag is used to specify the amount of spacing between
the frames in a frameset. This can take any integer value as an parameter which basically denotes
the value in pixel. Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag:
Name: This attribute is used to give names to the frame. It differentiate one frame from another.
It is also used to indicate which frame a document should loaded into.
Example:
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
Here we use three frames with names as left center and right.
src: This attribute in frame tag is basically used to define the source file that should be loaded
into the frame.The value of src can be any url.
Example:
<frame name = "left" src = "/html/left.htm" />
In the above example name of frame is left and source file will be loaded from “/html/left.htm”
in frame.
marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between
the border and contents of left and right frame.
Example:
<frame marginwidth="20">
marginheight: This attribute in frame tag is used to specify height of the spaces in pixels
between the border and contents of top and bottom frame.
Example:
<frame marginheight="20">
scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag.
This is basically used to control the appearance of scrollbar. The value of this attribute can be
yes, no, auto. Where the value no denotes there will be no appearance of scroll bar.
Example:
<frame scrollbar="no">
Advantages of Frame Tag:
It allows the user to view multiple documents within a single Web page.
It load pages from different servers in a single frameset.
The older browsers that do not support frames can be addressed using the tag.
Disadvantages of Frame Tag:
Due to some of its disadvantage it is rarely used in web browser.
Frames can make the production of website complicated.
A user is unable to bookmark any of the Web pages viewed within a frame.
The browser’s back button might not work as the user hopes.
The use of too many frames can put a high workload on the server.
Many old web browser doesn’t support frames.
Note:
This tag is not supported in HTML5.
HTML <noframes> Tag
The <noframes> tag is the backup for those browsers that does not support frames. This
tag can contains all the element that can be placed in <body> tag. It is used to create link with
the non-frame set version of any website where you want to display a message to the user.
This <noframes> tag is not supported in HTML5.
Syntax:
<noframes> Statement for the user </noframes>
Note: <noframes> tag placed inside of <frameset> tag.
Below example illustrate the <noframes> tag:
Example:
<html>
<head>
<title>noframes tag</title>
<style>
frame {
text-align: center;
}
</style>
</head>
<!-- frameset attribute starts here -->
<frameset cols="30%, 40%, 30%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
Sorry, your browser does not handle frames!
</noframes>
</frameset>
<!-- frameset attribute ends here -->
</html>
Output:
If browsers supported:
If browsers does not supported:
HTML Forms
HTML Forms utilize the <form> element as a powerful tool to collect user input
through a variety of interactive controls. These controls range from text fields, numeric inputs,
email fields, password fields, to checkboxes, radio buttons, and submit buttons. In essence, an
HTML Form serves as a versatile container for numerous input elements, thereby enhancing user
interaction.
Syntax:
<form>
<!--form elements-->
</form>
Form Elements
The HTML <form> comprises several elements, each serving a unique purpose. For
instance, the <label> element is used to define labels for other <form> elements.
The <input> element, on the other hand, is versatile and can be used to capture various types of
input data such as text, password, email, and more, simply by altering its type attribute.
Elements Descriptions
<label> It defines labels for <form> elements.
It is used to get input data from the form in various types such as text, password,
<input>
email, etc by changing its type.
Elements Descriptions
<button> It defines a clickable button to control other elements or execute a functionality.
<select> It is used to create a drop-down list.
<textarea> It is used to get input long text content.
<fieldset> It is used to draw a box around other form elements and group the related data.
<legend> It defines a caption for fieldset elements
<datalist> It is used to specify pre-defined list options for input controls.
<output> It displays the output of performed calculations.
<option> It is used to define options in a drop-down list.
<optgroup> It is used to define group-related options in a drop-down list.
Commonly Used Input Types in HTML Forms
In HTML forms, various input types are used to collect different types of data from users.
Here are some commonly used input types:
<input type=”text”>
Input Type Description
<input type=”text“> Defines a one-line text input field
<input
Defines a password field
type=”password“>
<input type=”submit“> Defines a submit button
<input type=”reset“> Defines a reset button
<input type=”radio“> Defines a radio button
Input Type Description
<input type=”email“> Validates that the input is a valid email address.
<input Allows the user to enter a number. You can specify min, max, and
type=”number“> step attributes for range.
<input
Used for checkboxes where the user can select multiple options.
type=”checkbox“>
<input type=”date“> Allows the user to select a date from a calendar.
<input type=”time“> Allows the user to select a time.
<input type=”file“> Allows the user to select a file to upload.
HTML <textarea> tag
The HTML <textarea> tag is used to define a multi-line plain-text editing control. It’s
commonly used in forms to collect user inputs such as comments, reviews, or any form of text
entry. Attributes like cols and rows define its size, while the name attribute is needed for form
data submission and the id attribute for label linkage. Text within a <textarea> is rendered in a
fixed-width font.
Syntax:
<textarea>....</textarea>
HTML textarea tag Attribute values
Attribute Description
autocomplete Specifies whether the textarea field has autocompleted on or off.
Specifies that the textarea field should automatically receive focus when the
autofocus
page loads.
Tells the browser how many average-width characters should fit on a single
cols
line, i.e., the number of columns.
Attribute Description
dirname Enables setting the text direction of the textarea field after submitting the form.
disabled Specifies that the textarea element is disabled.
form Specifies one or more forms that the <textarea> element belongs to.
maxlength Specifies the maximum number of characters entered into the textarea element.
Defines the minimum number of characters (as UTF-16 code units) of a
minlength
textarea element.
name Specifies the name of the <textarea> element.
Specifies the expected value to be displayed before user input in the textarea
placeholder
element.
Specifies that the textarea element is read-only. If the textarea is read-only, then
readonly
its content cannot be changed but can be copied and highlighted.
A boolean attribute that specifies that the <textarea> element must be filled out
required
before submitting the form.
Specifies the number of visible text lines for the control, i.e., the number of
rows
rows to display.
wrap Specifies in which manner the text is to be wrapped in a textarea when a form
Attribute Description
is submitted.
HTML textarea tag Examples
Example 1: Basic Usage of <textarea>
This simple example illustrates the use of the <textarea> tag in HTML that enables the
multi-line text input control.
HTML
<!DOCTYPE html>
<html>
<head>
<title>textarea tag</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>HTML Textarea tag </h2>
<form action="#">
<textarea rows="10"
cols="20"
name="blog">
Share your knowledge by writing your own blog!
</textarea>
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output:
HTML <select> form Attribute
The form attribute in HTML <select> specifies the dropdown list’s associated form,
identified by the id attribute of a <form> element.
Syntax:
<select form="form_id">
Attribute Values:
Name Description
value <option> value is sent on form submission, text displays in dropdown.
Example: In this example the <select> element with the form attribute specifying the form it
belongs to, allowing course selection.
<html>
<head>
<title>select Form Attribute</title>
</head>
<body>
<center>
<h2>
HTML <select> form Attribute
</h2>
<br />
<h3>select your preferred course from the dropdownlist box</h3>
<select form="myGeeks" id="myCourses" autofocus>
<option value="C++">c++</option>
<option value="Placement"> Placement </option>
<option value="Java">Java</option>
<option value="Python"> Python</option>
</select>
<br /><br />
<form id="myGeeks">
<input type="submit" />
</form>
</center>
</body>
</html>
Output:
