Text Input Generator
Generate accessible HTML input markup for text, email, password, number, date, file and range, with labels and validation attributes.
Any text-like input - text, email, password, number, search, tel, url - with label and validation attributes.
Live preview
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>About the text input generator
An input without a matching label is unusable for screen reader users and loses the click-to-focus behaviour that makes forms comfortable. This generator always pairs the two through for and id.
The type attribute does more than validate: it changes the on-screen keyboard on mobile. type="email" shows the @ key, type="tel" shows a number pad. Getting it right is one of the cheapest mobile improvements available.
How to use it
- 1Pick the input type that matches the data.
- 2Write a label. It is what screen readers announce and what users click.
- 3Set name and id. The id links the label; the name is what the server receives.
- 4Add validation attributes such as required, pattern, min and max.
- 5Copy the HTML.
Questions
Why does the input type matter on mobile?
It selects the on-screen keyboard. email shows the @ key, tel shows a number pad, url shows a slash key. Using type="text" for everything forces users to hunt for characters.
Do I need both name and id?
Yes, and they serve different purposes. id connects the label to the input; name is the key the value is submitted under.
Is placeholder a replacement for a label?
No. Placeholder text disappears the moment someone types, so they lose the context. It is a hint, not a label.