Library › Coding AI › High school students

Add labels to a signup form without rewriting the page

Practice: Setting limits and rules. About 5 minutes.

About this exercise

Your robotics club's signup page has no labels, so a classmate's screen reader can't tell the boxes apart. Add a visible label for each of the 3 inputs with the exact text Full name, School email and Grade, linked by for and id. The email box must also only accept school addresses: add required and pattern=".+@lincolnhs\.org". Turn the clickable div into a real button type="submit" with the same class. Keep the action, method and every class name. Return only the form element in exactly 1 code block of at most 16 lines, with under 30 words outside it.

Common mistakes when you ask AI for this

  • Getting the whole page back. The AI reprints the full HTML document, and you have to hunt for what changed. Try: Say: "Return only the <form> element."
  • Not giving the label text. The AI makes up its own label wording, or uses aria-label that sighted users can't see. Try: Add: "Visible <label> with exact text Full name, School email, Grade, linked with for and id."
  • Leaving out the school-email rule. The AI can't know only school addresses are allowed. Try: Add: "Email input gets required and a pattern that only accepts @lincolnhs.org addresses."
  • Leaving the fake button or redesigning. The AI may keep the div with role="button", or add CSS and new fields while it's in there. Try: Add: "Replace the div with a real submit button with class btn-join. Keep action, method and all classes. No new fields, CSS or JS."
  • A long accessibility lesson. The AI explains every change at length. Try: Add: "No explanation, just the code block."

What a strong prompt includes

  • Gives the exact label text
  • Asks for for/id linking
  • Adds the school-email rule
  • Asks for a real button
  • Asks for only the form

Practice this now ↑

Related exercises