HTML Input Types: Complete Guide

The type attribute is the most powerful attribute in HTML forms. Changing one word turns a plain text box into a date picker, a slider, a file chooser or a colour picker — and gives you free validation and the right on-screen keyboard on phones.

Here is every input type, grouped by what you'd use it for.

Text-based inputs

text

The default. A single line of free text — names, cities, job titles.

<input type="text" name="company" autocomplete="organization">

email

Checks the value looks like an email address and shows an @ key on mobile keyboards. Add multiple to accept a comma-separated list.

<input type="email" name="email" autocomplete="email" required>

password

Masks the characters typed. Use autocomplete="current-password" on login forms and new-password on sign-up forms so password managers behave correctly.

<input type="password" name="password" autocomplete="new-password" minlength="8" required>

tel

Shows a phone keypad. It does not validate a format, because phone numbers vary so much worldwide — add a pattern if you need one.

<input type="tel" name="phone" autocomplete="tel">

url

Requires a full URL including the scheme (https://).

<input type="url" name="website" placeholder="https://example.com">

search

Behaves like text, but browsers may add a clear button and some screen readers announce it as a search field.

<input type="search" name="q" aria-label="Search the docs">

Numbers

number

Only accepts numbers, supports min, max and step.

<input type="number" name="guests" min="1" max="10" value="2">

Watch out: don't use number for things that look like numbers but aren't quantities — card numbers, ZIP codes, phone numbers. Use text with inputmode="numeric" instead:

<input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" autocomplete="postal-code">

range

A slider for approximate values, where the exact number matters less than the position.

<label for="budget">Budget</label>
<input type="range" id="budget" name="budget" min="500" max="10000" step="500">

Dates and times

All of these open the browser's native picker and submit values in a standard format such as 2026-11-09.

Type	Picks	Submitted as
date	A day	2026-11-09
time	A time	14:30
datetime-local	Date and time	2026-11-09T14:30
month	Month and year	2026-11
week	A week number	2026-W45

<input type="date" name="arrival" min="2026-01-01" max="2026-12-31">

For dates of birth, three simple fields (day, month, year) are often easier than scrolling a calendar back decades.

Choices

checkbox

On/off, or pick any number from a set. Unticked checkboxes are not submitted at all.

<label><input type="checkbox" name="topics" value="design"> Design</label>
<label><input type="checkbox" name="topics" value="code"> Code</label>

radio

Pick exactly one. Buttons sharing the same name form a group. Put required on one of them to require a choice.

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free" required> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

Files, colours and other special types

file

Lets people upload files. The form needs method="POST" and enctype="multipart/form-data". Use accept to filter file types and multiple to allow several.

<form action="https://api.formclick.io/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="cv">Upload your CV (PDF)</label>
  <input type="file" id="cv" name="cv" accept=".pdf,application/pdf">
  <button type="submit">Apply</button>
</form>
<script src="https://cdn.formclick.io/formclick.min.js"></script>

With Formclick, file uploads are available on the Pro and Business plans: the formclick.min.js script turns the file input into a drag-and-drop uploader and accepts files up to 5 MB each. More in How to Add File Uploads to HTML Forms.

color

Opens a colour picker and submits a hex value like #645cec.

<input type="color" name="brand_color" value="#645cec">

hidden

Invisible data sent with the form — tracking which page a lead came from, a campaign ID, or a service key such as Formclick's access_key. Never put secrets here; anyone can view the page source.

<input type="hidden" name="source" value="pricing-page">

Button types

submit, reset, button and image all exist as input types, but a <button> element is more flexible because it can contain HTML. reset clears the whole form and is rarely helpful — people click it by accident.

Pair type with autocomplete and inputmode

Two companion attributes make inputs dramatically faster on mobile:

• autocomplete tells the browser what the field is (name, email, street-address, postal-code, one-time-code…) so it can fill it in.
• inputmode picks the on-screen keyboard (numeric, decimal, tel, email, url, search) without changing validation.

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

Cheat sheet: which type should I use?

Field	Use
Name, city, job title	text
Email	email
Phone	tel
Website	url
Quantity, age	number
ZIP / postcode, card number	text + inputmode="numeric"
Appointment date	date
One choice from a few	radio
Several choices	checkbox
Attachment	file
Data the user shouldn't edit	hidden

Choosing the right type is the cheapest usability win in form design. Next, see how these come together in a real project: How to Create a Registration Form in HTML.