Topic 3: iframe (embed, Albums-embed, video-embed, maps, Input tag introduction)

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: tables-row-span-col-span-misc-tags-heading-tagh1h2-h6, element-design-based-on-the-picture-requirement

Why this matters

Up until now, your web pages have been self-contained — whatever you typed, the browser showed. But think about every site you've visited that had a YouTube video playing right there on the page, or a live Google Map without leaving the site. How did that get there? That's <iframe> — a way to punch a window into your page and pull in content from anywhere on the internet. And then there's <input>, which finally gives your visitor a voice — a way to type something and hand it back to you. Today we build both.

What You'll Learn

• Embed external content (videos, photo albums, maps) using the <iframe> element and its key attributes
• Understand the role of id, src, width, height, frameborder, and allowfullscreen in an iframe
• Use the <input> tag with its most important types: text, radio, checkbox, email, password, and submit
• Understand the purpose of type, name, id, placeholder, and value on input elements
• Combine iframes and inputs in a real event-registration page

The Analogy

Think of <iframe> as a framed window cut into the wall of your house. You're still standing inside your room, but through that window you can see — and interact with — another building entirely: a YouTube cinema next door, a Flickr gallery across the street, a Google Maps kiosk on the corner. The frame itself belongs to your house; the view inside belongs to someone else's server. An <input> element, by contrast, is a mail slot in your front door: each slot is shaped for a specific kind of mail (letters, parcels, tiny cards) and every piece that comes through is labelled with the sender's name so you know where it came from when you open the bag later.

Chapter 1: The <iframe> Element

An <iframe> (inline frame) embeds another HTML document — or any URL — directly inside your page. The browser renders that external document inside the rectangle you define.

Core attributes

Video Embed (YouTube)

Replace VIDEO_ID with the actual YouTube video identifier found in the video's URL.

<iframe
  id="videoFrame"
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allowfullscreen>
</iframe>

• id="videoFrame" — unique handle so you can target this iframe with CSS (#videoFrame { border-radius: 8px; }) or resize it with JavaScript.
• src — must use the /embed/ path for YouTube, not the regular watch URL.
• allowfullscreen — without this, the fullscreen button inside the player is disabled.

Albums Embed (Flickr)

Replace ALBUM_ID with your Flickr photoset identifier.

<iframe
  id="albumFrame"
  src="https://www.flickr.com/photos/ALBUM_ID/player/"
  width="800"
  height="600"
  frameborder="0">
</iframe>

• id="albumFrame" — makes it easy to apply specific styles or scripts to this iframe and only this one, even if the page contains multiple iframes.

Maps Embed (Google Maps)

Replace LOCATION_CODE with the embed parameter string from Google Maps → Share → Embed a map.

<iframe
  id="mapFrame"
  src="https://www.google.com/maps/embed?pb=LOCATION_CODE"
  width="600"
  height="450"
  frameborder="0"
  allowfullscreen>
</iframe>

• id="mapFrame" — useful for interactions such as dynamically resizing the map when the viewport switches to mobile width.
• allowfullscreen — allows visitors to expand the map to full screen for easier navigation.

graph LR
  Browser["Your HTML Page"] -->|renders inside| VF["#videoFrame\n(YouTube)"]
  Browser -->|renders inside| AF["#albumFrame\n(Flickr)"]
  Browser -->|renders inside| MF["#mapFrame\n(Google Maps)"]

Chapter 2: The <input> Tag — Core Types

The <input> tag is a self-closing element that collects data from the user. Its type attribute determines what kind of data it accepts and how the browser renders the control.

Shared attributes across all input types

Text Input

<input
  type="text"
  name="username"
  id="username"
  placeholder="Enter your username"
  value="">

• type="text" — single-line free-form text.
• value="" — starts blank; filled by the user.
• name="username" — this key is what appears in the submitted form data (e.g. username=johndoe).

Radio Buttons

Radio buttons share the same name so only one can be selected at a time.

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

• Sharing name="gender" links the two buttons into a mutually exclusive group.
• value is the data sent to the server when that option is selected (e.g. gender=male).

Checkboxes

Checkboxes with the same name form a group that accepts multiple answers.

<input type="checkbox" name="interest" id="coding" value="coding"> Coding
<input type="checkbox" name="interest" id="music"  value="music">  Music

• name="interest" on both tells the server these are multiple answers to one question.
• Both can be checked simultaneously — unlike radio buttons.

Email

<input
  type="email"
  name="email"
  id="email"
  placeholder="Enter your email"
  value="">

• The browser validates the format (someone@example.com) before allowing submission — no JavaScript needed.

Password

<input
  type="password"
  name="password"
  id="password"
  placeholder="Create a password"
  value="">

• Characters are masked as the user types.
• The value attribute is intentionally left blank so no password is pre-filled.

Submit Button

<input
  type="submit"
  name="submit"
  id="submitBtn"
  value="Register">

• type="submit" tells the browser to package all form fields and send them.
• value="Register" sets the visible label on the button — change this text to change the button's wording.

Chapter 3: Putting It Together

Below is a complete community-event registration page that combines all three iframe embeds with a full input form.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vizag Dev Meetup — Registration</title>
</head>
<body>

  <h1>Vizag Annual Dev Meetup</h1>

  <!-- Venue Map -->
  <h2>Find Us</h2>
  <iframe
    id="mapFrame"
    src="https://www.google.com/maps/embed?pb=LOCATION_CODE"
    width="600"
    height="450"
    frameborder="0"
    allowfullscreen>
  </iframe>

  <!-- Promo Video -->
  <h2>Last Year's Highlights</h2>
  <iframe
    id="videoFrame"
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="560"
    height="315"
    frameborder="0"
    allowfullscreen>
  </iframe>

  <!-- Photo Album -->
  <h2>Photo Gallery</h2>
  <iframe
    id="albumFrame"
    src="https://www.flickr.com/photos/ALBUM_ID/player/"
    width="800"
    height="600"
    frameborder="0">
  </iframe>

  <!-- Registration Form -->
  <h2>Register Now</h2>
  <form action="/register" method="post">

    <label for="username">Name:</label><br>
    <input type="text"     name="username" id="username" placeholder="Enter your name"  value=""><br><br>

    <label for="email">Email:</label><br>
    <input type="email"    name="email"    id="email"    placeholder="Enter your email" value=""><br><br>

    <label for="password">Password:</label><br>
    <input type="password" name="password" id="password" placeholder="Create a password" value=""><br><br>

    <p>Gender:</p>
    <input type="radio" name="gender" id="male"   value="male">   <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label><br><br>

    <p>Interests:</p>
    <input type="checkbox" name="interest" id="coding" value="coding"> <label for="coding">Coding</label>
    <input type="checkbox" name="interest" id="music"  value="music">  <label for="music">Music</label><br><br>

    <input type="submit" name="submit" id="submitBtn" value="Register">

  </form>

</body>
</html>

🧪 Try It Yourself

Task: Build a community event registration page from scratch.

1. Create a new file called event.html.
2. Add three iframes — one for a YouTube promo video, one for a Flickr album, one for a Google Maps embed. Give each a distinct id (videoFrame, albumFrame, mapFrame).
3. Below the iframes, add a <form> containing: a text input for the attendee's name, an email input, a password input, two radio buttons for session preference (e.g. "Morning" / "Afternoon"), two checkboxes for interests, and a submit button labelled "Register".
4. Open the file in your browser.

Success criteria: You should see three embedded frames rendering their content (replace placeholder IDs with real ones from YouTube, Flickr, and Google Maps), and a form beneath them. Clicking Register should cause the browser to attempt a form submission — you'll see the URL update or a network request fire in DevTools.

Starter snippet (name field + submit):

<form action="#" method="post">
  <input type="text"   name="username" id="username" placeholder="Your name" value=""><br>
  <!-- add more inputs here -->
  <input type="submit" name="submit"   id="submitBtn" value="Register">
</form>

🔍 Checkpoint Quiz

Q1. What is the purpose of the frameborder="0" attribute on an <iframe>?

A) It makes the iframe invisible
B) It removes the default visible border around the iframe
C) It prevents the embedded page from loading
D) It disables the fullscreen button

