HTML Input Types

HTML Input Types: Single-Line Text, Passwords, Radios, and Date Pickers

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.

Common Input Types Reference

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:

1. Text Controls: text, password, email, url, tel, search.
2. Choice Controls: checkbox (multiple selections), radio (single selection from a group).
3. Selection Controls: date, time, datetime-local, color, range.
4. Action Controls: submit, reset, button, file.

Input Type Behavior Matrix

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"]

Practical Code Example

<!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>

Best Practices

• Use 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).
• Share the name attribute on radio button groups: Radio buttons must share the exact same name attribute value to enforce mutually exclusive single selection.
• Always provide a value attribute on radio and checkbox controls: Inputs without explicit value attributes transmit the default string "on" to server scripts when checked.

Self-Check Challenge

Create two radio buttons with name="plan" sharing choices "Monthly" and "Annual", with "Monthly" selected by default using the checked attribute!