{"id":"code-hs-html-form-input-types","audience":"high-school","category":"coding","track":"coding","technique":"constraints","title":"Use the right input types in your field trip form","free":false,"task":"Your field trip permission form uses type=\"text\" for everything. Change the email box to type=\"email\", the phone box to type=\"tel\" with pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\", and the date box to type=\"date\" with min=\"2026-11-01\". All three get required. Keep every name, id and label. Return only the form in exactly 1 code block of at most 16 lines, under 20 words of text.","materialLabel":"Your form (attached to your prompt automatically)","material":"<!-- trip.html - Science Club field trip form (my Web Design 1 project) -->\n<h2>Aquarium trip permission</h2>\n<p>Due by November 20. Bus leaves at 8:15 from the front circle.</p>\n\n<form action=\"/permission\" method=\"post\">\n  <label for=\"parent-email\">Parent email</label>\n  <input type=\"text\" id=\"parent-email\" name=\"parent_email\">\n\n  <label for=\"parent-phone\">Parent phone (555-123-4567)</label>\n  <input type=\"text\" id=\"parent-phone\" name=\"parent_phone\">\n\n  <label for=\"trip-date\">Trip date</label>\n  <input type=\"text\" id=\"trip-date\" name=\"trip_date\">\n\n  <button type=\"submit\">Send permission</button>\n</form>\n\n<p>Questions? Email Ms. Park or stop by Room 210 during lunch.</p>\n<p>Chaperones: Mr. Diaz, Ms. Park and two parent volunteers.</p>\n\n<!-- the form posts to the school's forms server; I can't change that\n     part, only the HTML. Ms. Park tested it on her laptop and phone. -->","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":16},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Vague 'improvements'","why":"Asked to improve, the AI adds placeholders, CSS and new fields.","fix":"Say exactly which inputs change and to what.","checks":["r0","r2"]},{"title":"No phone format","why":"The AI uses type=\"tel\" but no pattern, so any format still gets in.","fix":"Add: \"pattern=\\\"[0-9]{3}-[0-9]{3}-[0-9]{4}\\\".\"","checks":["r1"]},{"title":"Forgetting the date limit","why":"Without min, someone can still pick 2019.","fix":"Add: \"type=\\\"date\\\" with min=\\\"2026-11-01\\\".\"","checks":["r0"]},{"title":"The whole page back","why":"The AI reprints the page and explains each input type.","fix":"Add: \"Return only the form, no text.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Names the input types","patterns":["type=.?email","type=.?tel","type=.?date"]},{"label":"Gives the phone pattern","patterns":["pattern"]},{"label":"Gives the date minimum","patterns":["min","2026-11-01"]},{"label":"Asks for required","patterns":["required"]},{"label":"Asks for only the form","patterns":["only the form","just the form"]}],"hint":"'Improve' could mean anything. Name each input's new type and rule, and say you want only the form back.","rubricLabels":["The email input is type=\"email\" and the date input is type=\"date\" with min=\"2026-11-01\"","The phone input is type=\"tel\" with pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\"","All three inputs have required, every name, id and label is unchanged, no new fields, CSS or JavaScript are added, and only the form is returned"]}