Il nostro form è completamente funzionante ma non molto bello da vedere. Questo perché, finora, non abbiamo dedicato le giuste attenzioni all'aspetto grafico.
Anche in questo caso i form di Symfony ci vengono incontro semplificando non poco il lavoro. Nel nostro caso, avendo scelto come base un template grafico costruito con Bootstrap 4, abbiamo il lavoro ancora più semplificato perché Symfony ha già a disposizione degli stili di base per le ultime 3 versioni di Bootstrap: 3, 4 e 5.
Ci è sufficiente aggiungere una proprietà al file di configurazione di Twig app/config/packages/twig.yaml per avere il lavoro completato:
twig:
default_path: '%kernel.project_dir%/templates'
form_themes: ['bootstrap_4_layout.html.twig']La proprietà form_themes consente infatti di indicare il layout base che Symfony forms utilizza per costruire l'HTML del form. Nel nostro caso questa semplice proprietà ci ha permesso di avere la pagina completata senza alcuna fatica.
Figura 1. Pagina profilo
Questa proprietà ci è utile anche per personalizzare e costruire il nostro tema per le form, in modo da non dover personalizzare manualmente tutti i campi quando realizziamo un progetto da zero.
Il codice della lezione è disponibile al tag bootstrap-form-template.
Personalizzare i campi di una form
Anche se nel nostro esempio è stato molto semplice, nella realtà si ha quasi sempre la necessità di personalizzare tutto il form: dai tag di apertura, al pulsante di submit, così come i singoli campi.
Ci sono diversi modi per personalizzare l'HTML con i Symfony forms, dal più semplice che abbiamo utilizzato nel nostro esempio:
{{ form(form) }}con cui deleghiamo totalmente la responsabilità a Symfony fino ad intervenire sulle singole parti della form. Vediamo come.
Abbiamo già introdotto alcuni delle funzioni disponibili all'interno di Twig nelle lezione relativa alla Registrazione utente. Come già visto, quindi, abbiamo le funzioni:
{{ form_start(form) }}e{{ form_end }};{{ form_row(form.field) }}dovefieldè il nome del campo che vogliamo stampare.
Rivediamole in dettaglio così da aggiungere importanti dettagli che ci consentiranno di creare i nostri form personalizzati.
form_start
La funzione form_start consente, come anticipato, di creare il tag di apertura <form>. Permette, tra le altre cose, anche di personalizzare il metodo o la action che vogliamo utilizzare:
{{ form_start(form, {'method': 'GET'}) }}form_end
La funzione, oltre a chiudere il tag, ci consente anche di stampare eventuali altri campi dichiarati nel form ma che non abbiamo stampato manualmente. In realtà tale comportamento è delegato alla funzione form_rest(form) ma, nel caso non venisse esplicitamente chiamato, sarà cura di form_end di richiamarlo per noi.
form_row
La funzione form_row si occupa di stampare a schermo tutto il necessario per un singolo campo: la label, il campo del form, eventuali errori ed eventuali messaggi di helper come rappresentato in Figura 2.
Figura 2. `form_row` output
Ogni singolo elemento richiamato da form_row può essere stampato anche manualmente con la funzione relativa:
form_label()per la label;form_errors()per mostrare eventuali errori. Gli errori nei form di Symfony possono essere gestiti a livelli diversi. Il più delle volte l'errore è mostrato a livello di campo ({{ form_errors(form.field) }}stamperà eventuali errori di quel campo) ma spesso è utile mostrare errori anche a livello di form globale; basti pensare ad uno scenario in cui una combinazione di campi non validi è la causa dell'errore. In tal caso è utile mostrare l'errore a livello di form e, tali errori, vengono visualizzati con{{ form_errors(form) }};form_help()per messaggi di aiuto da mostrare all'utente;form_widget()per il campo di input/select/textarea/ecc. Il campo consente anche un array come secondo parametro con delle variabili che permettono, ad esempio, di personalizzare le classi HTML dell'elemento:
{{ form_widget(form.field, {'attr': {'class': 'my-class'}}) }}La lista completa delle funzioni con approfondimenti è disponibile all'interno della documentazione ufficiale.