Form Page Project
Create a comprehensive form page with various input types, validation, and professional styling.
📋 Project Overview
- Objective: Build a complete registration form
- Features: All input types, validation, accessibility
- Sections: Personal info, account, preferences
- Focus: User experience and form best practices
💻 Complete Form Page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.form-container {
background: white;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 700px;
width: 100%;
padding: 3rem;
}
.form-header {
text-align: center;
margin-bottom: 2rem;
}
.form-header h1 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
.form-header p {
color: #7f8c8d;
}
.progress-bar {
height: 5px;
background: #ecf0f1;
border-radius: 5px;
margin-bottom: 2rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 33%;
transition: width 0.3s;
}
.form-section {
margin-bottom: 2rem;
}
.section-title {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #ecf0f1;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #2c3e50;
font-weight: 500;
}
.required {
color: #e74c3c;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 0.8rem;
border: 2px solid #ecf0f1;
border-radius: 5px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.3s;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #667eea;
}
input:valid {
border-color: #27ae60;
}
input:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
}
textarea {
resize: vertical;
min-height: 100px;
}
.input-hint {
font-size: 0.85rem;
color: #7f8c8d;
margin-top: 0.3rem;
}
.input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Radio and Checkbox Styles */
.radio-group,
.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
gap: 0.5rem;
}
input[type="radio"],
input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
/* File Upload */
.file-upload {
border: 2px dashed #ecf0f1;
border-radius: 5px;
padding: 2rem;
text-align: center;
transition: border-color 0.3s;
}
.file-upload:hover {
border-color: #667eea;
}
.file-upload input[type="file"] {
display: none;
}
.file-upload-label {
cursor: pointer;
color: #667eea;
font-weight: bold;
}
/* Range Slider */
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 5px;
background: #ecf0f1;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
.range-value {
display: inline-block;
background: #667eea;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 5px;
margin-top: 0.5rem;
}
/* Color Picker */
input[type="color"] {
width: 60px;
height: 40px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Terms and Conditions */
.terms-box {
background: #f8f9fa;
padding: 1rem;
border-radius: 5px;
max-height: 150px;
overflow-y: auto;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #555;
}
/* Buttons */
.button-group {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
button {
flex: 1;
padding: 1rem;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: #ecf0f1;
color: #2c3e50;
}
.btn-secondary:hover {
background: #d5d8dc;
}
/* Error Messages */
.error-message {
color: #e74c3c;
font-size: 0.85rem;
margin-top: 0.3rem;
display: none;
}
input:invalid:not(:placeholder-shown) ~ .error-message {
display: block;
}
/* Success Message */
.success-message {
background: #d4edda;
color: #155724;
padding: 1rem;
border-radius: 5px;
border-left: 4px solid #28a745;
margin-bottom: 1rem;
display: none;
}
/* Password Strength Indicator */
.password-strength {
height: 5px;
border-radius: 5px;
margin-top: 0.5rem;
transition: all 0.3s;
}
.password-strength.weak {
background: #e74c3c;
width: 33%;
}
.password-strength.medium {
background: #f39c12;
width: 66%;
}
.password-strength.strong {
background: #27ae60;
width: 100%;
}
/* Responsive */
@media (max-width: 600px) {
.input-group {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">
<h1>📋 Create Your Account</h1>
<p>Fill out the form below to get started</p>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="success-message" id="successMessage">
✓ Registration successful! Check your email for verification.
</div>
<form action="register.php" method="POST" enctype="multipart/form-data" id="registrationForm">
<!-- Personal Information Section -->
<div class="form-section">
<h2 class="section-title">👤 Personal Information</h2>
<div class="input-group">
<div class="form-group">
<label for="firstName">First Name <span class="required">*</span></label>
<input type="text" id="firstName" name="firstName" required placeholder="John">
<span class="error-message">Please enter your first name</span>
</div>
<div class="form-group">
<label for="lastName">Last Name <span class="required">*</span></label>
<input type="text" id="lastName" name="lastName" required placeholder="Doe">
<span class="error-message">Please enter your last name</span>
</div>
</div>
<div class="form-group">
<label for="email">Email Address <span class="required">*</span></label>
<input type="email" id="email" name="email" required placeholder="john@example.com">
<span class="input-hint">We'll never share your email with anyone else</span>
<span class="error-message">Please enter a valid email address</span>
</div>
<div class="input-group">
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<span class="input-hint">Format: 123-456-7890</span>
</div>
<div class="form-group">
<label for="birthdate">Date of Birth <span class="required">*</span></label>
<input type="date" id="birthdate" name="birthdate" required>
</div>
</div>
<div class="form-group">
<label>Gender <span class="required">*</span></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="gender" value="male" required>
Male
</label>
<label class="radio-option">
<input type="radio" name="gender" value="female" required>
Female
</label>
<label class="radio-option">
<input type="radio" name="gender" value="other" required>
Other
</label>
</div>
</div>
</div>
<!-- Account Information Section -->
<div class="form-section">
<h2 class="section-title">🔒 Account Information</h2>
<div class="form-group">
<label for="username">Username <span class="required">*</span></label>
<input type="text" id="username" name="username" required placeholder="johndoe123" minlength="3">
<span class="input-hint">Minimum 3 characters</span>
</div>
<div class="form-group">
<label for="password">Password <span class="required">*</span></label>
<input type="password" id="password" name="password" required minlength="8" placeholder="Enter password">
<div class="password-strength" id="passwordStrength"></div>
<span class="input-hint">Minimum 8 characters</span>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password <span class="required">*</span></label>
<input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Confirm password">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
</div>
</div>
<!-- Preferences Section -->
<div class="form-section">
<h2 class="section-title">⚙️ Preferences</h2>
<div class="form-group">
<label for="country">Country <span class="required">*</span></label>
<select id="country" name="country" required>
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label>Interests (Select all that apply)</label>
<div class="checkbox-group">
<label class="checkbox-option">
<input type="checkbox" name="interests" value="technology">
Technology
</label>
<label class="checkbox-option">
<input type="checkbox" name="interests" value="design">
Design
</label>
<label class="checkbox-option">
<input type="checkbox" name="interests" value="business">
Business
</label>
<label class="checkbox-option">
<input type="checkbox" name="interests" value="marketing">
Marketing
</label>
</div>
</div>
<div class="form-group">
<label for="experience">Experience Level: <span id="experienceValue">5</span> years</label>
<input type="range" id="experience" name="experience" min="0" max="10" value="5">
</div>
<div class="form-group">
<label for="favoriteColor">Favorite Color</label>
<input type="color" id="favoriteColor" name="favoriteColor" value="#667eea">
</div>
<div class="form-group">
<label for="profilePicture">Profile Picture</label>
<div class="file-upload">
<input type="file" id="profilePicture" name="profilePicture" accept="image/*">
<label for="profilePicture" class="file-upload-label">
📁 Choose File or Drop Here
</label>
<p class="input-hint" style="margin-top: 0.5rem;">Max size: 5MB (JPG, PNG, GIF)</p>
</div>
</div>
<div class="form-group">
<label for="bio">Bio</label>
<textarea id="bio" name="bio" placeholder="Tell us about yourself..." maxlength="500"></textarea>
<span class="input-hint">Maximum 500 characters</span>
</div>
</div>
<!-- Terms and Conditions -->
<div class="form-section">
<div class="terms-box">
<h4>Terms and Conditions</h4>
<p>By creating an account, you agree to our Terms of Service and Privacy Policy. We collect and process your personal information in accordance with applicable data protection laws.</p>
<p>You must be at least 13 years old to create an account. You are responsible for maintaining the security of your account and password.</p>
</div>
<div class="form-group">
<label class="checkbox-option">
<input type="checkbox" name="terms" required>
I agree to the Terms and Conditions <span class="required">*</span>
</label>
</div>
<div class="form-group">
<label class="checkbox-option">
<input type="checkbox" name="newsletter">
Send me promotional emails and updates
</label>
</div>
</div>
<!-- Buttons -->
<div class="button-group">
<button type="reset" class="btn-secondary">Reset Form</button>
<button type="submit" class="btn-primary">Create Account</button>
</div>
</form>
<p style="text-align: center; margin-top: 1.5rem; color: #7f8c8d;">
Already have an account? <a href="#" style="color: #667eea;">Log in</a>
</p>
</div>
<script>
// Experience slider value display
const experienceSlider = document.getElementById('experience');
const experienceValue = document.getElementById('experienceValue');
experienceSlider.addEventListener('input', function() {
experienceValue.textContent = this.value;
});
// Password strength indicator
const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('passwordStrength');
passwordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
if (password.length >= 8) strength++;
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
if (password.match(/[0-9]/)) strength++;
if (password.match(/[^a-zA-Z0-9]/)) strength++;
strengthBar.className = 'password-strength';
if (strength === 0 || strength === 1) {
strengthBar.classList.add('weak');
} else if (strength === 2 || strength === 3) {
strengthBar.classList.add('medium');
} else {
strengthBar.classList.add('strong');
}
});
// Form submission
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
// Password confirmation check
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
alert('Passwords do not match!');
return;
}
// Show success message
document.getElementById('successMessage').style.display = 'block';
// In real application, submit form data to server
// this.submit();
});
</script>
</body>
</html>🎯 Key Features
- Multiple input types: Text, email, password, date, tel, URL, file, color, range
- Form validation: Required fields, pattern matching, length constraints
- Visual feedback: Valid/invalid states, password strength
- Accessibility: Labels, ARIA attributes, keyboard navigation
- User experience: Progress bar, hints, error messages
- Radio and checkboxes: Single and multiple selections
- File upload: Profile picture with drag-and-drop styling
- JavaScript enhancements: Real-time validation, dynamic updates