5. Frames & Forms.pdf

HTML FRAMES
AND
FORMS

Frames

•HTML frames are used to divide the browser window
into multiple sections.

•Each section can load a separate HTML document or
individual URLs.

•A collection of frames in the browser window is
known as frameset.

Frames

•e.g., to make a framed page with a windowpane on the
left and one on the right requires three 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.

Frames

Doc1.html

Doc2.html

Doc1.html

Doc2.html
Frames.html

Creating Frames

•To use frames on a page, we use <frameset> tag
instead of <body> tag.

•The <frameset> tag defines how to divide the window
into frames.

•The rows attribute of <frameset> tag defines
horizontal frames.

Creating Frames

•The cols attribute of <frameset> tag defines vertical
frames.

•Each frame is indicated by <frame> tag and it defines
which HTML document shall open into the frame.

•To display frames, we have to use either cols or rows
or both attributes.

<frameset> Attributes

Attribute Value Description
Cols
pixels
%
Specifies the number and size
of columns in a frameset
rows
pixels
%

Specifies the number and size
of rows in a frameset

Simple Vertical Frame

<html>
<frameset cols = “50%, 50%”>
<frame src=“doc1.html”>
<frame src=“doc2.html”>
</frameset>
</html>

Simple Horizontal Frame

<html>
<frameset rows = “50%, 50%”>
<frame src=“doc1.html”>
<frame src=“doc2.html”>
</frameset>
</html>

<frameset> Attributes

Attribute Value Description
border Integer Value
Specifies the width of the
border of each frame in pixels
frameborder
0
1

Specifies whether a
three-dimensional border
should be displayed between
frames

Simple Vertical Frame with border

<html>
<frameset cols = “50%, 50%” frameborder=“1”
border=“10” >
<frame src=“doc1.html”>
<frame src=“doc2.html”>
</frameset>
</html>

<frame> Attributes

Attribute Value Description
marginheight pixels
Specifies the top and bottom
margins of a frame
marginwidth
pixels

Specifies the left and right margins
of a frame

name text Specifies the name of a frame
noresize noresize
Specifies that a frame is not
resizable

<frame> Attributes

Attribute Value Description
scrolling
yes
no
auto
Specifies whether or not to display
scrollbars in a frame
Default value is auto
src
URL

Specifies the URL of the document
to show in a frame

Mixed Frame

<html>
<frameset rows = “50%,50%” cols = “50%, 50%”>
<frame src=“frame1.html”>
<frame src=“frame2.html”>
<frame src=“frame3.html”>
<frame src=“frame4.html”>
</frameset>
</html>

Mixed Frame

Example of Mixed Frame - 1

HTML Code for Mixed Frame - 1

<html>
<frameset rows = “60%,40%”>
<frameset cols = “70%,30%”>
<frame src=“frame1.html”>
<frame src=“frame2.html”>
</frameset>
<frame src=“frame3.html”>
</frameset>
</html>

Example of Mixed Frame - 2

HTML Code for Mixed Frame - 2

<html>
<frameset rows = “30%,70%”>
<frame src=“frame1.html”>
<frameset cols = “50%,50%”>
<frame src=“frame2.html”>
<frame src=“frame3.html”>
</frameset>
</frameset>
</html>

Example of Mixed Frame - 3

HTML Code for Mixed Frame - 3

<html>
<frameset rows = “50%,50%”>
<frame src=“frame1.html”>
<frameset cols = “40%,30%,40%”>
<frame src=“frame2.html”>
<frame src=“frame3.html”>
<frame src=“frame4.html”>
</frameset>
</frameset>
</html>

Example of Mixed Frame - 4

HTML Code for Mixed Frame - 4
<html>
<frameset rows = “50%,50%”>
<frameset cols = “50%,50%”>
<frame src=“frame1.html”>
<frame src=“frame5.html”>
</frameset>
<frameset cols=“40%,30%,40%”>
<frame src=“frame2.html”>
<frame src=“frame3.html”>
<frame src=“frame4.html”>
</frameset>
</frameset>
</html>

Nested Framesets

•Nested frameset means a frameset file is nested
inside another frameset file.

