HTML Input Attributes
Enhancing input fields with powerful attributes
⚙️ What are Input Attributes?
Input attributes provide additional functionality and control over form inputs, making them more user-friendly and accessible.
<!-- Input with multiple attributes -->
<input type="text"
placeholder="Enter your name"
required
maxlength="50">
Output:
Essential Input Attributes
placeholder
Shows hint text in empty fields
<input placeholder="Your email">required
Makes field mandatory
<input type="email" required>disabled
Prevents user interaction
<input type="text" disabled>readonly
Prevents editing but allows focus
<input value="Fixed" readonly>📏 Size and Length Attributes
Control the size and length of input fields:
<!-- Maximum length -->
<input type="text" maxlength="10" placeholder="Max 10 chars">
<!-- Minimum length -->
<input type="password" minlength="8" placeholder="Min 8 chars">
<!-- Size (visual width) -->
<input type="text" size="30" placeholder="Wide input field">Output:
🔢 Number Range Attributes
Set limits for numeric inputs:
<!-- Number with min/max -->
<input type="number" min="1" max="100" value="50">
<!-- Range with step -->
<input type="range" min="0" max="10" step="0.5">
<!-- Date range -->
<input type="date" min="2024-01-01" max="2024-12-31">Output:
🎯 Pattern and Validation
Use patterns for custom validation:
<!-- Phone number pattern -->
<input type="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="123-456-7890">
<!-- Custom validation message -->
<input type="email"
required
title="Please enter a valid email">Output:
🔄 Auto-features
Enhance user experience with auto-features:
<!-- Auto-focus on page load -->
<input type="text" autofocus placeholder="Focused on load">
<!-- Auto-complete suggestions -->
<input type="email" autocomplete="email">
<!-- Auto-capitalize -->
<input type="text" autocapitalize="words">