Input Types Reference

Complete guide to HTML input types with examples and browser support

HTML Input Types Overview

HTML input types define the type of data that users can enter in form fields. Each input type provides specific validation, formatting, and user interface elements to improve the user experience and data quality.

       <!-- Basic input syntax -->
<input type="text" name="username" placeholder="Enter username">
<input type="email" name="email" required>
<input type="password" name="password" minlength="8">
      

Benefits of Using Correct Input Types:

Automatic validation and error messages
Better mobile keyboard layouts
Improved accessibility for screen readers
Enhanced user experience

Text Input Types

Basic Text Inputs

text

Single-line text input for general text data

password

Masked text input for sensitive data

Search input with search-specific styling

textarea

Multi-line text input for longer content

Communication Inputs

Email input with automatic validation

tel

Telephone number input

url

URL input with validation

Number and Date Inputs

Numeric Inputs

number

Numeric input with spinner controls

range

Slider input for selecting from a range

Date & Time Inputs

date

Date picker input

time

Time picker input

datetime-local

Date and time picker (local timezone)

month

Month and year picker

week

Week picker input

Selection and File Inputs

Selection Inputs

checkbox

Multiple selection checkboxes

<input type="checkbox" name="skills" value="html"> HTML

HTML
CSS
JavaScript

radio

Single selection radio buttons

<input type="radio" name="size" value="small"> Small

Small
Medium
Large

select

Dropdown selection menu

<select name="country"><option value="us">United States</option></select>

File & Color Inputs

file

File upload input

color

Color picker input

hidden

Hidden input for storing data

Hidden input (not visible)

Button Types

Note: Button inputs are different from <button> elements. Input buttons are self-closing and have limited styling options.

Button Inputs

submit

Submit button for forms

reset

Reset button to clear form

button

Generic button for JavaScript actions

image

Image submit button

Input Attributes and Validation

HTML5 Validation: Modern browsers provide built-in validation for many input types. Use attributes like required, pattern, min, max, and step for enhanced validation.

       <!-- Common input attributes -->
<input type="email" 
       name="email" 
       required 
       placeholder="Enter your email"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<input type="number" 
       name="age" 
       min="18" 
       max="100" 
       step="1" 
       required>

<input type="password" 
       name="password" 
       minlength="8" 
       maxlength="50" 
       required>

<input type="text" 
       name="username" 
       autocomplete="username" 
       spellcheck="false">
      

Common Input Attributes

Essential Attributes

required - Makes the field mandatory

placeholder - Shows hint text

disabled - Disables the input

readonly - Makes input read-only

autocomplete - Controls browser autocomplete

pattern - Regular expression for validation

min/max - Minimum and maximum values

step - Increment step for numeric inputs

accept - File types for file inputs

multiple - Allows multiple selections

Test Your Knowledge

1. Which input type automatically validates email addresses?

text

url

tel

2. What input type would you use for selecting a single option from multiple choices?

checkbox

radio

select

button