HTML Input Types Reference - Complete Guide

🚀 Quick Navigation

Text Inputs Number Inputs Date & Time Selection File Upload Color & Range Buttons Browser Support

📊 Input Types Overview

Total Input Types

HTML5

Standard

95%+

Browser Support

Mobile

Optimized

🔤 Text-based Inputs

Essential input types for collecting text and specialized text data from users.

text

Universal

Enter your name:

Standard single-line text input. The most basic and widely used input type.

✓ Universal support ✓ Customizable placeholder ✓ Length validation

<input type="text" name="username" placeholder="Enter username" maxlength="30" required>

password

Universal

Enter password:

Masked text input for sensitive information like passwords.

✓ Auto-masked display ✓ Security focused ✓ No autocomplete default

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

email

HTML5

Enter email:

Email address input with built-in validation and mobile keyboard optimization.

✓ Email validation ✓ Mobile @ keyboard ✓ Multiple emails support

<input type="email" name="email" placeholder="Enter your email" required>

url

HTML5

Enter website URL:

URL input with validation for web addresses and mobile keyboard optimization.

✓ URL validation ✓ Protocol enforcement ✓ Mobile .com keyboard

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

tel

HTML5

Enter phone number:

Telephone number input optimized for mobile numeric keyboards.

✓ Mobile numeric pad ✓ International format ✓ Pattern validation

<input type="tel" name="phone" placeholder="+1 (555) 123-4567" pattern="[+]?[0-9\\s\\-\\(\\)]+">

search

HTML5

Search:

Search input with enhanced UX features like clear button and search suggestions.

✓ Clear button (some browsers) ✓ Search history ✓ Enhanced accessibility

<input type="search" name="query" placeholder="Search..." autocomplete="off">

🔢 Number Inputs

Specialized inputs for numeric data with built-in validation and controls.

number

HTML5

Enter quantity:

Numeric input with spinner controls and built-in validation.

✓ Spinner controls ✓ Min/max validation ✓ Step increment

<input type="number" name="quantity" min="1" max="100" step="1" value="1">

range

HTML5

Volume: 50%

Slider control for selecting values within a range.

✓ Visual slider ✓ Touch-friendly ✓ Continuous values

<input type="range" name="volume" min="0" max="100" value="50" step="1">

📅 Date & Time Inputs

Specialized inputs for date and time selection with native picker support.

date

Modern

Select date:

Date picker with native calendar interface in supported browsers.

✓ Native date picker ✓ Locale formatting ✓ Min/max dates

<input type="date" name="birthdate" min="1900-01-01" max="2024-12-31">

time

Modern

Select time:

Time picker with hour and minute selection.

✓ Native time picker ✓ 24-hour format ✓ Step intervals

<input type="time" name="appointment" step="900">

datetime-local

Modern

Select date & time:

Combined date and time picker without timezone.

✓ Date + time picker ✓ Local timezone ✓ Event scheduling

<input type="datetime-local" name="event-start">

month

Modern

Select month:

Month and year picker for date ranges.

✓ Month/year picker ✓ Range selection ✓ Billing periods

<input type="month" name="billing-period">

week

Limited

Select week:

Week picker showing week number and year.

✓ Week number format ✓ ISO 8601 standard ⚠ Limited support

<input type="week" name="project-week">

☑️ Selection Inputs

Inputs for selecting options from predefined choices.

checkbox

Universal

Subscribe to newsletter

Boolean input for yes/no choices and multiple selections.

✓ Boolean values ✓ Multiple selection ✓ Custom styling

<input type="checkbox" name="newsletter" value="yes" checked>

radio

Universal

Choose size: Small Medium Large

Single selection from a group of mutually exclusive options.

✓ Single selection ✓ Grouped options ✓ Accessible grouping

<input type="radio" name="size" value="medium" checked>

📁 File Upload

Input for uploading files with format and size restrictions.

file

Universal

Upload file:

File upload input with format restrictions and multiple file support.

✓ Multiple files ✓ File type filtering ✓ Drag & drop support

<input type="file" name="upload" accept="image/*" multiple>

🎨 Color & Visual

Inputs for color selection and visual elements.

color

HTML5

Choose color:

Color picker with native color selection interface.

✓ Native color picker ✓ Hex value output ✓ Alpha transparency

<input type="color" name="theme-color" value="#3366cc">

🔘 Button Inputs

Button-type inputs for form actions and interactions.

submit

Universal

Submit button that triggers form submission.

✓ Form submission ✓ Default action ✓ Enter key trigger

<input type="submit" value="Submit Form">

reset

Universal

Reset button that clears all form fields to default values.

✓ Form reset ✓ Default values ✓ Instant action

<input type="reset" value="Clear Form">

button

Universal

Generic button for custom JavaScript actions.

✓ Custom actions ✓ JavaScript events ✓ No default behavior

<input type="button" value="Custom Action" onclick="myFunction()">

image

Rarely Used

Image-based submit button with coordinate data.

✓ Image submit ✓ Click coordinates ✓ Custom styling

<input type="image" src="submit-btn.png" alt="Submit" width="100" height="30">

🔒 Hidden Input

Hidden input for passing data without user interaction.

hidden

Universal

Hidden input (not visible): value="hidden-data"

Invisible input for passing server data, tokens, or state information.

✓ Invisible to user ✓ Form submission ✓ State management

<input type="hidden" name="csrf_token" value="abc123def456">

🌐 Browser Support Matrix

Comprehensive browser support information for all HTML5 input types.

Input Type

Chrome

Firefox

Safari

Edge

Mobile

text, password

✓ All

email, url, tel

✓ 5+

✓ 4+

✓ 5+

✓ 12+

✓ iOS 3.1+

number, range

✓ 6+

✓ 29+

✓ 5+

✓ 12+

✓ Good

date, time

✓ 20+

⚠ 57+

✓ 14.1+

✓ 12+

✓ Good

color

✓ 20+

✓ 29+

✓ 12.1+

✓ 14+

⚠ Limited

file

✓ All

Full Support

Partial Support

No Support

💡 Best Practices

🎯

Choose the Right Type

Use semantic input types for better UX
Email type shows @ keyboard on mobile
Number type prevents non-numeric input
Date types provide native pickers

📱

Mobile Optimization

Input types trigger appropriate keyboards
Use tel for phone numbers
URL type shows .com key
Test on actual devices

♿

Accessibility

Always provide labels
Use fieldset for radio groups
Add helpful error messages
Test with screen readers

🔧

Progressive Enhancement

Provide fallbacks for older browsers
Use feature detection
Enhance with JavaScript when needed
Test across browser versions