Generate real HTML for a described form field, such as an email input or required dropdown, with every validation attribute explained one by one.
You are an HTML forms tutor who treats built-in browser validation as a real tool worth using correctly, not a checkbox to skip past on the way to writing JavaScript. My field description is [FIELD_DESCRIPTION], written in plain language, such as an email address field that's required, a dropdown for choosing a shipping method, or a phone number field that only accepts a specific format. If I left that blank, ask me to describe the field instead of defaulting to a plain text input. Pick the input type that actually matches [FIELD_DESCRIPTION], email, tel, number, date, checkbox, radio, select, or plain text, rather than defaulting to type="text" for everything, and name which type you picked and why one sentence in before showing code. Include every validation attribute the description implies, required, pattern, min, max, minlength, maxlength, or step, and wrap the input in a label element properly associated with it through the for and id attributes, since an input without a real label fails accessibility and most beginners skip it. After the code, explain each attribute on its own line, what it validates, what a user sees in the browser when that validation fails, and what happens if the attribute is left off entirely. If I included a pattern attribute, break down the regular expression piece by piece instead of pasting it and moving on, since a pattern nobody can read is a pattern nobody can maintain. My validation depth is [DEPTH:select:built-in browser validation only,also show basic JavaScript validation]. If I chose the second option, add a short vanilla JavaScript snippet that checks the same field on submit and explain specifically what it catches that the HTML attributes alone do not, rather than duplicating the same check for no reason. If I ask to combine several fields into one form, assemble them in a single form element with consistent spacing and labeling instead of listing separate disconnected snippets, and note anything that changes about validation once multiple fields are checked together, such as making sure only one radio button in a group can be selected at a time.
Use this prompt anywhere
10,000+ expert prompts for ChatGPT, Claude, Gemini, and wherever you use AI.
Get Early AccessMost beginner HTML forms use type="text" for everything and skip validation attributes entirely, which means the browser catches nothing before a bad value hits your server. This tool builds the right input type for what you're actually collecting and explains every validation attribute attached to it.
Describe the field in [FIELD_DESCRIPTION], an email input, a required dropdown, a phone number with a specific format, and the output picks the matching HTML input type, email, tel, number, date, and adds the validation attributes that description implies, required, pattern, min, max. Every input gets a properly associated label, and every attribute gets explained on its own line: what it checks, what the browser shows when it fails, what breaks if you leave it off. Set [DEPTH] to also show basic JavaScript validation for the checks HTML attributes alone can't cover.
Build one field at a time or ask to combine several into a real form. Once the fields validate correctly, style them to match your page with the CSS layout practice generator, or turn the whole thing into a scoped project with the beginner web project idea generator.
Build it in the Dock Editor to keep a running set of form fields you've actually understood, not just copied.
Copy this template into ChatGPT, Claude, Gemini, or the Dock Editor. Fill in [FIELD_DESCRIPTION] in plain language, an email field, a required dropdown, a date picker, whatever the form actually needs to collect.
The output names the specific HTML input type it chose, email, tel, number, date, checkbox, and the reason it fits your description better than plain text.
You get a properly labeled input with every validation attribute your description implied, required, pattern, min, max, minlength, or step.
Every attribute is broken down: what it validates, what the browser shows on failure, and what happens if you remove it entirely.
Set [DEPTH] to also show basic JavaScript validation to see a submit-time check plus exactly what it catches beyond the HTML attributes alone.
Build one field at a time and understand what each validation attribute is actually doing before assembling a full form from memory.
Generate the exact fields a project spec calls for, properly labeled and validated, ready to drop into an assignment's form structure.
Get an email field, a message field, and a submit button that all validate correctly before wiring up a backend to handle submissions.
Revisit HTML5 validation attributes through concrete, described examples instead of rereading an attribute reference table that never quite stuck.
Discover more prompts that could help with your workflow.
Build a small working program that calls a real public API, with the request, response, and API key setup explained step by step.
Explain a core functional programming idea, such as pure functions or immutability, with a broken code example and its fixed version shown side by side.
Explain a built-in math function, square root, power, absolute value, or rounding, covering math and syntax, then generate practice calls to predict before revealing results.
10,000+ expert-curated prompts for ChatGPT, Claude, Gemini, and wherever you use AI. Our extension helps any prompt deliver better results.