How many input types are there in HTML?

There are 22 values for the type attribute. They are button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url and week. An unknown or missing type falls back to text.

Which input type should I use for a phone number?

Use type tel. It shows a numeric phone keypad on mobile but doesn't validate the format, because phone numbers vary between countries. Add autocomplete tel so browsers can fill it in.

Should I use type number for things like card numbers or postcodes?

No. Use type number only for quantities you might do maths with. For codes made of digits, use type text with inputmode numeric, which shows a number keyboard without spinner buttons or number formatting.

Does type email validate the address?

It checks the basic shape, something@something, and blocks submission if it doesn't match. It doesn't check that the address exists. Add multiple to accept a comma-separated list.

Are hidden inputs submitted?

Yes. A hidden input with a name is submitted like any other field. It isn't secure, because anyone can change its value in the browser's developer tools.

Why does my input value not appear in the submission?

The input needs a name attribute and must not be disabled. Checkbox and radio inputs are only submitted when checked, and button-type inputs are only submitted when they were used to submit.

HTML input types: all 22 types with examples and mobile keyboards

HTML has 22 input types, set with the type attribute on <input>: text, email, tel, url, password, search, number, range, date, time, datetime-local, month, week, color, checkbox, radio, file, hidden, submit, reset, button and image. The type controls what the browser validates and which keyboard phones show. A missing or unknown type falls back to text.

This guide lists every type in one table, then covers the ones that need care, the built-in validation attributes, autocomplete values, and how hidden inputs work as FormSubmit control fields. It's part of the HTML form elements reference.

All 22 HTML input types

Type	What it's for	Mobile keyboard or UI
`text`	Single-line text. The default.	Standard keyboard
`email`	An email address. Validates the basic shape.	Keyboard with `@` and `.`
`tel`	A phone number. No format validation.	Phone keypad
`url`	A full URL including the scheme. Validated.	Keyboard with `/` and `.com`
`password`	Text shown as dots.	Standard keyboard, no autocorrect
`search`	A search query. May show a clear button.	Keyboard with a Search or Go key
`number`	A numeric value with optional `min`, `max`, `step`.	Numeric keyboard (varies by platform)
`range`	A number picked with a slider.	Slider
`date`	A date (year, month, day).	Native date picker
`time`	A time of day.	Native time picker
`datetime-local`	A date and time with no time zone.	Native date and time picker
`month`	A year and month.	Native picker where supported, otherwise text
`week`	A year and week number.	Native picker where supported, otherwise text
`color`	A colour as a hex value like `#4f46e5`.	Colour picker
`checkbox`	An on/off option.	Checkbox
`radio`	One option from a group.	Radio button
`file`	One or more files to upload.	File, photo or camera chooser
`hidden`	A value the visitor doesn't see.	Not shown
`submit`	A button that submits the form.	Button
`reset`	A button that resets every field.	Button
`button`	A button with no default action.	Button
`image`	A submit button drawn as an image.	Image

For buttons, prefer the <button> element over type="submit", type="reset" and type="button" inputs. It can contain HTML, such as an icon and text, and is easier to style.

A form using the common types

signup-form.html

<form action="https://formsubmit.app/f/YOUR_FORM_ID" method="POST">
  <label for="name">Full name</label>
  <input id="name" type="text" name="name" autocomplete="name" required>

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

  <label for="phone">Phone (optional)</label>
  <input id="phone" type="tel" name="phone" autocomplete="tel">

  <label for="website">Website</label>
  <input id="website" type="url" name="website" placeholder="https://" autocomplete="url">

  <label for="team-size">Team size</label>
  <input id="team-size" type="number" name="team_size" min="1" max="1000" step="1">

  <label for="start">Start date</label>
  <input id="start" type="date" name="start_date">

  <input type="hidden" name="_subject" value="New sign-up enquiry">
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
</form>

Notes on the types that need care

email

type="email" checks that the value looks like name@domain and shows an email keyboard on phones. It doesn't check that the address exists. Add multiple to accept a comma-separated list. Pair it with autocomplete="email". If your form has one email field for the visitor, naming it email means FormSubmit uses it as the Reply-To, so replying answers them directly.

tel

type="tel" shows a phone keypad but does no validation, because phone formats differ around the world. Don't add a strict pattern unless you only accept one country's numbers. Use autocomplete="tel".

url

type="url" requires a scheme, so example.com fails and https://example.com passes. That trips people up. Either explain it with a placeholder of https://, or use type="text" with inputmode="url" and normalise the value yourself.

number

