The
<input>element is one of the most versatile and commonly used elements in HTML forms.
It can represent different types of input fields depending on thetypeattribute.
Each input type provides a specific way to collect and validate user data.
<input type="text" name="username">The type attribute defines the kind of input. For example, text, email, password, checkbox, and so on.
Commonly Used Input Types
| Input Type | Description | Example |
|---|---|---|
text | A single-line text input. | <input type="text"> |
password | Hides input characters (for passwords). | <input type="password"> |
email | Validates email format. | <input type="email"> |
number | Allows numeric input only. | <input type="number"> |
tel | For phone numbers. | <input type="tel"> |
url | Ensures valid website URL format. | <input type="url"> |
date | Provides a calendar for date selection. | <input type="date"> |
time | Lets users pick a time. | <input type="time"> |
datetime-local | For date and time without timezone. | <input type="datetime-local"> |
month | For selecting a month and year. | <input type="month"> |
week | For selecting a week and year. | <input type="week"> |
color | Opens a color picker. | <input type="color"> |
checkbox | Allows multiple selections. | <input type="checkbox"> |
radio | Allows a single selection from multiple options. | <input type="radio"> |
file | Lets users upload files. | <input type="file"> |
range | Displays a slider for numeric values. | <input type="range" min="0" max="100"> |
hidden | Used to store data that’s not visible to users. | <input type="hidden" name="id" value="001"> |
submit | Creates a form submission button. | <input type="submit"> |
reset | Resets all form fields. | <input type="reset"> |
button | Generic clickable button. | <input type="button" value="Click Me"> |
Example: Various Input Types
<form action="/submit" method="post">
<!-- Text-based Inputs -->
<label>Text:</label>
<input type="text" name="username" placeholder="Enter your name"><br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Enter password"><br><br>
<label>Email:</label>
<input type="email" name="email" placeholder="name@example.com"><br><br>
<label>Telephone:</label>
<input type="tel" name="phone" placeholder="+91 9876543210"><br><br>
<label>Number:</label>
<input type="number" name="age" min="1" max="100"><br><br>
<label>URL:</label>
<input type="url" name="website" placeholder="https://example.com"><br><br>
<!-- Date and Time Inputs -->
<label>Date:</label>
<input type="date" name="dob"><br><br>
<label>Time:</label>
<input type="time" name="appt"><br><br>
<label>Datetime Local:</label>
<input type="datetime-local" name="meeting"><br><br>
<label>Month:</label>
<input type="month" name="birthmonth"><br><br>
<label>Week:</label>
<input type="week" name="projectweek"><br><br>
<!-- Choice Inputs -->
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling"> Traveling
<input type="checkbox" name="hobby" value="music"> Music<br><br>
<!-- File and Color Inputs -->
<label>Upload File:</label>
<input type="file" name="resume"><br><br>
<label>Favorite Color:</label>
<input type="color" name="favcolor"><br><br>
<!-- Range Input -->
<label>Volume:</label>
<input type="range" name="volume" min="0" max="100"><br><br>
<!-- Hidden Input -->
<input type="hidden" name="userid" value="12345">
<!-- Buttons -->
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</form>
Explanation
- Text-based Inputs —
text,password,email,tel,url,numberlet users enter basic info. - Date & Time Inputs —
date,time,month,week, anddatetime-localadd native pickers. - Choice Inputs —
checkboxandradioprovide selection options. - File/Color/Range —
fileuploads,coloropens a color picker,rangeprovides a slider. - Buttons —
submit,reset, andbuttoncontrol form actions. - Hidden — Stores background data like user IDs or tokens.
Key Notes
- Each input should have a name attribute for data submission.
- Use
placeholderfor hint text inside input fields. - Use
required,min,max, andpatternattributes for validation. - Radio buttons with the same name are grouped together.
- The
filetype requiresenctype="multipart/form-data"in the<form>tag for file uploads.
Conclusion
HTML input types determine what kind of data can be entered and how browsers validate it.
By using appropriate input types, you make forms more intuitive, secure, and user-friendly.
Next, we’ll explore HTML Input Attributes — which define how these input types behave and interact.
