guide · html forms

HTML Form — How to Build and Submit Forms in HTML

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" />
  <input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />

  <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 `<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 cheapest path: point the action at `https://splitforms.com/api/submit`, sign up for a free access key, and submissions land in your inbox plus a dashboard. Free for 1,000 submissions per month, no credit card.

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 email arrives and the submission appears in the splitforms dashboard.

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. When a visitor submits, the backend emails you the submission. 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 1,000 submissions/month. Email delivery, AI spam filtering, signed webhooks, real dashboard — all on the free plan. No credit card.

Get a free access key →