HTML form generator — build a labelled form from a simple field list

How to use the HTML form generator

1. In Fields: Label | type | required | options, write one field per line. Separate the parts with |.
2. Use a type such as text, email, tel, number, date, textarea, select, checkbox or radio. For select and radio, list the options in the fourth part, separated by commas.
3. Choose the Method (POST or GET) and enter the Action URL.
4. Set the Button text.
5. Copy the form and try it in the Preview.

What it does and when to use it

Most forms are a handful of familiar fields, yet hand-written forms often skip the details that make them usable: labels not tied to inputs, radio buttons without a group name, no autocomplete, and a submit button with no type. This generator handles those details for every field, so you can describe a contact, booking or feedback form in a few lines.

Each control type gets the markup it needs. Text-like inputs and textareas get a label for that matches their id. A select gets an empty first option, “Choose…”, so nobody submits the first real choice by accident. A checkbox is wrapped in its label with value="yes". Fields of type email and tel, and text fields whose label contains “name”, get the matching autocomplete token.

To fine-tune one field, such as adding help text or a pattern, use the HTML Input Generator. For a long dropdown with groups, the HTML Select Dropdown Generator supports optgroup and preselected values. To restyle the submit button, see the HTML Button Generator.

How it works

Each line is split at | and trimmed. Missing parts take defaults: type text, not required, no options. Labels and option texts are HTML-escaped; option values are slugs of the option text, so “Sales” becomes sales. The form is indented two spaces per level and ends with <button type="submit">. It is built in your browser.

Worked examples

The default contact form has six fields. The Topic line, Topic | select | required | Sales, Support, Billing, becomes:

<label for="topic">Topic</label>
<select id="topic" name="topic" required>
  <option value="">Choose…</option>
  <option value="sales">Sales</option>

A search form with GET, using the lines Size | radio | | S, M, L, Name | text and Name | text again:

<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s"> S</label>

The duplicate label gives <input type="text" id="name-2" name="name-2" autocomplete="name">, so both fields keep unique ids.

Limits and tips

• Check data on the server too. Browser checks such as required are easy to bypass.
• The tool writes no CSS. The preview uses simple styles only to show the layout.
• To check the finished page for broken label for links, run it through the HTML Validator.