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>

📚 Learn Web Development Theory →

HTML Forms - Complete Guide¶

🎯 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¶