HTML form generator
- Form controls the markup will hold
- 8
- Label elements, one bound to each control
- 8
- Fieldset and legend pairs around the choice groups
- 1
- HTML elements the generator writes in total
- 20
The counts these tools work out come from the structure the HTML standard defines for a form: one labelled control per field, a fieldset and a legend around a group of radios or checkboxes, and a name attribute on every control that is meant to be submitted. The sources under each tool link the part of the specification each rule comes from.
The markup above is written from a worked example (8), and the counts beside it follow the structure the HTML standard defines for a form. Rename a field or add one and the HTML rewrites itself as you type.
Download the HTML form generator worked example (CSV)
Tell the generator which fields your form needs and it writes the HTML for them: a form element with a method and an action, a label bound to every control, the right input type for each one, a fieldset and legend around any group of radios or checkboxes, and a submit button at the end. It also counts what it wrote, following the structure the HTML standard defines for a form, because the size of a form is the thing people misjudge: eight fields is not eight elements, it is eight controls, eight labels, their wrappers and whatever a group of choices adds on top.
Endpointo Pro
Where the submission goes next
The markup is only half a working form. Point its action at Endpointo and the posts start arriving in your inbox, with every submission and its uploads kept in one place you can search and export.
- Download the files somebody uploaded with the form
- Send notification emails without our name on them
- Come back to a form and its submissions tomorrow
- Put your own logo and reply-to address on the notifications
- Export every submission a form has ever received
- Send the notification email to more than one address
- Connect Stripe when a form needs to take a payment
- Push submissions into the tools you already run
$19per month, whole team
Start Endpointo Pro PricingEndpointo Pro is $19.00 per month. It renews automatically each month at the same price until you cancel, and the price and the renewal date are shown on the checkout page before you pay.
Writing the HTML form generator: what developers ask
Why does the count say more elements than I have fields? Because a field is not one element. Each control needs its own label, and a group of radios or checkboxes needs a fieldset and a legend around it so the group has an accessible name. The generator counts what it actually writes, which is why the number is higher than the field list you typed.
Is the markup it writes accessible? It is a reasonable starting point: every control has a real label bound by for and id, groups are wrapped in a fieldset with a legend, and no label is faked with a placeholder. It is not an accessibility audit of your page, and it cannot know what your CSS does to focus styles or contrast.
Can I change the markup afterwards? It is yours. Rename the classes, drop the wrappers, move it into a component: nothing here phones home and nothing depends on the markup staying as it was written. The only part that has to stay correct is the action attribute and the name on each control, because those are what the submission is made of.
Where the constants in this tool come from
MDN: the form element and its method, action and enctype attributes.
MDN: the fieldset element and grouping controls with a legend.
WHATWG HTML: form control infrastructure, names and submission.