Style Guide Unibo Forms
In questa pagina ci sono i componenti custom relativi alle form sviluppati ed utilizzati esclusivamente per applicazioni unibo.
Form su una o più colonne
Per poter utilizzare questo componente è necessario inserire la classe u-grid-form sul tag form.
E' possibile usare la struttura delle form con la griglia di Foundation, in modo da poter allineare e strutturare i contenuti liberamente.
E' attivo il plugin Abide.
Sono stati utilizzati anche i componenti <p class="subheader"> e <p class="help-text">
E' stato inserito un titolo aggiuntivo, in caso ci sia bisogno di esplicitare il titolo della form <h2 class="title-fieldset">
Ecco alcuni esempi di form a cui è applicata la griglia:
Form su una colonna
E' preferibile utilizzare un unico <p class="subheader"> che contiene l'aiuto contestuale.
La struttura è la griglia utilizzata in Foundation, quindi si utilizza la larghezza 12 nel caso in cui si voglia la riga piena.
In alternativa si può usare la larghezza che si preferisce con l'aggiunta della classe end.
Form su due colonne
Rispetto alla versione in una colonna è sufficiente utilizzare le classi text-right sulla label e sul <p class="subheader">, in modo da avere l'allineamento a destra.
Form su due colonne con una griglia interna sui campi checkbox
In questo componente è prevista la possibilità di inserire una griglia innestata per le input all'interno che possono essere su più colonne. In particolare questa funzionalità è utile per i radio button e checkbox.
Errori nella Griglia Form
Errori nei radio button e checkbox
E' possibile inserire la classe is-invalid-inuput su tutto il contenitore del campo, cioè su column. Consigliamo di evidenziare sempre anche la relativa label utilizzando la classe is-invalid-label.
Questa funzionalità è utile per i gruppi di radio e checkbutton.