Input Types

Text-based input types handle different kinds of textual data.

Basic Text Inputs

<!-- Plain text -->
<input type="text" name="name" placeholder="Enter name">

<!-- Password (masked) -->
<input type="password" name="password" autocomplete="new-password">

<!-- Email (validated format) -->
<input type="email" name="email" placeholder="user@example.com">

<!-- Phone (mobile keyboard) -->
<input type="tel" name="phone" pattern="[0-9]{10}">

<!-- URL (validated format) -->
<input type="url" name="website" placeholder="https://example.com">

<!-- Search (clear button) -->
<input type="search" name="query" placeholder="Search...">

Text Input Attributes

<input type="text"
    name="username"
    id="username"
    placeholder="Enter username"
    value="default"
    maxlength="20"
    minlength="3"
    pattern="[A-Za-z0-9]+"
    required
    readonly
    disabled
    autocomplete="username"
    autofocus
    spellcheck="true"
>

Mobile Keyboard Optimization

Type	Mobile Keyboard
text	Standard keyboard
email	Keyboard with @
tel	Numeric keypad
url	Keyboard with /
number	Numeric keypad
search	Keyboard with Search button

Autocomplete Values

<!-- Personal info -->
<input type="text" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="url" autocomplete="url">

<!-- Address -->
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="address-level2">  <!-- City -->
<input type="text" autocomplete="postal-code">

<!-- Payment -->
<input type="text" autocomplete="cc-number">
<input type="text" autocomplete="cc-exp">

<!-- Credentials -->
<input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">

HTML5 introduced specialized input types for specific data formats.

Number and Range

<!-- Number input -->
<input type="number"
    name="quantity"
    min="0"
    max="100"
    step="1"
    value="1"
>

<!-- Decimal number -->
<input type="number"
    name="price"
    min="0.00"
    max="999.99"
    step="0.01"
    value="9.99"
>

<!-- Range slider -->
<input type="range"
    name="volume"
    min="0"
    max="100"
    step="5"
    value="50"
    oninput="output.value = this.value"
>
<output id="output">50</output>

Date and Time

<!-- Date picker -->
<input type="date" name="birthday" min="1900-01-01" max="2024-12-31">

<!-- Time picker -->
<input type="time" name="appointment" min="09:00" max="17:00">

<!-- Date and time -->
<input type="datetime-local" name="event">

<!-- Month -->
<input type="month" name="exp-month">

<!-- Week -->
<input type="week" name="week">

<!-- Duration -->
<input type="time" name="duration" step="1">

Selection Inputs

<!-- Single checkbox -->
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">I agree to the terms</label>

<!-- Multiple checkboxes -->
<fieldset>
    <legend>Interests</legend>
    <input type="checkbox" id="html" name="interests" value="html">
    <label for="html">HTML</label>
    
    <input type="checkbox" id="css" name="interests" value="css">
    <label for="css">CSS</label>
    
    <input type="checkbox" id="js" name="interests" value="js">
    <label for="js">JavaScript</label>
</fieldset>

<!-- Radio buttons -->
<fieldset>
    <legend>Plan</legend>
    <input type="radio" id="free" name="plan" value="free" checked>
    <label for="free">Free</label>
    
    <input type="radio" id="pro" name="plan" value="pro">
    <label for="pro">Pro</label>
    
    <input type="radio" id="enterprise" name="plan" value="enterprise">
    <label for="enterprise">Enterprise</label>
</fieldset>

<!-- Select dropdown -->
<select name="country" required>
    <option value="">Select a country</option>
    <optgroup label="North America">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
    </optgroup>
</select>

File and Color

<!-- Single file -->
<input type="file" name="avatar" accept="image/*">

<!-- Multiple files -->
<input type="file" name="photos" accept="image/*" multiple>

<!-- Specific file types -->
<input type="file" name="document" accept=".pdf,.doc,.docx">

<!-- Color picker -->
<input type="color" name="color" value="#ff0000">

<!-- Hidden field -->
<input type="hidden" name="csrf_token" value="abc123">

HTML5 added many attributes to enhance input functionality.

Common Attributes

Attribute	Purpose	Example
name	Field name for submission	name="email"
id	Unique identifier	id="email"
value	Default/initial value	value="text"
placeholder	Hint text	placeholder="Enter email"
required	Must be filled	required
disabled	Cannot interact	disabled
readonly	Cannot edit	readonly
autofocus	Focus on page load	autofocus
autocomplete	Browser autocomplete	autocomplete="email"

Validation Attributes

<!-- Length constraints -->
<input type="text" minlength="3" maxlength="20">

<!-- Number constraints -->
<input type="number" min="0" max="100" step="1">

<!-- Pattern matching -->
<input type="text" pattern="[A-Za-z]{3}">

<!-- Required field -->
<input type="email" required>

Data Attributes

<input type="text"
    data-validate="email"
    data-error-message="Please enter a valid email"
    data-tooltip="We'll never share your email"
>

<script>
const input = document.querySelector('input[data-validate]');
const errorMessage = input.dataset.errorMessage;
</script>

Input Events

const input = document.querySelector('input');

// Input event (fires on every change)
input.addEventListener('input', (e) => {
    console.log('Current value:', e.target.value);
});

// Change event (fires on blur/submit)
input.addEventListener('change', (e) => {
    console.log('Final value:', e.target.value);
});

// Focus/blur events
input.addEventListener('focus', () => console.log('Focused'));
input.addEventListener('blur', () => console.log('Blurred'));

// Invalid event
input.addEventListener('invalid', (e) => {
    console.log('Validation failed:', e.target.validationMessage);
});

// Constraint Validation API
const isValid = input.checkValidity();
const message = input.validationMessage;
const patterns = input.validity;

Styling Inputs

/* Valid/invalid states */
input:valid {
    border-color: green;
}

input:invalid {
    border-color: red;
}

input:required {
    border-left: 3px solid orange;
}

input:disabled {
    background: #eee;
    cursor: not-allowed;
}

input:focus {
    outline: 2px solid blue;
}

/* Placeholder styling */
input::placeholder {
    color: #999;
    opacity: 1;
}