HTML Forms & Media

advanced

What You'll Learn

Theory

HTML provides powerful elements for user interaction, media embedding, and document metadata. These features transform static pages into dynamic experiences.

Forms

Forms collect user input using <form>, <input>, <textarea>, <select>, and <button>. The action attribute defines where data is sent, and method specifies how (GET or POST). Each input should have a <label> for accessibility.

Media Elements

<img> — embeds images with src and alt attributes
<audio> — plays audio files with controls for playback UI
<video> — plays video files with controls, width, and height

Head Metadata

The <head> section holds critical metadata: <title> for the browser tab, <meta name="description"> for search snippets, and <meta charset="UTF-8"> for character encoding.

Why this matters

Forms and media elements turn static HTML pages into interactive experiences. Whether it's a contact form, an image gallery, or a video tutorial, these features are essential for engaging users on the modern web.

What's next

In the next lessons, you'll dive deeper into each topic with hands-on examples and exercises.

Form with Input Fields

html

Exercises

Build a Sign-Up Form

easy

Create a sign-up form with fields for username, email, password, and a submit button. Each field must have a label.

Expected Output:

A sign-up form with labeled input fields for username, email, password, and a submit button.