When building forms in HTML, the element is one of the most important building blocks. HTML5 introduced many useful input types that help improve user experience, validation, and accessibility.
In this article, you’ll learn every input type in HTML, along with simple descriptions and examples you can copy-paste into your projects.
🔤 1. Text-Based Input Types
1. text — Single line text
<input type="text" placeholder="Enter your name">
2. password — Hides characters
<input type="password" placeholder="Enter password">
3. email — Validates email format
<input type="email" placeholder="Enter email">
4. number — Numeric input with min/max
<input type="number" min="1" max="10">
5. tel — For phone numbers
<input type="tel" placeholder="Phone number">
6. url — URL input with validation
<input type="url" placeholder="https://example.com">
7. search — Search box style
<input type="search" placeholder="Search here">
🎨 2. Selection Inputs (Choose/Toggle Options)
8. checkbox — Multiple selection
<input type="checkbox"> Accept Terms
9. radio — Single option from a group
<input type="radio" name="gender"> Male
10. range — Slider
<input type="range" min="0" max="100">
11. color — Color picker
<input type="color">
📅 3. Date & Time Inputs
12. date
<input type="date">
13. time
<input type="time">
14. datetime-local
<input type="datetime-local">
15. month
<input type="month">
16. week
<input type="week">
📁 4. File & Upload Inputs
17. file — Upload files
<input type="file">
🕹️ 5. Button Inputs
18. button
<input type="button" value="Click Me">
19. submit
<input type="submit" value="Submit">
20. reset
<input type="reset" value="Reset">
🕶️ 6. Hidden Input
21. hidden — Store background values
<input type="hidden" value="user123">
🖼️ 7. Special Input
22. image — Image submit button
<input type="image" src="submit.png" width="100">
📝 Summary Table (Easy Reference)
| Input Type | Description |
|---|---|
| text | Single line text |
| password | Hidden characters |
| Email validation | |
| number | Numeric input |
| tel | Phone number |
| url | Website URL |
| search | Search field |
| checkbox | Multiple selection |
| radio | Single choice |
| range | Slider input |
| color | Color picker |
| date | Choose a date |
| time | Choose time |
| datetime-local | Date + time |
| month | Choose month |
| week | Choose week |
| file | Upload a file |
| button | Custom button |
| submit | Submit form |
| reset | Reset form |
| hidden | Hidden value |
| image | Image submit button |
💡 Conclusion
HTML provides a wide range of input types that help improve form usability and user experience. Whether you are collecting text, dates, colors or files — there is an input type designed specifically for that job.
Feel free to copy these examples into your project or bookmark this guide for quick reference.
Happy Learning!!
Top comments (0)