Scribd
Upload
30 views

Frames - Forms

Uploaded by

shreyaxchauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Frames - Forms

Uploaded by

shreyaxchauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 82

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

Frames.html
Doc1.html Doc2.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

pixels Specifies the number and size


Cols
% of columns in a frameset

pixels Specifies the number and size


rows % 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

Specifies the width of the


border Integer Value
border of each frame in pixels

Specifies whether a
0 three-dimensional border
frameborder 1 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

Specifies the top and bottom


marginheight pixels
margins of a frame
Specifies the left and right margins
pixels
marginwidth of a frame

name text Specifies the name of a frame

Specifies that a frame is not


noresize noresize
resizable
<frame> Attributes

Attribute Value Description

yes Specifies whether or not to display


scrolling no scrollbars in a frame
auto Default value is auto

Specifies the URL of the document


URL
src 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> Attributes

Attribute Value Description

Specifies the URL of the document


src URL
to show in inline frame
Specifies whether the frame border
0
frameborder will be displayed
1
Default value is 1 – border displayed

width pixels Specifies the width of inline frame

height pixels Specifies the height of inline frame


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>
<option value=“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>

You might also like