CSS Input Types 📝
Explore and master HTML5 input types with beautiful CSS styling, validation, and mobile optimization.
Why HTML5 Input Types Matter
HTML5 introduced semantic input types that provide better user experience, built-in validation, and mobile-friendly interfaces. When combined with CSS, these input types become powerful tools for creating modern web forms.
📱 Mobile Optimization
Right keyboard for each input type
✅ Built-in Validation
Automatic validation without JavaScript
🎨 Enhanced UX
Better user experience across devices
Basic HTML5 Input Types
Common Input Types:
type="email"- Email validation with @ symboltype="url"- URL validationtype="tel"- Telephone number inputtype="number"- Numeric input with steppertype="search"- Search-optimized fieldtype="password"- Masked password input
Basic Input Types Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML5 Input Types</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.form-input {
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.input-info {
font-size: 0.8rem;
color: #718096;
margin-top: 0.25rem;
}
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #667eea;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.9rem;
}
/* Specific input type styles */
input[type="email"] {
background: #f0fff4 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%2338a169" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat right 0.75rem center;
padding-right: 2.5rem;
}
input[type="url"] {
background: #f0f9ff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%230ea5e9" d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>') no-repeat right 0.75rem center;
padding-right: 2.5rem;
}
input[type="tel"] {
background: #fff0f0 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%23e53e3e" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') no-repeat right 0.75rem center;
padding-right: 2.5rem;
}
input[type="number"] {
background: #faf5ff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%239f7aea" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') no-repeat right 0.75rem center;
padding-right: 2.5rem;
}
input[type="search"] {
background: #fffaf0 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%23ed8936" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat left 0.75rem center;
padding-left: 2.5rem;
border-radius: 25px;
}
input[type="password"] {
background: #f7fafc url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%234a5568" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>') no-repeat right 0.75rem center;
padding-right: 2.5rem;
letter-spacing: 0.1em;
}
/* Validation states */
input:valid {
border-color: #48bb78;
}
input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #f56565;
}
/* Range input styling */
input[type="range"] {
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #5a67d8;
transform: scale(1.1);
}
/* Color input styling */
input[type="color"] {
width: 100%;
height: 50px;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
padding: 0;
}
/* Date inputs styling */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
background: #f7fafc;
}
/* File input styling */
input[type="file"] {
width: 100%;
padding: 0.75rem;
border: 2px dashed #cbd5e0;
border-radius: 8px;
background: #f7fafc;
cursor: pointer;
}
input[type="file"]::file-selector-button {
background: #667eea;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
margin-right: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
input[type="file"]::file-selector-button:hover {
background: #5a67d8;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 HTML5 Input Types</h1>
<div class="demo-section">
<h2>Basic Input Types with Icons</h2>
<div class="code-example">
<input type="email"> - Email validation<br>
<input type="url"> - URL validation<br>
<input type="tel"> - Telephone number<br>
<input type="number"> - Numeric input<br>
<input type="search"> - Search field
</div>
<div class="input-grid">
<div class="form-group">
<label class="form-label">Email Address</label>
<input type="email" class="form-input" placeholder="user@example.com" required>
<div class="input-info">Must be a valid email address</div>
</div>
<div class="form-group">
<label class="form-label">Website URL</label>
<input type="url" class="form-input" placeholder="https://example.com">
<div class="input-info">Include http:// or https://</div>
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="tel" class="form-input" placeholder="+1 (555) 123-4567">
<div class="input-info">Format: +1 (555) 123-4567</div>
</div>
<div class="form-group">
<label class="form-label">Age</label>
<input type="number" class="form-input" placeholder="25" min="0" max="120">
<div class="input-info">Between 0 and 120</div>
</div>
<div class="form-group">
<label class="form-label">Search</label>
<input type="search" class="form-input" placeholder="Search...">
<div class="input-info">Type to search</div>
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input type="password" class="form-input" placeholder="••••••••" minlength="8">
<div class="input-info">Minimum 8 characters</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Specialized Input Types</h2>
<div class="code-example">
<input type="range"> - Slider control<br>
<input type="color"> - Color picker<br>
<input type="file"> - File upload<br>
<input type="date"> - Date picker
</div>
<div class="input-grid">
<div class="form-group">
<label class="form-label">Volume Level</label>
<input type="range" class="form-input" min="0" max="100" value="50">
<div class="input-info">Drag to adjust volume</div>
</div>
<div class="form-group">
<label class="form-label">Favorite Color</label>
<input type="color" class="form-input" value="#667eea">
<div class="input-info">Click to choose color</div>
</div>
<div class="form-group">
<label class="form-label">Upload File</label>
<input type="file" class="form-input" accept=".jpg,.png,.pdf">
<div class="input-info">JPG, PNG, or PDF files</div>
</div>
<div class="form-group">
<label class="form-label">Birth Date</label>
<input type="date" class="form-input">
<div class="input-info">Select your birth date</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Date and Time Inputs</h2>
<div class="code-example">
<input type="time"> - Time picker<br>
<input type="datetime-local"> - Date and time<br>
<input type="month"> - Month picker<br>
<input type="week"> - Week picker
</div>
<div class="input-grid">
<div class="form-group">
<label class="form-label">Meeting Time</label>
<input type="time" class="form-input" value="14:30">
<div class="input-info">Select a time</div>
</div>
<div class="form-group">
<label class="form-label">Event Date/Time</label>
<input type="datetime-local" class="form-input">
<div class="input-info">Date and time together</div>
</div>
<div class="form-group">
<label class="form-label">Vacation Month</label>
<input type="month" class="form-input">
<div class="input-info">Select month and year</div>
</div>
<div class="form-group">
<label class="form-label">Project Week</label>
<input type="week" class="form-input">
<div class="input-info">Select a week</div>
</div>
</div>
</div>
</div>
<script>
// Real-time validation feedback
const inputs = document.querySelectorAll('input[type="email"], input[type="url"]');
inputs.forEach(input => {
input.addEventListener('input', function() {
if (this.value) {
if (this.checkValidity()) {
this.style.borderColor = '#48bb78';
} else {
this.style.borderColor = '#f56565';
}
} else {
this.style.borderColor = '#e2e8f0';
}
});
});
// Range value display
const rangeInput = document.querySelector('input[type="range"]');
rangeInput.addEventListener('input', function() {
this.title = `Value: ${this.value}`;
});
</script>
</body>
</html>Advanced Input Features
Enhanced User Experience
Create sophisticated input interfaces with color pickers, range sliders, file upload zones, and auto-suggest search fields.
input[type="color"] - Color picker
input[type="range"] - Custom slider
input[type="file"] - Drag & drop
Interactive Elements
Implement password strength meters, toggle switches, and custom checkboxes that provide immediate feedback to users.
.strength-meter - Password strength
.toggle-switch - On/off toggles
.custom-checkbox - Styled checkboxes
Advanced Features Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Input Types & Features</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #4facfe;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
.form-input {
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
}
.form-input:focus {
outline: none;
border-color: #4facfe;
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}
/* Advanced Range Slider */
.range-container {
position: relative;
margin: 1rem 0;
}
.range-labels {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: #718096;
font-size: 0.8rem;
}
input[type="range"].advanced {
width: 100%;
height: 8px;
background: linear-gradient(to right, #e53e3e, #ed8936, #ecc94b, #48bb78, #4299e1);
border-radius: 4px;
outline: none;
-webkit-appearance: none;
}
input[type="range"].advanced::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: #2d3748;
border-radius: 50%;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
input[type="range"].advanced::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Color Picker with Preview */
.color-preview {
width: 100%;
height: 60px;
border-radius: 8px;
margin-top: 0.5rem;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
input[type="color"].advanced {
width: 100%;
height: 50px;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
padding: 0;
}
/* Date Picker Customization */
input[type="date"].custom {
background: #f7fafc;
position: relative;
}
input[type="date"].custom::-webkit-calendar-picker-indicator {
background: transparent;
bottom: 0;
color: transparent;
cursor: pointer;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}
/* File Upload with Dropzone */
.file-dropzone {
border: 2px dashed #cbd5e0;
border-radius: 8px;
padding: 2rem;
text-align: center;
background: #f7fafc;
transition: all 0.3s ease;
cursor: pointer;
}
.file-dropzone:hover {
border-color: #4facfe;
background: #ebf8ff;
}
.file-dropzone.dragover {
border-color: #4299e1;
background: #bee3f8;
}
.file-preview {
margin-top: 1rem;
display: none;
}
.file-preview img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
}
/* Search with Suggestions */
.search-container {
position: relative;
}
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 0 0 8px 8px;
max-height: 200px;
overflow-y: auto;
display: none;
z-index: 1000;
}
.suggestion-item {
padding: 0.75rem;
cursor: pointer;
border-bottom: 1px solid #f7fafc;
}
.suggestion-item:hover {
background: #f7fafc;
}
/* Password Strength Meter */
.password-strength {
height: 4px;
background: #e2e8f0;
border-radius: 2px;
margin-top: 0.5rem;
overflow: hidden;
}
.strength-meter {
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 2px;
}
.strength-weak { background: #e53e3e; width: 25%; }
.strength-fair { background: #ed8936; width: 50%; }
.strength-good { background: #ecc94b; width: 75%; }
.strength-strong { background: #48bb78; width: 100%; }
/* Toggle Switch */
.toggle-group {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
.toggle-switch {
position: relative;
width: 60px;
height: 30px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background: #4facfe;
}
input:checked + .toggle-slider:before {
transform: translateX(30px);
}
/* Custom Checkbox Group */
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.custom-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-checkbox:hover {
border-color: #4facfe;
background: #f0f9ff;
}
.custom-checkbox input {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #cbd5e0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.custom-checkbox input:checked + .checkmark {
background: #4facfe;
border-color: #4facfe;
}
.custom-checkbox input:checked + .checkmark:after {
content: "✓";
color: white;
font-size: 0.8rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 Advanced Input Features</h1>
<div class="demo-section">
<h2>Enhanced Range Slider</h2>
<div class="form-group">
<label class="form-label">Satisfaction Level</label>
<div class="range-container">
<input type="range" class="advanced" min="0" max="100" value="75">
<div class="range-labels">
<span>Very Unsatisfied</span>
<span>Neutral</span>
<span>Very Satisfied</span>
</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Color Picker with Preview</h2>
<div class="form-group">
<label class="form-label">Choose Brand Color</label>
<input type="color" class="advanced" value="#4facfe" id="brandColor">
<div class="color-preview" id="colorPreview"></div>
</div>
</div>
<div class="demo-section">
<h2>File Upload with Dropzone</h2>
<div class="file-dropzone" id="dropzone">
<p>📁 Drag & drop files here or click to browse</p>
<p style="font-size: 0.8rem; color: #718096;">Supports JPG, PNG, PDF up to 5MB</p>
<input type="file" id="fileInput" style="display: none;" accept=".jpg,.png,.pdf">
</div>
<div class="file-preview" id="filePreview"></div>
</div>
<div class="demo-section">
<h2>Search with Auto-suggestions</h2>
<div class="search-container">
<input type="search" class="form-input" placeholder="Search products..." id="searchInput">
<div class="suggestions" id="suggestions">
<div class="suggestion-item">Laptop Computers</div>
<div class="suggestion-item">Smartphones</div>
<div class="suggestion-item">Headphones</div>
<div class="suggestion-item">Tablets</div>
<div class="suggestion-item">Smart Watches</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Password Strength Meter</h2>
<div class="form-group">
<label class="form-label">Create Password</label>
<input type="password" class="form-input" placeholder="Enter your password" id="passwordInput">
<div class="password-strength">
<div class="strength-meter" id="strengthMeter"></div>
</div>
<div style="font-size: 0.8rem; color: #718096; margin-top: 0.5rem;">
Use uppercase, lowercase, numbers, and symbols
</div>
</div>
</div>
<div class="demo-section">
<h2>Toggle Switches & Checkboxes</h2>
<div class="toggle-group">
<label class="toggle-switch">
<input type="checkbox" id="notifications">
<span class="toggle-slider"></span>
</label>
<label for="notifications" class="form-label">Enable Notifications</label>
</div>
<div class="toggle-group">
<label class="toggle-switch">
<input type="checkbox" id="darkMode" checked>
<span class="toggle-slider"></span>
</label>
<label for="darkMode" class="form-label">Dark Mode</label>
</div>
<label class="form-label" style="margin-top: 1rem;">Interests</label>
<div class="checkbox-group">
<label class="custom-checkbox">
<input type="checkbox" name="interests" value="technology">
<span class="checkmark"></span>
Technology
</label>
<label class="custom-checkbox">
<input type="checkbox" name="interests" value="sports">
<span class="checkmark"></span>
Sports
</label>
<label class="custom-checkbox">
<input type="checkbox" name="interests" value="music">
<span class="checkmark"></span>
Music
</label>
<label class="custom-checkbox">
<input type="checkbox" name="interests" value="travel">
<span class="checkmark"></span>
Travel
</label>
</div>
</div>
</div>
<script>
// Color picker preview
const colorInput = document.getElementById('brandColor');
const colorPreview = document.getElementById('colorPreview');
colorInput.addEventListener('input', function() {
colorPreview.style.background = this.value;
});
// Initialize color preview
colorPreview.style.background = colorInput.value;
// File dropzone functionality
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');
const filePreview = document.getElementById('filePreview');
dropzone.addEventListener('click', () => fileInput.click());
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('dragover');
const files = e.dataTransfer.files;
handleFiles(files);
});
fileInput.addEventListener('change', (e) => {
handleFiles(e.target.files);
});
function handleFiles(files) {
if (files.length > 0) {
const file = files[0];
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
filePreview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
filePreview.style.display = 'block';
};
reader.readAsDataURL(file);
} else {
filePreview.innerHTML = `<p>📄 ${file.name}</p>`;
filePreview.style.display = 'block';
}
}
}
// Search suggestions
const searchInput = document.getElementById('searchInput');
const suggestions = document.getElementById('suggestions');
searchInput.addEventListener('focus', () => {
suggestions.style.display = 'block';
});
searchInput.addEventListener('blur', () => {
setTimeout(() => {
suggestions.style.display = 'none';
}, 200);
});
// Password strength meter
const passwordInput = document.getElementById('passwordInput');
const strengthMeter = document.getElementById('strengthMeter');
passwordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
if (password.length > 0) strength += 25;
if (password.length >= 8) strength += 25;
if (/[A-Z]/.test(password) && /[a-z]/.test(password)) strength += 25;
if (/[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) strength += 25;
strengthMeter.className = 'strength-meter';
if (strength <= 25) strengthMeter.classList.add('strength-weak');
else if (strength <= 50) strengthMeter.classList.add('strength-fair');
else if (strength <= 75) strengthMeter.classList.add('strength-good');
else strengthMeter.classList.add('strength-strong');
});
</script>
</body>
</html>Mobile-Optimized Input Types
Touch-Friendly Design
Mobile devices require larger touch targets, appropriate keyboard types, and optimized layouts. HTML5 input types automatically provide the right keyboard for each input type on mobile devices.
inputmode="numeric" - Number pad
inputmode="email" - Email keyboard
inputmode="tel" - Phone pad
inputmode="url" - URL keyboard
Mobile-Optimized Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-Optimized Input Types</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 1rem;
}
.container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.8rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.form-input {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
-webkit-appearance: none;
}
.form-input:focus {
outline: none;
border-color: #ff9a9e;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1);
}
/* Mobile-optimized input types */
input[type="tel"] {
font-size: 1.1rem;
padding: 1.2rem;
}
input[type="email"] {
font-size: 1.1rem;
padding: 1.2rem;
}
input[type="password"] {
font-size: 1.1rem;
padding: 1.2rem;
letter-spacing: 0.1em;
}
/* Mobile number input */
input[type="tel"] {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%23ff9a9e" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>') no-repeat right 1rem center;
padding-right: 3rem;
}
/* Mobile date inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
font-size: 1.1rem;
padding: 1.2rem;
}
/* Mobile-optimized range */
input[type="range"] {
width: 100%;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 28px;
height: 28px;
background: #ff9a9e;
border-radius: 50%;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Mobile file input */
input[type="file"] {
padding: 1.2rem;
border: 2px dashed #cbd5e0;
border-radius: 12px;
background: #f7fafc;
font-size: 1rem;
}
/* Mobile search */
input[type="search"] {
font-size: 1.1rem;
padding: 1.2rem 1.2rem 1.2rem 3rem;
border-radius: 25px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%23718096" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat left 1rem center;
}
/* Mobile number pad inputs */
input[type="number"],
input[type="tel"] {
inputmode: numeric;
}
input[type="email"] {
inputmode: email;
}
input[type="url"] {
inputmode: url;
}
/* Mobile-friendly buttons */
.mobile-btn {
width: 100%;
padding: 1.2rem;
background: #ff9a9e;
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.mobile-btn:active {
transform: scale(0.98);
background: #ff7b80;
}
/* Touch-friendly checkboxes */
.mobile-checkbox {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
margin: 0.5rem 0;
border: 2px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 60px;
}
.mobile-checkbox:hover {
border-color: #ff9a9e;
background: #fff5f5;
}
.mobile-checkbox input {
width: 24px;
height: 24px;
border: 2px solid #cbd5e0;
border-radius: 6px;
appearance: none;
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.mobile-checkbox input:checked {
background: #ff9a9e;
border-color: #ff9a9e;
}
.mobile-checkbox input:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 0.9rem;
}
/* Mobile-optimized select */
.mobile-select {
width: 100%;
padding: 1.2rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1.1rem;
background: white;
appearance: none;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%23718096" d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 1rem center;
}
/* Responsive adjustments */
@media (max-width: 480px) {
.container {
padding: 1.5rem;
margin: 0.5rem;
}
h1 {
font-size: 1.5rem;
}
.form-input {
padding: 1rem;
}
.mobile-btn {
padding: 1rem;
}
}
/* Mobile-focused enhancements */
.form-input:focus {
transform: translateY(-1px);
}
.mobile-checkbox:active {
transform: scale(0.98);
}
</style>
</head>
<body>
<div class="container">
<h1>📱 Mobile Forms</h1>
<form id="mobileForm">
<div class="form-group">
<label class="form-label">Full Name</label>
<input type="text" class="form-input" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label class="form-label">Email Address</label>
<input type="email" class="form-input" placeholder="your@email.com" required inputmode="email">
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="tel" class="form-input" placeholder="+1 (555) 123-4567" inputmode="tel">
</div>
<div class="form-group">
<label class="form-label">Birth Date</label>
<input type="date" class="form-input">
</div>
<div class="form-group">
<label class="form-label">Meeting Time</label>
<input type="time" class="form-input">
</div>
<div class="form-group">
<label class="form-label">Satisfaction Level</label>
<input type="range" class="form-input" min="0" max="100" value="75">
</div>
<div class="form-group">
<label class="form-label">Country</label>
<select class="mobile-select">
<option>Select Country</option>
<option>United States</option>
<option>Canada</option>
<option>United Kingdom</option>
<option>Australia</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Upload Photo</label>
<input type="file" class="form-input" accept="image/*">
</div>
<div class="form-group">
<label class="form-label">Search</label>
<input type="search" class="form-input" placeholder="Search...">
</div>
<div class="form-group">
<label class="form-label">Notification Preferences</label>
<label class="mobile-checkbox">
<input type="checkbox" name="notifications" value="email">
<span>Email Notifications</span>
</label>
<label class="mobile-checkbox">
<input type="checkbox" name="notifications" value="sms">
<span>SMS Notifications</span>
</label>
<label class="mobile-checkbox">
<input type="checkbox" name="notifications" value="push">
<span>Push Notifications</span>
</label>
</div>
<button type="submit" class="mobile-btn">Create Account</button>
</form>
</div>
<script>
// Mobile form enhancements
const form = document.getElementById('mobileForm');
// Add touch feedback
const inputs = form.querySelectorAll('input, select, .mobile-checkbox');
inputs.forEach(input => {
input.addEventListener('touchstart', function() {
this.style.transform = 'scale(0.98)';
});
input.addEventListener('touchend', function() {
this.style.transform = 'scale(1)';
});
});
// Prevent zoom on focus (iOS)
const textInputs = form.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], input[type="password"]');
textInputs.forEach(input => {
input.addEventListener('focus', function() {
this.style.fontSize = '16px'; // Prevents zoom on iOS
});
});
// Enhanced file input for mobile
const fileInput = form.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
if (this.files.length > 0) {
this.style.background = '#f0fff4';
this.style.borderColor = '#48bb78';
}
});
// Form submission
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('Account created successfully! (Mobile demo)');
});
</script>
</body>
</html>Input Validation & Constraints
✅ HTML5 Validation
Built-in validation attributes
🔍 Real-time Feedback
Immediate validation feedback
📊 Custom Validation
JavaScript-enhanced validation
Validation Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Validation & Constraints</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.form-group {
margin-bottom: 2rem;
}
.form-label {
display: block;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
}
.form-input {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #a8edea;
box-shadow: 0 0 0 3px rgba(168, 237, 234, 0.1);
}
/* Validation States */
.form-input:valid {
border-color: #48bb78;
background: #f0fff4;
}
.form-input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #f56565;
background: #fed7d7;
}
.form-input:required {
border-left: 4px solid #e53e3e;
}
.form-input:optional {
border-left: 4px solid #a0aec0;
}
/* Validation Messages */
.validation-message {
font-size: 0.8rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.valid-message {
color: #48bb78;
}
.invalid-message {
color: #f56565;
}
.validation-message::before {
font-size: 1rem;
}
.valid-message::before {
content: "✅";
}
.invalid-message::before {
content: "❌";
}
/* Pattern-based validation */
input[pattern]:not(:focus):not(:placeholder-shown):invalid {
background: #fed7d7;
border-color: #f56565;
}
input[pattern]:not(:focus):not(:placeholder-shown):valid {
background: #f0fff4;
border-color: #48bb78;
}
/* Range validation */
input[type="range"]:out-of-range {
background: #fed7d7;
}
input[type="range"]:in-range {
background: #f0fff4;
}
/* Custom validation styles */
.custom-valid {
border-color: #48bb78 !important;
background: #f0fff4 !important;
}
.custom-invalid {
border-color: #f56565 !important;
background: #fed7d7 !important;
}
/* Real-time validation feedback */
.validation-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.input-wrapper {
position: relative;
}
.valid .validation-icon.valid-icon {
opacity: 1;
color: #48bb78;
}
.invalid .validation-icon.invalid-icon {
opacity: 1;
color: #f56565;
}
/* Progress indicator */
.password-strength {
margin-top: 0.5rem;
}
.strength-bar {
height: 4px;
background: #e2e8f0;
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.strength-fill {
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 2px;
}
.strength-weak { background: #f56565; width: 25%; }
.strength-fair { background: #ed8936; width: 50%; }
.strength-good { background: #ecc94b; width: 75%; }
.strength-strong { background: #48bb78; width: 100%; }
/* Character counter */
.char-counter {
text-align: right;
font-size: 0.8rem;
color: #718096;
margin-top: 0.25rem;
}
.char-counter.near-limit {
color: #ed8936;
}
.char-counter.over-limit {
color: #f56565;
}
/* Submit button states */
.submit-btn {
width: 100%;
padding: 1rem;
background: #a8edea;
color: #2d3748;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.submit-btn:hover:not(:disabled) {
background: #90e0db;
transform: translateY(-1px);
}
.submit-btn:disabled {
background: #cbd5e0;
color: #718096;
cursor: not-allowed;
transform: none;
}
/* Demo section styling */
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #a8edea;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>✅ Input Validation</h1>
<div class="demo-section">
<h2>HTML5 Validation Attributes</h2>
<div class="code-example">
<input required> - Required field<br>
<input pattern="[A-Za-z]{3}"> - Pattern matching<br>
<input minlength="8" maxlength="20"> - Length constraints<br>
<input min="0" max="100"> - Numeric range<br>
<input type="email"> - Built-in email validation
</div>
</div>
<form id="validationForm">
<div class="form-group">
<label class="form-label">Username *</label>
<div class="input-wrapper">
<input type="text" class="form-input"
placeholder="Enter username"
required
pattern="[A-Za-z0-9_]{3,20}"
title="3-20 characters, letters, numbers, and underscores only">
<span class="validation-icon valid-icon">✓</span>
<span class="validation-icon invalid-icon">✗</span>
</div>
<div class="validation-message invalid-message" id="usernameError">
Username must be 3-20 characters (letters, numbers, underscores)
</div>
</div>
<div class="form-group">
<label class="form-label">Email Address *</label>
<div class="input-wrapper">
<input type="email" class="form-input"
placeholder="your@email.com"
required>
<span class="validation-icon valid-icon">✓</span>
<span class="validation-icon invalid-icon">✗</span>
</div>
<div class="validation-message invalid-message" id="emailError">
Please enter a valid email address
</div>
</div>
<div class="form-group">
<label class="form-label">Password *</label>
<div class="input-wrapper">
<input type="password" class="form-input"
placeholder="Create password"
required
minlength="8"
id="passwordField">
<span class="validation-icon valid-icon">✓</span>
<span class="validation-icon invalid-icon">✗</span>
</div>
<div class="password-strength">
<div class="strength-bar">
<div class="strength-fill" id="strengthIndicator"></div>
</div>
<div class="validation-message" id="passwordHelp">
Minimum 8 characters with uppercase, lowercase, and numbers
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Age (18-100) *</label>
<input type="number" class="form-input"
placeholder="Enter your age"
required
min="18"
max="100"
id="ageField">
<div class="validation-message invalid-message" id="ageError">
Must be between 18 and 100 years
</div>
</div>
<div class="form-group">
<label class="form-label">Website URL</label>
<input type="url" class="form-input"
placeholder="https://example.com"
pattern="https://.*"
title="Must start with https://">
<div class="validation-message invalid-message">
URL must start with https://
</div>
</div>
<div class="form-group">
<label class="form-label">Bio (max 200 characters)</label>
<textarea class="form-input"
placeholder="Tell us about yourself..."
maxlength="200"
rows="4"
id="bioField"></textarea>
<div class="char-counter" id="charCounter">0/200 characters</div>
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="tel" class="form-input"
placeholder="+1 (555) 123-4567"
pattern="[+]?[0-9\s\-\(\)]{10,}"
title="Please enter a valid phone number">
<div class="validation-message invalid-message">
Please enter a valid phone number
</div>
</div>
<button type="submit" class="submit-btn" id="submitBtn" disabled>
Create Account
</button>
</form>
</div>
<script>
const form = document.getElementById('validationForm');
const inputs = form.querySelectorAll('input, textarea');
const submitBtn = document.getElementById('submitBtn');
// Real-time validation
inputs.forEach(input => {
input.addEventListener('input', validateField);
input.addEventListener('blur', validateField);
});
// Character counter
const bioField = document.getElementById('bioField');
const charCounter = document.getElementById('charCounter');
bioField.addEventListener('input', function() {
const length = this.value.length;
charCounter.textContent = `${length}/200 characters`;
if (length > 180) {
charCounter.classList.add('near-limit');
charCounter.classList.remove('over-limit');
} else if (length > 200) {
charCounter.classList.add('over-limit');
charCounter.classList.remove('near-limit');
} else {
charCounter.classList.remove('near-limit', 'over-limit');
}
});
// Password strength meter
const passwordField = document.getElementById('passwordField');
const strengthIndicator = document.getElementById('strengthIndicator');
passwordField.addEventListener('input', function() {
const password = this.value;
let strength = 0;
// Length check
if (password.length >= 8) strength += 25;
// Complexity checks
if (/[A-Z]/.test(password)) strength += 25;
if (/[a-z]/.test(password)) strength += 25;
if (/[0-9]/.test(password)) strength += 25;
// Update strength indicator
strengthIndicator.className = 'strength-fill';
if (strength <= 25) strengthIndicator.classList.add('strength-weak');
else if (strength <= 50) strengthIndicator.classList.add('strength-fair');
else if (strength <= 75) strengthIndicator.classList.add('strength-good');
else strengthIndicator.classList.add('strength-strong');
});
function validateField() {
const field = this;
const wrapper = field.closest('.input-wrapper') || field.parentElement;
const errorElement = document.getElementById(field.id + 'Error') || field.nextElementSibling;
// Reset classes
wrapper.classList.remove('valid', 'invalid');
field.classList.remove('custom-valid', 'custom-invalid');
if (field.validity.valid && field.value) {
wrapper.classList.add('valid');
field.classList.add('custom-valid');
if (errorElement) errorElement.style.display = 'none';
} else if (field.value && !field.validity.valid) {
wrapper.classList.add('invalid');
field.classList.add('custom-invalid');
if (errorElement) errorElement.style.display = 'flex';
}
// Check form validity
checkFormValidity();
}
function checkFormValidity() {
const isFormValid = form.checkValidity();
submitBtn.disabled = !isFormValid;
}
// Custom validation for age field
const ageField = document.getElementById('ageField');
ageField.addEventListener('input', function() {
const value = parseInt(this.value);
if (value < 18 || value > 100) {
this.setCustomValidity('Age must be between 18 and 100');
} else {
this.setCustomValidity('');
}
});
// Form submission
form.addEventListener('submit', function(e) {
e.preventDefault();
if (form.checkValidity()) {
alert('Form submitted successfully!');
form.reset();
inputs.forEach(input => {
input.classList.remove('custom-valid', 'custom-invalid');
const wrapper = input.closest('.input-wrapper') || input.parentElement;
wrapper.classList.remove('valid', 'invalid');
});
submitBtn.disabled = true;
charCounter.textContent = '0/200 characters';
charCounter.classList.remove('near-limit', 'over-limit');
}
});
// Initial form check
checkFormValidity();
</script>
</body>
</html>Best Practices & Browser Support
✅ Do This
- Use semantic input types for better UX
- Provide appropriate placeholder text
- Implement proper validation feedback
- Use
inputmodefor mobile optimization - Test across different browsers and devices
- Provide fallbacks for older browsers
❌ Avoid This
- Don't use generic type="text" when specific types exist
- Avoid removing native validation completely
- Don't ignore mobile user experience
- Avoid tiny touch targets on mobile
- Don't rely solely on client-side validation
- Avoid poor color contrast ratios
🌐 Browser Support Guide
Email/URL
99%+
Number/Tel
98%+
Date/Time
95%+
Range/Color
97%+
inputmode
92%+
Pattern
98%+
Validation
97%+
Date Pickers
Varies
Ready to Master Input Types? 📝
Experiment with our comprehensive input type examples and create amazing forms that work perfectly across all devices and browsers.