Kun elementit liittyvät toisiinsa, on hyödyllistä ryhmitellä ne, sillä se auttaa käyttäjää ymmärtämään lomakkeen paremmin ja keskittymään pienempiin, jäsenneltyihin kenttäkokonaisuuksiin sen sijaan, että yrittäisi ymmärtää koko lomaketta kerralla. Ryhmittely voidaan toteuttaa sekä visuaalisesti käyttöliittymässä että loogisesti koodissa.

fieldset ja legend Elementit

Voit käyttää <fieldset> elementtiä ryhmitelläksesi useita toisiinsa liittyviä lomake-elementtejä yhteen. Se tarjoaa säiliön näille elementeille, ja voit lisätä ryhmän otsikon käyttämällä sisäkkäistä <legend> elementtiä. On tärkeää ryhmitellä toisiinsa liittyvät valintanapit ja valintaruudut, ja myös muita kenttätyyppejä voidaan ryhmitellä tarpeen mukaan. Tämä auttaa parantamaan lomakkeen järjestystä ja selkeyttä käyttäjälle.

Esimerkki

Tässä esimerkissä käytetään fieldset-elementtiä ryhmittelemään yhteen liittyvät lomakekontrollit ja legend-elementtiä antamaan ryhmälle otsikko. Se keskittyy tuotteen valintalomakkeeseen, jossa käyttäjät voivat valita useita tuotteita.

• fieldset ryhmittelee valintaruudut yhteen, mikä tekee lomakkeesta järjestelmällisemmän ja helpommin ymmärrettävän käyttäjälle;

• legend antaa otsikon, joka kertoo käyttäjälle, että osio on tarkoitettu tuotteiden valintaan;

• Valintaruudut antavat käyttäjän valita useita tuotteita saatavilla olevista vaihtoehdoista. Jokainen vaihtoehto liittyy tiettyyn tuotteeseen (vihannes, hedelmä, maitotuote).

Huomautus

Onnittelut HTML-kurssin suorittamisesta! Olet saavuttanut viimeisen luvun, ja nyt sinulla on vankka perusta web-kehityksessä. Jos olet kiinnostunut tutkimaan alaa lisää, harkitse sukeltamista CSS - verkkosivujen tyylittelyn ja suunnittelun kieli. Paranna taitojasi ja avaa loputtomia mahdollisuuksia luoda visuaalisesti houkuttelevia verkkosivustoja.