El núcleo de Django Forms son los Campos y los Widgets. Los campos tienen el rol de validar y procesar los datos de entrada, mientras que los widgets definen los elementos HTML que renderizan dichos campos. En este artículo, exploraremos en detalle los principales campos y widgets, así como sus métodos de personalización.

1. Campos de Django Forms

Un diagrama que muestra los Campos y Widgets de Django Forms, destacando CharField, EmailField y sus correspondientes widgets como TextInput y EmailInput

1.1 ¿Qué es un Campo?

Los campos son los componentes básicos que definen y validan los datos en Django Forms.

  • Validan los datos ingresados por el usuario antes de guardarlos en cleaned_data.
  • Cada campo se mapea a un tipo de entrada HTML.
Tipos de Campos Comunes
Campo Descripción Ejemplo de Widget
CharField Campo de entrada de texto TextInput
EmailField Campo de entrada en formato de correo electrónico EmailInput
IntegerField Campo de entrada de enteros NumberInput
DateField Campo de entrada de fecha DateInput
ChoiceField Campo para seleccionar opciones Select
BooleanField Campo de entrada con casilla de verificación CheckboxInput
FileField Campo para subir archivos FileInput
Uso Básico de Campos
from django import forms

class ExampleForm(forms.Form):
    name = forms.CharField(max_length=50, required=True, label="Tu Nombre")
    email = forms.EmailField(required=True, label="Tu Correo Electrónico")
    age = forms.IntegerField(required=False, min_value=1, label="Tu Edad")

2. Widgets de Django Forms

2.1 ¿Qué es un Widget?

Un widget es un elemento que se utiliza en Django Forms para renderizar cada campo en HTML.

  • Define las etiquetas y atributos HTML del campo.
  • Por ejemplo: CharField utiliza por defecto el widget TextInput.
Tipos de Widgets Comunes
Widget Etiqueta HTML renderizada Campo utilizado
TextInput <input type="text"> CharField
EmailInput <input type="email"> EmailField
NumberInput <input type="number"> IntegerField
DateInput <input type="date"> DateField
Select <select> ChoiceField
CheckboxInput <input type="checkbox"> BooleanField
FileInput <input type="file"> FileField

2.2 Campos y Atributo ID

Django Forms añade automáticamente un atributo id único a cada campo al renderizarse en HTML. Este atributo se genera en el formato id_<nombre_del_campo>.

  • Por ejemplo: si el nombre del campo es name, el id del <input> renderizado será id_name.
  • Este atributo id es útil en plantillas en los siguientes casos:
    • JavaScript: seleccionar campos específicos para procesar dinámicamente.
    • Etiqueta Label: conectarse con <label for="id_name">.
Ejemplo: Uso de Campos y Atributo ID
<form method="post">
    {% csrf_token %}
    <label for="id_name">Nombre:</label>
    <input type="text" id="id_name" name="name">

    <script>
        document.getElementById('id_name').addEventListener('input', function() {
            console.log(this.value);
        });
    </script>
</form>

3. Personalización de Campos y Widgets

3.1 Personalización de Atributos de Campos

Django Forms permite cambiar los atributos de los elementos HTML utilizando attrs.

Ejemplo: Cambio de Atributos de Campos
class CustomForm(forms.Form):
    username = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Ingresa tu nombre de usuario'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Ingresa tu correo electrónico'
        })
    )

3.2 Creación de Widgets Personalizados

También puedes crear widgets personalizados según sea necesario.

Ejemplo: Creación de un Widget Personalizado
from django.forms.widgets import TextInput

class CustomTextInput(TextInput):
    template_name = 'custom_widgets/custom_text_input.html'

class CustomForm(forms.Form):
    custom_field = forms.CharField(widget=CustomTextInput())

4. Caso Práctico: Creación de un Formulario Estilizado

4.1 Aplicación de Bootstrap

Al usar Bootstrap, puedes añadir class='form-control' a cada campo para estilizarlo.

Ejemplo: Formulario Estilizado con Bootstrap
class BootstrapForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Ingresa tu nombre'})
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Ingresa tu correo electrónico'})
    )

4.2 Estilizado de Formularios con CSS Personalizado

Puedes añadir archivos CSS para ajustar aún más el estilo del formulario.

Ejemplo: Plantilla Vinculada a CSS
<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Tu Nombre</label>
        <input type="text" class="form-control" id="id_name" name="name">
    </div>
    <div class="form-group">
        <label for="id_email">Tu Correo Electrónico</label>
        <input type="email" class="form-control" id="id_email" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

5. Conclusión

Los campos y widgets de Django Forms desempeñan un papel fundamental en el procesamiento y la validación de datos, así como en la construcción de interfaces de usuario. Además de los campos y widgets proporcionados por defecto, puedes personalizarlos según tus necesidades para diseñar formularios que se ajusten a tu proyecto.

En el próximo artículo, exploraremos más a fondo sobre validación y personalización de formularios.