Etikettien 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äin sijoittaminen
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ötekenttää ei voida sijoittaa label-elementin sisään, yhdistä ne manuaalisesti:
index.html
Tässä label käyttää for="name" ja syötekenttä 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ään ei kuitenkaan ole mahdollista 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 kahden lähestymistavan eroa tutkimalla kuvan koodia.
Selaimen näkökulmasta valitulla tavalla yhteyden muodostamiseen ei ole merkitystä. Molemmat menetelmät yhdistävät tunnisteen ja syötekentän, parantaen käytettävyyttä ja saavutettavuutta.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
