Formularios Django¶

1. Introducción¶

En este tema aprenderemos a trabajar con formularios Django para enviar datos al servidor. A diferencia de los formularios HTML puros que vimos anteriormente, en este caso utilizaremos los formularios proporcionados por Django para crear, procesar y validar los datos enviados por el usuario. Esto nos permitirá aprovechar las poderosas funcionalidades de validación y seguridad que ofrece Django de manera integrada.

El objetivo es crear un formulario para gestionar los comentarios de los usuarios, donde puedan enviar su nombre, email y mensaje. Django se encargará de la validación y del procesamiento de los datos, simplificando considerablemente la gestión de formularios.

2. Creación de un Proyecto: Comentarios¶

Vamos a crear un nuevo proyecto llamado comentarios que gestionará los formularios de contacto. Primero, seguimos estos pasos para crear un proyecto Django. En el tema anterior tienes los pasos para crear un entorno virtual y activar el entorno virtual. También puedes crear la nueva app en el proyecto que ya tienes creado.

2.1 Crear el Proyecto Django¶

Asegúrate de tener el entorno virtual activado y luego crea el proyecto comentarios:

django-admin startproject prj_comentarios .

2.2 Crear la Aplicación comentarios¶

Ahora, dentro del proyecto comentarios, creamos la aplicación comentarios que se encargará de gestionar el formulario de contacto.

python manage.py startapp comentarios

2.3 Registrar la Aplicación en `settings.py`¶

Abre el archivo settings.py de tu proyecto y añade la aplicación comentarios a la lista de INSTALLED_APPS:

INSTALLED_APPS = [
    # ...
    'comentarios',  # Aquí añadimos la aplicación comentarios
]

3. Creación de un Documento HTML para Comentarios¶

A continuación, crearemos el archivo HTML donde el formulario de comentarios será mostrado. De momento, esta página será muy básica y contendrá solo el formulario.

3.1 Crear templates¶

Vamos a crear dos templates, uno para el formulario y otro para la página principal que incluirá el formulario.

El primero estará es templates/comentarios/comment.html y el segundo templates/comentarios/forms/comment_form.html.

form_contact.html
<!-- templates/comentarios/comment.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comentarios </title>
</head>
<body>
    <h1>Comentarios</h1>
    {% include 'comentarios/forms/comment_form.html' %}
</body>
</html>

El segundo archivo será form_contact.html que contendrá el formulario.

form_contact.html
<!-- templates/comentarios/forms/comment_form.html -->
 <form action="{% url 'get_comment_success' %}" method="GET">
    {% csrf_token %}
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Mensaje:</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <input type="submit" value="Enviar">
</form>

Para poder acceder a estos archivos necesitamos definir las rutas en el archivo urls.py de la aplicación comentarios, las vistas y delegar las URLs del proyecto a la aplicación.

Comenzamos por crear el archivo urls.py en la aplicación comentarios.

# comentarios/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('comment', views.comment, name='comment'),
    path('get/success', views.get_success, name='get_comment_success'),
    path('post/success', views.post_success, name='post_comment_success'),
]

Ahora las vistas en views.py:

# comentarios/views.py
from django.shortcuts import render
from django.http import HttpResponse as httpResponse

# Create your views here.
def comment(request):
    return render(request, 'comentarios/comment.html')

def get_success(request):
    return httpResponse("GET comment success!")

def post_success(request):
    return httpResponse("POST comment success!")

Por último, delegamos las URLs del proyecto a la aplicación comentarios en el archivo urls.py del proyecto.

# prj_comentarios/urls.py
from django.urls import include, path

urlpatterns = [
    path('comentarios/', include('comentarios.urls')),
]

Todo esto ya lo podemos probar, las rutas será:

http://localhost:8000/comentarios/comment

Nos tiene que mostrar el formulario, al dar a enviar nos aparecerá un texto que indica que hemos llegado a la página de éxito. Pero hasta aquí es solo la estructura básica que ya vimoe en el tema anterior.

3.2 Crear la clase ContactForm en forms.py¶

En este punto, se trata se susbstuituir el formulario HTML por un formulario Django. En el archivo forms.py, creamos la clase ContactForm que utilizará el sistema de formularios de Django.

# comentarios/forms.py
from django import forms

class CommentForm(forms.Form):
    name = forms.CharField(max_length=100, required=True)
    email = forms.EmailField(required=True)
    message = forms.CharField(required=False)

Podemos ver que se trata de definir los campos que deberíamos introducir en el formulario HTML. Django se encargará de la validación y del procesamiento de los datos.

Ahora veamos cómo integrar este formulario en la plantilla HTML.

3.1 Modificar el archivo `form_contact.html`¶

Creamos el archivo form_contact.html que contendrá el formulario Django. Este archivo estará en la carpeta templates/comentarios/forms.

form_contact.html
<form method="post" action="{% url 'post_comment_success' %}">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Enviar</button>
</form>

Para que el esto funcione, en la vista, necesitamos pasar una instancia del formulario al contexto.

# comentarios/views.py
from .forms import CommentForm

def comment(request):
    form = CommentForm()
    return render(request, 'comentarios/comment.html', {'form': form})

3.3 Crear la Página de Éxito `success.html`¶

También necesitamos una página de éxito para mostrar un mensaje al usuario después de que se envíe el formulario. Creamos el archivo success.html.

