<!-- Basic HTML form structure -->
<form action="/submit/" method="post" enctype="multipart/form-data">
    <!-- Form fields go here -->
    <input type="text" name="username" required>
    <input type="email" name="email" required>
    <textarea name="message" rows="4" cols="50"></textarea>
    <input type="submit" value="Submit">
</form>

<!-- Complete form with all attributes -->
<form 
    id="contact-form"
    name="contactForm"
    action="{% url 'contact_submit' %}"
    method="post"
    enctype="multipart/form-data"
    novalidate
    autocomplete="on">
    
    <!-- Form content -->
</form>

<!-- Text inputs -->
<input type="text" name="username" placeholder="Enter username" maxlength="30">
<input type="password" name="password" placeholder="Enter password" minlength="8">
<input type="email" name="email" placeholder="user@example.com" required>
<input type="url" name="website" placeholder="https://example.com">
<input type="tel" name="phone" placeholder="+1-555-123-4567" pattern="[+]?[0-9\s\-\(\)]+">
<input type="search" name="query" placeholder="Search...">

<!-- Number inputs -->
<input type="number" name="age" min="18" max="100" step="1">
<input type="range" name="rating" min="1" max="5" step="0.5" value="3">

<!-- Date and time inputs -->
<input type="date" name="birth_date" min="1900-01-01" max="2023-12-31">
<input type="time" name="appointment_time" step="900"> <!-- 15-minute steps -->
<input type="datetime-local" name="event_datetime">
<input type="month" name="start_month">
<input type="week" name="project_week">

<!-- File inputs -->
<input type="file" name="avatar" accept="image/*">
<input type="file" name="documents" multiple accept=".pdf,.doc,.docx">

<!-- Other input types -->
<input type="color" name="theme_color" value="#ff0000">
<input type="hidden" name="csrf_token" value="abc123">
<input type="checkbox" name="newsletter" id="newsletter" checked>
<input type="radio" name="gender" value="male" id="male">
<input type="radio" name="gender" value="female" id="female">

<!-- Textarea for multi-line text -->
<textarea 
    name="description" 
    rows="5" 
    cols="40" 
    placeholder="Enter description..."
    maxlength="500"
    required></textarea>

<!-- Select dropdown -->
<select name="country" required>
    <option value="">Choose a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<!-- Multi-select -->
<select name="skills" multiple size="4">
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
    <option value="java">Java</option>
    <option value="csharp">C#</option>
</select>

<!-- Grouped options -->
<select name="category">
    <optgroup label="Technology">
        <option value="web">Web Development</option>
        <option value="mobile">Mobile Development</option>
    </optgroup>
    <optgroup label="Design">
        <option value="ui">UI Design</option>
        <option value="ux">UX Design</option>
    </optgroup>
</select>

<!-- Required fields -->
<input type="text" name="username" required>
<input type="email" name="email" required>

<!-- Pattern validation -->
<input 
    type="text" 
    name="phone" 
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
    title="Format: 123-456-7890">

<!-- Length constraints -->
<input type="text" name="username" minlength="3" maxlength="20">
<textarea name="bio" minlength="10" maxlength="500"></textarea>

<!-- Numeric constraints -->
<input type="number" name="age" min="18" max="100">
<input type="range" name="rating" min="1" max="5" step="0.1">

<!-- Custom validation messages -->
<input 
    type="email" 
    name="email" 
    required
    oninvalid="this.setCustomValidity('Please enter a valid email address')"
    oninput="this.setCustomValidity('')">

<!-- Username validation -->
<input 
    type="text" 
    name="username"
    pattern="^[a-zA-Z0-9_]{3,20}$"
    title="Username must be 3-20 characters, letters, numbers, and underscores only"
    required>

<!-- Password strength -->
<input 
    type="password" 
    name="password"
    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
    title="Password must contain at least 8 characters with uppercase, lowercase, number, and special character"
    required>

<!-- Credit card number -->
<input 
    type="text" 
    name="credit_card"
    pattern="[0-9\s]{13,19}"
    maxlength="19"
    placeholder="1234 5678 9012 3456"
    title="Enter a valid credit card number">

<!-- URL validation -->
<input 
    type="url" 
    name="website"
    pattern="https?://.+"
    placeholder="https://example.com"
    title="URL must start with http:// or https://">

<!-- Proper labeling -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<!-- Alternative labeling methods -->
<label>
    Email Address:
    <input type="email" name="email" required>
</label>

<!-- Using aria-label -->
<input 
    type="search" 
    name="query" 
    aria-label="Search products"
    placeholder="Search...">

<!-- Fieldsets for grouping -->
<fieldset>
    <legend>Personal Information</legend>
    
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" name="first_name" required>
    
    <label for="last_name">Last Name:</label>
    <input type="text" id="last_name" name="last_name" required>
</fieldset>

<fieldset>
    <legend>Contact Information</legend>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
</fieldset>

<!-- Error handling with ARIA -->
<label for="email">Email Address:</label>
<input 
    type="email" 
    id="email" 
    name="email"
    aria-describedby="email-error email-help"
    aria-invalid="true"
    required>
<div id="email-help" class="help-text">
    We'll never share your email with anyone else.
</div>
<div id="email-error" class="error-message" role="alert">
    Please enter a valid email address.
