What Are HTML Input Types?
The type attribute of the <input> element determines the kind of data users can enter. Different input types serve different purposes, like accepting text, passwords, dates, files or numbers.
For example:
<input type="text" name="username" placeholder="Enter your name">
<input type="password" name="password" placeholder="Enter your password">
Common HTML Input Types with Examples
Here’s a detailed explanation of each input type along with its use cases and examples.
1. type=”text”
Creates a single-line text input field for general-purpose data like names or comments.
Example:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<button type="submit">Submit</button>
</form>
2. type=”password”
Creates a field where the input is masked, commonly used for entering passwords.
Example:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<button type="submit">Login</button>
</form>
3. type=”email”
Accepts only valid email addresses and provides basic validation.
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
4. type=”number”
Creates an input field for numeric values. You can specify ranges with min, max, and step.
Example:
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
<button type="submit">Add to Cart</button>
</form>
5. type=”date”
Allows users to select a date from a calendar interface.
Example:
<form>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<button type="submit">Submit</button>
</form>
6. type=”radio”
Lets users select one option from a group of predefined choices.
Example:
<form>
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<button type="submit">Submit</button>
</form>
7. type=”checkbox”
Lets users select one or more options from a set.
Example:
<form>
<label>Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling" name="hobby" value="traveling">
<label for="traveling">Traveling</label><br>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Sports</label><br>
<button type="submit">Submit</button>
</form>
8. type=”file”
Allows users to upload files.
Example:
<form>
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" required>
<button type="submit">Upload</button>
</form>
9. type=”color”
Lets users select a color from a color picker.
Example:
<form>
<label for="favcolor">Choose your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
<button type="submit">Submit</button>
</form>
10. type=”range”
Creates a slider control to select a value within a range.
Example:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">
<button type="submit">Save</button>
</form>
11. type=”hidden”
Stores data that users cannot see or edit.
Example:
<form action="/submit" method="POST">
<input type="hidden" name="user_id" value="12345">
<button type="submit">Submit</button>
</form>
12. type=”tel”
Specifies an input field for telephone numbers.
Example:
<form>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890">
<button type="submit">Submit</button>
</form>
13. type=”url”
Specifies an input field for URLs.
Example:
<form>
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
<button type="submit">Submit</button>
</form>