The <input> tag in HTML allows users to enter data inside a web form. The type attribute of the <input> tag defines what kind of data can be entered for example, text, numbers, passwords, or files.
HTML Input Types make forms more functional, interactive, and user-friendly. They ensure that:
- The right input format is used for each field
- Mobile browsers show the correct keyboard (e.g., number pad for numeric fields)
- Data validation becomes easier
- Forms are accessible across all devices
Input types improve both user experience and data accuracy.
Basic Syntax
<input type="text" name="username">Here, type="text" defines a simple single-line input box for user text entry.
List of HTML Input Types
Let’s explore each input type one by one.
1. Text Input (type=”text”)
Used to enter plain single-line text like name or username.
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" placeholder="Enter your name">2. Password Input (type=”password”)
Hides the characters as the user types ideal for login forms.
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" placeholder="Enter password">3. Email Input (type=”email”)
Ensures only valid email addresses can be entered.
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>4. Number Input (type=”number”)
Allows numeric input with optional range control.
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">5. Date Input (type=”date”)
Displays a date picker for easy date selection.
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">6. Datetime-local Input (type=”datetime-local”)
Allows users to select both date and time (local format).
<label for="meeting">Meeting Time:</label>
<input type="datetime-local" id="meeting" name="meeting">7. Time Input (type=”time”)
Used for selecting a time only.
<label for="alarm">Set Alarm:</label>
<input type="time" id="alarm" name="alarm">8. Month Input (type=”month”)
Allows users to select a month and year.
<label for="month">Select Month:</label>
<input type="month" id="month" name="month">9. Week Input (type=”week”)
Used for selecting a specific week of a year.
<label for="week">Select Week:</label>
<input type="week" id="week" name="week">10. File Input (type=”file”)
Allows file uploads such as documents, images, or PDFs.
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.docx,.jpg">11. Checkbox Input (type=”checkbox”)
Used when multiple options can be selected.
<label><input type="checkbox" name="skills" value="HTML"> HTML</label>
<label><input type="checkbox" name="skills" value="CSS"> CSS</label>
<label><input type="checkbox" name="skills" value="JavaScript"> JavaScript</label>12. Radio Input (type=”radio”)
Used when only one option can be selected from a group.
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>13. Color Input (type=”color”)
Displays a color picker interface.
<label for="favcolor">Pick a color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">14. Range Input (type=”range”)
Creates a slider to select a numeric value between a range.
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
15. URL Input (type=”url”)
Validates web addresses with https:// or http://.
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">16. Tel Input (type=”tel”)
Used for entering phone numbers.
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit number">17. Hidden Input (type=”hidden”)
Stores data that is not visible to users but is sent to the server.
<input type="hidden" name="user_id" value="12345">18. Submit Input (type=”submit”)
Sends the form data to the server.
<input type="submit" value="Submit Form">19. Reset Input (type=”reset”)
Clears all fields in the form.
<input type="reset" value="Reset Form">20. Button Input (type=”button”)
Used to trigger custom JavaScript actions.
<input type="button" value="Click Me" onclick="alert('Hello User!')">Full Example of HTML Input Types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Complete guide to HTML Input Types with examples, syntax, and explanations for each input type like text, email, password, file, and range.">
<meta name="keywords" content="HTML input types, HTML form inputs, HTML tutorial, HTML form fields, AdSense safe tutorial, SEO friendly HTML article">
<meta name="author" content="Dharmesh Kundariya">
<title>HTML Input Types Example</title>
</head>
<body>
<h1>HTML Input Types Example</h1>
<form>
<label>Full Name:</label><br>
<input type="text" name="fullname" placeholder="Enter your name"><br><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<label>Email:</label><br>
<input type="email" name="email"><br><br>
<label>Favorite Color:</label><br>
<input type="color" name="favcolor"><br><br>
<label>Upload File:</label><br>
<input type="file" name="resume"><br><br>
<label>Select Range:</label><br>
<input type="range" name="volume" min="0" max="100"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>