Forms that people can complete

What you will build

Add a keyboard-usable feedback form with clear validation.

Understand the idea first

Every control needs a stable name, a suitable type, and helpful constraints.

Build it step by step

<form action="/thanks" method="post">
  <fieldset>
    <legend>Suggest an improvement</legend>
    <label for="name">Name</label><input id="name" name="name" required />
    <label for="email">Email</label
    ><input id="email" name="email" type="email" />
    <label for="message">Suggestion</label
    ><textarea id="message" name="message" minlength="10" required></textarea>
    <button type="submit">Send</button>
  </fieldset>
</form>

1. Place the form at the end of main.
2. Click labels and verify focus moves correctly.
3. Test empty and malformed submissions.
4. Complete it with only the keyboard.

Read the important lines

• name labels submitted data; id connects a label.
• Fieldset and legend name a group.
• Use native types and constraints first.

Common mistakes and what to check

Practice without copying

Add a stage select and a labelled public-display checkbox.

Completion check

• My page contains the required new content
• I can explain the key tags or attributes without the answer
• I deliberately created and fixed at least one error