HTML provides various input types that allow users to enter different types of data. Here are some commonly used input types in HTML:
- Text Input (
type="text"
):
<input type="text" name="username" placeholder="Enter your username">
This creates a single-line text input field where users can enter alphanumeric characters.
- Password Input (
type="password"
):
<input type="password" name="password" placeholder="Enter your password">
This creates a password input field where the entered text is masked for security.
- Email Input (
type="email"
):
<input type="email" name="email" placeholder="Enter your email">
This creates an input field specifically designed for email addresses, with built-in validation.
- Number Input (
type="number"
):
<input type="number" name="quantity" min="1" max="10" placeholder="Enter a number between 1 and 10">
This creates an input field for numeric values, restricting input to numbers within the specified range.
- Date Input (
type="date"
):
<input type="date" name="birthdate">
This creates a date picker input field for selecting a date.
- Checkbox (
type="checkbox"
):
<input type="checkbox" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to newsletter</label>
This creates a checkbox that allows users to select or deselect an option.
- Radio Button (
type="radio"
):
<input type="radio" name="gender" value="male">
<label for="gender">Male</label>
<input type="radio" name="gender" value="female">
<label for="gender">Female</label>
This creates multiple radio buttons where users can select a single option from the group.
- File Input (
type="file"
):
<input type="file" name="avatar">
This creates a file upload field, allowing users to select and upload files.
- Range Input (
type="range"
):
<input type="range" name="volume" min="0" max="100">
This creates a slider input for selecting a value within a specified range.
These are just a few examples of input types available in HTML. Each input type serves a specific purpose and has its own attributes and behavior. By utilizing different input types, you can collect specific data from users in a structured manner.