HTML Text Input Generator

Generate a labelled text field with a placeholder, a length limit and the right autocomplete token.

Text field HTMLText field built
<label for="full-name">Full name</label>
<input type="text" id="full-name" name="full-name" placeholder="Ada Lovelace" maxlength="60" autocomplete="name" required>
Runs locally in your browser

About the HTML Text Input Generator

The plain text input is the workhorse of every form, and this builder covers the attributes that decide how well it behaves: an id linked to its label, a name your server will read, a placeholder showing an example rather than repeating the label, a starting value, and a maximum length that keeps a database column from overflowing on submission.

Readonly and disabled look alike and behave very differently. A readonly field can be focused, selected and copied, and it is still submitted with the form. A disabled field is skipped entirely, so its value never reaches the server, which is why this generator refuses to set both at once. Autocomplete tokens such as name, organization and street-address let a browser fill several related fields in one action, so pick the token that matches the field instead of switching autocomplete off out of habit.

A placeholder is not a label. It vanishes at the first keystroke, usually fails contrast checks and is not reliably announced, so the label is always emitted here alongside it. When the value has a dedicated input type, prefer it: url for web addresses and tel for phone numbers both improve the keyboard people get on a phone.

How to use

  1. Write the label and the name your form handler expects.
  2. Add a placeholder that shows an example value, not a repeat of the label.
  3. Choose the autocomplete token matching the data you are collecting.
  4. Set a max length, then copy the label and input together.

Common questions

What is the difference between readonly and disabled?
A readonly field is still submitted and can be copied. A disabled field is ignored by the browser and sends nothing.
Can a placeholder replace the label?
No. It disappears as soon as typing starts and leaves people with no idea what the field was for.
Does maxlength stop pasted text?
Yes, the browser truncates a paste to the limit, but the same check still belongs on the server.
Why does autofill ignore my field?
Usually because the autocomplete token is missing or wrong. Use a standard token that matches the value being collected.