↑↓ to move · Enter to open · Esc to close

HTML Form Generator

Build an HTML form field by field and copy clean, accessible markup. Every input gets a real label, a name, and the validation attributes you choose.

Built in your browser. The preview form sends nothing.
Built by · Updated
Fields

Options are for dropdowns and radio buttons, separated by commas. For a hidden field, the placeholder is its value.

Preview
HTML code

How to use the HTML Form Generator

  1. Set the form's Action URL, Method, and Submit button text.
  2. Pick a Field type and press Add field. Fill in its label, name, and options, and use the arrows to change the order.
  3. Check the Preview, then copy or download the HTML code.

How it works

  • Each field is wrapped in a <div> with a <label for> that points to the input's id, so clicking the label focuses the field and screen readers announce it.
  • The name is what the server receives. If you leave it empty, it is made from the label: Email address becomes email_address.
  • Radio buttons and checkbox groups are wrapped in a <fieldset> with a <legend>.
  • Ticking Required adds the required attribute, so the browser checks the field before sending. Email, URL, and number fields get built-in format checks from their type.
  • A file field switches the form to enctype="multipart/form-data" and the method to POST, which file uploads need.
  • All text you type is HTML-escaped in the output.

Examples

A contact form with a required email field and a message:

<form action="/contact" method="post">
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Limitations

  • The tool makes the front-end form only. Something on your server must receive and process the submission.
  • The output has no styling, so it inherits your site's CSS.
  • Browser validation is easy to bypass. Validate every field again on the server.
  • Add spam protection, such as a honeypot field or a CAPTCHA, yourself.

Frequently asked questions

Why does every field need a label?

Screen readers read the label when a field gets focus, and a click on the label focuses the field. Placeholder text disappears as soon as you type, so it can't replace a label.

Should my form use GET or POST?

Use POST for anything that changes data or includes personal details or files. Use GET for searches and filters, where the values belong in the URL.

Where does the form send its data?

To the Action URL you set, when a visitor submits it. The generator itself sends nothing.

Can I style the form?

Yes. The markup is plain HTML without inline styles, so add a class to the <form> and style it in your CSS.

Often used together with HTML Form Generator.

  • HTML Live Preview

    Runs HTML, CSS, and JavaScript live in a secure sandbox with a console.

  • HTML Formatter

    Beautifies HTML with consistent indentation, including inline CSS and JavaScript.