HTML Input Types

HTML Input Types

Choosing the right input type improves usability, validation, accessibility, and mobile experience.

1. Basic & Common Input Types

text

Single-line text input.

password

Hides typed characters.

email

Validates email format automatically.

number

Accepts only numbers.

 2. Selection Input Types

radio

Select one option from a group (same name).

checkbox

Select multiple options.

 3. Date & Time Input Types

date

Pick a date from calendar.

time

Take in a time.

datetime-local

Pick date and time.

 4. File & Media Input Types

file

Upload files.

Multiple files:

image

Image as a submit button.

 5. Color & Range Input Types

color

Choose a color.

range

Slider control.

 6. URL, Search & Phone

url

Validates website URLs.

search

Search input (may show clear button).

tel

Phone number input (mobile-friendly).

 7. Hidden & Button Inputs

hidden

Hidden value sent to server.

submit

Submits the form.

reset

Resets form fields.

button

Custom button (used with JS).

 8. Input Attributes (Very Important)

Common attributes:

• required

• placeholder

• min, max

• readonly

• disabled

• pattern

 9. Input Types Summary Table

 Common Mistakes

•  Using text for everything
•  Not using email, date, number 
•  Forgetting name attribute
•  Ignoring mobile users

Key Points to Remember

• Choose correct input type for data

• Input types provide built-in validation

• Improve UX & accessibility

• Mobile keyboards adapt automatically

• Essential for modern forms