🚀
Final Module: Forms
This is the last phase of HTML Fundamentals. 9 lessons on forms, then you'll have completed all 35 lessons.
📝 Phase 8 · Forms🟢 BeginnerMODULE 27
Forms Introduction
Course progress77%
🎯 What you'll learn: The
<form> element, action and method, and grouping related fields with <fieldset>/<legend>.
Section 1
The form Element
<form> wraps every input that should be submitted together. Two key attributes control what happens on submit: action (where the data goes) and method (how it's sent).
form-basic.html
HTML
<form action="/submit-contact" method="POST"> <!-- inputs go here --> <button type="submit">Send</button> </form>
| method | Behavior |
|---|---|
GET | Data appended to the URL — visible, bookmarkable, only for non-sensitive searches/filters |
POST | Data sent in the request body — not visible in the URL, used for anything that changes data (signup, contact forms, payments) |
Section 2
fieldset & legend — Grouping Related Fields
<fieldset> visually and semantically groups related inputs. <legend> is its caption — announced by screen readers before each field in the group, giving context (like "Shipping Address: Street" instead of just "Street").
fieldset.html
HTML
<fieldset> <legend>Shipping Address</legend> <label for="street">Street</label> <input id="street" type="text"> </fieldset>
Section 3
Why Never Skip label
Every input needs an associated <label> — connected via matching for/id. Placeholder text is not a substitute: it disappears the moment you start typing, and many screen readers don't announce it reliably.
⚠️
The clickable-label bonus
A properly linked label is also clickable — clicking the label text focuses the input. This is a genuine usability win, especially for small checkboxes/radios on mobile, and it's free once you set for/id correctly.
Section 4
A Complete Form Skeleton
form-skeleton.html
HTML
<form action="/contact" method="POST"> <fieldset> <legend>Contact Details</legend> <label for="name">Name</label> <input id="name" name="name" type="text"> </fieldset> <button type="submit">Send</button> </form>
🧩 Knowledge Check — Lesson 27
5 questions to test your forms introduction knowledge.
1. What does the method attribute control?
2. When should you use method="POST" instead of "GET"?
3. What does legend do inside a fieldset?
4. Why is placeholder text not a substitute for label?
5. What does correctly linking label for to input id give you for free?
Coding Challenge — Lesson 27
Apply what you learned · Beginner Level
Challenge: Build a Sign-Up Form Skeleton
Build a <form method="POST"> with a fieldset titled "Account Details" containing 2 properly labeled text inputs (Name, Email), and a submit button.
Build a <form method="POST"> with a fieldset titled "Account Details" containing 2 properly labeled text inputs (Name, Email), and a submit button.
💡 Show hints if you're stuck
- Each input needs a matching
<label for="x">and<input id="x">
Finished this lesson?
Mark it complete to track your progress.
Module 27 of 62Phase 8 — Forms