HTML Adding Multimedia Elements and Forms Exercise Solutions | KalviGavani

HTML Adding Multimedia Elements and Forms: Exercise Solutions

How to Use This Page

Read the Samacheer Kalvi textbook chapter first. Then use this page to revise: attempt the textbook questions on your own, then compare with the model answers below. Pay special attention to the Common Mistakes section and the Exam Checklist before your test.

---

Key Concepts (Quick Recap)

---

I. Choose the Correct Answer (MCQ)

Q1. The tag used to insert an image in HTML is _________.

(a) <image> (b) <img> ✓ (c) <pic> (d) <photo>

---

Q2. The attribute of the <img> tag that specifies the alternative text is _________.

(a) title (b) src (c) alt ✓ (d) text

---

Q3. Which input type is used to create a password field?

(a) text (b) password ✓ (c) hidden (d) secure

---

Q4. The <form> tag attribute that specifies where to send form data is _________.

(a) method (b) action ✓ (c) name (d) target

---

Q5. Which input type creates a radio button?

(a) checkbox (b) radio ✓ (c) option (d) select

---

Q6. The <select> tag is used to create _________.

(a) A text field (b) A drop-down list ✓ (c) A checkbox (d) A radio button

---

Q7. The method attribute of the <form> tag can have the values _________.

(a) GET or POST ✓ (b) SEND or RECEIVE (c) PUT or DELETE (d) GET or SEND

---

Q8. To make a video start playing automatically, which attribute is used?

(a) controls (b) loop (c) autoplay ✓ (d) start

---

Q9. Which attribute makes an audio file play repeatedly?

(a) repeat (b) loop ✓ (c) autoplay (d) restart

---

Q10. The <textarea> tag is used for _________.

(a) Single-line text input (b) Multi-line text input ✓ (c) Password input (d) Submit button

---

II. Very Short Answer Questions (2 Marks)

Q1. How do you insert an image in HTML?

<img src="photo.jpg" alt="A scenic view">

Common attributes:

• src — Path or URL of the image (required)
• alt — Alternative text displayed if the image cannot load (required for accessibility)
• width and height — Dimensions of the image in pixels or percentage

The <img> tag is an empty tag and does not require a closing tag.

---

Q2. What is the purpose of the alt attribute in the <img> tag?

1. Accessibility: Screen readers read the alt text for visually impaired users. 2. Image not loaded: Displays text if the image URL is broken or the image fails to load. 3. Search engine optimization: Search engines use alt text to understand image content. 4. Slow connections: Users on slow connections see the alt text before the image downloads.

Example: <img src="logo.png" alt="Company Logo">

---

Q3. What is the <audio> tag?

<audio src="song.mp3" controls></audio>

Or with multiple sources for browser compatibility:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

Common attributes: controls (shows play/pause buttons), autoplay (plays automatically), loop (repeats), and muted (starts muted).

---

Q4. What is the difference between the GET and POST methods?

GET is suitable for non-sensitive data like search queries. POST is suitable for passwords, large forms, and file uploads.

---

Q5. What is the <select> tag used for?

<select name="city">
  <option value="chennai">Chennai</option>
  <option value="madurai">Madurai</option>
  <option value="coimbatore">Coimbatore</option>
</select>

The value attribute of the selected <option> is sent when the form is submitted. The selected attribute can be used to pre-select an option.

---

Q6. What is the purpose of the <label> tag?

It can be associated with a form control in two ways:

1. Using the for attribute: The label's for attribute matches the input's id:

   <label for="email">Email:</label>
   <input type="email" id="email" name="email">

2. Wrapping the input inside the label:

   <label>Email: <input type="email" name="email"></label>

Using <label> improves accessibility for screen readers and makes forms easier to use on mobile devices.

---

III. Short Answer Questions (3 Marks)

Q1. Explain the <img> tag with all its attributes.

Attributes:

1. src (required): Specifies the path or URL of the image.

   <img src="images/photo.jpg">

2. alt (required): Provides alternative text displayed when the image cannot load.

   <img src="photo.jpg" alt="Sunset over the ocean">

3. width: Sets the width of the image in pixels or as a percentage.

   <img src="photo.jpg" alt="Photo" width="300">

4. height: Sets the height of the image in pixels or as a percentage.

   <img src="photo.jpg" alt="Photo" height="200">

5. title: Displays a tooltip when the user hovers over the image.

   <img src="photo.jpg" alt="Photo" title="Click to enlarge">

6. border: Sets the thickness of the border around the image (in pixels).

   <img src="photo.jpg" alt="Photo" border="2">