success.html
<!-- templates/comentarios/success.html -->
 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Success</title>
</head>
<body>
    <h1>Éxito</h1>
    <p>Datos recibidos correctamente.</p>
    <p>Nombre: {{ name }}</p>
    <p>Mensaje: {{ message }}</p>
</body>
</html>

Modificamos la vista para que la ruta /get/success muestre esta plantilla.

def get_success(request):
    name = request.GET.get('name')
    message = request.GET.get('message')
    context = {'name': name, 'message': message}
    return render(request, 'comentarios/success.html', context)

4. Tipos de Campos en los Formularios de Django¶

4.1 Explicación de los Tipos de Campos en los Formularios de Django¶

A continuación, se presentan los tipos más comunes de campos que podemos usar en los formularios de Django y algunas de las validaciones más importantes:

Tipo de Campo	Descripción	Validaciones Comunes
`CharField`	Campo de texto.	`max_length`, `required`
`EmailField`	Campo para direcciones de correo electrónico.	`required`, `validate_email`
`IntegerField`	Campo para números enteros.	`min_value`, `max_value`
`DateField`	Campo para fechas.	`required`, `validate_date`
`ChoiceField`	Campo para opciones predefinidas (por ejemplo, selección de un conjunto).	`choices`, `required`
`Textarea`	Campo para texto largo (cuadro de texto).	`required`, `max_length`

Django realiza validaciones automáticas basadas en los tipos de campo que definimos. Por ejemplo, EmailField valida que la dirección de correo electrónico tenga el formato correcto.

4.2 Visualización de los Formularios¶

Django permite mostrar los formularios de varias maneras utilizando métodos como as_p, as_table, y as_ul. Estos métodos se usan para renderizar los campos de una manera específica.

as_p: Renderiza cada campo dentro de un párrafo <p>.
as_table: Renderiza cada campo dentro de una tabla, con cada etiqueta y campo en una fila.
as_ul: Renderiza los campos como una lista no ordenada <ul>.

Vamos a modificar el archivo comment.html para usar as_p:

form_contact.html
...
        {{ form.as_p }}
...

Ahora el formulario se mostrará con cada campo dentro de un párrafo. Puedes probar los otros métodos (as_table y as_ul) para ver cómo cambia la presentación del formulario.

5. Método POST¶

El método POST es similar al método GET. Ya vimos la diferencia en el tema anterior. Solo recordar que la vista es la que tiene que discriminar si los datos vienen por GET o por POST.

Vamos a modificar nuestro formulario para que utilice el método POST en lugar de GET. Y utilice la ruta apropiada (ya la creamos anteriormente) para enviar los datos.

form_contact.html
<form action="{% url 'post_comment_success' %}" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Enviar</button>
</form>

5.1 Definir la Vista `post_success`¶

La vista post_success manejará los datos enviados con POST. Recibimos los datos de request.POST.

# comentarios/views.py
from django.shortcuts import render
from .forms import ContactForm

def post_success(request):
    if request.method == 'POST':
        form = CommentForm(request.POST)
        if form.is_valid():
            name = form.cleaned_data['name']
            message = form.cleaned_data['message']
            email = form.cleaned_data['email']
            context = {'name': name, 'message': message, 'email': email}
            return render(request, 'comentarios/success.html', context)
        else:
            return render(request, 'comentarios/comment.html', {'form': form})
    else:
        return httpResponse("Método no permitido", status=405)

5.2 Solución al Error de CSRF¶

Al igual que en el tema anterior, cuando usamos el método POST, Django requiere un token CSRF para proteger contra ataques de falsificación de solicitudes entre sitios. Si no incluimos este token, obtendremos un error 403.

6. Validación del Formulario¶

En esta sección, aprenderemos a validar los datos recibidos del formulario y cómo manejar los errores de validación.

6.1 Validaciones Automáticas de Django¶

Django realiza automáticamente validaciones básicas basadas en el tipo de campo que definimos. Por ejemplo, EmailField valida que el email sea una dirección de correo válida, y CharField verifica que el texto no esté vacío.

6.2 Validaciones Personalizadas¶

Si deseamos validaciones adicionales, como asegurarnos de que el nombre no sea "admin", podemos añadir validaciones personalizadas en los campos del formulario. Usamos el método clean_<field_name> para este tipo de validaciones.

# comentarios/forms.py
from django.core.exceptions import ValidationError

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_name(self):
        name = self.cleaned_data['name']
        if name == 'admin':
            raise ValidationError('El nombre no puede ser "admin".')
        return name

6.3 Mostrar los Errores en la Plantilla HTML¶

Django maneja los errores de validación automáticamente. Si algún campo no es válido, Django redirige al formulario con los errores y los muestra en la plantilla.

<!-- templates/comentarios/form_contact.html -->
<form action="/post/comment" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    {% for field in form %}
        {% for error in field.errors %}
            <p class="error">{{ error }}</p>
        {% endfor %}
    {% endfor %}
    <button type="submit">Enviar</button>
</form>

7. Resumen¶

En este tema, hemos aprendido a trabajar con formularios Django, gestionar la validación de datos, manejar errores de validación y solucionar el error de CSRF en los formularios POST. Además, hemos creado un formulario para gestionar los comentarios de los usuarios con campos como nombre, email y mensaje.