Widget

In Django, i widget determinano come un campo del form viene rappresentato in HTML. Ogni campo ha un widget predefinito, ma puoi sostituirlo per cambiare l’aspetto e il comportamento dell’input nel browser.

Django assegna automaticamente un widget a ogni tipo di campo:

from django import forms

class EsempioForm(forms.Form):
    # CharField -> TextInput (input type="text")
    nome = forms.CharField()

    # EmailField -> EmailInput (input type="email")
    email = forms.EmailField()

    # BooleanField -> CheckboxInput (input type="checkbox")
    accetto = forms.BooleanField()

    # IntegerField -> NumberInput (input type="number")
    eta = forms.IntegerField()

    # DateField -> DateInput (input type="text")
    data = forms.DateField()

Django offre numerosi widget pronti all’uso:

class FormCompleto(forms.Form):
    # Input testuale
    nome = forms.CharField(widget=forms.TextInput())
    bio = forms.CharField(widget=forms.Textarea(attrs={'rows': 4, 'cols': 50}))
    password = forms.CharField(widget=forms.PasswordInput())
    nascosto = forms.CharField(widget=forms.HiddenInput())

    # Selezione
    colore = forms.ChoiceField(
        choices=[('r', 'Rosso'), ('v', 'Verde'), ('b', 'Blu')],
        widget=forms.Select()
    )
    colori = forms.MultipleChoiceField(
        choices=[('r', 'Rosso'), ('v', 'Verde'), ('b', 'Blu')],
        widget=forms.SelectMultiple()
    )

    # Radio e Checkbox
    genere = forms.ChoiceField(
        choices=[('m', 'Maschio'), ('f', 'Femmina')],
        widget=forms.RadioSelect()
    )
    interessi = forms.MultipleChoiceField(
        choices=[('sport', 'Sport'), ('musica', 'Musica'), ('arte', 'Arte')],
        widget=forms.CheckboxSelectMultiple()
    )

Personalizzare gli Attributi HTML

Il parametro attrs permette di aggiungere attributi HTML al widget:

class ContattoForm(forms.Form):
    nome = forms.CharField(widget=forms.TextInput(attrs={
        'class': 'form-control',
        'placeholder': 'Inserisci il tuo nome',
        'id': 'campo-nome',
        'autofocus': True,
    }))

    email = forms.EmailField(widget=forms.EmailInput(attrs={
        'class': 'form-control',
        'placeholder': 'nome@esempio.it',
    }))

    messaggio = forms.CharField(widget=forms.Textarea(attrs={
        'class': 'form-control',
        'rows': 5,
        'placeholder': 'Scrivi il tuo messaggio...',
    }))

Django fornisce widget specifici per date e upload di file:

class EventoForm(forms.Form):
    data = forms.DateField(widget=forms.DateInput(attrs={
        'type': 'date',
        'class': 'form-control',
    }))

    ora = forms.TimeField(widget=forms.TimeInput(attrs={
        'type': 'time',
    }))

    data_ora = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
        'type': 'datetime-local',
    }))

    documento = forms.FileField(widget=forms.FileInput(attrs={
        'class': 'form-control',
        'accept': '.pdf,.doc,.docx',
    }))

    immagine = forms.ImageField(widget=forms.ClearableFileInput(attrs={
        'class': 'form-control',
    }))

ClearableFileInput aggiunge un checkbox per rimuovere il file esistente durante la modifica.

Nei ModelForm puoi sovrascrivere i widget nella classe Meta:

from .models import Articolo

class ArticoloForm(forms.ModelForm):
    class Meta:
        model = Articolo
        fields = ['titolo', 'contenuto', 'categoria', 'pubblicato']
        widgets = {
            'titolo': forms.TextInput(attrs={
                'class': 'form-control form-control-lg',
            }),
            'contenuto': forms.Textarea(attrs={
                'class': 'form-control',
                'rows': 10,
            }),
            'categoria': forms.Select(attrs={
                'class': 'form-select',
            }),
            'pubblicato': forms.CheckboxInput(attrs={
                'class': 'form-check-input',
            }),
        }

Puoi creare widget personalizzati estendendo le classi base di Django:

from django.forms.widgets import Widget
from django.utils.safestring import mark_safe

class StarRatingWidget(forms.Widget):
    template_name = 'widgets/star_rating.html'

    def __init__(self, max_stelle=5, attrs=None):
        self.max_stelle = max_stelle
        super().__init__(attrs)

    def get_context(self, name, value, attrs):
        context = super().get_context(name, value, attrs)
        context['widget']['max_stelle'] = range(1, self.max_stelle + 1)
        return context

class RecensioneForm(forms.Form):
    commento = forms.CharField(widget=forms.Textarea())
    valutazione = forms.IntegerField(widget=StarRatingWidget(max_stelle=5))

Puoi anche modificare il widget direttamente nel metodo __init__ del form:

class ProfiloForm(forms.ModelForm):
    class Meta:
        model = Profilo
        fields = ['nome', 'bio', 'sito_web']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['nome'].widget.attrs.update({
            'class': 'form-control',
            'placeholder': 'Il tuo nome',
        })
        self.fields['bio'].widget = forms.Textarea(attrs={
            'class': 'form-control',
            'rows': 3,
        })

Conclusione

I widget di Django offrono un controllo preciso sulla renderizzazione HTML dei campi dei form. Dalla personalizzazione degli attributi con attrs alla creazione di widget completamente personalizzati, puoi adattare l’aspetto dei form a qualsiasi design. Combinati con framework CSS come Bootstrap, i widget permettono di creare interfacce utente professionali e coerenti.

Widget

Widget Predefiniti

Widget Comuni

Personalizzare gli Attributi HTML

Widget per Date e File

Sovrascrivere Widget nei ModelForm

Creare un Widget Personalizzato

Sovrascrivere Widget a Livello di Campo

Conclusione