Q2. Given this snippet, what data is sent to the server when a user selects "Female" and submits the form?

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

A) id=female
B) gender=female
C) name=gender
D) value=female

Q3. What is wrong with the following checkbox group if the goal is to allow multiple selections that all answer the question "What are your interests?"

<input type="checkbox" name="coding" id="coding" value="coding"> Coding
<input type="checkbox" name="music"  id="music"  value="music">  Music

A) Checkboxes cannot have value attributes
B) Each checkbox has a different name, so the server receives them as two separate unrelated fields instead of one grouped answer
C) The id attributes must match the name attributes
D) Nothing is wrong

Q4. You are embedding a Google Map and want to allow visitors to expand it to full screen. Which attribute must you add to the <iframe>?

A) fullscreen="true"
B) allowfullscreen
C) expand="yes"
D) controls="fullscreen"

A1. B — frameborder="0" removes the browser's default border line drawn around the iframe rectangle, giving a cleaner look.

A2. B — name is the key in form data; value is the submitted value. The pair gender=female is what reaches the server.

A3. B — When each checkbox has a different name, the server sees them as independent fields. Giving all checkboxes in a group the same name (e.g. name="interest") signals that they represent multiple answers to a single question.

A4. B — The boolean attribute allowfullscreen (no value needed) enables the fullscreen control inside the embedded frame.

🪞 Recap

• <iframe> embeds external content (videos, albums, maps) inside a rectangular frame on your page, controlled by src, width, height, frameborder, and allowfullscreen.
• The id attribute on an iframe gives you a CSS and JavaScript handle to target that specific frame for styling or dynamic behavior.
• The <input> tag's type attribute determines the UI control and data format: text, email, password, radio, checkbox, and submit each serve a distinct purpose.
• name keys the field in submitted form data; id pairs the input with a <label> and enables CSS targeting; placeholder shows ghost hint text; value holds the pre-filled or submitted value.
• Radio buttons sharing the same name form a mutually exclusive group; checkboxes sharing the same name allow multiple selections for one question.

📚 Further Reading

• MDN Web Docs — <iframe> — the source of truth on every iframe attribute and security consideration
• MDN Web Docs — <input> — full reference for all input types including newer ones like date, range, and color
• Google Maps Embed API — official guide to generating correct embed URLs for Google Maps
• ⬅️ Previous: Element Design Based on the Picture Requirement
• ➡️ Next: JavaScript Objects