Form Settings
Add Field
Fields
Click a field type above to add it
Build forms visually, copy clean HTML
← devnestioClick a field type above to add it
HTML Form Generator creates complete, accessible HTML forms with proper semantic markup. Select input types (text, email, password, number, date, select, checkbox, radio, textarea, file), configure validation attributes (required, pattern, min, max, maxlength), choose a form layout (stacked, inline, grid), and get the ready-to-use HTML with labels, input IDs, and proper accessibility attributes.
A properly built HTML form requires label elements associated with each input via for/id attributes, appropriate input types (email, tel, date), meaningful name attributes for server-side processing, validation attributes (required, pattern, minlength), and a submit button. HTML5 introduced native input types and validation that work without JavaScript: email, url, number, date, time, range, color.
Form accessibility requires: visible labels (never placeholder-only), error messages associated with their input via aria-describedby, role="alert" on dynamically injected errors, grouping related inputs in fieldset/legend, and not relying on color alone to indicate errors.
Login form
Result: form > label[for=email] + input[type=email][required] + label[for=pass] + input[type=password][required] + button[type=submit]
Contact form
Result: Name (text), Email (email), Subject (select), Message (textarea), Submit -> complete form with labels
File upload
Result: input[type=file][id=resume][name=resume][accept='.pdf,.doc,.docx'][required]
What is the correct way to associate labels with inputs?
Two methods: (1) Explicit association: give the input an id attribute and the label a for attribute with the same value: label[for=username] + input[id=username]. (2) Implicit wrapping: wrap the input inside the label element. Both methods are valid. Never skip labels -- placeholder text disappears when typing and does not work for screen readers. The label click area also activates the associated input, improving usability especially for checkboxes.
What HTML5 input types are available?
HTML5 input types beyond text: email (validates email format), password (masked text), number (numeric with min/max/step), range (slider), date (date picker), time (time picker), datetime-local (date+time), month, week, color, tel (phone -- no format validation), url (URL validation), search (with X to clear), file (upload), hidden (hidden data), checkbox (multi-select), radio (single select from group). Using the right type provides appropriate mobile keyboards and native validation.
How does HTML5 native form validation work?
HTML5 constraint validation runs when the form is submitted or when checkValidity() is called. Constraints: required (field must not be empty), minlength/maxlength (string length), min/max (number/date range), pattern (regex match), type (email, url, number format). If validation fails, the browser shows a native error tooltip and prevents submission. To use custom validation: add novalidate to the form. Custom error messages: input.setCustomValidity('message') -- clear with setCustomValidity('') when valid.
How do I handle file uploads correctly in HTML?
For file uploads: set enctype='multipart/form-data' on the form (required -- default enctype does not include file data). Use method='post'. The accept attribute restricts file types in the picker: accept='.pdf,.jpg,image/*'. The multiple attribute allows multiple files. File size limits are enforced server-side. Check file type client-side with file.type (MIME) and server-side with magic bytes (do not trust client-provided type).
What is the difference between GET and POST for forms?
GET: form data is encoded in the URL query string. Used for search forms -- the URL can be bookmarked and shared. Limited data size. Not appropriate for passwords or sensitive data. POST: form data is in the request body. No URL size limit. Not visible in URL (though not encrypted without HTTPS). Required for: file uploads, passwords, sensitive data, and any action that changes server state.