Lecture 6 — Forms & Multimedia

Web Forms

Web forms are interactive elements on web pages that allow users to input data — such as text, choices, or selections — and submit it for processing. A form contains controls (also called widgets) that let users interact with it.

Controls

Input boxes — for inserting text strings and numeric values
Option buttons (radio buttons) — for selecting one value from a small set of predefined options
Selection lists — for selecting from a more extensive list of options
Check boxes — for yes/no or on/off selections
Text area boxes — for entering multi-line text content

Widgets (HTML5)

Spin boxes — integer values within a specified range
Slider controls — numeric values within a range
Calendar controls — for selecting date and time values
Color pickers — for choosing color values

The <form> Tag & Key Attributes

Forms are composed of text-input boxes, clickable buttons, checkboxes, pull-down menus, and more — all placed inside the <form> tag.

action attribute

Gives the URL of the application that receives and processes the form's data. If omitted, the action defaults to the current page.

Example

<form action="/action_page.php">
  <!-- form controls here -->
</form>

method attribute — POST vs GET

Sets how the browser sends form data to the server. Two options:

GET — appends form data to the URL. Fast for small forms, but data is visible in the address bar. Not suitable for sensitive information.
POST — sends data in a separate transmission. Better for large forms or sensitive data like passwords. Supports encryption.

Example

<form action="/action_page.php" method="post"></form>
<form action="/action_page.php" method="get"></form>

name attribute

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that field will not be sent at all.

Text Input & The <label> Element

<input type="text"> defines a one-line text input field. The default width is 20 characters.

Syntax

<input type="text"
       id="identifier"
       name="fieldname"
       placeholder="hint text"
       size="box-width"
       maxlength="max-characters">

The <label> Element

Defines a label for a form element — important for screen-reader accessibility.
Clicking the label text toggles its linked radio button or checkbox, improving usability for small targets.
The for attribute of <label> must match the id of the input to bind them.

Example

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

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

Live Output

HTML Input Types

type="password"

<input type="password"> masks the characters the user types.

Example

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

Live Output

type="radio"

Radio buttons let a user select only one option from a group. All buttons in a group share the same name. Add checked to pre-select one.

Example

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

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

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

Live Output

type="checkbox"

Checkboxes let a user select zero or more options. Unlike radio buttons, multiple checkboxes in a group can all be selected simultaneously.

Example

<form>
  <input type="checkbox" id="bike" name="vehicle1" value="Bike">
  <label for="bike">I have a bike</label>

  <input type="checkbox" id="car" name="vehicle2" value="Car">
  <label for="car">I have a car</label>
</form>

Live Output

type="submit" & type="reset"

type="submit" sends the form data to the handler specified in action. type="reset" clears all fields back to their default values.

Example

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

Live Output

HTML5 Input Types

HTML5 introduced many new input types including color, date, email, number, range, tel, and more. Browsers that don't support them fall back to type="text".

Example — type="color"

<label for="favcolor">Pick a color:</label>
<input type="color" id="favcolor" name="favcolor">

Live Output

Key Input Attributes

Attribute	Description	Example
`value`	Sets the initial (default) value of the field.	`value="Nicole"`
`placeholder`	Displays hint text inside the field when empty.	`placeholder="Enter name"`
`readonly`	Field is visible but cannot be edited by the user.	`readonly`
`disabled`	Field is greyed out, unusable, and its value is not submitted.	`disabled`
`size`	Sets the visible width of the input in characters.	`size="30"`
`maxlength`	Limits the maximum number of characters a user can type.	`maxlength="50"`
`required`	Prevents form submission if the field is left empty (HTML5).	`required`

The difference between readonly and disabled: readonly fields are still submitted with the form; disabled fields are not sent at all.

The <select> Element & <textarea>

<select> — Drop-down List

The <select> element creates a drop-down menu. Each <option> defines one item. Add the selected attribute to pre-select an option. Use multiple to allow multiple selections.

Example

<select name="movies" id="movies">
  <option value="Ten">Ten Things I Hate About You</option>
  <option value="Fifty" selected>Fifty First Dates</option>
  <option value="Dreams">What Dreams May Come</option>
</select>

Live Output

<textarea> — Multi-line Input

Creates a resizable multi-line text entry area. The rows attribute sets visible lines; cols sets the visible width. You can also control size with CSS.

