Day 4 - HTML Learning Material

Learning Outcomes

Understand HTML Frames and why they are deprecated.
Learn the purpose and usage of the <iframe> tag.
Create HTML forms using different input controls.
Understand GET vs POST methods.
Use common HTML form elements effectively.

1. Frames

Frames divide a browser window into multiple sections, each displaying a different HTML page.

The <frameset> and <frame> tags were traditionally used to create frames.

Vertical Frames

<frameset cols="30%,70%">
    <frame src="menu.html">
    <frame src="content.html">
</frameset>

Horizontal Frames

<frameset rows="30%,70%">
    <frame src="top.html">
    <frame src="bottom.html">
</frameset>

Note: Frames are deprecated. HTML5 introduced the <iframe> tag as a modern replacement.

2. IFrame

The <iframe> (Inline Frame) embeds another webpage, document, map, video, PDF or other content inside the current webpage.

Attribute	Purpose
src	URL of content
width	Iframe width
height	Iframe height
title	Accessibility description
allowfullscreen	Enable fullscreen videos

Syntax

<iframe src="page.html"></iframe>

Examples

<iframe src="about.html" width="500" height="300"></iframe>

<iframe src="https://www.example.com"
width="600" height="400"></iframe>

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

<iframe src="GOOGLE_MAPS_EMBED_URL"
width="600" height="450"></iframe>

3. HTML Forms

Forms collect user input and send it to a web server for processing.

Syntax

<form action="" method="">
    ...
</form>

Form Attributes

Attribute	Purpose
action	Destination page
method	GET or POST
name	Backend reference name
required	Makes field mandatory

GET vs POST

GET	POST
Visible in URL	Hidden from URL
Less secure	More secure
Limited data	Large data
Default method	Common for forms

4. Input Tag

The <input> tag is used to collect user input.

<input type="" name="" value="">

Common Input Types

text
email
password
checkbox
radio
submit
reset
button
tel
textarea

Examples

Text Box

<input type="text" name="username">

Password

<input type="password" name="pwd">

Radio Button

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

Checkbox

<input type="checkbox" name="java"> Java
<input type="checkbox" name="python"> Python

Submit Button

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

Reset Button

<input type="reset" value="Reset">

Button

<input type="button" value="Click Me">

Dropdown

<select name="city">
    <option>Visakhapatnam</option>
    <option>Hyderabad</option>
    <option>Chennai</option>
</select>

Textarea

<textarea rows="4" cols="30">
Enter your address
</textarea>

5. HTML Input Type Reference

Input Type	Purpose	Example
text	Single-line text	<input type="text">
password	Password	<input type="password">
email	Email	<input type="email">
tel	Phone	<input type="tel">
date	Date picker	<input type="date">
time	Time picker	<input type="time">
datetime-local	Date & Time	<input type="datetime-local">
number	Numeric	<input type="number">
url	Website	<input type="url">
search	Search	<input type="search">
file	Upload	<input type="file">
radio	Radio	<input type="radio">
checkbox	Checkbox	<input type="checkbox">
submit	Submit	<input type="submit">
reset	Reset	<input type="reset">
button	Button	<input type="button">
color	Color Picker	<input type="color">
range	Slider	<input type="range">

Tip: Prefer HTML5 input types such as email, tel, date, color and range to improve validation and user experience.