⭐ CHAPTER: Creating Frames and Forms in HTML5

(Page 63 to Page 71 – Full Easy Notes + Codes)

✅ PAGE 63 — HTML Frames

⭐ What is an HTML Frame?

Earlier HTML allowed dividing one browser window into multiple sections.
Each section could load a different webpage.
This was done using the <iframe> tag.

Frame = “Inline Frame” → A small window inside the main webpage.

⭐ Syntax of iframe


<iframe src="URL or file name" title="description"></iframe>

⭐ Important Attributes

Attribute	Purpose	Example
src	Sets the file/webpage that will appear inside the frame	`<iframe src="demo.html">`
height	Sets frame height in pixels	`<iframe height="200">`
width	Sets frame width in pixels	`<iframe width="400">`

⭐ Activity: Creating an inline frame (Page 63)

This will show another file inside the current HTML file.

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Creating an Inline Frame</title>
</head>
<body style="background-color:aqua;">
<h1>HTML iframes</h1>

<p>Here we are demonstrating to create an inline frame and display another HTML document inside it.</p>

<iframe src="swachh bharat.html" height="200" width="400" title="iframe Example"></iframe>

</body>
</html>

✅ PAGE 64 — Changing the Border of iframe

⭐ By default iframe has a border.

We can change:
✔ size
✔ color
✔ style

Using CSS style attribute.

⭐ Activity: Change size, color and style of border

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Changing the iframe Border</title>
</head>
<body style="background-color:aqua;">
<h3>HTML iframe Borders</h3>

<p>Here we show how to change border size, colour and style.</p>

<iframe src="swachh bharat.html" height="200" width="400"
style="border:4px dashed red;" title="iframe Example"></iframe>

</body>
</html>

⭐ Removing the Border

Use:


style="border:none;"

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Removing iframe Border</title>
</head>
<body style="background-color:aqua;">

<h3>HTML iframe With No Border</h3>

<iframe src="swachh bharat.html" height="200" width="400"
style="border:none;" title="iframe Example"></iframe>

</body>
</html>

✅ PAGE 65 — iframe as a Target of a Link

We can open a webpage inside iframe by clicking a link.

For this we use the target attribute inside <a> tag.

Example:


<a href="website link" target="iframe_target">Click</a>

The iframe must have a name:


<iframe name="iframe_target">

⭐ Activity: Creating an iframe target for a link

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>iframe Target for a Link</title>
</head>
<body style="background-color:MistyRose;">

<h1 style="color:Crimson;">iframe – Target for a Link</h1>

<iframe src="demo_page.html" name="iframe_target"
height="200px" width="400" title="iframe Example"></iframe>

<p><a href="https://www.navdeepeduhub.in" target="iframe_target">Navdeep Eduhub</a></p>

</body>
</html>

✅ PAGE 66 — The `<form>` Element

⭐ What is a Form?

Form collects information from user:
✔ name
✔ email
✔ password
✔ gender
✔ feedback
etc.

It is only a container, not visible itself.

⭐ Syntax


<form>
   form elements...
</form>

⭐ Important Form Tags

Tag	Use
`<input>`	text box, password, button etc.
`<label>`	label for input
`<select>`	drop-down
`<textarea>`	multi-line box
`<button>`	button
`<fieldset>`	group items
`<legend>`	title of fieldset
`<datalist>`	suggestions list

✅ PAGE 67 — The `<input>` Element

⭐ What is input tag?

Used to create many types of input fields.

⭐ Syntax


<input type="value">

⭐ Types of Input

Type	Description
text	single-line text
password	masked text
radio	select one
checkbox	select many
button	clickable
submit	submit form
reset	clear form
color	choose a color

⭐ Creating a Text Field (Activity)

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Creating a Text Field</title>
</head>
<body style="background-color:LightBlue;">

<h1>Creating the Text Input Fields</h1>

<form>
First name: <input type="text"><br>
Last name: <input type="text">
</form>

<p>The text input field allows a maximum of 20 characters.</p>

</body>
</html>

⭐ Creating a Password Field

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Creating a password field</title>
</head>
<body style="background-color:PaleGreen;">

<h1>Creating the Password Input Field</h1>

<form>
Username: <input type="text"><br>
Password: <input type="password">
</form>

<p>You can enter username and password here.</p>

</body>
</html>

✅ PAGE 68 — The `<label>` Element

⭐ Use of label

Label gives name to input field.

Also increases accessibility.

⭐ Syntax


<label for="value">Label Name</label>

for="id of input"

⭐ Example Code


<form>
<label for="first_name">First name:</label><br>
<input type="text" id="first_name"><br>

<label for="last_name">Last name:</label><br>
<input type="text" id="last_name">
</form>

⭐ Creating Radio Buttons

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Creating Radio Buttons</title>
</head>
<body style="background-color:Coral;">

<h1>Creating the Radio Buttons</h1>

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

</body>
</html>

✅ PAGE 69 — Creating Checkboxes

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Creating Checkboxes</title>
</head>
<body style="background-color:Cyan;">

<h1>Creating Checkboxes</h1>

