Scribd
Upload
60 views16 pages

Unit - 5-1

The document discusses HTML frames, forms, and form elements. It provides examples of defining framesets to divide pages into multiple frames. It also covers the action, method, and enctype attributes used with forms. Common form elements like text boxes, drop down lists, textareas, checkboxes, radio buttons, and the fieldset element are demonstrated through code examples.

Uploaded by

Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
60 views16 pages

Unit - 5-1

The document discusses HTML frames, forms, and form elements. It provides examples of defining framesets to divide pages into multiple frames. It also covers the action, method, and enctype attributes used with forms. Common form elements like text boxes, drop down lists, textareas, checkboxes, radio buttons, and the fieldset element are demonstrated through code examples.

Uploaded by

Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Unit-5

FRAMES: FRAMESET DEFINITION, FRAME DEFINITION, NESTED FRAMESETS.


F O R M S : A C T I O N AT T R I B U T E , M E T H O D AT T R I B U T E , E N C T Y P E AT T R I B U T E , D R O P
D O W N L I S T, T E X T B O X , M U LT I L I N E T E X T B O X , L A B E L , C H E C K B O X , R A D I O B U T T O N ,
FIELD SET
Frameset
The <frameset> tag in HTML is used to define the frameset. The <frameset> element contains one or more
frame elements. It is used to specify the number of rows and columns in frameset with their pixel of spaces.
Each element can hold a separate document.
Note: The <frameset> tag is not supported in HTML5.
Syntax
<frameset cols=" ">............</frameset>

cols Pixels It specifies the number and size of column spaces in the frameset. (Not
% Supported in HTML5)
*
rows Pixels It specifies the number and size of the rows spaces in the frameset. (Not
% Supported in HTML5)
*

Example : <frameset cols="50%,50%">


An Example to show the website of MCC College and Loyola College in 2 frames of a HTML Page.

<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="https://www.mcc.edu.in">
<frame src="https://www.google.com">
</frameset>
</html>
Nested Frames

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
</FRAMESET>
</HTML>
<html>
<head> Nested Frames – Another Example
<title>Nested Framesets in HTML</title>
</head>
<!-- Frameset tag starts from here -->
<!-- We divide the whole website into three rows -->
<!-- "*" divides equally based on the left space -->
<frameset rows="50%,*,*">
<!-- Here we are defining the columns
in the first row -->
<!-- It is set to 100% which means that
it will cover first row by 100% -->
<frameset cols="100%">
<!-- Defining the frame which is
to be inserted -->
<frame name="frame1" src="frame1.html">
</frameset>
<!-- Here we are defining the columns
in the second row -->
<frameset cols="*, *, *">
<frame name="frame2" src="frame2.html">
<frame name="frame3" src="frame3.html">
<frame name="frame4" src="frame4.html">
</frameset>
<!-- Now the final third row which will
cover the rest space -->
<frame name="frame5" src="frame5.html">
</frameset>
<!-- frameset tag ends here -->
</html>
Nested Frames – frame 1.html

<html>

<head>
<title>frame1</title>
</head>

<body bgcolor="aqua">
<center>
<img src="C:\Users\Persis Glory\Desktop\liontiger.gif" alt=“Lion Tiger"
width="400" height="350"><br>
frame1
</center>
</body>

</html>
HTML action attribute
The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI
to process the form information.

The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL
where you want to process your form.

<html>
<body>
<h2>Demo of action attribute of form element</h2>
<form action="action.html" method="post">
<label>User Name:</label><br>
<input type="text"
name="name"><br><br>
<label>User Password</label><br>
<input type="password"
name="pass"><br><br>
<input type="submit">
</form>
<p><b>It will redirect to a new page "action.html" when you
click on submit button</b></p>
</body>
</html>
HTML method attribute
The method attribute defines the HTTP method which browser used to submit the form. The possible values of method
attribute can be:
•post: We can use the post value of method attribute when we want to process the sensitive data as it does not display
the submitted data in URL.
•get: The get value of method attribute is default value while submitting the form. But this is not secure as it displays
data in URL after submitting the form.
Example:
<form action="action.html" method="post">
Example:
<form action="action.html" method="get">

The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server.

<form action="action.html" method="post" enctype="text/plain" >

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button,
then form get submit to the server.

<input type="submit" value="submit">


It is considered better to have label in form. As it makes the code parser/browser/user friendly.

<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
<Html> Text Box – input type = text
<Head>
<Title> The type="text" attribute of input tag creates textfield control
Create the Text Box also known as single line textfield control.
</Title>
</Head>
<Body>
Hello User! <br>
<form>
Student Name:
<input type="text" name="Name" size="20">
<br> <br>
Course:
<input type="text" name="Course" size="15">
</form>
</Body>
</Html>
<Html> Drop Down List - <label> <option value = “ “ >
<Head>
<Title>
Make a Drop Down Menu using Html Form
</Title>
</Head>
<Body>
This page helps you to understand how to make a dropdown menu in Html document.
And, this section helps you to understand how to make a drop down menu using Html form.
<form>
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW
</option>
<option value = "Mercedes"> Mercedes
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>
</Body>
</Html>
create a multi-line text input in HTML

<html> The <textarea> tag in HTML is used to insert multiple-line text


<head> in a form. The size of <textarea> can be specify either using
<title>HTML textarea Tag</title> "rows" or "cols" attribute or by CSS.
</head>

<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
What improvements you want in College?
<br>
<textarea rows = "5" cols = "60" name = "description">
Enter details here...
</textarea><br>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
<html>
<head> Checkbox in HTML
<title>HTML check box </title>
</head>
<body> The checkbox control is used to check multiple options from
<form> given checkboxes.
<h1> Example </h1>
<h2> HTML Checkbox Button Example </h2>
Select the hobbies you have:
<br>
<input type="checkbox"
name="reading"
value="yes"> <label for = "Reading"> Reading
</label> <br>
<input type="checkbox"
name="dancing"
value="yes"> <label for = "Dancing"> Dancing
</label> <br>
<input type="checkbox"
name = "singing"
value ="yes"> <label for = "Singing"> Singing
</label> <br>
</form>
</body>
</html>
Radio Button in HTML
<html>
The radio button is used to select one option from multiple options. It is
<head>
used for selection of gender, quiz questions etc.
</head>
If you use one name for all the radio buttons, only one radio button can
<title> Example of Radio Button</title>
be selected at a time.
<body>
Using radio buttons for multiple options, you can only choose a single
<form>
option at a time.
<label>
Gender:
</label> <br>
<input type="radio" id="gender" name="gender"
value="male"/> Male
<br>
<input type="radio" id="gender" name="gender"
value="female"/> Female <br/>
</form>
</body>
</html>
HTML <fieldset> tag

HTML <fieldset> tag is used to group the logically related fields/labels contained within an HTML form.

The use of this tag is optional while creating an HTML form but using <filedset>, it is easy to understand the purpose of
grouped elements of form.

The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend>
element which provide caption for the grouped elements.
<html>
<head> A Registration form in HTML – using <fieldset>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy