HTML form generator
Add fields, set labels and validation, reorder as you go, and copy accessible HTML — each input properly labelled, no framework required.
<form action="#" method="post">
<div>
<label for="full-name">Full name</label>
<input type="text" id="full-name" name="full-name" placeholder="Jane Doe" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
</div>
<button type="submit">Submit</button>
</form>Compose, reorder, copy
Add fields one at a time from the type picker, give each a label, and the tool keeps the HTML in sync as you go. The name attribute — the key that arrives at your server — is derived from the label automatically and stays editable, so "Work email" becomes name="work-email" unless you decide otherwise. Reorder with the arrows, mark fields required, and set the form's action URL and method at the bottom.
The output is plain, framework-free HTML: label/input pairs wired together with for and id, radio groups inside fieldset/legend, and native validation via required and the input types themselves. It pastes into any static page, CMS, or template engine and picks up your site's existing styles.
Form markup worth keeping
- Pick the right input type and you get the right mobile keyboard for free — email shows the @ key, tel shows digits, date opens the platform date picker.
- Labels beat placeholders: a placeholder disappears the moment someone types, so use it for an example value, never as the only description of the field.
- Browser validation (required, type checks) is a convenience layer, not security — anything that matters must be validated again wherever the form submits to.
- Use POST for anything that changes data or carries personal information; GET is for searches and filters where a shareable URL is a feature.
- Keep name attributes stable once a form is live — they're the contract between your page and whatever processes the submission.
Frequently asked questions
What field types can I add?
Text, email, number, password, tel, url, and date inputs, plus textareas, select dropdowns, single checkboxes, and radio groups. Selects and radio groups take a comma-separated list of options.
Is the generated HTML accessible?
Yes — every input gets an id with a matching label for attribute, so clicking the label focuses the field and screen readers announce it. Radio groups are wrapped in fieldset with a legend, which is how assistive tech learns what the group of buttons is about.
What do the name attributes do?
The name is the key the browser sends when the form submits — name=email becomes email=... in the request. The tool derives names from your labels automatically (lowercased, hyphenated), and you can edit any of them by hand.
Where does the form send its data?
Wherever the action URL points, using the method you chose: GET puts the values in the URL, POST sends them in the request body. The HTML itself has no backend — you need an endpoint, a form service, or a serverless function to receive the submission.
How does the required attribute work?
It turns on the browser's built-in validation: the form won't submit while a required field is empty, and email, url, number, and date inputs also check their format for free. It's client-side only, so always re-validate on the server too.
Why is the preview styled but the copied HTML plain?
The preview adds a minimal neutral stylesheet so you can see the structure clearly. The HTML you copy is deliberately unstyled — clean markup that inherits whatever CSS your own site already has.
Related free tools
See all free tools →Built something? Put it online in seconds
host0 is the cloud for small software: bring any coding agent, build the tool only you need — like this one — and say "deploy to host0". Live at a shareable URL, no servers to run.