HTML Forms - Complete Guide

🎯 Quick Reference

Basic Form Structure

<form action="/submit-data" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">Submit</button>
</form>

Input Types

{/* Text Input */}
<input type="text" name="username" placeholder="Enter username">

{/* Password Input */}
<input type="password" name="password" placeholder="Enter password">

{/* Email Input */}
<input type="email" name="email" placeholder="[email protected]" required>

{/* Number Input */}
<input type="number" name="age" min="1" max="120" step="1">

{/* Date Input */}
<input type="date" name="birthdate">

{/* Time Input */}
<input type="time" name="appointment_time">

{/* Date-Time Input */}
<input type="datetime-local" name="event_datetime">

{/* URL Input */}
<input type="url" name="website" placeholder="https://example.com">

{/* Tel Input */}
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

{/* Search Input */}
<input type="search" name="query" placeholder="Search...">

{/* Color Input */}
<input type="color" name="favorite_color">

{/* Range Input */}
<input type="range" name="satisfaction" min="0" max="10" value="5">

{/* File Input */}
<input type="file" name="document" accept=".pdf,.doc,.docx">

{/* Hidden Input */}
<input type="hidden" name="user_id" value="12345">

Text Area

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message here..."></textarea>

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">-- Select Country --</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
</select>

{/* Multi-select */}
<label for="languages">Languages:</label>
<select id="languages" name="languages" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
</select>

{/* Optgroup */}
<select name="course">
    <optgroup label="Programming">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </optgroup>
    <optgroup label="Design">
        <option value="ui">UI Design</option>
        <option value="ux">UX Design</option>
    </optgroup>
</select>

Radio Buttons

<fieldset>
    <legend>Gender:</legend>
    
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
    
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
</fieldset>

Checkboxes

<fieldset>
    <legend>Interests:</legend>
    
    <input type="checkbox" id="coding" name="interests" value="coding">
    <label for="coding">Coding</label>
    
    <input type="checkbox" id="design" name="interests" value="design">
    <label for="design">Design</label>
    
    <input type="checkbox" id="writing" name="interests" value="writing">
    <label for="writing">Writing</label>
    
    <input type="checkbox" id="music" name="interests" value="music">
    <label for="music">Music</label>
</fieldset>

Buttons

{/* Submit Button */}
<button type="submit">Submit Form</button>

{/* Reset Button */}
<button type="reset">Reset Form</button>

{/* Button (JavaScript) */}
<button type="button" onclick="validateForm()">Validate</button>

{/* Image Button */}
<button type="image" src="submit-icon.png" alt="Submit">

{/* Link Button */}
<button type="button" onclick="window.location.href='https://example.com'">Visit Site</button>

🔧 Form Attributes

Common Attributes

{/* Required field */}
<input type="text" name="username" required>

{/* Placeholder */}
<input type="text" name="username" placeholder="Enter username">

{/* Disabled field */}
<input type="text" name="username" disabled>

{/* Read-only field */}
<input type="text" name="username" value="john_doe" readonly>

{/* Auto-focus */}
<input type="text" name="username" autofocus>

{/* Multiple files */}
<input type="file" name="documents" multiple>

{/* Accept file types */}
<input type="file" name="image" accept="image/*">
<input type="file" name="pdf" accept=".pdf">

{/* Pattern validation */}
<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Form Attributes

{/* Form submission */}
<form action="/process.php" method="post">
    {/* Form content */}
</form>

{/* Form with target */}
<form action="/process.php" method="post" target="_blank">
    {/* Opens in new tab */}
</form>

{/* Form with encoding */}
<form action="/upload.php" method="post" enctype="multipart/form-data">
    {/* For file uploads */}
</form>

{/* Form with autocomplete */}
<form action="/search" method="get" autocomplete="off">
    {/* Disable browser autocomplete */}
</form>

{/* Form with novalidate */}
<form action="/submit" method="post" novalidate>
    {/* Skip HTML5 validation */}
</form>

🎨 Form Styling

Basic CSS Styling

/* Form styling */
form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Advanced Form Styling

/* Custom checkbox styling */
input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 3px;
    color: #28a745;
    font-size: 14px;
}

/* Custom radio button styling */
input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%;
}

/* Form validation styling */
input:invalid {
    border-color: #dc3545;
}

input:valid {
    border-color: #28a745;
}

/* Disabled state */
input:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

🔍 Form Validation

