När element är relaterade till varandra är det fördelaktigt att gruppera dem eftersom det hjälper användaren att bättre förstå formuläret, och det tillåter dem att koncentrera sig på mindre, strukturerade uppsättningar av fält istället för att försöka förstå hela formuläret på en gång. Gruppering kan göras både visuellt på gränssnittet och logiskt i koden.

fieldset och legend-element

Du kan använda <fieldset>-elementet för att gruppera flera relaterade formulärelement tillsammans. Det ger en behållare för dessa element, och du kan lägga till en grupp titel med det inbäddade <legend>-elementet. Det är viktigt att gruppera relaterade radioknappar och kryssrutor, och andra fälttyper kan också grupperas vid behov. Detta hjälper till att förbättra organisationen och tydligheten i formuläret för användaren.

Exempel

Detta exempel använder fieldset-elementet för att gruppera relaterade formulärkontroller tillsammans och legend-elementet för att ge en rubrik för gruppen. Det fokuserar på ett produktvalformulär där användare kan välja flera produkter.

• fieldset grupperar kryssrutorna tillsammans, vilket gör formuläret mer organiserat och lättare att förstå för användaren;

• legend ger en titel, som talar om för användaren att avsnittet är för att välja produkter;

• Kryssrutorna tillåter användaren att välja flera produkter från de tillgängliga alternativen. Varje alternativ är associerat med en specifik produkt (grönsak, frukt, mejeri).

Notera

Grattis till att ha avslutat HTML-kursen! Du har nått det sista kapitlet och nu har du en solid grund i webbutveckling. Om du är intresserad av att utforska området vidare, överväg att dyka in i CSS - språket för webbside-styling och design. Förbättra dina färdigheter och lås upp oändliga möjligheter för att skapa visuellt tilltalande webbplatser.