7. align: Specifies the alignment of the image (left, right, center, top, middle, bottom).

   <img src="photo.jpg" alt="Photo" align="right">

Combined example:

<img src="school.jpg" alt="School Building" width="400" height="300" border="1" align="center" title="Our School">

---

Q2. Explain the different input types in HTML forms.

1. text: Single-line text input (default type).

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

2. password: Masked text input — characters are shown as dots/asterisks.

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

3. radio: Single-selection button — only one option from a group can be selected (same name attribute).

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

4. checkbox: Multiple-selection boxes — multiple options can be selected.

   <input type="checkbox" name="hobby" value="reading"> Reading
   <input type="checkbox" name="hobby" value="sports"> Sports

5. submit: A button that submits the form data.

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

6. reset: A button that resets all form fields to their default values.

   <input type="reset" value="Clear Form">

7. button: A clickable button (typically used with JavaScript).

   <input type="button" value="Click Me" onclick="alert('Hello')">

8. email: Validates that the input is a valid email format.

   <input type="email" name="email" placeholder="[email protected]">

9. number: Accepts only numeric input with optional min/max/step.

   <input type="number" name="age" min="1" max="100">

10. date: Provides a date picker for selecting dates.

    <input type="date" name="dob">

11. file: Allows the user to select and upload a file.

    <input type="file" name="document">

12. hidden: A hidden field not displayed but sent with the form data.

    <input type="hidden" name="id" value="12345">

---

Q3. Explain the <video> tag with attributes and examples.

Basic syntax:

<video src="movie.mp4" controls></video>

With multiple sources (for browser compatibility):

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Attributes:

1. src: Specifies the video file path or URL. 2. controls: Adds play, pause, volume, and fullscreen controls to the video. 3. autoplay: Starts playing the video automatically when the page loads. 4. loop: Makes the video play again from the beginning when it reaches the end. 5. muted: Starts the video with sound off. 6. width and height: Sets the dimensions of the video player in pixels. 7. poster: Specifies an image to display before the video starts playing.

Example with all attributes:

<video src="intro.mp4" controls autoplay loop muted width="640" height="360" poster="thumbnail.jpg">
  Your browser does not support the video tag.
</video>

The text between the <video> tags is displayed only if the browser does not support the video element.

---

Q4. Explain the <textarea> and <select> tags with examples.

<textarea> Tag: The <textarea> tag creates a multi-line text input area. It is useful for collecting longer text such as comments, addresses, or feedback.

Attributes:

• name — Identifies the field when the form is submitted
• rows — Sets the visible number of lines (height)
• cols — Sets the visible width in characters
• placeholder — Shows hint text inside the textarea

Example:

<textarea name="comments" rows="5" cols="40" placeholder="Enter your comments here">
</textarea>

<select> Tag: The <select> tag creates a drop-down list. Each option is defined by the <option> tag.

Attributes:

• name — Identifies the field when the form is submitted
• multiple — Allows multiple selections (displays as a list instead of a drop-down)
• size — Number of visible options

Example:

<select name="state">
  <option value="">--Select State--</option>
  <option value="TN">Tamil Nadu</option>
  <option value="KA">Karnataka</option>
  <option value="KL">Kerala</option>
  <option value="AP">Andhra Pradesh</option>
</select>

The selected attribute pre-selects an option:

<option value="TN" selected>Tamil Nadu</option>

---

Q5. Explain the attributes of the <form> tag.

Attributes:

1. action: Specifies the URL of the server-side script that will process the form data.

   <form action="process.php">

2. method: Specifies the HTTP method for sending form data.

• GET — Appends form data to the URL. Suitable for non-sensitive, short data.
• POST — Sends form data in the HTTP body. Suitable for sensitive or large data.

   <form action="process.php" method="POST">

3. name: Assigns a name to the form for identification.

   <form name="registrationForm">

4. target: Specifies where to display the response after submission.

• _self — Same tab (default)
• _blank — New tab or window

   <form action="process.php" target="_blank">

5. enctype: Specifies how form data should be encoded before sending.

• application/x-www-form-urlencoded — Default for most forms
• multipart/form-data — Required for file uploads
• text/plain — Sends data as plain text

   <form action="upload.php" method="POST" enctype="multipart/form-data">

6. autocomplete: Controls whether the browser can auto-fill form fields.

   <form autocomplete="on">

---

IV. Long Answer Questions (5 Marks)

