Tunnisteiden Käyttö Lomakkeiden Paremman Saavutettavuuden Takaamiseksi
<label>-elementtiä käytetään yhdistämään nimike syötekenttään lomakkeessa. Tämä yhteys auttaa käyttäjiä ymmärtämään, mitä tietoa lomakekentässä pyydetään. Kun käyttäjä napsauttaa nimikettä, kohdistus siirtyy automaattisesti vastaavaan syötekenttään.
On olemassa kaksi tapaa yhdistää label- ja input-elementit:
Sisäkkäisyys
Voit sijoittaa <input>-elementin <label>-elementin sisälle, jolloin selain yhdistää ne automaattisesti.
index.html
Napsauttamalla "Nimi" kohdistetaan syötekenttään.
id-attribuutin käyttö
Jos syöte ei voi sijaita label-elementin sisällä, yhdistä ne manuaalisesti:
index.html
Tässä label käyttää for="name" ja syöte käyttää id="name". Yhteensopivat arvot luovat yhteyden.
Näillä menetelmillä luodaan visuaalinen ja semanttinen yhteys label- ja input-kentän välille. Joissakin tilanteissa input-elementin sijoittaminen label-elementin sisälle voi kuitenkin olla mahdotonta tyylirajoitteiden tai sivuston logiikan vuoksi. Tällöin käytetään usein attribuuttien välisiä yhteyksiä, jotta tyylien ja taustalogiikan toteutus säilyy joustavana.
Tarkastellaan näiden kahden lähestymistavan eroja tutkimalla kuvan koodia.
Selaimen näkökulmasta valitulla yhteyden muodostamistavalla ei ole merkitystä. Molemmat menetelmät yhdistävät label- ja input-kentän, mikä parantaa käytettävyyttä ja saavutettavuutta.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain the main differences between wrapping and using the id attribute for labels and inputs?
Which method is recommended for accessibility?
Are there any situations where one method is preferred over the other?
Mahtavaa!
Completion arvosana parantunut arvoon 2.38Tunnisteiden Käyttö Lomakkeiden Paremman Saavutettavuuden Takaamiseksi
Pyyhkäise näyttääksesi valikon
<label>-elementtiä käytetään yhdistämään nimike syötekenttään lomakkeessa. Tämä yhteys auttaa käyttäjiä ymmärtämään, mitä tietoa lomakekentässä pyydetään. Kun käyttäjä napsauttaa nimikettä, kohdistus siirtyy automaattisesti vastaavaan syötekenttään.
On olemassa kaksi tapaa yhdistää label- ja input-elementit:
Sisäkkäisyys
Voit sijoittaa <input>-elementin <label>-elementin sisälle, jolloin selain yhdistää ne automaattisesti.
index.html
Napsauttamalla "Nimi" kohdistetaan syötekenttään.
id-attribuutin käyttö
Jos syöte ei voi sijaita label-elementin sisällä, yhdistä ne manuaalisesti:
index.html
Tässä label käyttää for="name" ja syöte käyttää id="name". Yhteensopivat arvot luovat yhteyden.
Näillä menetelmillä luodaan visuaalinen ja semanttinen yhteys label- ja input-kentän välille. Joissakin tilanteissa input-elementin sijoittaminen label-elementin sisälle voi kuitenkin olla mahdotonta tyylirajoitteiden tai sivuston logiikan vuoksi. Tällöin käytetään usein attribuuttien välisiä yhteyksiä, jotta tyylien ja taustalogiikan toteutus säilyy joustavana.
Tarkastellaan näiden kahden lähestymistavan eroja tutkimalla kuvan koodia.
Selaimen näkökulmasta valitulla yhteyden muodostamistavalla ei ole merkitystä. Molemmat menetelmät yhdistävät label- ja input-kentän, mikä parantaa käytettävyyttä ja saavutettavuutta.
Kiitos palautteestasi!
