How to use the HTML input generator
- Choose the Input type: text, email, password, number, tel, url, search, date and time types, color, range, file, checkbox, radio or textarea.
- Fill in the Label, the name and, for text-like types, a Placeholder.
- Add Help text (linked with aria-describedby) if people need a hint.
- Pick an Autocomplete token and tick Required if the field must be filled.
- Set the extra fields that appear for your type: min, max and step for numbers and dates; maxlength (0 = none) and pattern (regex) for text.
- Copy the code and try the field in the Preview.
What it does and when to use it
An input on its own is just a box. To be usable it needs a visible label that is programmatically linked to it, hints that screen readers can find, and attributes that let browsers and password managers help. Getting all of that right for each field is fiddly, and missing one link, such as a for that does not match the id, silently breaks it.
The generator produces one complete field at a time, which is useful when you add a field to an existing form or need an unusual type such as month or range. For a whole form from a list of fields, use the HTML Form Generator. For a dropdown with grouped options, use the HTML Select Dropdown Generator.
How it works
The id is made from the name: lower case, accents removed, other characters turned into hyphens. For most types the tool writes a label for the id, then the control. Checkbox and radio inputs are wrapped in their label instead. Placeholders are left out for color, range and file inputs, where browsers ignore them. textarea gets rows="4". Help text goes into a p with the id <id>-help. All text is HTML-escaped, so the apostrophe in “We’ll” becomes '. Nothing leaves your browser.
Worked examples
The default work email field:
<label for="email">Work email</label>
<input type="email" id="email" name="email" placeholder="you@company.com" autocomplete="email" required aria-describedby="email-help">
<p id="email-help">We'll send the receipt here.</p>A quantity between 1 and 10, no placeholder or help: <input type="number" id="qty" name="qty" min="1" max="10" step="1" required>.
A new password with help text “At least 12 characters.” and maxlength 64. The input ends with autocomplete="new-password" maxlength="64" required aria-describedby="new-password-help">.
A consent checkbox: <label><input type="checkbox" id="terms" name="terms" required> I agree</label>.
Limits and tips
- Hidden fields such as min or pattern keep their values when you switch type, but only the attributes the chosen type supports are written, so a min left over from number is dropped from a text input.
patternis a regular expression for the whole value. Explain the format in the help text too, since browser error messages are generic.- Browser validation runs only in the browser. Always check the data on the server as well.
- A form also needs a submit button with
type="submit"; the HTML Button Generator writes one.
Frequently asked questions
Why not just use a placeholder instead of a label?
What does aria-describedby do?
Which autocomplete value should I choose?
Does the type change the keyboard on phones?
Why is the checkbox inside its label?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.