Q1. Create an HTML registration form with various input types.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Student Registration Form</title>
  </head>
  <body>
    <h1>Student Registration Form</h1>
    <hr>

    <form action="register.php" method="POST">

      <!-- Text Input -->
      <fieldset>
        <legend>Personal Information</legend>

        <label for="fname">First Name:</label><br>
        <input type="text" id="fname" name="firstname" placeholder="Enter first name" required>
        <br><br>

        <label for="lname">Last Name:</label><br>
        <input type="text" id="lname" name="lastname" placeholder="Enter last name" required>
        <br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" placeholder="[email protected]" required>
        <br><br>

        <label for="pwd">Password:</label><br>
        <input type="password" id="pwd" name="password" required>
        <br><br>

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

        <label for="dob">Date of Birth:</label><br>
        <input type="date" id="dob" name="dob">
        <br><br>

        <label for="age">Age:</label><br>
        <input type="number" id="age" name="age" min="10" max="25">
        <br><br>

        <label for="photo">Photo:</label><br>
        <input type="file" id="photo" name="photo" accept="image/*">
      </fieldset>
      <br>

      <fieldset>
        <legend>Academic Information</legend>

        <label for="class">Class:</label><br>
        <select id="class" name="class">
          <option value="">--Select Class--</option>
          <option value="11">Class 11</option>
          <option value="12">Class 12</option>
        </select>
        <br><br>

        <label for="group">Group:</label><br>
        <select id="group" name="group">
          <option value="">--Select Group--</option>
          <option value="cs">Computer Applications</option>
          <option value="comm">Commerce</option>
          <option value="bio">Biology</option>
        </select>
        <br><br>

        <label>Subjects:</label><br>
        <input type="checkbox" id="tamil" name="subjects" value="tamil">
        <label for="tamil">Tamil</label>
        <input type="checkbox" id="english" name="subjects" value="english">
        <label for="english">English</label>
        <input type="checkbox" id="maths" name="subjects" value="maths">
        <label for="maths">Mathematics</label>
        <br><br>

        <label for="marks">Previous Mark %:</label><br>
        <input type="number" id="marks" name="marks" min="0" max="100" step="0.1">
      </fieldset>
      <br>

      <fieldset>
        <legend>Additional Information</legend>

        <label for="address">Address:</label><br>
        <textarea id="address" name="address" rows="4" cols="40" placeholder="Enter your full address"></textarea>
        <br><br>

        <label for="state">State:</label><br>
        <select id="state" name="state">
          <option value="">--Select State--</option>
          <option value="TN">Tamil Nadu</option>
          <option value="KA">Karnataka</option>
          <option value="KL">Kerala</option>
        </select>
        <br><br>

        <input type="hidden" name="formid" value="REG2024">
      </fieldset>
      <br>

      <input type="submit" value="Register">
      <input type="reset" value="Clear Form">

    </form>
  </body>
</html>

This form demonstrates:

• text — for name inputs
• email — with validation
• password — masked input
• radio — single selection (gender)
• date — date picker (DOB)
• number — with min/max (age, marks)
• file — for photo upload
• select — drop-down lists (class, group, state)
• checkbox — multiple selections (subjects)
• textarea — multi-line input (address)
• hidden — hidden form data (formid)
• submit and reset — form buttons
• fieldset and legend — grouping related fields

---

Q2. Explain how to add images, audio, and video in HTML with all attributes.

1. Adding Images (<img>): The <img> tag embeds images in a web page. It is an empty tag.

<img src="school.jpg" alt="School Building" width="500" height="300" border="2" align="center" title="Our School">

Attributes:

• src (required) — Path or URL of the image file. Can be a relative path (images/photo.jpg) or absolute URL (https://example.com/photo.jpg).
• alt (required) — Alternative text shown when the image cannot load.
• width — Image width in pixels or percentage.
• height — Image height in pixels or percentage.
• border — Border thickness around the image (in pixels).
• align — Image alignment: left, right, center, top, middle, bottom.
• title — Tooltip text displayed on hover.
• hspace — Horizontal space (margin) around the image.
• vspace — Vertical space (margin) around the image.

Image as a hyperlink:

<a href="https://www.example.com">
  <img src="logo.png" alt="Click to visit">
</a>

2. Adding Audio (<audio>): The <audio> tag embeds sound content. It supports MP3, WAV, and OGG formats.

<audio src="song.mp3" controls autoplay loop>
  Your browser does not support the audio element.
</audio>

Or with multiple sources:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Attributes:

• src — Path or URL of the audio file.
• controls — Displays play/pause, volume, and progress controls.
• autoplay — Starts playing automatically when the page loads.
• loop — Repeats the audio when it reaches the end.
• muted — Starts the audio muted.
• preload — Specifies how the audio should be loaded: auto, metadata, none.

The <source> tag inside <audio> allows multiple formats for browser compatibility. The text between the audio tags is shown if the browser does not support the element.

3. Adding Video (<video>): The <video> tag embeds video content. It supports MP4, WebM, and OGG formats.

<video src="lecture.mp4" controls width="640" height="360" poster="thumbnail.jpg">
  Your browser does not support the video tag.
</video>

Or with multiple sources:

<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="lecture.mp4" type="video/mp4">
  <source src="lecture.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Attributes:

• src — Path or URL of the video file.
• controls — Displays play/pause, volume, progress, and fullscreen controls.
• autoplay — Starts playing automatically.
• loop — Repeats the video when it ends.
• muted — Starts the video muted.
• width and height — Dimensions of the video player.
• poster — Image displayed before the video starts playing.
• preload — Specifies how the video should be loaded: auto, metadata, none.

---

Q3. Explain HTML forms in detail with all form elements and their attributes.

The <form> Tag:

<form action="process.php" method="POST" enctype="multipart/form-data">
  <!-- Form elements go here -->
</form>

Key attributes:

• action — URL of the script that processes the form data.
• method — GET (data in URL) or POST (data in body).
• enctype — Encoding type; use multipart/form-data for file uploads.
• target — Where to show the response (_self, _blank).
• autocomplete — on/off for browser auto-fill.

Form Elements:

<input type="text" name="username" placeholder="Enter name" maxlength="30" required>
<input type="password" name="pwd" required>
<input type="email" name="email" required>
<input type="number" name="age" min="1" max="100">
<input type="date" name="dob">
<input type="tel" name="phone" pattern="[0-9]{10}">
<input type="url" name="website">
<input type="file" name="document" accept=".pdf,.doc">
<input type="hidden" name="id" value="12345">

<!-- Radio buttons (single selection) -->
<input type="radio" name="gender" value="male" id="m"> <label for="m">Male</label>
<input type="radio" name="gender" value="female" id="f"> <label for="f">Female</label>

<!-- Checkboxes (multiple selections) -->
<input type="checkbox" name="hobby" value="reading" id="r"> <label for="r">Reading</label>
<input type="checkbox" name="hobby" value="sports" id="s"> <label for="s">Sports</label>

<textarea name="address" rows="4" cols="40" placeholder="Enter address"></textarea>

<select name="city">
  <option value="">--Select City--</option>
  <option value="chennai">Chennai</option>
  <option value="madurai">Madurai</option>
  <option value="coimbatore" selected>Coimbatore</option>
</select>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="myFunction()">Click Me</button>

<fieldset>
  <legend>Personal Details</legend>
  <!-- Form controls for personal details -->
</fieldset>

---

Common Mistakes to Avoid

• Forgetting the alt attribute on <img> tags — it is required for accessibility and SEO.
• Using <img> with a closing tag (</img>) — <img> is an empty tag and does not need one.
• Confusing src (for images) with href (for links) — <img src="..."> vs <a href="...">.
• Forgetting to give radio buttons the same name attribute — without it, multiple selections are possible.
• Not using enctype="multipart/form-data" on forms with file uploads.
• Using method="GET" for sensitive data like passwords — always use method="POST".
• Forgetting the name attribute on form controls — without it, data is not sent to the server.
• Confusing <select> (drop-down) with radio buttons — use <select> for long lists, radio buttons for short lists.
• Not including the controls attribute on <audio> and <video> — without it, users cannot play or pause the media.
• Writing <input type="radio"> with different name values when you want a single-selection group.
• Forgetting to close <textarea> — it is a container tag and needs </textarea>.
• Confusing value (sent to server) with the text shown inside <option> tags.

Exam Checklist

• [ ] Can insert images using <img> with src, alt, width, height attributes
• [ ] Can create an image as a hyperlink
• [ ] Can embed audio using <audio> with controls, autoplay, loop attributes
• [ ] Can embed video using <video> with controls, width, height, poster attributes
• [ ] Can use <source> for multiple audio/video formats
• [ ] Can create a form with <form action="" method="">
• [ ] Know the difference between GET and POST methods
• [ ] Can use all input types: text, password, radio, checkbox, submit, reset, email, number, date, file, hidden
• [ ] Can create <textarea> for multi-line input
• [ ] Can create <select> drop-down lists with <option> tags
• [ ] Can use <label> to associate labels with form controls
• [ ] Can use <fieldset> and <legend> to group form elements
• [ ] Know form attributes: name, value, placeholder, required, readonly, disabled, maxlength
• [ ] Can use enctype="multipart/form-data" for file uploads
• [ ] Understand the role of the value attribute in radio buttons and checkboxes