• A link in one of the inner frameset documents
which uses "_parent" for target, will load the
linked document in the frame where the inner
frameset file had been.

Use Target of Link for Frameset

Main Frameset -

<html>
<frameset rows="50%,50%">
<frame src = "frame1.html“>
<frame src = "frame2.html“>
</frameset>
</html>

Use Target of Link for Frameset

Contents of frame2.html -

<html>
<frameset cols = "50%,50%">
<frame src = "frame3.html">
<frame src = "frame4.html">
</frameset>
</html>

Use Target of Link for Frameset

Contents of frame3.html -

<html>
<body>
Contents of Frame3
<a href = "frame1.html" target="_parent">
Go to parent frame</a>
</body>
</html>

Link will open in the frame where frame2.html opens

iframe

•An iframe is used to display a web page within a
web page.

•It creates an inline frame (a frame inside an
HTML page).

•The syntax for adding an iframe is :
<iframe src=“URL”>
</iframe>

iframe

•e.g.,
<iframe src=“test.html”>
</iframe>

•Frame borders can be removed by using the
attribute frameborder=“0” of <iframe> tag.

iframe

<html>
<body bgcolor=“orange">
<iframe src="demo.html" width="250"
height="250"></iframe>
</body>
</html>

- demo.html file should exist and can have contents as
‘Contents to be displayed in the iframe’

Use iframe as Target for Link

•An iframe can be used as the target frame for a
link.

•To be used as a target frame, iframe need to be
given a name.

•The iframe name is needed by <a> tag as a
destination.

Use iframe as Target for Link

•<a> tag uses its target attribute to point to iframe.

•The <a> tag ‘target’ attribute and the iframe
‘name’ must match.

•The iframe name is set using the iframe name
attribute.

Use iframe as Target for Link

<html>
<body>
<table>
<tr>
<td>
<iframe frameborder="0" scrolling="no"
width="150" height="198" src=“Image URL"
name="imgbox" >
</iframe>
</td>

Use iframe as Target for Link

<td>
<a href=“ Image URL” target="imgbox" >Text1</a><br>
<a href=" Image URL” target="imgbox" >Text2</a><br>
<a href=" Image URL” target="imgbox" >Text3</a>
</td>
</tr>
</table>
</body>
</html>

HTML Forms

•HTML Forms are required when we want to collect
some data from the site visitors.

•e.g., during user registration, we can collect
information such as name, email address, phone
number, credit card, etc.

•A form will take input from the site visitor and then
will post it to a back-end application such as ASP
Script or PHP script etc.

HTML Forms

•The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.

•There are various form elements available like text
fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc.

HTML Forms
•To create HTML form, <form> tag is used. It is a
container for different types of input elements.

•Syntax –
<html>
<body>
<form>
Form elements …
</form>
</body>
</html>

HTML Form Elements

•There are different types of form elements that we can
use to collect data using HTML form like –

1. Text Input
2. Radio buttons
3. Checkboxes
4. Select box
5. File Select boxes
6. Clickable buttons

Text Input

•There are three types of text input used with the form
–

(i) Single Line Text Input :
This is used for items that require only one
line of user input, such as search boxes or
names. They are created using <input> tag.

Text Input

(ii) Password Input :
This is also a single line text input but it
masks the characters as soon as a user enters
it. They are also created using <input> tag.

(iii) Multi-line Text Input :
This is used when the user is required to
give details that may be longer than a single
line. They are created using <textarea> tag.

Single Line Text Input
•Syntax –
<html>
<body >
<form>
First Name : <input type=“text”
name=“fname”><br>
Last Name : <input type=“text”
name=“lname”><br>
</form>
</body>
</html>

<label> with Text Input

•<label> tag defines a label for form elements.

•<label> element is useful for screen-reader users.

•The for attribute of the <label> tag should be same as
the id attribute of the <input> element to bind them
together.

Single Line Text Input
•Syntax –
<html>
<body >
<form>
<label for = “fname”>First Name : </label>
<input type=“text” id = “fname”
name=“fname”><br>
<label for = “lname”> Last Name : </label>
<input type=“text” id = “lname”
name=“lname”><br>
</form>
</body>
</html>

Attributes of <input> tag

