Django Forms ofrece funciones básicas de entrada de datos, pero es importante estilizar los formularios para mejorar la experiencia del usuario. En este artículo, veremos cómo decorar Django Forms con CSS y ejemplos prácticos.

1. Formularios HTML básicos y Django Forms

1.1 Método de salida básico de Django Forms

Django Forms genera HTML automáticamente por defecto. El método de salida básico es el siguiente:

  • as_p: Envuelve cada campo con la etiqueta <p>.
  • as_table: Renderiza cada campo con la etiqueta <tr>.
  • as_ul: Envuelve cada campo con la etiqueta <li>.

Ejemplo: Método de salida básico

class ExampleForm(forms.Form):
    name = forms.CharField(label="Your Name")
    email = forms.EmailField(label="Your Email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

El código anterior se mostrará en el estilo básico envuelto en etiquetas <p>.

2. Estilizando formularios con CSS

A visually engaging webpage mockup displaying a stylish Django form integrated with CSS and Bootstrap

2.1 Aplicando estilos con el atributo attrs y Bootstrap

Usar el atributo attrs permite agregar clases CSS directamente a las etiquetas HTML. Esto facilita la aplicación de frameworks CSS como Bootstrap.

Ejemplo: Aplicando estilos Bootstrap con attrs

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

Renderizando el formulario en la plantilla

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ejemplo de HTML resultante

<input type="text" name="username" class="form-control" placeholder="Enter your username">
<input type="password" name="password" class="form-control" placeholder="Enter your password">

2.2 Estilizando formularios con Bootstrap

Ejemplo: Aplicando estilos Bootstrap

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

Renderizando el formulario en la plantilla

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ejemplo de pantalla de resultados

  • Los campos del formulario y los botones se renderizan con estilos Bootstrap aplicados.

3. Usando Django FormHelper y librerías

3.1 Introducción a django-crispy-forms

django-crispy-forms ofrece una mejor gestión de estilos y diseño para Django Forms.

Instalación

pip install django-crispy-forms

Configuración

Agregue lo siguiente a settings.py:

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

Definición del formulario

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Your Email")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit'))

Consideraciones

django-crispy-forms es útil para estilizar formularios simples, pero si no se configura adecuadamente el método de inicialización __init__, los registros de depuración de la plantilla pueden volverse excesivos. Si desea mantener el archivo de registro limpio, debe tener en cuenta este aspecto. Es recomendable para desarrolladores que funcionan sin logs de depuración o que no les importa el desorden de logs, pero personalmente no me gusta este enfoque de estilización. Para evitar la generación de logs de depuración, el método de inicialización debe ser configurado a la perfección, lo que requiere analizar el código fuente, y preferiría simplemente estilizar de otra manera.

Usando en la plantilla

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. Caso práctico: Estilizando un formulario de registro

4.1 Definición del formulario

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your username'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your email'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter your password'
        })
    )

4.2 Renderizando en la plantilla

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Username</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Password</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Sign Up</button>
</form>

5. Conclusión

Usar Django Forms y CSS puede mejorar significativamente la experiencia del usuario. Pruebe diferentes métodos, desde la estilización básica con attrs, hasta técnicas avanzadas utilizando Bootstrap y django-crispy-forms. Y no olvide que al usar django-crispy-forms, es crucial prestar atención a la configuración del método de inicialización __init__ para mantener limpio el archivo de registro. ¡No lo olvide!

En el próximo artículo, abordaremos Usos avanzados de Django Forms.