2. 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.
3. 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.
5. 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.
6. 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.
7. <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
10. <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
12. <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
13. <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
24. 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.
25. Use Target of Link for Frameset
Main Frameset -
<html>
<frameset rows="50%,50%">
<frame src = "frame1.html“>
<frame src = "frame2.html“>
</frameset>
</html>
26. 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>
27. 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
28. 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>
30. <iframe> Attributes
Attribute Value Description
src URL
Specifies the URL of the document
to show in inline frame
frameborder
0
1
Specifies whether the frame border
will be displayed
Default value is 1 – border displayed
width pixels Specifies the width of inline frame
height pixels Specifies the height of inline frame
32. 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.
33. 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.
34. 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>
35. 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>
36. 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.
37. 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.
38. 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>
39. 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
40. 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.
41. 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.
42. 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>
43. <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.
44. 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>
45. 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
47. 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>
48. 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
49. 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.
51. 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
52. 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.
53. 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>
54. 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
55. 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.
56. 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>
<option value=“Japanese”> Japanese </option>
</select>
</form>
</body>
</html>
57. 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
58. 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
59. 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.
61. 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.
62. 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
64. <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.
66. 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
67. 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
68. 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
69. 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
70. 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
71. Input Types
•type = “hidden”
- defines a hidden input field
- data in the hidden field can not be seen or
modified by users
72. 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
73. 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
74. 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>
75. 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>
76. 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>
77. 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>
78. 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
79. 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.
80. 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.
81. 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.
82. 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>
