Unit 3: Forms & Multimedia Integration

Interactive Study Guide & Component Sandbox

Configure form attributes (action, method, enctype) and choose GET vs POST appropriately
Use all 15+ HTML input types and explain their appropriate use cases
Draw shapes and text on an HTML Canvas using the 2D API
Embed audio and video with fallback sources using HTML5 multimedia elements

1. Form Attributes — Controlling Data Transmission

The <form> element wraps interactive controls. Key attributes shape how data travels to the server:

Attribute	Values	Purpose
action	URL	Where to send the form data
method	GET / POST	HTTP verb. GET = data in URL, POST = data in body
enctype	application/x-www-form-urlencoded / multipart/form-data / text/plain	Encoding for the body (use `multipart/form-data` for file uploads)
autocomplete	on / off	Whether the browser can auto-fill fields
novalidate	— (boolean)	Bypass built-in HTML5 validation
target	_self / _blank / _parent / _top	Where to display the response after submission

2. HTML Input Types — Complete Reference

The <input> element's type attribute defines its behavior and appearance. HTML5 introduced many new types for better semantics and mobile-friendly UIs.

text

Single-line text

password

Masked text entry

Email address

number

Numeric input

tel

Telephone number

url

Website URL

Search field

color

Color picker

date

Date picker

range

Slider control

checkbox

Boolean toggle

radio

Single select

file

File upload

hidden

Invisible data

submit

Submit button

<input type="email" placeholder="name@example.com" required>
<input type="range" min="0" max="100" value="50">
<input type="file">

3. Live Form Sandbox — GET vs POST

Form Methods in Practice:

A <form> element is a container for interactive controls that allow users to submit information to a web server.

GET: Appends form data to the URL as query parameters (?key=value). Visible in the address bar, limited length (~2000 chars), used for searches/filters.
POST: Places data inside the HTTP request body. Not visible in the URL, no length limit, used for sensitive or large data (logins, file uploads).

Live Form Sandbox

// Intercepted HTTP Request Payload:

Awaiting form submission...

<form id="studyForm">
  <div class="form-group">
    <label>Student Name</label>
    <input type="text" name="student_name" required>
  </div>
  <div class="form-group">
    <label>University Branch</label>
    <select name="branch">
      <option value="CSE">Computer Science</option>
      <option value="ECE">Electronics</option>
      <option value="ME">Mechanical</option>
    </select>
  </div>
  <button type="submit">Execute Submit Event</button>
</form>

<script>
document.getElementById('studyForm')
  .addEventListener('submit', (e) => {
    e.preventDefault();
    // Intercept and display form data
  });
</script>

4. Multimedia Integration — Audio, Video & Canvas

HTML5 introduced native multimedia elements that eliminate the need for plugins like Flash.

<audio> — Embeds sound. Key attributes: controls, autoplay, loop, muted, preload, src.
<video> — Embeds video. Same audio attributes plus width, height, poster (thumbnail before play).
<source> — Provides multiple format fallbacks inside <audio>/<video>.
<canvas> — A 2D bitmap drawing surface controlled entirely via JavaScript's Canvas API.

Audio/Video Attributes Reference

Attribute	Audio	Video	Description
`controls`	✓	✓	Show built-in play/pause/volume UI
`autoplay`	✓	✓	Start playing automatically
`loop`	✓	✓	Restart when finished
`muted`	✓	✓	Start with sound off
`preload`	✓	✓	Hint: none/metadata/auto
`poster`	—	✓	Thumbnail image before play
`width/height`	—	✓	Dimensions in pixels

Syntax Pattern:

<video controls width="400" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Fallback text here.
</video>

Canvas Drawing Studio

Click a tool, then draw on the canvas. The Canvas 2D API executes immediately.

Color:

Generated Canvas Code:

// Color picker connects via getCanvasColor()
const color = document.getElementById('canvasColor').value;

// Rect: ctx.fillRect() with color from picker
ctx.fillStyle = color;
ctx.fillRect(10, 10, 100, 80);

// Circle: ctx.beginPath() + ctx.arc() + ctx.fill() + ctx.stroke()
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.stroke();

// Line: ctx.beginPath() + ctx.moveTo() + ctx.lineTo() + ctx.stroke()
ctx.beginPath();
ctx.moveTo(300, 20);
ctx.lineTo(350, 180);
ctx.stroke();

// Free draw (on mousemove):
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(currentX, currentY);
ctx.stroke();

5. Architectural Differences: HTML vs XHTML

Theory & Concepts:

XHTML (Extensible HyperText Markup Language) was an attempt to make HTML stricter by enforcing XML rules. While modern web development primarily uses HTML5, understanding XHTML teaches strict coding discipline.

Rule Parameter	HTML (Forgiving)	XHTML (Strict)
Tag Case	Case-insensitive (`<DIV>` is valid)	Must be lowercase (`<div>`)
Closing Tags	Often optional (e.g., `<p>`, `<li>`)	Mandatory. Every element must close.
Empty Elements	`<br>`, `<img src="...">`	Must be self-closed: `<br />`, `<img />`
Attributes	Quotes optional, can be minimized (`<input disabled>`)	Must be quoted and explicitly defined (`<input disabled="disabled" />`)

Regular Expressions for Form Validation

The pattern attribute lets you validate input against a regular expression without writing JavaScript:

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
<input type="email" pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
<input type="tel" pattern="[0-9]{10}" title="10-digit phone">

The browser shows the title text as a validation message if the pattern doesn't match. Use CSS pseudo-classes :valid and :invalid to style fields:

input:valid { border-color: #10b981; }
input:invalid { border-color: #ef4444; }

FormData API

Modern JavaScript provides the FormData API to build and transmit form data programmatically — no HTML form element needed:

const fd = new FormData();
fd.append("name", "Jane Doe");
fd.append("avatar", fileInput.files[0]);

fetch("/api/register", {
    method: "POST",
    body: fd  // Content-Type auto-set to multipart/form-data
});

FormData handles both text fields and file uploads. It automatically sets the correct Content-Type header including the boundary string for multipart encoding.