HTML input fields: types, validation, and backend-ready examples

Short answer: choose an input type that matches the data, connect it to a visible <label>, give it a meaningful name, and validate the received value on the backend. This is a copyable, backend-ready starting point:

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

4
  <label for="name">Full name</label>
5
  <input type="text" id="name" name="name" autocomplete="name" required />
6

7
  <label for="email">Email</label>
8
  <input type="email" id="email" name="email" autocomplete="email" required />
9

10
  <button type="submit">Send</button>
11
</form>

The browser posts name=value pairs to the form action. An input without name is not included. Replace YOUR_ACCESS_KEY with your public FormsFort form key, or generate a complete snippet with the HTML form template generator. The HTML form elements reference helps choose the right control for longer text, choices, and uploads.

Common HTML input types

Use semantic types instead of type="text" everywhere. They influence browser validation, autofill, mobile keyboards, and the meaning available to assistive technology.

Use the HTML input type generator when you know the field but want a ready-to-paste label, attributes, and name.

Labels, IDs, and names are different jobs

id connects a control to its label and must be unique on the page. name is the backend field key and should remain stable for notifications, webhook mappings, and exports. The label text is what visitors see; it can change without changing your data contract.

1
<label for="company">Company</label>
2
<input
3
  type="text"
4
  id="company"
5
  name="company"
6
  autocomplete="organization"
7
  maxlength="120"
8
/>

Do not use a placeholder as the only label. If helper text is needed, connect it with aria-describedby:

1
<label for="website">Website</label>
2
<p id="website-hint">Include https:// so we can open the link.</p>
3
<input type="url" id="website" name="website" aria-describedby="website-hint" placeholder="https://example.com" />

Autocomplete and mobile-friendly choices

Autocomplete tokens such as name, email, tel, and organization let browsers fill information the visitor has already supplied. Use the correct token and do not disable autofill without a real reason. type="tel" is usually better than number for phone numbers because phone values can contain +, spaces, extensions, or leading zeroes.

1
<label for="phone">Phone</label>
2
<input type="tel" id="phone" name="phone" autocomplete="tel" inputmode="tel" />
3

4
<label for="quantity">Quantity</label>
5
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" inputmode="numeric" required />

inputmode suggests a keyboard; it does not replace type validation. Do not use number for ZIP codes, account IDs, or other identifiers where formatting and leading zeroes matter.

Browser validation that helps rather than surprises

Use native constraints for fast feedback, then repeat the rules on the backend:

1
<label for="work-email">Work email</label>
2
<input type="email" id="work-email" name="work_email" autocomplete="email" required />
3

4
<label for="company-size">Company size</label>
5
<input type="number" id="company-size" name="company_size" min="1" max="100000" step="1" />
6

7
<label for="website-url">Website</label>
8
<input type="url" id="website-url" name="website" placeholder="https://example.com" />

A required field containing only spaces can pass a naïve server check, so trim values before applying business rules. pattern uses the browser’s regular-expression behavior and may reject a value users consider valid; provide a concrete hint when you use one. min and max constrain numbers and dates but do not protect the backend from a crafted request. Test these boundaries with the HTML form validation tester.

Do not add novalidate just to hide an inconvenient browser message. If custom validation is necessary, preserve keyboard focus, an error summary, and an association between each error and its control.

Hidden fields are context, not secrets

Hidden controls submit like other successful controls, but visitors can inspect them in developer tools. Use them for public context such as a subject, campaign source, or redirect path:

1
<input type="hidden" name="subject" value="New demo request" />
2
<input type="hidden" name="source" value="pricing-page" />

Never put API secrets, authorization decisions, or trusted prices in hidden inputs. Treat every field as untrusted input on receipt.

Checkboxes, radios, and files

A checked checkbox contributes its value; an unchecked checkbox contributes nothing. Give repeated checkboxes the same name when your backend supports a list, or use a deliberate naming convention. Radio inputs need a shared name and distinct values; see the HTML radio button guide for grouping and keyboard details.

For uploads, use enctype="multipart/form-data" and a file input with a narrow accept hint. accept filters the file picker but is not a security check; validate size and type after upload.

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="resume">Resume (PDF or DOCX)</label>
4
  <input type="file" id="resume" name="resume" accept=".pdf,.docx" />
5
  <button type="submit">Apply</button>
6
</form>

Complete lead-capture form

These fields produce recognizable names for notification messages and follow-up workflows:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New website lead" />
4

5
  <label for="lead-name">Name</label>
6
  <input type="text" id="lead-name" name="name" autocomplete="name" required />
7

8
  <label for="lead-email">Work email</label>
9
  <input type="email" id="lead-email" name="email" autocomplete="email" required />
10

11
  <label for="lead-company">Company</label>
12
  <input type="text" id="lead-company" name="company" autocomplete="organization" />
13

14
  <label for="lead-website">Website</label>
15
  <input type="url" id="lead-website" name="website" placeholder="https://example.com" />
16

17
  <label for="lead-message">What are you planning?</label>
18
  <textarea id="lead-message" name="message" rows="5" maxlength="2000"></textarea>
19

20
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
21
  <button type="submit">Request a conversation</button>
22
</form>

For a complete workflow, compare this with the lead capture form guide and form notifications. The HTML contact library templates provide an alternate starting point, while HTML form examples keeps sample intent in one canonical hub.

Input field checklist

• Every user-facing input has a visible, associated label.
• Every submitted control has a meaningful name and explicit value where needed.
• id values are unique and do not double as unstable backend field names.
• Semantic types and autocomplete tokens match the data.
• Browser constraints improve feedback, but backend validation remains authoritative.
• Hidden values and accept hints are treated as editable hints, never secrets.