<form>
<select the sport you like to watch></p>

<input type="checkbox" id="cricket" name="cricket" value="cricket">
<label for="cricket">Cricket</label><br>

<input type="checkbox" id="football" name="football" value="football">
<label for="football">Football</label><br>

<input type="checkbox" id="hockey" name="hockey" value="hockey">
<label for="hockey">Hockey</label><br>
</form>

</body>
</html>

⭐ Creating Submit & Reset Buttons

HTML Code:


<!DOCTYPE html>
<html>
<head>
<title>Submit and Reset Buttons</title>
</head>
<body style="background-color:SandyBrown;">

<h1>Creating Submit and Reset Buttons</h1>

<form>
<label for="first_name">First name:</label><br>
<input type="text" id="first_name"><br>

<label for="last_name">Last name:</label><br>
<input type="text" id="last_name"><br><br>

<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

</body>
</html>

✅ PAGE 70 — The `<textarea>` Element

⭐ Multi-line text input field

Syntax:


<textarea rows="value" cols="value"></textarea>

Example:


<!DOCTYPE html>
<html>
<head>
<title>Multi-line Text Box</title>
</head>
<body style="background-color:Lavender;">

<h1>Creating Multi-Line Text Box</h1>

<form>
<label>Enter your address:</label><br>
<textarea rows="10" cols="30"></textarea>
</form>

</body>
</html>

⭐ The `<select>` and `<option>` Elements

Used to create drop-down list.

Syntax:


<select>
<option>Value</option>
</select>

Example:


<select>
<option value="hindi">Hindi</option>
<option value="english">English</option>
<option value="maths">Mathematics</option>
<option value="physics">Physics</option>
</select>

✅ PAGE 71 — `<fieldset>` and `<legend>` Elements

Used to group related information in a form.

Example Code:


<fieldset>
<legend>Sign-in Information:</legend>

<label for="username">Enter Username</label><br>
<input type="text" id="username"><br>

<label for="password">Enter Password</label><br>
<input type="password" id="password"><br>

<input type="submit" value="Sign In">
</fieldset>

⭐ Sample Registration Form (Full Code)


<!DOCTYPE html>
<html>
<head>
<title>Sample Registration Form</title>
</head>
<body style="background-color:FloralWhite;">

<h2>Navdeep Online Classes</h2>

<form>
<fieldset>
<legend>User Personal Information</legend>

<label>Enter your full name</label><br>
<input type="text"><br>

<label>Enter your father's name</label><br>
<input type="text"><br>

<label>Enter your mother's name</label><br>
<input type="text"><br>

<label>Select your gender</label><br>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other<br>

<label>Choose your class</label><br>
<select>
<option>Intermediate</option>
<option>IIT JEE</option>
<option>NEET</option>
<option>CBSE</option>
</select><br>

<label>Enter your email</label><br>
<input type="email"><br>

<label>Enter your mobile number</label><br>
<input type="text"><br>

<label>Enter your address</label><br>
<textarea rows="10" cols="30"></textarea><br>

<input type="submit" value="Register Me">
<input type="reset" value="Cancel">

</fieldset>
</form>

</body>
</html>

Html Class 8th

⭐ CHAPTER: Creating Frames and Forms in HTML5

✅ PAGE 63 — HTML Frames

⭐ What is an HTML Frame?

⭐ Syntax of iframe

⭐ Important Attributes

⭐ Activity: Creating an inline frame (Page 63)

HTML Code:

✅ PAGE 64 — Changing the Border of iframe

⭐ By default iframe has a border.

⭐ Activity: Change size, color and style of border

HTML Code:

⭐ Removing the Border

HTML Code:

✅ PAGE 65 — iframe as a Target of a Link

⭐ Activity: Creating an iframe target for a link

HTML Code:

✅ PAGE 66 — The <form> Element

⭐ What is a Form?

⭐ Syntax

⭐ Important Form Tags

✅ PAGE 67 — The <input> Element

⭐ What is input tag?

⭐ Syntax

⭐ Types of Input

⭐ Creating a Text Field (Activity)

HTML Code:

⭐ Creating a Password Field

HTML Code:

✅ PAGE 68 — The <label> Element

⭐ Use of label

⭐ Syntax

⭐ Example Code

⭐ Creating Radio Buttons

HTML Code:

✅ PAGE 69 — Creating Checkboxes

HTML Code:

⭐ Creating Submit & Reset Buttons

HTML Code:

✅ PAGE 70 — The <textarea> Element

⭐ Multi-line text input field

Syntax:

Example:

⭐ The <select> and <option> Elements

Syntax:

Example:

✅ PAGE 71 — <fieldset> and <legend> Elements

Example Code:

⭐ Sample Registration Form (Full Code)

Post a Comment

✅ PAGE 66 — The `<form>` Element

✅ PAGE 67 — The `<input>` Element

✅ PAGE 68 — The `<label>` Element

✅ PAGE 70 — The `<textarea>` Element

⭐ The `<select>` and `<option>` Elements

✅ PAGE 71 — `<fieldset>` and `<legend>` Elements