HTML Input Types
Exploring different input types for better user experience
📝 What are HTML Input Types?
HTML input types define what kind of data users can enter in form fields. Different types provide different interfaces and validation.
<!-- Basic text input -->
<input type="text" placeholder="Enter your name">
<!-- Email input with validation -->
<input type="email" placeholder="Enter your email">
Output:
Text Input Types
Text
Basic single-line text input
<input type="text" name="username">Password
Hidden text for passwords
<input type="password" name="pwd">Email input with validation
<input type="email" name="email">Search
Search input with clear button
<input type="search" name="query">🔢 Number and Range Inputs
These inputs handle numeric values with built-in validation:
<!-- Number input -->
<label>Age: <input type="number" min="1" max="120"></label>
<!-- Range slider -->
<label>Volume: <input type="range" min="0" max="100"></label>
<!-- Telephone -->
<label>Phone: <input type="tel"></label>Output:
📅 Date and Time Inputs
HTML5 provides various date and time input types:
<!-- Date picker -->
<label>Birthday: <input type="date"></label>
<!-- Time picker -->
<label>Meeting time: <input type="time"></label>
<!-- Date and time -->
<label>Appointment: <input type="datetime-local"></label>Output:
✅ Selection Inputs
These inputs allow users to make selections:
<!-- Checkbox -->
<input type="checkbox" id="agree">
<label for="agree">I agree to terms</label>
<!-- Radio buttons -->
<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>