04. session 04 working withformsandframes

Working with Forms and Frames04
Session 4

Module Introduction
 Frames
 Forms and Controls

FRAMES
 Explain the FRAMESET element
 Explain the IFRAME element
 Explain the NOFRAME element

FRAMES
 Frames refer to a technique of dividing the
browser windows into multiple sub-windows.
 Each sub-window is called as a frame.
 Each frame contains a separate html page and
is independent of other frames in the browser.

FRAMESET Elements
 A frameset specifies a general layout of a
web page that consists of frames.
 It defines how the browser should be divided
into frames.
 To specify this division, the FRAMESET
elements provides the ROWS and COLS
attributes.

FRAMESET Element
<html>
<head>
<title>Welcome</title>
</head>
<frameset cols="50%,50%"
rows=“*”>
<frame src="First.html">
<frame src="Second.html">
</frameset>
</html>

FRAMESET Element

 Attribute of Frameset
Attribute Description
frameborder Specifies where frames within a
frameset consist of borders.
framespacing Specifies the space between
individual frames with a
framset.

FRAME
 Attribute of Frame
frameborder Specifies whether the current frame consist of
borders.
marginheight Specifies the top and bottom margins of the current
frame.
marginwidth Specifies the left and right margins of the current
frame.
name Specifies the name of the current frame. The
browser use the name to refer to the frame.
noresize Informs that a user cannot resize a current frame

scrolling Specifies scrollbar for the current frame

FRAME
<html>
<head>
<title>Welcome</title>
</head>
<frameset rows="100,*">
<frame src="Banner.html" frameborder="1" noresize>
<frameset cols="25%,*" frameborder="NO" noresize>
<frame src="Links.html" name="leftFrame"
scrolling="NO" noresize>
<frame src="Main.html" name="contents"
frameborder="0">
</frameset>
</frameset>
<noframes></noframes>
</html>

IFRAME Element
 Inline frames allow you to embedded an
HTML page within a main HTML page such
that the inserted page is displayed as a part
of document’s flow.
 Inline frames are also called as “floating
frames”.

IFRAME Element
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>This page support iframe.</p>
<iframe src="AboubtUs.html" width="250" height="100" scrolling="yes" frameborder="1"/>
<p>This browser does not support IFRAME element.</p>
</body>
</html>

NORAME Element
 One of the limitations of using
frames is that the frames are not
supported by all browser.
 The “NOFRAME” element specifies
the text to be displayed in the
browser if the browser does not
support frame
<noframes>
<body>
<p>This browser does not support
frames.</p>
</body>
</noframes>

FORMS AND CONTROLS
 Explain HTML forms
 Describe the basic elements
 Explain the INPUT element
 Explain the LABEL element
 Explain the BUTTON element
 Explain the SELECT and OPTION elements

Forms

 An HTML form is a container that consists of
various controls such as checkboxes, radio
buttons, menus, …
 For example, consider a Login form that allows
you to specify the login name and password.

Forms
 Attribute of Form
action Specifies the URL where the form data will be
submitted and processed.
method Indicates an HTTP method that specifies how the
data of the form is send to server.
This attribute has two values namely: GET and POST.

Basic Controls

 Label
 Text Box
 Button
 Check Box
 Radio Button

INPUT Element
 A control allows you to
accept different type of
input from the user.
 The different values that the
type attribute can take care:
 Text for Text Box
 Password for Password
 Submit for the Submit button
 Reset for the Reset button
 Radio for Radio Button
 Checkbox for Check Boxes

LABEL Element
 A LABEL element creates a
label control on a form.
 You use the FOR attribute
associates a label with
another control.
 The value of the FOR
attribute must be the same
as the value of the ID
attribute of the associated
control element.

BUTTON Element
 A BUTTON element creates a
button on a form.
 The buttons created using the
BUTTON element are similar to
buttons created with INPUT
element, however it’s offer
richer functionalities.

MENU Element
 Menus are control that allow
the user to select an option
from a given set of options.
 To create menu, you use
SELECT element. The select
element must have at least one
OPTION element.
 Menu that allows the user to
select a single option or
multiple options.

Registration form
<html> <tr>
<body> <td>Address:</td>
<form id="frmReg" name="frmReg" method="post" action=""> <td>
<h2>Account Registration Form</h2> <textarea name="textarea" cols="19"></textarea>
<table width="300"> </td>
<tr> </tr>
<td width="120">Name:</td> <tr>
<td width="180"> <td></td>
<input name="textfield" type="text" size="25" /> <td>
</td> <input type="submit" name="Submit" value="Submit" />
</tr> <input type="reset" name="Submit2" value="Reset" />
<tr> </td>
<td>Marital Status: </td> </tr>
<td> </table>
<select name="select"> </form>
<option>Single</option> </body>
<option>Married</option> </html>
<option>Married But Available</option>
</select>
</td>
</tr>

Summary
 A form is selection of an HTML document that
contains special elements called as controls.
 Control are used to accept input from user and
provide some interaction
 The <FORM> element is used to create the region
on the page that will be treated as a form.
 The <INPUT> element defines the type and
appearance of the control to be displayed on the
form
Building Dynamic Websites/Session 1/ 23 of 16

Summary…
 Frames divide a Web broswer’s window into
separate regions, each of which can display
separate scrollable page.
 An HTML document with frames has a HEAD and a
FRAMESET section.
 Cannot use BODY and FRAMSET set elements
together
 The NOFRAMES element is used to specify alternate
content to be used if the browser does not support
The IFRAME element is used to define inline frame
Building Dynamic Websites/Session 1/ 24 of 16


04. session 04 working withformsandframes

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to 04. session 04 working withformsandframes

Similar to 04. session 04 working withformsandframes (20)

More from Phúc Đỗ

More from Phúc Đỗ (15)

Recently uploaded

Recently uploaded (20)

04. session 04 working withformsandframes