HTML Form Generator
Write your fields as a short list, one per line, and get a complete, accessible HTML form with CSS and a live preview. Every field gets a real label, the right input type and autocomplete token, required markers that screen readers understand, help text linked with aria-describedby, and the form gets a CSRF token field and an optional honeypot against spam bots.
- Runs in your browser
- No sign-up
- Free to use
How to use HTML Form Generator
- List the fields, one per line, with * for required ones.
- Set the heading, action URL, method and CSRF option.
- Choose the layout and accent colour.
- Copy the HTML and CSS and connect the form to your server.
HTML Form Generator features
Fast field syntax
Email* | email | help: … – types are guessed from labels.
Real labels
Every control has a <label for>, radio groups use fieldset and legend.
Autocomplete
Tokens such as email, given-name, postal-code and new-password.
Security
CSRF token field for PHP, Laravel or Django, plus a honeypot.
Uploads
File fields switch the form to multipart/form-data.
Warnings
Passwords over GET or http://, missing tokens, weak contrast.
When to use HTML Form Generator
- Contact and quote request forms.
- Sign-up and log-in forms with correct password autocomplete.
- Checkout address forms that browsers can autofill.
- Search forms and file upload forms.
HTML Form Generator FAQ
How do I write a field?
Label, then optional parts separated by |. Email* | email | help: We never share it. The * makes it required. Choices go after the type: Plan | radio: Free, Pro.
Why autocomplete attributes?
They let browsers and password managers fill the form correctly, which is faster for everyone and essential for people with motor or memory impairments. WCAG 2.1 success criterion 1.3.5 asks for them on personal data fields.
What is the CSRF field for?
It stops other websites from submitting the form on behalf of a logged-in visitor. The server creates a random token per session, puts it in the form and rejects submissions where it does not match.
How does the honeypot work?
A text field is moved off screen and hidden from assistive technology. People never fill it, many bots do; the server discards submissions where it has a value.
Is browser validation enough?
No. Attributes like required and type="email" help users, but anyone can bypass them. Validate every value again on the server.
Is anything uploaded?
No. The form is generated in your browser, and the preview cannot submit.
Building accessible HTML forms
Forms are where websites earn their money and where many of them lose visitors. Most problems are small: a placeholder used instead of a label, a phone field that opens the wrong keyboard, a password field that password managers cannot recognise, an error that only turns a border red. The generator handles these details so the form works for keyboard, screen reader and mobile users from the start.
Every control gets a visible label connected through for and id, so clicking the label focuses the field and screen readers announce it. Help text is linked with aria-describedby. Required fields carry the required attribute, and the asterisk is hidden from screen readers because they already announce “required”. Groups of radio buttons are wrapped in a fieldset whose legend names the question.
Input types and autocomplete tokens are chosen from the labels: an email field gets type="email" and autocomplete="email", a postal code gets postal-code, and a password on a sign-up form gets new-password with a minimum length so password managers offer a strong generated password. Phone fields open the numeric keypad on phones.
Security starts in the markup. POST forms get a hidden CSRF token field in the syntax of plain PHP, Laravel or Django, file fields switch the form to multipart/form-data, and an optional honeypot catches simple spam bots without a CAPTCHA. The notes explain what the server must still do: validate every field, check the token and inspect uploaded files.
The CSS gives fields a 44-pixel minimum height, borders with enough contrast to be seen, a clear focus outline in your accent colour and red borders only after the user has interacted with an invalid field, using the :user-invalid selector. The two-column layout collapses to one column on narrow screens without media queries.