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.
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) }}{{ form_end }}{{ form_row(form.field) }}field
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.
Ogni singolo elemento richiamato da form_row può essere stampato anche manualmente con la funzione relativa:
form_label()form_errors(){{ form_errors(form.field) }}{{ form_errors(form) }}form_help()form_widget()
{{ form_widget(form.field, {'attr': {'class': 'my-class'}}) }}La lista completa delle funzioni con approfondimenti è disponibile all'interno della documentazione ufficiale