Quest 3 · Forms

Quest 3 · hands-on · ~30 min

30:00

🎯 Mission

You start with: your recipe page.

You finish with: a review form under the recipe that refuses bad input on its own, with no JavaScript.

Quest complete when: clicking Send with an empty name, or a bad email, shows the browser's warning bubble.

+60 XP🏆 Form Smith

Step 1 · Add the form at the end of

recipe/index.html

<h2>Rate this potion</h2>
<form>
  <label for="name">Your name</label>
  <input id="name" name="name" required>

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

  <label for="stars">Stars</label>
  <select id="stars" name="stars">
    <option>5</option><option>4</option><option>3</option><option>2</option><option>1</option>
  </select>

  <label for="review">Review</label>
  <textarea id="review" name="review" rows="4" minlength="10"></textarea>

  <button type="submit">Send review</button>
</form>

Step 2 · Test the guards

Click Send review with everything empty. Then type grimble (no @) in Email and send again.

✅ You should see: "Please fill out this field", then "Please include an '@'". The required and type="email" attributes did that.

Step 3 · Click a label

Click the word Email (not the box).

✅ You should see: the cursor jumps into the email box, because for="email" points at id="email".

Validation attributes are the bouncer at the door: no name, no entry. You get the bouncer for free just by writing required.

💡 What just happened (plain English)

Every <input> needs a <label> linked by for/id: it makes the click target bigger and lets screen readers say what the box is for. Browser validation is a first line of defence; the server must still check everything (Chapter: Auth & Security).

🏁 Checkpoint

☐ every input has a linked label
☐ empty submit is blocked
☐ a bad email is blocked

🏆 Tick every box → achievement unlocked: Form Smith (+60 XP)