HTML Input Attributes Reference
Master all HTML input attributes with interactive examples, validation patterns, and accessibility features. Complete documentation for modern web development.
๐งช Interactive Attribute Explorer
Select attributes below to see them in action. Watch the input change in real-time!
Choose Attributes
โ๏ธ Basic Attributes
โ Validation Attributes
๐ฏ Behavior Attributes
โฟ Accessibility Attributes
๐จ Styling Attributes
Live Preview
Generated HTML Code
Attribute Information
Select attributes from the left panel to see detailed information here.
๐ Complete Attribute Reference
โ๏ธ Basic Attributes
Fundamental attributes that define the basic behavior and identity of input elements.
name
Specifies the name of the input element, used when submitting form data.
<input type="text" name="username">
- Required for form submission
- Should be unique within the form
- Used by server-side processing
id
Provides a unique identifier for the element, used for CSS styling and JavaScript.
<input type="text" id="user-email">
- Must be unique on the page
- Used for label association
- Enables CSS and JavaScript targeting
value
Sets the initial value of the input element.
<input type="text" value="Default text">
- Pre-fills the input field
- Can be changed by user interaction
- Accessible via JavaScript
placeholder
Provides hint text that appears when the input is empty.
<input type="email" placeholder="Enter your email">
- Disappears when user starts typing
- Should not replace proper labels
- Use for additional context only
type
Defines the type of input control to display.
<input type="email"> <!-- email keyboard on mobile -->
- Determines input behavior and validation
- Affects mobile keyboard appearance
- Enables browser-specific features
๐ฏ Common Use Case Examples
Real-world examples of HTML input attributes in action.
๐ง Email Input with Validation
<input type="email"
required
autocomplete="email"
placeholder="[email protected]"
aria-label="Email address">
Perfect for registration forms with built-in email validation and autocomplete.
๐ Secure Password Input
<input type="password"
required
minlength="8"
autocomplete="new-password"
placeholder="Create password">
Secure password field with minimum length validation for new accounts.
๐ฑ Phone Number Input
<input type="tel"
inputmode="tel"
autocomplete="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="123-456-7890">
Mobile-optimized phone input with numeric keyboard and format validation.
๐ข Number Range Input
<input type="number"
min="1"
max="100"
step="5"
value="50"
aria-label="Select quantity">
Number input with range limits and step increment for quantity selection.
๐ Date Picker Input
<input type="date"
required
autocomplete="bday"
min="1900-01-01"
max="2023-12-31">
Date picker with validation range for birthday selection forms.
๐ File Upload Input
<input type="file"
accept="image/*"
multiple
aria-label="Upload images">
File upload restricted to images with multiple file selection capability.
โจ Best Practices & Tips
Validation Strategy
- Always validate on both client and server
- Use appropriate input types for automatic validation
- Provide clear error messages
- Consider progressive enhancement
Accessibility Excellence
- Always associate labels with inputs
- Use aria-label for additional context
- Ensure sufficient color contrast
- Test with screen readers
Mobile Optimization
- Use appropriate input types for mobile keyboards
- Set inputmode for better keyboard selection
- Make touch targets large enough
- Test on actual mobile devices
Security Considerations
- Use autocomplete attributes appropriately
- Never trust client-side validation alone
- Sanitize all input data server-side
- Use HTTPS for sensitive forms