Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Lomake-elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi | HTML-Lomakkeet ja Käyttäjän Syöte
Learn
Kurssit
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
HTML:n Perusteet

bookLomake-elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

Kun lomakekentät liittyvät toisiinsa, niiden ryhmittely helpottaa käyttäjää hahmottamaan tiedot. Tämä jakaa suuret lomakkeet pienempiin, selkeisiin osiin ja parantaa käytettävyyttä. HTML:ssä ryhmittely tehdään elementeillä <fieldset> ja <legend>.

fieldset- ja legend-elementit

  • <fieldset> ryhmittelee toisiinsa liittyvät lomakekentät;
  • <legend> lisää otsikon ryhmälle.

Hyödyllinen esimerkiksi valintanapeille, valintaruuduille ja muille toisiinsa liittyville kentille.

index.html

index.html

index.css

index.css

copy

Esimerkki

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

index.html

index.html

index.css

index.css

copy
  • fieldset ryhmittelee valintaruudut yhdeksi loogiseksi osaksi;
  • legend kertoo käyttäjälle, mistä ryhmässä on kyse;
  • Valintaruudut mahdollistavat useiden vaihtoehtojen valitsemisen.
Note
Huomio

Olet suorittanut HTML:n viimeisen vaiheen. Jos haluat jatkaa taitojesi kehittämistä, seuraava askeleesi on CSS , jossa opit tyylittelemään ja suunnittelemaan moderneja, houkuttelevia verkkosivuja.

1. Mikä on legend-elementin tarkoitus HTML fieldsetissä?

2. Miksi toisiinsa liittyvien lomakekenttien ryhmittely fieldset-elementillä on tärkeää?

question mark

Mikä on legend-elementin tarkoitus HTML fieldsetissä?

Select the correct answer

question mark

Miksi toisiinsa liittyvien lomakekenttien ryhmittely fieldset-elementillä on tärkeää?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 10

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

bookLomake-elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

Pyyhkäise näyttääksesi valikon

Kun lomakekentät liittyvät toisiinsa, niiden ryhmittely helpottaa käyttäjää hahmottamaan tiedot. Tämä jakaa suuret lomakkeet pienempiin, selkeisiin osiin ja parantaa käytettävyyttä. HTML:ssä ryhmittely tehdään elementeillä <fieldset> ja <legend>.

fieldset- ja legend-elementit

  • <fieldset> ryhmittelee toisiinsa liittyvät lomakekentät;
  • <legend> lisää otsikon ryhmälle.

Hyödyllinen esimerkiksi valintanapeille, valintaruuduille ja muille toisiinsa liittyville kentille.

index.html

index.html

index.css

index.css

copy

Esimerkki

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

index.html

index.html

index.css

index.css

copy
  • fieldset ryhmittelee valintaruudut yhdeksi loogiseksi osaksi;
  • legend kertoo käyttäjälle, mistä ryhmässä on kyse;
  • Valintaruudut mahdollistavat useiden vaihtoehtojen valitsemisen.
Note
Huomio

Olet suorittanut HTML:n viimeisen vaiheen. Jos haluat jatkaa taitojesi kehittämistä, seuraava askeleesi on CSS , jossa opit tyylittelemään ja suunnittelemaan moderneja, houkuttelevia verkkosivuja.

1. Mikä on legend-elementin tarkoitus HTML fieldsetissä?

2. Miksi toisiinsa liittyvien lomakekenttien ryhmittely fieldset-elementillä on tärkeää?

question mark

Mikä on legend-elementin tarkoitus HTML fieldsetissä?

Select the correct answer

question mark

Miksi toisiinsa liittyvien lomakekenttien ryhmittely fieldset-elementillä on tärkeää?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 10
some-alt