guide · html forms

HTML Form — How to Build and Submit Forms in HTML

Q: What HTML form input types should I use?

Use the most specific type for each field. `email` for emails, `tel` for phone numbers, `url` for URLs, `number` for numeric input, `date`/`time`/`datetime-local` for temporal data, `password` for passwords, `file` for uploads. Mobile keyboards adapt, native validation fires, and assistive tech announces the right field type.

Q: How do I validate an HTML form?

Native HTML validation handles most cases — `required`, `pattern`, `minlength`, `maxlength`, `min`, `max`, type-specific (`type="email"`). For more complex rules, use JavaScript. For server-side validation (which is non-optional for anything that touches a database), splitforms validates submissions on receipt and rejects malformed data automatically.

Last reviewed September 29, 2026

Semantic HTML, native validation attributes, accessibility-first labels, and the modern way to handle the submission — POSTing to a backend like splitforms instead of writing one.

html

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label>Name<input name="name" required /></label>
  <label>Email<input name="email" type="email" required /></label>
  <label>Message<textarea name="message" required></textarea></label>

  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
  <button type="submit">Send</button>
</form>

An HTML form is a region of a page that collects user input and sends it somewhere. The HTML form element wraps the inputs; the action attribute is the URL the submission POSTs to; the method attribute is almost always POST for anything but search. That's the whole foundation — every form is a variation on those three pieces.

Semantic HTML matters because it controls accessibility, validation, and browser UX. Every <input> should have a <label> either wrapping it or associated via for/id. Use the right type attribute — email, tel, url, number, date — so mobile keyboards and native validation work. Add required to mandatory fields so the browser blocks empty submissions before they reach your backend.

The submission has two paths. The classic path is browser-native: the user clicks submit, the browser POSTs the form fields to the action URL, and the server returns a new page (or a 302 redirect). The modern path is AJAX: a JavaScript handler intercepts the submit event, POSTs the form via fetch, and updates the DOM inline. Both are valid; the AJAX path lets you avoid the page reload but adds a JS dependency.

Where the form posts to is where most tutorials stop being useful. PHP mail() is dead on Vercel/Netlify/Cloudflare/S3 static hosts. SMTP setup is hours of work. A backend service like splitforms is the shortest path: point the action at https://splitforms.com/api/submit, sign up for a free access key, and submissions land in a dashboard. Free covers 500 submissions with no card, unlimited forms, and owner notification emails; Pro ($5/month) adds webhooks and conditional email routing.

How to set this up

Step 01

Write semantic HTML

Wrap inputs in <label>. Use semantic input types (email, tel, url). Add required for mandatory fields.

Step 02

Set the form action and method

action="https://splitforms.com/api/submit" method="POST". Add a hidden access_key input with your free splitforms key.

Step 03

Add a honeypot field for spam

A hidden <input name="botcheck"> bots fill but humans never see. splitforms recognizes it automatically.

Step 04

Test the submission

Submit a test entry from your live site. Confirm the submission appears in the splitforms dashboard and the owner email arrives too.

Semantic HTML, native validation, no backend required.

Frequently asked questions

What is an HTML form?

An HTML form is a section of a webpage that collects user input. It's wrapped in a <form> element, contains <input>, <textarea>, and <select> controls, and POSTs the collected data to the URL in its action attribute when the user clicks submit. The HTML specification defines forms in §4.10.

How do I send an HTML form to email?

Point the form's action attribute at a form-backend service like splitforms — action="https://splitforms.com/api/submit" — and add a hidden access_key input. Sign up for a free access key to store submissions in the dashboard and send owner notification emails. No PHP, no SMTP, no backend code.

What's the difference between GET and POST?

GET appends the form data to the URL as query string parameters; POST sends it in the request body. Use GET only for search forms where the URL is meant to be bookmarkable. Use POST for everything else — contact forms, signups, anything with user-entered data.

Do HTML forms need JavaScript?

No. Plain HTML forms work without any JavaScript — the browser handles the POST natively. Add JavaScript for inline submission feedback (no page reload), client-side validation beyond native attributes, or custom field interactions. Progressive enhancement: form should work without JS, JS makes it better.

What HTML form input types should I use?

Use the most specific type for each field. email for emails, tel for phone numbers, url for URLs, number for numeric input, date/time/datetime-local for temporal data, password for passwords, file for uploads. Mobile keyboards adapt, native validation fires, and assistive tech announces the right field type.

How do I validate an HTML form?

Native HTML validation handles most cases — required, pattern, minlength, maxlength, min, max, type-specific (type="email"). For more complex rules, use JavaScript. For server-side validation (which is non-optional for anything that touches a database), splitforms validates submissions on receipt and rejects malformed data automatically.

Related guides

HTML forms

Ship the form, not the backend.

Free for 500 submissions total. Owner email delivery, spam filtering, and a real dashboard are included on Free. Paid plans add signed webhooks. No credit card.

Get a free access key →