What does the name attribute do on an input?

The name attribute is the submitted field key. Your form backend receives name=value pairs based on each input's name.

Which input type should I use for email?

Use input type='email'. It gives browser validation and better mobile keyboards for email addresses.

Do hidden inputs get submitted?

Yes. Hidden inputs are submitted with the form and are useful for access keys, subjects, redirect URLs, and metadata.

Should validation happen only in HTML?

No. HTML validation improves user experience, but server-side validation is still required for trustworthy processing.

HTML Input Fields: Complete Form Guide

The <input> element handles most short form values: names, emails, phone numbers, URLs, dates, files, checkboxes, radio buttons, and hidden metadata.

Strong forms are built from the right input types. The type you choose affects validation, mobile keyboards, accessibility, browser autofill, and the shape of the data your backend receives.

Basic input field

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="email">Email</label>
5
  <input type="email" id="email" name="email" autocomplete="email" required />
6

7
  <button type="submit">Subscribe</button>
8
</form>

Every useful input needs a name. Without it, the browser does not include the field in the submission.

Common input types

Type	Use it for	Example field name
`text`	Names and short text	`name`
`email`	Email addresses	`email`
`tel`	Phone numbers	`phone`
`url`	Website links	`website`
`number`	Numeric values	`quantity`
`date`	Dates	`start_date`
`file`	Attachments	`resume`
`hidden`	Metadata	`subject`
`checkbox`	Yes/no or multi-select	`interests`
`radio`	One choice from a group	`plan`

Prefer semantic types over type="text" everywhere. They make the form easier to complete and easier to validate.

Use autocomplete for known user data

Autocomplete helps browsers fill common personal details accurately.

1
<label for="name">Full name</label>
2
<input type="text" id="name" name="name" autocomplete="name" required />
3

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

7
<label for="phone">Phone</label>
8
<input type="tel" id="phone" name="phone" autocomplete="tel" />

Do not disable autocomplete unless there is a real security reason. For contact and lead forms, autocomplete usually increases completion rates.

Validate short text fields

HTML validation is useful for fast feedback:

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" />
6

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

Use HTML validation to guide visitors. Use backend validation to enforce rules.

Hidden inputs for form metadata

Hidden inputs are useful for metadata that should travel with every submission.

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

Hidden inputs are not secret. Visitors can view and change them in the browser. Use them for routing and context, not for private credentials or trusted authorization decisions.

Complete contact form inputs

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="name">Name</label>
6
  <input type="text" id="name" name="name" autocomplete="name" required />
7

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

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

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

17
  <label for="message">Message</label>
18
  <textarea id="message" name="message" rows="5" required></textarea>
19

20
  <input type="checkbox" name="botcheck" style="display:none" />
21
  <button type="submit">Send</button>
22
</form>

This form gives the backend clean field names and gives the browser enough information to help the visitor finish quickly.

Input mistakes to avoid

Avoid inputs without labels. Placeholders are not a substitute for labels.

Avoid generic names like field1, input2, or data. Use names that make sense in email notifications and exports.

Avoid using number for values that can start with zero, such as ZIP codes, account numbers, or phone numbers. Use text or tel instead.

Avoid trusting hidden inputs. They are submitted by the browser and can be edited by the visitor.

Read the HTML textarea guide for long text fields, the radio button guide for single-choice groups, and the file upload guide for attachments.

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

Basic input field

Common input types

Use autocomplete for known user data

Validate short text fields

Hidden inputs for form metadata

Complete contact form inputs

Input mistakes to avoid

Frequently asked questions

Ready to add forms to your static site?

Basic input field

Common input types

Use autocomplete for known user data

Validate short text fields

Hidden inputs for form metadata

Complete contact form inputs

Input mistakes to avoid

Related guides

Frequently asked questions

Ready to add forms to your static site?