HTML · FORM CONTROL
Last reviewed
A <label> connects a text caption to a form control. Linked with the for attribute (matching the control's id), it makes the field clickable, accessible to screen readers, and easier to tap on mobile. Below is a working form where every field has a proper label.
What gets submitted
Fill in the form above and press its button. The demo stops the request and lists every name=value pair the browser would send, plus the controls it leaves out.
With a free access key in the form, these fields land in your splitforms dashboard; access_key and botcheck are read by splitforms, not stored as lead data.
Copy-paste code
Replace YOUR_ACCESS_KEY with a key from your free splitforms dashboard. The form posts to one endpoint — submissions land in your inbox and dashboard with spam filtering built in.
<form action="https://splitforms.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<!-- Explicit label: for matches the input's id -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" required>
<!-- Implicit label: the control is wrapped inside the label -->
<label>
Email
<input type="email" name="email" required>
</label>
<input type="checkbox" name="botcheck" style="display:none">
<button type="submit">Send</button>
</form>Attributes · <label>
These attributes decide how the <label> behaves and what actually gets emailed to your inbox when someone submits.
| Attribute | What it does |
|---|---|
for | The id of the control this label belongs to. Clicking the label focuses/activates that control. |
form | The id of a <form> elsewhere on the page, if the label is not nested inside one. |
Common mistakes
Most broken forms come down to a few small mistakes with the <label>. Check these before you ship, then forward every submission to Slack or a webhook.
The for attribute references the control's id. People often point it at name= by mistake, which silently breaks the association.
A control should have exactly one label. Multiple labels confuse assistive tech and which one "wins" is inconsistent.
Placeholder text vanishes on focus and is invisible to many screen readers. Always add a real <label>; keep placeholders as short hints.
Sources: WHATWG HTML Standard: <label> · MDN: <label>
The HTML Label example below is a complete, working form — paste it into any HTML page and it submits, no edits to the markup required.
Your html label form posts to one endpoint. No server, PHP, or API route — accepted submissions are saved to your dashboard before owner notification email is attempted; delivery time and inbox placement depend on provider and recipient settings.
Unlike a static reference snippet, this <label> form actually sends data to a free splitforms backend, with spam filtering built in.
How it works
Copy the html label example, drop in your free access key, and paste it into any page — submissions start landing in your dashboard.
Copy the HTML Label example below.
Replace YOUR_ACCESS_KEY with a free splitforms key from the dashboard.
Drop the form into any HTML page. Submissions arrive in your dashboard.
How SplitForms works
splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.
Point your form to your unique SplitForms endpoint. That's it.
We instantly capture and organize every submission in your inbox.
Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.
No credit card required. Set up in under 60 seconds.
Connect & automate
On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.
NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See plans →Questions
The <label> element adds a human-readable caption to a form control. When its for attribute matches a control's id (or the control is nested inside it), clicking the label focuses the field — improving usability and accessibility.
for holds the id of the control the label describes. <label for="email">Email</label> paired with <input id="email"> links them, so clicking "Email" focuses the input and screen readers announce the field as "Email".
Both work. Wrapping (<label>Email <input></label>) is an implicit label; <label for="email">…</label> is explicit. Explicit labels with for are the most reliable across assistive technologies.
Almost always because the for attribute doesn't match the control's id (people match name= instead), the id is duplicated on the page, or the label sits outside the form. Check that for and id are identical and unique.
Yes — every interactive form control should have a programmatically associated label. It's a WCAG requirement and the single biggest factor in whether a form is usable with a screen reader.
Simple pricing
Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.
For side projects and indie devs.
Every paid feature, for agencies and growing products.
Every Pro feature with triple the volume — $0.27 per 1,000 at full use.
No credit card required on Free • Cancel anytime • Full pricing and FAQ