HTML5 Validation

{/* Required fields */}
<input type="text" name="username" required>

{/* Pattern validation */}
<input type="email" name="email" required>
<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

{/* Min/Max validation */}
<input type="number" name="age" min="18" max="100" required>

{/* Length validation */}
<input type="text" name="username" minlength="3" maxlength="20" required>

Custom Validation Messages

<form id="myForm" novalidate>
    <input type="email" id="email" name="email" required>
    <span id="emailError" class="error"></span>
    
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = document.getElementById('email');
    const error = document.getElementById('emailError');
    
    // Email validation
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!email.value.match(emailPattern)) {
        error.textContent = 'Please enter a valid email address';
        email.classList.add('invalid');
        return;
    }
    
    // Clear error if valid
    error.textContent = '';
    email.classList.remove('invalid');
    
    // Submit form
    this.submit();
});
</script>

Real-time Validation

<form id="validationForm">
    <input type="text" id="username" name="username" required minlength="3">
    <span id="usernameError"></span>
    
    <input type="email" id="email" name="email" required>
    <span id="emailError"></span>
</form>

<script>
// Username validation
document.getElementById('username').addEventListener('input', function() {
    const error = document.getElementById('usernameError');
    const value = this.value;
    
    if (value.length < 3) {
        error.textContent = 'Username must be at least 3 characters';
        this.classList.add('invalid');
    } else {
        error.textContent = '';
        this.classList.remove('invalid');
    }
});

// Email validation
document.getElementById('email').addEventListener('input', function() {
    const error = document.getElementById('emailError');
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!this.value.match(emailPattern)) {
        error.textContent = 'Please enter a valid email';
        this.classList.add('invalid');
    } else {
        error.textContent = '';
        this.classList.remove('invalid');
    }
});
</script>

📱 Responsive Forms

Mobile-Friendly Forms

/* Responsive form styling */
@media (max-width: 768px) {
    form {
        padding: 10px;
        margin: 10px;
    }
    
    .form-group {
        margin-bottom: 10px;
    }
    
    input, textarea, select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    button {
        width: 100%;
        padding: 12px;
    }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
    }
    
    button {
        padding: 12px 24px;
    }
}

Flexible Form Layout

<div class="form-container">
    <div class="form-row">
        <div class="form-col">
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="firstName">
        </div>
        <div class="form-col">
            <label for="lastName">Last Name:</label>
            <input type="text" id="lastName" name="lastName">
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-col">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
        </div>
    </div>
</div>

<style>
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-col {
    flex: 1;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}
</style>

Form Validation — Client-side validation and error handling

📚 Learn Web Development Theory →

HTML Forms - Complete Guide

🎯 Quick Reference

Basic Form Structure

Input Types

Text Area

Radio Buttons

Checkboxes

Buttons

🔧 Form Attributes

Common Attributes

Form Attributes

🎨 Form Styling

Basic CSS Styling

Advanced Form Styling

🔍 Form Validation

HTML5 Validation

Custom Validation Messages

Real-time Validation

📱 Responsive Forms

Mobile-Friendly Forms

Flexible Form Layout

📍 Visit Us

🏫 VD Computer Tuition Surat

Computer Classes & Tuition — Areas We Serve in Surat

🎯 Quick Reference​

Basic Form Structure​

Input Types​

Text Area​

Select Dropdown​

Radio Buttons​

Checkboxes​

Buttons​

🔧 Form Attributes​

Common Attributes​

Form Attributes​

🎨 Form Styling​

Basic CSS Styling​

Advanced Form Styling​

🔍 Form Validation​

HTML5 Validation​

Custom Validation Messages​

Real-time Validation​

📱 Responsive Forms​

Mobile-Friendly Forms​

Flexible Form Layout​

🔗 Related Topics​

📍 Visit Us

🏫 VD Computer Tuition Surat

Computer Classes & Tuition — Areas We Serve in Surat

🎯 Quick Reference

Basic Form Structure

Input Types

Text Area

Select Dropdown

Radio Buttons

Checkboxes

Buttons

🔧 Form Attributes

Common Attributes

Form Attributes

🎨 Form Styling

Basic CSS Styling

Advanced Form Styling

🔍 Form Validation

HTML5 Validation

Custom Validation Messages

Real-time Validation

📱 Responsive Forms

Mobile-Friendly Forms

Flexible Form Layout

🔗 Related Topics