• HTML frames are used to divide the browser
window into multiple sections
• Each section can load a separate HTML
document.
• A collection of frames in the browser window
is known as a frameset.
Creating Frames
• To use frames on a page <frameset> tag is used
instead of <body> tag.
• The <frameset> tag defines, how to divide the
window into frames.
• The rows attribute of <frameset> tag defines
horizontal frames and
• cols attribute defines vertical frames.
• Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the
frame.
Creating Frames
Example:
<html>
<head> <title>HTML Frames</title> </head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm">
<frame name = "main" src = "/html/main_frame.htm" >
<frame name = "bottom" src = "/html/bottom_frame.htm">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
Creating Frames
Example:
<html>
<head> <title>HTML Frames</title> </head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" >
<frame name = "center" src = "/html/main_frame.htm" >
<frame name = "right" src = "/html/bottom_frame.htm" >
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
The <frameset> Tag Attributes
cols how many columns are contained in the frameset and the size of each
column.
Absolute values in pixels-"100, 500, 100".
A percentage of the browser window-"10%, 80%, 10%".
Using a wildcard symbol. -"10%, *, 10%".
rows rows in the frameset
horizontal frames,
border the width of the border of each frame in pixels.
frameborder whether a three-dimensional border should be displayed between
frames.
This attribute takes value either 1 (yes) or 0 (no).
framespacing amount of space between frames
src the file name that should be loaded in the frame
Name a name to a frame
Scrolling controls the appearance of the scrollbars that appear on the frame. This
takes values either "yes", "no" or "auto". For example scrolling = "no"
means it should not have scroll bars.
HTML Forms
An HTML form is used to collect user input.
The user input is most often sent to a server for processing.
The HTML <form> Element
The <form> element is a container for different types of input
elements, such as:
• text fields, checkboxes,
• radio buttons, submit buttons,
• <input> <label>
• <select> <textarea>
• <button> <fieldset>
• <option>
The <form> Element
The <input> Element
• An <input> element can be displayed in many ways, depending on
the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
The <form> Element
Text Fields
• The <input type="text"> defines a single-line input field for text
input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <form> Element
The <label> Element
• The <label> tag defines a label for many form elements.
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <form> Element
Radio Buttons
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of
choices
The <form> Element
Radio Buttons
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaS
cript">
<label for="javascript">JavaScript</label>
</form>
The <form> Element
Radio Buttons
The <form> Element
Radio Buttons
The <form> Element
Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
The <form> Element
Checkboxes
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The <form> Element
Checkboxes
The <form> Element
The <select> Element
The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <form> Element
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
The <form> Element
The <button>
The <button> element defines a clickable button: Element
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>
The <form> Element
HTML <input type="reset">
The <input type="reset"> defines a reset button which resets all form
values to its initial values.
The <form> Element
The Submit Button
• The <input type="submit"> defines a button for submitting the form
data to a form-handler.
• The form-handler is typically a file on the server with a script for
processing input data.
• The form-handler is specified in the form's action attribute.
The <form> Element
The Submit Button
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
HTML form attribute
The Action Attribute
• The action attribute defines the action to be performed when the
form is submitted.
• Usually, the form data is sent to a file on the server when the user
clicks on the submit button
HTML form attribute
The Action Attribute
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
• If the action attribute is omitted, the action is set to the current page.
HTML form attribute
The Target Attribute
• The target attribute specifies where to display the response that is
received after submitting the form.
HTML form attribute
• The target attribute can have one of the following values:
Value Description
_blank The response is displayed in a new window or
tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the
window
The default value is _self which means that the response will open in
the current window.
HTML form attribute
The Method Attribute
• The method attribute specifies the HTTP method to be used when
submitting the form data.
• The form-data can be sent as URL variables (with method="get") or
as HTTP post transaction (with method="post").
• The default HTTP method when submitting form data is GET.
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
HTML form attribute
<input type="password"> defines a password field:
<input type="password" id="pwd" name="pwd">
The <input type="date"> is used for input fields that should contain a
date.
<input type="date" id="datemin" name="datemin" min="2000-01-02">
HTML form attribute
The <input type="email"> is used for input fields that should contain an
e-mail address.
<input type="email" id="email" name="email">
The <input type="image"> defines an image as a submit button.
<input type="image" src="img_submit.gif" alt="Submit" width="48" hei
ght="48">
HTML form attribute
The <input type="file"> defines a file-select field and a "Browse" button
for file uploads.
<input type="file" id="myfile" name="myfile">
