Connecting HTML Forms to Django Forms

Note: This post was originally published by Luis Natera on his personal blog. It has been republished here as part of TYN Studio's content.

Sometimes the smallest details make the biggest difference. I recently discovered a crucial detail when integrating HTML form templates with Django form processing that caused me some confusion.

The Problem

I was working on a Django form that wasn't validating properly. The form would submit, but Django's validation wasn't catching errors, and the data wasn't being populated into the form fields as expected.

The HTML Form

Here's a simple HTML form template:

<form action="/your-name/" method="post">
    <label for="your_name">Your name: </label>
    <input id="your_name" type="text" name="your_name" value="">
    <input type="submit" value="OK">
</form>

The Django Form

And the corresponding Django form class:

from django import forms

class NameForm(forms.Form):
    your_name = forms.CharField(label='Your name', max_length=100)

The View

Here's a complete view demonstrating form processing:

from django.shortcuts import render
from django.http import HttpResponseRedirect

def get_name(request):
    # If POST, process form data
    if request.method == 'POST':
        # Create a form instance with POST data
        form = NameForm(request.POST)

        # Validate the form
        if form.is_valid():
            # Process the data in form.cleaned_data
            name = form.cleaned_data['your_name']
            # Redirect after successful processing
            return HttpResponseRedirect('/thanks/')

    # If GET (or any other method), create a blank form
    else:
        form = NameForm()

    return render(request, 'name.html', {'form': form})

The Missing Piece

The key issue was that the form was not being populated as I was missing the name attribute in my HTML input field.

Without the name attribute, Django couldn't map the HTML input to the corresponding form field. The browser submits form data using the name attributes as keys—no name means no data sent to the server.

Key Takeaway

When connecting HTML forms to Django forms:

1. The name attribute in your HTML input must match the field name in your Django form
2. The id attribute is for HTML/CSS/JavaScript—it doesn't connect to Django
3. Django uses the name attribute to map submitted data to form fields

So while id="your_name" helps with labels and JavaScript, it's name="your_name" that actually connects to your Django form's your_name field.

This seems obvious in retrospect, but when you're troubleshooting a form that won't validate, it's easy to overlook the basics. Double-check those name attributes!