Example

<textarea id="message" name="message" rows="4" cols="40">
  Type your message here...
</textarea>

Live Output

The <fieldset> & <legend> Elements

<fieldset> groups related form controls together, drawing a visible box around them.
<legend> defines a caption for the fieldset, displayed at the top-left of the box.

Example

<form>
  <fieldset>
    <legend>Personal Information:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" value="Nicole">
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" value="Pascual">
    <input type="submit" value="Submit">
  </fieldset>
</form>

Live Output

Creating Effective Forms

Browser Constraints

Adjust the size of text-input fields to hint at expected input length (e.g., a 5-character zip code field).
Use checkboxes, radio buttons, and selection lists to narrow down user choices where possible.

User-Interface Considerations

Group related input elements logically so the brain can process the form in chunks.
Use consistent, well-written labels to guide the user and reinforce the form's goal.
Avoid wide input elements that force horizontal scrolling on small screens.

Creating Forms That Flow

Lead the user naturally through the process. Ask for the name before the address. Test your form on multiple browsers and have others fill it out to identify pain points.

Multimedia Overview & Formats

Multimedia on the web includes sound, music, videos, movies, and animations. Multimedia elements are stored in media files identified by their file extensions. Browser support for these formats has evolved significantly — early browsers only supported text, then came colors and images, and eventually audio and video.

Audio Formats

Format	Extension	Description
MP3	`.mp3`	The most popular audio format for music players. Good compression with high quality. Supported by all browsers.
MP4	`.mp4`	Primarily a video format, but also supports audio. Automatically supported in all browsers.
Ogg	`.ogg`	Developed by the Xiph.Org Foundation. Supported by HTML5 browsers (not Safari).
AAC	`.aac`	Developed by Apple as the default iTunes format. Plays well on Apple devices.
MIDI	`.mid / .midi`	Stores digital notes for electronic music devices. Does not contain actual recorded sound.

Video Formats

Format	Extension	Description
MP4	`.mp4`	The recommended internet video format. Supported by all HTML5 browsers and YouTube. Developed by the Moving Pictures Expert Group.
WebM	`.webm`	Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML5 (Chrome, Firefox).
Ogg	`.ogg`	Developed by Xiph.Org Foundation. Supported by HTML5 (Chrome, Firefox).

The HTML <audio> Element

Before HTML5, audio required a browser plug-in (like Flash). The <audio> element provides a standard way to embed audio directly in a web page.

The controls attribute adds a play/pause/volume interface to the page.
The <source> element lets you specify multiple audio files — the browser picks the first format it supports.
Text between <audio> and </audio> only displays in browsers that don't support the element.

Example

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

Browser Support

Browser	MP3	WAV	Ogg
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Internet Explorer	YES	NO	NO

The HTML <video> Element

The HTML5 <video> element embeds video directly in a web page without plugins. MP4 is the recommended format as it is supported by all HTML5 browsers and YouTube.

Always include width and height attributes to prevent the page from flickering while the video loads.
The controls attribute adds play, pause, and volume controls.
Add autoplay to start the video automatically — note it does not work on mobile devices.
Use multiple <source> elements to provide fallback formats.

Example

<video width="320" height="240" controls>
  <source src="video/Feast.mp4" type="video/mp4">
  <source src="video/Feast.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Autoplay Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

Browser Support

Browser	MP4	WebM	Ogg
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Internet Explorer	YES	NO	NO

Live Music Player Demo

The browser's built-in audio player renders automatically when controls is present. It includes a play/pause button, a scrubber, current time, duration, and a volume knob — no JavaScript needed.

Code

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

Live Output — click ▶ to play

Sample: horse.mp3 — sourced from W3Schools public demo files

Adding Multiple Sources

Always list MP3 first (supported by every browser), followed by Ogg as a fallback for older Firefox/Opera versions. The browser stops at the first format it recognises.

Audio & Video Playback Attributes

Both <audio> and <video> share a common set of playback attributes that control how media behaves when the page loads.