Attribute Description
type Indicates the type of input. For text input, it should
be set to text and password for password value
name Used to give a name to the form element which will
be sent to the server to be recognized and get the
value.
value Can be used to provide the initial value inside the
form element
size Allows to specify the width of the text box in terms
of characters
maxlength Allows to specify the maximum number of
characters a user can enter into the textbox

Password Input
•Syntax –

<html>
<body >
<form>
Username: <input type=“text”
name=“uname”><br>
Password: <input type=“password”
name=“password”><br>
</form>
</body>
</html>

Multiple-line Text Input
•Syntax –

<html>
<body >
<form>
Address: <br>
<textarea rows=“5” cols=“40”
name=“address”>
Enter House no., street, city, state here…
</textarea>
</form>
</body>
</html>

Attributes of <textarea> tag

Attribute Description
name Used to give a name to the form element
which will be sent to the server to be
recognized and get the value.
rows Indicates the number of rows of the text area
box
cols Indicates the number of columns of the text
area box

Radio Buttons

•Radio buttons are used when out of many given
options, single option is required to be selected.

•They are also created using <input> tag.

•The type attribute is set to radio.

Radio Buttons
<html>
<body >
<form> Select your Programme<br>
<input type=“radio” name=“Programme”
value=“BBA-IT”> BBA-IT <br>
<input type=“radio” name=“Programme”
value=“BCA”> BCA <br>
<input type=“radio” name=“Programme”
value=“MBA-IT”> MBA-IT <br>
<input type=“radio” name=“Programme”
value=“MSc-CA”> MSc-CA <br>
</form>
</body>
</html>

Attributes for radio button

Attribute Description
type Indicates the type of input. For radio button
input, it should be set to radio
name Used to give a name to the form element
which will be sent to the server to be
recognized and get the value.
value Will be used if the radio button is selected
checked Set to be checked if we want to select that
option by default

Checkboxes

•Checkboxes are used when more than one option from
the given options need to be selected.

•They are also created using <input> tag.

•The type attribute is set to checkbox.

Checkboxes
<html>
<body >
<form> Select Languages known<br>
<input type=“checkbox” name=“language”
value=“English”> English <br>
<input type=“checkbox” name=“language”
value=“French”> French <br>
<input type=“checkbox” name=“language”
value=“German”> German <br>
<input type=“checkbox” name=“language”
value=“Japanese”> Japanese <br>
</form>
</body>
</html>

Attributes for checkbox

Attribute Description
type Indicates the type of input. For checkbox, it
should be set to checkbox
name Used to give a name to the form element
which will be sent to the server to be
recognized and get the value.
value Will be used if the checkbox is selected
checked Set to be checked if we want to select that
option/options by default

Select Box

•Select box, also known as drop-down box provides
various options in the form of drop-down list, from
where user can select one or more options.

•Select box is created using <select> tag.

Select Box

<html>
<body >
<form> Select Languages known<br>
<select name=“language”>
<option value=“English”> English </option>
<option value=“French”> French </option>
<option value=“German”> German </option>
<optionvalue=“Japanese”> Japanese </option>
</select>
</form>
</body>
</html>

Attributes of <select> tag

Attribute Description
name Used to give a name to the form element
which will be sent to the server to be
recognized and get the value.
size Can be used to specify the number of visible
options in the drop-down list
multiple If set to multiple, allows user to select multiple
options from the list

Attributes of <option> tag

Attribute Description
value Will be used if an option in the select box is
selected
selected Specifies that this option should be initially
selected by default

File Upload Box

•File upload box, also known as File select box
provides a button using which the user can upload a
file on the website.

•This is created using the <input> tag.

•The type attribute is set to file.

File Upload Box

<html>
<body>
<form>
<input type=“file” name=“upfile”>
</form>
</body>
</html>

Clickable Buttons

•Clickable buttons can be created using <input> tag.

•The type attribute is set to button.

•Apart from button, the type attribute can take few
other values when used for clickable button.

Values for type attribute

Type Description
submit Creates a button that automatically submits a
form.
reset Creates a button that automatically resets form
elements to their initial values.
button Creates a button that is used to trigger a
client-side script when the user clicks that
button.
image Creates a clickable button where image can be
used as a background image for button

