Chapter 5 – HTML-III: Audio, Video and Forms
---
5.1 Introduction
HTML5 introduced new elements that allow developers to add audio, video, and forms easily to
a webpage without using any external plugins like Flash.
These tags help make web pages more interactive and media-rich.
---
5.2 Inserting Audio
5.2.1 Linking to an Audio Clip
You can create a simple hyperlink to an external audio file using the <a> tag.
<a href="music.mp3">Play Background Music</a>
When the user clicks the link, the browser opens the audio file and plays it.
---
5.2.2 Embedding an Audio Clip using <EMBED> Tag (Old Method)
Older versions of HTML used the <embed> tag to directly embed audio into a webpage.
<embed src="song.mp3" width="200" height="60" autoplay="true" loop="true">
Attributes:
src: Specifies the audio file path.
autoplay: Starts playing automatically when the page loads.
loop: Plays the audio repeatedly.
width / height: Sets the size of the control panel.
⚠️ The <embed> tag is now obsolete in HTML5. Use the <audio> tag instead.
---
5.2.3 Embedding Audio using HTML5 <audio> Tag (Modern Method)
The <audio> tag is used to embed sound files directly into the page.
<audio controls autoplay loop>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Attributes:
controls: Displays play, pause, and volume buttons.
autoplay: Starts playing automatically.
loop: Repeats the audio.
preload: Specifies how the browser should load the audio file (auto, metadata, or none).
---
5.3 Inserting Video
5.3.1 Linking to a Video Clip
<a href="movie.mp4">Watch Video</a>
This opens the video in a new browser tab or window.
---
5.3.2 Embedding a Video using <EMBED> Tag (Old Method)
<embed src="video.mp4" width="400" height="300" autoplay="true">
This method is outdated but still works in some browsers.
---
5.3.3 Embedding a Video using HTML5 <video> Tag (Modern Method)
The <video> tag allows you to embed a video file directly into the webpage.
<video width="500" height="300" controls autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes:
controls: Displays playback controls.
autoplay: Plays automatically when loaded.
loop: Repeats the video.
muted: Starts with sound off.
poster="image.jpg": Displays an image before the video starts.
---
5.4 HTML Forms
HTML forms are used to collect data from users such as login details, feedback, and registration
information.
Basic Syntax
<form action="submit.php" method="post">
<!-- form controls -->
</form>
Attributes:
action: Specifies the page where data will be sent.
method: Determines how data will be sent (get or post).
5.4.1 Controls
Form controls are elements that allow users to input data.
Examples include:
Text boxes
Password fields
Text areas
Radio buttons
Checkboxes
Dropdown lists
Buttons
5.5 How HTML Forms Work
1. The user enters information into form fields.
2. When the Submit button is clicked, the data is sent to the server (using the action page).
3. The server processes the data and sends a response back to the browser.
5.6 Creating Forms
Example of a complete form:
<form action="submit_form.php" method="post">
<label>Name:</label>
<input type="text" name="username"><br><br>
<label>Password:</label>
<input type="password" name="pass"><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<br><br>
<label>Country:</label>
<select name="country">
<option>India</option>
<option>USA</option>
<option>UK</option>
</select><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
---
5.7 Adding Text Input Controls
5.7.1 Creating a Text Box (Single-line)
<input type="text" name="username">
5.7.2 Creating a Password Box
<input type="password" name="password">
5.7.3 Creating a Text Area (Multi-line Input)
<textarea name="message" rows="4" cols="30"></textarea>
---
5.8 Creating Command Buttons
5.8.1 Buttons using <input> Tag
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me">
5.8.2 Buttons using <button> Tag
<button type="button">Click Me</button>
<button type="submit">Submit</button>
5.9 Creating Checkboxes (Multiple Selection)
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
Checkboxes allow users to select multiple options.
5.10 Creating Radio Buttons (Single Selection)
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Radio buttons allow users to select only one option in a group.
5.11 Select Box / Combo Box / Select List
<select name="city">
<option>Delhi</option>
<option>Mumbai</option>
<option>Chennai</option>
</select>
This creates a dropdown list for selection.
5.12 Form Submission
Forms can be submitted to the server using the Submit button.
<form action="submit.php" method="post">
...
<input type="submit" value="Send">
</form>
Method Types:
GET: Sends form data via URL (visible, less secure).
POST: Sends data hidden inside the request (secure).
Summary Table
Concept Tag / Attribute Description
Insert Audio <audio> Embeds sound on webpage
Insert Video <video> Embeds video on webpage
Form <form> Collects user data
Input Field <input> Single-line text or buttons
Text Area <textarea>. Multi-line text input
Dropdown <select> Creates select list
Checkbox <input type="checkbox"> Multiple selections
Radio Button <input type="radio">. Single selection
Submit Button <input type="submit">. Sends form data
Advantages of HTML5 Audio and Video
No need for third-party plugins.
Supported across modern browsers.
Allows multiple file formats (MP3, OGG, MP4, WebM).
Provides user-friendly controls.
