HTML · Quick Reference

Lesson 18 — Form Basics Cheat Sheet

HTML

In one line: The <form> element is a container. It wraps all the controls that collect data and defines two critical attributes: where the data goes (action) and how it's sent (method).

Key Ideas

1The <form> Element. The <form> element is a container. It wraps all the controls that collect data and defines two critical attributes: where the data goes (action) and how it's sen...

2Labels & Inputs — The Core Pair. Every input needs a <label>. Labels tell users what to type and are essential for accessibility — screen readers announce the label text when the input is focuse...

3How Submission Works 1User fills in inputs — each input stores its value 2User clicks submit button — or presses Enter in a text field 3Browser validates — checks required fields, type patterns 4Data is serialised — becomes name1=value1&name2=value2 5Sent to action URL — GET appends to URL query string, POST puts it in the body 6Server processes it — the server reads the values by their name keys HTMLComplete minimal formCopy <form action="/register" method="post"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> <label for="pw">Password</label> <input type="password" id="pw" name="password" minlength="8" required> <button type="submit">Create Account</button> </form> Live preview of the code above: Full Name Email Address Password Create Account Section 4 fieldset and legend. <fieldset> groups related form controls under a <legend> heading. This is especially useful for multi-section forms and improves accessibility by giving gr...

4Submit vs Button vs Reset. There are three types of buttons inside a form — each has a specific job:

Code Examples

<!-- GET: search forms, filters, bookmarkable results -->
<form action="/search" method="get">
  <!-- inputs go here -->
</form>

<!-- POST: login, registration, payment, anything sensitive -->
<form action="/login" me...

<!-- Method 1: for/id pair (preferred) -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Method 2: wrapping (implicit association) -->
<label>
  Username
  <input...

<form action="/register" method="post">

  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email Address</label>
  <input type="email" id="email" nam...