Clickable Buttons
<html>
<body>
<form>
<input type=“submit” name=“submit”
value=“Submit”>
<input type=“reset” name=“reset” value=“Reset”>
<input type=“button” name=“Click Here”
value=“Clicked”>
<input type=“image” name=“imagebutton”
src=“image URL”>
</form>
</body>
</html>

<fieldset> tag

•<fieldset> tag is used to group related elements in a
form.

•<fieldset> tag draws a box around the related
elements.

•<legend> tag defines a caption for the <fieldset>
element.

<fieldset> tag

<html>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
First Name : <input type=“text” name=“fname”><br>
Last Name : <input type=“text” name=“lname”><br>
Age : <input type=“text” name=“age”><br>
</fieldset>
</form>
</body>
</html>

Input Types

•type = “date”
- used for input fields that should contain a
date
- shows date picker in the input field

•type = “month”
- allows user to select month and year
- shows date picker in the input field

Input Types

•type = “time”
- allows user to select time
- shows time picker in the input field

•type = “week”
- allows user to select a week and year
- shows date picker in the input field

Input Types

•type = “number”
- allows user to enter numeric value
- restriction can be set on the range of
accepted value

•type = “tel”
- used if input field contains telephone
number

Input Types

•type = “range”
- defines a slider control to enter a number
- default range is 1 to 100
- restrictions can be set to change the range

•type = “email”
- used if input field contains e-mail address
- gets automatically validated when
submitted

Input Types

•type = “url”
- used if input field contains a URL address
- gets automatically validated when
submitted

•type = “color”
- used if input field needs color selection
- shows color picker in the input field

Input Types

•type = “hidden”
- defines a hidden input field
- data in the hidden field can not be seen or
modified by users

Input Restrictions

Attribute Description
min Specifies the minimum value for an input field
max Specifies the maximum value for an input field
step Specifies the legal number intervals for an
input field
required Specifies that an input field is required, i.e.,
mandatory

Input Restrictions

Attribute Description
readonly Specifies that an input field is read only, i.e.,
value can not be changed
disabled Specifies that an input field should be disabled
pattern Specifies a regular expression to check with the
input value

Min and Max attribute with Date

<form>
Enter a date after 2010-01-01:
<input type=“date” name=“mindate”
min = “2010-01-02”><br>

Enter a date before 2000-01-01:
<input type=“date” name=“maxdate”
max = “1999-12-31”><br>

</form>

Step attribute with number

•Specifies legal number interval

•E.g., if step=2, then legal numbers can be
…, -4, -2, 0, 2, 4, 6 etc.

<form>
Enter score here:
<input type=“number” name=“score” step = “2”>
</form>

Pattern attribute

•specifies a regular expression that the input field's
value is checked against, when the form is
submitted

<form>
Enter ADHAR number :
<input type=“text” name=“adharno”
pattern=“[0-9]{12}” >
</form>

Placeholder attribute

•specifies a short hint that describes the expected
value of an input field, i.e., expected format

<form>
Enter ADHAR number :
<input type=“tel” name=“adharno”
pattern=“[0-9]{4}-[0-9]{4}-[0-9]{4}”
placeholder = “1234-1234-1234” >
</form>

Attributes of <form>

Attribute Description
action Specifies an address (url) where to submit the
form
Default : The submitting page
method Specifies the HTTP method used while
submitting the form
Default : GET
name Specifies a name used to identify the form
target Specifies the target of the address in the action
attribute
Default : _self

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.

Target Attribute

•The target attribute specifies where to display the
response that is received after submitting the form.

•The target attribute can have one of the following
values as - _self, _blank, _top, _parent or iframe
name.

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 get
method or as HTTP post transaction with post
method.

•The default HTTP method when submitting form data
is GET.

Form Attributes
<html>
<body >
<form action = “abc.php” target = “_blank”
method = “post” >
First Name : <input type=“text”
name=“fname”><br>
Last Name : <input type=“text”
name=“lname”><br>
<input type = “submit” name = “submit”
value = “submit”
</form>
</body>
</html>

5. Frames & Forms.pdf

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

5. Frames &amp; Forms.pdf

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77

5. Frames & Forms.pdf