Cómo conectar formularios HTML con formularios de Django

Nota: Esta publicación fue publicada originalmente por Luis Natera en su blog personal. Se ha vuelto a publicar aquí como parte del contenido de TYN Studio.

A veces los detalles más pequeños hacen la mayor diferencia. Hace poco descubrí un detalle crucial al integrar plantillas de formularios HTML con el procesamiento de formularios de Django que me causó bastante confusión.

El problema

Estaba trabajando en un formulario de Django que no se validaba correctamente. El formulario se enviaba, pero la validación de Django no detectaba los errores y los datos no se cargaban en los campos del formulario como esperaba.

El formulario HTML

Aquí hay una plantilla sencilla de formulario HTML:

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

El formulario de Django

Y la clase de formulario de Django correspondiente:

from django import forms

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

La vista

Aquí hay una vista completa que muestra el procesamiento del formulario:

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

def get_name(request):
    # Si es POST, procesa los datos del formulario
    if request.method == 'POST':
        # Crea una instancia del formulario con los datos del POST
        form = NameForm(request.POST)

        # Valida el formulario
        if form.is_valid():
            # Procesa los datos en form.cleaned_data
            name = form.cleaned_data['your_name']
            # Redirige después de procesar con éxito
            return HttpResponseRedirect('/thanks/')

    # Si es GET (o cualquier otro método), crea un formulario en blanco
    else:
        form = NameForm()

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

La pieza que faltaba

El problema clave era que el formulario no se estaba llenando porque me faltaba el atributo name en mi campo de entrada HTML.

Sin el atributo name, Django no podía asociar el campo de entrada HTML con el campo correspondiente del formulario. El navegador envía los datos del formulario usando los atributos name como claves: sin name, no se envían datos al servidor.

La lección principal

Al conectar formularios HTML con formularios de Django:

1. El atributo name en tu campo de entrada HTML debe coincidir con el nombre del campo en tu formulario de Django
2. El atributo id es para HTML/CSS/JavaScript; no tiene conexión con Django
3. Django usa el atributo name para asociar los datos enviados con los campos del formulario

Así que, aunque id="your_name" ayuda con las etiquetas y con JavaScript, es name="your_name" lo que realmente conecta con el campo your_name de tu formulario de Django.

Visto en retrospectiva parece obvio, pero cuando estás depurando un formulario que no se valida, es fácil pasar por alto lo básico. ¡Revisa bien esos atributos name!