The HTML <input> tag adapts its user interface control based on the value assigned to its type attribute, ranging from plain text fields to interactive date pickers, color pickers, and range sliders.
HTML5 includes specialized input types with built-in mobile keyboard optimization and client-side data validation:
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="email" placeholder="[email protected]">
<input type="number" min="1" max="100">
<input type="date">
<input type="checkbox" id="terms">
<input type="radio" name="gender" value="male">
<input type="color">
<input type="range" min="0" max="100">
Input types categorized:
text, password, email, url, tel, search.checkbox (multiple selections), radio (single selection from a group).date, time, datetime-local, color, range.submit, reset, button, file.flowchart TD
A["<input type='...'>"] --> B["text / email / password -> Native Mobile Keyboard Layouts"]
A --> C["radio -> Exclusive Single Selection (shared name attribute)"]
A --> D["checkbox -> Independent Multiple Selection Checkboxes"]
A --> E["date / color / range -> Native Browser Picker UI Controls"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Input Types Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Custom Event Booking</h2>
<form style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
<div style="margin-bottom: 1rem;">
<label for="event-date" style="display: block; margin-bottom: 0.5rem;">Event Date:</label>
<input type="date" id="event-date" name="event_date" style="padding: 8px; border-radius: 4px; border: 1px solid #334155;">
</div>
<div style="margin-bottom: 1rem;">
<label style="display: block; margin-bottom: 0.5rem;">Ticket Type:</label>
<label style="margin-right: 1rem;">
<input type="radio" name="ticket_tier" value="standard" checked> Standard
</label>
<label>
<input type="radio" name="ticket_tier" value="vip"> VIP
</label>
</div>
<div style="margin-bottom: 1.5rem;">
<label for="bg-color" style="display: block; margin-bottom: 0.5rem;">Theme Color:</label>
<input type="color" id="bg-color" name="theme_color" value="#38bdf8">
</div>
</form>
</body>
</html>
type="email", type="tel", and type="number" for mobile forms: Mobile browsers automatically pop up specialized soft keyboards (e.g. numeric keypad for number, @ key for email).name attribute on radio button groups: Radio buttons must share the exact same name attribute value to enforce mutually exclusive single selection.value attribute on radio and checkbox controls: Inputs without explicit value attributes transmit the default string "on" to server scripts when checked.Create two radio buttons with name="plan" sharing choices "Monthly" and "Annual", with "Monthly" selected by default using the checked attribute!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.