Quando gli elementi sono correlati tra loro, è utile raggrupparli poiché aiuta l'utente a comprendere meglio il modulo e consente loro di concentrarsi su insiemi di campi più piccoli e strutturati piuttosto che tentare di comprendere l'intero modulo in una volta. Il raggruppamento può essere realizzato sia visivamente nell'interfaccia che logicamente nel codice.

Elementi fieldset e legend

Puoi utilizzare l'elemento <fieldset> per raggruppare diversi elementi di modulo correlati. Fornisce un contenitore per questi elementi e puoi aggiungere un titolo di gruppo utilizzando l'elemento <legend> annidato. È importante raggruppare i pulsanti radio e le caselle di controllo correlati, e altri tipi di campi possono essere raggruppati secondo necessità. Questo aiuta a migliorare l'organizzazione e la chiarezza del modulo per l'utente.

Esempio

Questo esempio utilizza l'elemento fieldset per raggruppare insieme i controlli del modulo correlati e l'elemento legend per fornire una didascalia per il gruppo. Si concentra su un modulo di selezione del prodotto in cui gli utenti possono scegliere più prodotti.

• Il fieldset raggruppa le caselle di controllo, rendendo il modulo più organizzato e più facile da comprendere per l'utente;

• Il legend fornisce un titolo, informando l'utente che la sezione è per la scelta dei prodotti;

• Le caselle di controllo consentono all'utente di selezionare più prodotti tra le opzioni disponibili. Ogni opzione è associata a un prodotto specifico (verdura, frutta, latticini).

Nota

Congratulazioni per aver completato il corso HTML! Hai raggiunto l'ultimo capitolo e ora sei equipaggiato con una solida base nello sviluppo web. Se sei interessato a esplorare ulteriormente il campo, considera di approfondire CSS - il linguaggio di stile e design delle pagine web. Migliora le tue competenze e sblocca infinite possibilità per creare siti web visivamente attraenti.