</div>

<!-- Required field indicators -->
<label for="username">
    Username 
    <span aria-label="required">*</span>
</label>
<input 
    type="text" 
    id="username" 
    name="username"
    aria-required="true"
    required>

<!-- Progress indication -->
<form aria-labelledby="form-title">
    <h2 id="form-title">Registration Form</h2>
    <div role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3">
        Step 2 of 3
    </div>
    
    <!-- Form fields -->
</form>

<!-- GET method - for search forms and data retrieval -->
<form action="/search/" method="get">
    <input type="text" name="q" placeholder="Search...">
    <input type="submit" value="Search">
</form>
<!-- Results in URL: /search/?q=search+term -->

<!-- POST method - for data modification -->
<form action="/contact/" method="post">
    {% csrf_token %}
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <input type="submit" value="Send Message">
</form>

<!-- File upload form -->
<form action="/upload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    
    <!-- Single file upload -->
    <label for="avatar">Profile Picture:</label>
    <input 
        type="file" 
        id="avatar" 
        name="avatar"
        accept="image/jpeg,image/png,image/gif"
        required>
    
    <!-- Multiple file upload -->
    <label for="documents">Documents:</label>
    <input 
        type="file" 
        id="documents" 
        name="documents"
        multiple
        accept=".pdf,.doc,.docx,.txt">
    
    <!-- File size and type information -->
    <small>
        Accepted formats: JPEG, PNG, GIF. Maximum size: 5MB per file.
    </small>
    
    <input type="submit" value="Upload Files">
</form>

<!-- Form with JavaScript enhancement -->
<form id="contact-form" action="/contact/" method="post" novalidate>
    {% csrf_token %}
    
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <span class="error-message" id="name-error"></span>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span class="error-message" id="email-error"></span>
    </div>
    
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" required minlength="10"></textarea>
        <span class="error-message" id="message-error"></span>
        <span class="character-count">0/500 characters</span>
    </div>
    
    <button type="submit" id="submit-btn">
        <span class="btn-text">Send Message</span>
        <span class="btn-spinner" style="display: none;">Sending...</span>
    </button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    const submitBtn = document.getElementById('submit-btn');
    const messageField = document.getElementById('message');
    const charCount = document.querySelector('.character-count');
    
    // Character counter
    messageField.addEventListener('input', function() {
        const count = this.value.length;
        charCount.textContent = `${count}/500 characters`;
        
        if (count > 500) {
            charCount.style.color = 'red';
        } else {
            charCount.style.color = '';
        }
    });
    
    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Clear previous errors
        document.querySelectorAll('.error-message').forEach(el => {
            el.textContent = '';
        });
        
        // Show loading state
        submitBtn.disabled = true;
        document.querySelector('.btn-text').style.display = 'none';
        document.querySelector('.btn-spinner').style.display = 'inline';
        
        // Submit form via AJAX
        const formData = new FormData(form);
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message
                form.innerHTML = '<div class="success-message">Thank you! Your message has been sent.</div>';
            } else {
                // Show errors
                for (const [field, errors] of Object.entries(data.errors)) {
                    const errorElement = document.getElementById(`${field}-error`);
                    if (errorElement) {
                        errorElement.textContent = errors.join(', ');
                    }
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        })
        .finally(() => {
            // Reset button state
            submitBtn.disabled = false;
            document.querySelector('.btn-text').style.display = 'inline';
            document.querySelector('.btn-spinner').style.display = 'none';
        });
    });
    
    // Real-time validation
    form.querySelectorAll('input, textarea').forEach(field => {
        field.addEventListener('blur', function() {
            validateField(this);
        });
    });
    
    function validateField(field) {
        const errorElement = document.getElementById(`${field.name}-error`);
        
        if (!field.validity.valid) {
            if (field.validity.valueMissing) {
                errorElement.textContent = 'This field is required.';
            } else if (field.validity.typeMismatch) {
                errorElement.textContent = 'Please enter a valid value.';
            } else if (field.validity.tooShort) {
                errorElement.textContent = `Minimum length is ${field.minLength} characters.`;
            } else if (field.validity.tooLong) {
                errorElement.textContent = `Maximum length is ${field.maxLength} characters.`;
            } else {
                errorElement.textContent = 'Please enter a valid value.';
            }
        } else {
            errorElement.textContent = '';
        }
    }
});
</script>

<!-- Always include CSRF token in POST forms -->
<form method="post" action="/submit/">
    {% csrf_token %}
    <!-- Form fields -->
</form>

<!-- For AJAX requests -->
<script>
// Get CSRF token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Include in AJAX requests
fetch('/api/submit/', {
    method: 'POST',
    headers: {
        'X-CSRFToken': getCookie('csrftoken'),
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
});
</script>

<!-- Prevent XSS with proper escaping -->
<form method="post">
    {% csrf_token %}
    
    <!-- Use Django's built-in escaping -->
    <input type="text" name="title" value="{{ form.title.value|default:'' }}">
    
    <!-- For user-generated content display -->
    <div class="user-content">
        {{ user_content|escape }}
    </div>
    
    <!-- Or use the safe filter only for trusted content -->
    <div class="trusted-content">
        {{ trusted_html|safe }}
    </div>
</form>