Forms 101

1. Principle

A form (<form>) is the page asking the user for input. Three things matter:

1. Inputs — <input>, <textarea>, <select>. Each has a type (for <input>) and a name.
2. Labels — every input needs an associated <label>. Without one, screen readers can't tell users what to type, and clicking the label doesn't focus the input.
3. A submit mechanism — a <button type="submit"> (or just <button> inside a form — default type is submit).

The minimal accessible input is:

<label for="email">Your email</label>
<input id="email" name="email" type="email">

The for attribute on the label matches the id on the input. That's the connection that makes labels work for screen readers and click-to-focus.

2. Do (you try)

Replace your Contact section with a real form:

<section id="contact">
<h2>Contact</h2>
<p>Email me at <a href="mailto:you@example.com">you@example.com</a>, or use the form below.</p>

<form>
  <p>
    <label for="name">Your name</label><br>
    <input id="name" name="name" type="text" required>
  </p>

  <p>
    <label for="email">Your email</label><br>
    <input id="email" name="email" type="email" required>
  </p>

  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4" required></textarea>
  </p>

  <p>
    <button type="submit">Send</button>
  </p>
</form>
</section>

Save and refresh.

Note: This form doesn't send anything yet — clicking Send will just reload the page. We wire up form submission in Chapter 3 (JavaScript). For now, the goal is the structure.

3. Verify (how you know)

Label-click test: Click the text "Your name" (the label, not the input). The text input should gain focus (you'll see the cursor appear inside it). Same for "Your email" and "Message".

If clicking the label doesn't focus the input, the for and id don't match — typo or capitalization mismatch.

Validation test: Click Send without filling anything in. The browser should refuse and show a "Please fill out this field" tooltip on the first empty required field. That's the required attribute doing its job — free client-side validation.

Inspect test: Open DevTools, find the form. Each input should have an id and a name. Each label's for should match an input's id.

4. Reference