About the HTML Form Builder
Write one field per line as Label | type | name | required and this builder assembles the form. The type accepts any ordinary input type such as text, email, tel, url, number, password, date or file, plus three composite forms: textarea, checkbox, and select:Small,Medium,Large or radio:Yes,No with the choices listed after the colon. Leave the name out and it is derived from the label. Only the label is compulsory.
Every field comes out with a label whose for matches the input id, which is the part hand written forms most often skip and the part that makes a form usable with a screen reader or a shaky mouse hand. Radio groups are wrapped in a <fieldset> with the question as the <legend>, so the group reads as one thing rather than as loose buttons. Marking a field required adds the attribute, which turns on the browser validation bubble before anything is sent.
The generated markup is plain HTML with no framework and no styling assumptions, so it drops into any stack. Tick the CSS box for a small grid layout to start from. The novalidate attribute switches off browser validation, which is useful while you are testing your own error handling. Remember that client side rules are a convenience only, so repeat every check on the server. For a single field with more options than this shorthand exposes, use the HTML Email Input Generator or its siblings.
How to use
- Write one field per line: Label | type | name | required.
- Use select: or radio: followed by comma separated choices for option lists.
- Set the action, method and submit button label.
- Copy the form, or download it as an HTML file.
Common questions
- What is the line format?
- Label, then type, then name, then the word required, separated by pipes. Everything after the label is optional.
- How do I add a dropdown?
- Use select: followed by the choices separated by commas, for example select:Small,Medium,Large. Use radio: for radio buttons instead.
- Are the labels linked to the fields?
- Yes, each label carries a for attribute matching the input id, so clicking the text focuses the control.
- Does the form send anything on its own?
- No. It posts to whatever action you set, so point it at your own endpoint or form service.