type="number" is for quantities: guests, seats, a budget. It adds spinner buttons, accepts e (for exponents), and may change on mouse-wheel scroll. Don't use it for card numbers, postcodes, phone numbers or IDs, where leading zeros matter and maths doesn't. For those, use type="text" with inputmode="numeric" and an optional pattern:

html

<label for="otp">Verification code</label>
<input id="otp" type="text" name="code" inputmode="numeric"
  pattern="[0-9]{6}" autocomplete="one-time-code" maxlength="6">

date, time and datetime-local

These show native pickers and always submit a fixed format whatever the visitor's locale: 2026-10-09 for dates, 14:30 for times and 2026-10-09T14:30 for datetime-local. Set limits with min and max in the same format. datetime-local has no time zone, so if it matters, ask for one or record it separately. For a date of birth, three separate fields or a text input are often quicker to fill in than scrolling a picker back decades.

file

type="file" lets visitors pick files. Use accept to suggest types (accept=".pdf,image/*") and multiple for several files. The form must use method="POST" and enctype="multipart/form-data", or only the file name is sent. On phones, capture can open the camera directly. The file upload form guide covers size limits and how FormSubmit stores uploads.

hidden

type="hidden" sends a value the visitor never sees, such as the page the form is on or a campaign code. It's submitted like any other named field. It isn't secret or tamper-proof, since anyone can edit it in developer tools, so never use it for prices or permissions.

range

type="range" is a slider from min to max (0 to 100 by default). It always has a value, so it's never empty, and it's imprecise. Show the current value with an <output> element and use it for approximate answers only.

color

type="color" opens a colour picker and always submits a lowercase seven-character hex value such as #ff6600. It defaults to #000000, so it can't be "empty".

Built-in validation attributes

The browser checks these before submitting and shows its own error message. They improve the experience, but they're not security: always treat submitted data as untrusted.

Attribute	Applies to	What it does
`required`	Most types	The field must have a value.
`minlength` / `maxlength`	Text-like types	Minimum and maximum number of characters.
`min` / `max`	Number, range, date and time types	Lowest and highest allowed value.
`step`	Number, range, date and time types	Allowed increments. `step="any"` allows decimals on a number input.
`pattern`	Text-like types	A regular expression the whole value must match.
`multiple`	`email`, `file`	Accept more than one value.
`accept`	`file`	Suggested file types.

pattern is matched against the whole value, so pattern="[A-Z]{2}[0-9]{4}" needs exactly two capital letters followed by four digits. Add a title or visible hint that explains the format, because the browser's default error message doesn't.

To style invalid fields only after the visitor has interacted with them, use :user-invalid rather than :invalid, which matches empty required fields as soon as the page loads.

autocomplete values

autocomplete tells the browser what a field is, so it can fill it in from saved details. It's one of the cheapest ways to make a form faster to complete, and it helps people with motor and memory impairments. Common values:

Value	Field
`name`	Full name
`given-name` / `family-name`	First and last name
`email`	Email address
`tel`	Phone number
`organization`	Company name
`street-address`	Full street address (works well on a textarea)
`address-level2`	Town or city
`postal-code`	Postcode or ZIP code
`country-name`	Country
`url`	Website
`bday`	Date of birth
`new-password` / `current-password`	Password on sign-up or log-in
`one-time-code`	A verification code sent by SMS or email
`off`	Don't suggest saved values

Hidden inputs as FormSubmit control fields

With FormSubmit, fields whose names start with an underscore are control fields. They change how the submission is handled and aren't stored as submission data. Most are hidden inputs:

control-fields.html

<input type="hidden" name="_subject" value="New enquiry from the pricing page">
<input type="hidden" name="_redirect" value="https://yoursite.com/thanks.html">
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

_subject sets the subject line of the notification email.
_redirect sends the visitor to your own thank-you page after submitting. A redirect URL set in the form's settings takes priority.
_gotcha is the honeypot. It's a text input hidden with CSS rather than type="hidden", because naive bots fill in every text field. If it has any value, the submission is treated as spam and dropped.

Sending the form

Choosing the right input types gives you cleaner data, but the form still needs somewhere to send it. Point the action at https://formsubmit.app/f/YOUR_FORM_ID with method="POST" and every submission is spam-filtered, stored in your dashboard and emailed to you. Field names become the labels in the email, so team_size shows as "Team size". Follow how to send an HTML form to email for the full setup. For multi-line text see the textarea guide, and for fixed choices the select dropdown and radio buttons guides, or return to the HTML form elements overview.