Attribute	Applies To	Effect
`controls`	audio, video	Displays the browser's default player UI (play, pause, volume, scrubber).
`autoplay`	audio, video	Starts playback automatically when the page loads. Modern browsers block this unless `muted` is also set.
`muted`	audio, video	Mutes the media on load. Required by most browsers to allow `autoplay`.
`loop`	audio, video	Restarts playback from the beginning when it reaches the end.
`poster`	video only	Sets a still image to display before the video starts (like a thumbnail).
`preload`	audio, video	Hints to the browser whether to load the file on page load. Values: `none`, `metadata`, `auto`.
`width` / `height`	video only	Sets the pixel dimensions of the video box. Always include to prevent page reflow while loading.

Autoplay + Muted + Loop Example

Code

<video width="320" height="240"
       autoplay muted loop
       poster="images/thumbnail.jpg">
  <source src="video/clip.mp4" type="video/mp4">
</video>

Browsers like Chrome and Firefox block autoplay with sound to prevent surprise audio. Always pair autoplay with muted if you want it to work reliably — this is the standard pattern for hero background videos.

Live Video Player Demo

The <video> element renders the browser's native video player — includes play/pause, fullscreen, volume, picture-in-picture, and a progress bar, all for free via the controls attribute.

Code

<video width="400" controls>
  <source src="video/bbb.mp4"  type="video/mp4">
  <source src="video/bbb.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Live Output — click ▶ to play

Sample: Big Buck Bunny clip (mov_bbb.mp4) — sourced from W3Schools public demo files

With Poster Image

The poster attribute displays a custom thumbnail before the user presses play — exactly like a YouTube thumbnail. Without it, the browser shows the first frame of the video (or a blank black box while loading).

Code

<video width="400" controls
       poster="images/video-thumbnail.jpg">
  <source src="video/clip.mp4" type="video/mp4">
</video>

Embedding YouTube with <iframe>

You cannot embed a YouTube video using <video> — YouTube serves its own player. Instead, use an <iframe> with the special embed URL found under Share › Embed on any YouTube video.

Embed URL Format

Replace the normal watch URL youtube.com/watch?v=ID with the embed version: youtube.com/embed/ID. The video ID is the string after v= in the standard URL.

Code

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/tgbNymZ7vqY"
  title="YouTube video player"
  allowfullscreen>
</iframe>

Live Output

iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"

Useful YouTube Embed Parameters

Parameter	Example	Effect
`autoplay`	`?autoplay=1`	Starts the video automatically (requires `mute=1` in most browsers).
`mute`	`&mute=1`	Mutes the video on load.
`loop`	`&loop=1`	Loops the video continuously.
`controls`	`&controls=0`	Hides the YouTube player controls (0 = hidden).
`start`	`&start=30`	Starts playback at the given number of seconds.

Example with Parameters

<iframe
  src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&loop=1"
  width="560" height="315" allowfullscreen>
</iframe>

HTML Helpers — <object> & <embed>

Before <audio> and <video> existed, developers used helper applications (plug-ins like Flash) to play media. Two HTML elements activate them.

The <object> Element

The original way to embed external content — PDFs, Flash, audio, video, and even other web pages. The data attribute points to the file; type declares the MIME type. Content placed inside the tags serves as fallback if the browser cannot render the object.

Syntax

<object data="filename.ext" type="MIME/type"
        width="400" height="300">
  Fallback content shown if the browser cannot display the object.
</object>

Examples

<!-- Embed a PDF -->
<object data="report.pdf" type="application/pdf" width="600" height="400"></object>

<!-- Embed an audio file -->
<object data="audio/horse.mp3" type="audio/mpeg"></object>

The <embed> Element

<embed> is a self-closing alternative to <object>. It has no closing tag and no fallback content. Originally a non-standard extension, it is now officially part of HTML5.

Syntax

<embed src="filename.ext" type="MIME/type"
       width="400" height="300">

Examples

<!-- Embed an audio file -->
<embed src="audio/horse.mp3" type="audio/mpeg">

<!-- Embed a video file -->
<embed src="video/movie.mp4" type="video/mp4"
       width="400" height="300">

Comparison — All Embedding Methods

Element	Fallback Content	Self-closing	Best Used For
`<audio>`	YES	NO	Music, sound effects, podcasts
`<video>`	YES	NO	Video files hosted on your own server
`<iframe>`	YES	NO	YouTube, Google Maps, external content
`<object>`	YES	NO	PDFs, legacy plug-in content
`<embed>`	NO	YES	Simple plug-in embeds; legacy use

Forms & Multimedia

HTML Forms

HTML Multimedia