Home / HTML / Forms / Input Types

HTML Input Types

What are Input Types?

The HTML <input> element has many different types that control how the input field behaves and what kind of data it accepts. HTML5 introduced many new input types that provide better validation and user experience. Understanding all input types is essential for creating effective forms.

Text Input Types

1. Text (Default)

Single-line text input:

Example
<input type="text" name="username" placeholder="Enter username">

2. Password

Password input (characters are masked):

Example
<input type="password" name="password" placeholder="Enter password">

3. Email

Email input with validation:

Example
<input type="email" name="email" placeholder="Enter email">

4. Search

Search input field:

Example
<input type="search" name="q" placeholder="Search...">

5. URL

URL input with validation:

Example
<input type="url" name="website" placeholder="Enter website URL">

6. Tel

Telephone number input:

Example
<input type="tel" name="phone" placeholder="Enter phone number">

Numeric Input Types

7. Number

Numeric input with up/down arrows:

Example
<input type="number" name="age" min="0" max="120" placeholder="Enter age">

8. Range

Slider control for numeric values:

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

Date and Time Input Types

9. Date

Date picker (year, month, day):

Example
<input type="date" name="birthdate">

10. Time

Time picker (hours, minutes):

Example
<input type="time" name="time">

11. Datetime-local

Date and time picker (no timezone):

Example
<input type="datetime-local" name="datetime">

12. Month

Month picker (year and month):

Example
<input type="month" name="month">

13. Week

Week picker (year and week):

Example
<input type="week" name="week">

Selection Input Types

14. Checkbox

Checkbox for multiple selections:

Example
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms</label>

15. Radio

Radio button for single selection from a group:

Example
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Button Input Types

16. Submit

Submit button for form submission:

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

17. Reset

Reset button to clear form fields:

Example
<input type="reset" value="Reset">

18. Button

Generic button (use with JavaScript):

Example
<input type="button" value="Click Me" onclick="alert('Clicked!')">

Other Input Types

19. Color

Color picker:

Example
<input type="color" name="color" value="#4b3190">

20. File

File upload button:

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

21. Hidden

Hidden input field (not visible to users):

Example
<input type="hidden" name="user_id" value="123">

Input Type Reference

Type Description HTML5
text Single-line text input HTML4
password Password input (masked) HTML4
email Email input with validation HTML5
url URL input with validation HTML5
tel Telephone number input HTML5
number Numeric input HTML5
range Slider control HTML5
date Date picker HTML5
time Time picker HTML5
datetime-local Date and time picker HTML5
month Month picker HTML5
week Week picker HTML5
checkbox Checkbox for multiple selection HTML4
radio Radio button for single selection HTML4
color Color picker HTML5
file File upload HTML4
hidden Hidden input field HTML4
submit Submit button HTML4
reset Reset button HTML4
button Generic button HTML4

Best Practices

← Form Elements Input Attributes →