Elementti <label> käytetään yhdistämään etiketti syöttökenttään lomakkeessa. Tämä yhteys auttaa käyttäjiä ymmärtämään, mitä tietoja lomakekentässä pyydetään. Kun käyttäjä napsauttaa etikettiä, se keskittyy automaattisesti vastaavaan syöttökenttään.

On kaksi tapaa yhdistää etiketti ja syöttöelementit:

Kääre

Sisällyttämällä lomake-elementti, kuten <input/> kenttä, <label> elementin sisään, selain luo automaattisesti linkin etiketin ja syöttökentän välille. Esimerkiksi:

Tässä esimerkissä napsauttamalla "Nimi"-nimikettä, kohdistus siirtyy automaattisesti vastaavaan syötekenttään.

id-attribuutin käyttäminen

Kun lomake-elementti ei ole sisäkkäin <label>-elementin kanssa, voit manuaalisesti yhdistää ne käyttämällä id-elementin input-attribuuttia ja for-elementin label-attribuuttia. for-attribuutin ja id-attribuutin arvon on oltava sama. Esimerkiksi:

Tässä tapauksessa nimike on yhdistetty syötekenttään käyttämällä for-attribuuttia nimikkeessä ja id-attribuuttia syötekentässä. Napsauttamalla "Nimi"-nimikettä kohdistus siirtyy myös vastaavaan syötekenttään.

Huomautus

Käyttämällä näitä menetelmiä luot visuaalisen ja semanttisen yhteyden label- ja input-kentän välille. Kuitenkin voi olla tilanteita, joissa input-elementin sisällyttäminen label-elementtiin ei ole mahdollista tyylirajoitusten tai verkkosivuston logiikan vuoksi. Tällaisissa tapauksissa luotat yleensä attribuuttien yhteyksiin säilyttääksesi joustavuuden tyylien soveltamisessa ja taustalogiikan toteuttamisessa.

Tarkastellaan kahden lähestymistavan eroa tutkimalla kuvan koodia.

Huomautus

Selaimen näkökulmasta valitulla lähestymistavalla yhteyden luomiseksi ei ole merkitystä. Molemmat menetelmät saavuttavat saman tuloksen yhdistämällä etiketin ja syöttökentän paremman käytettävyyden ja saavutettavuuden saavuttamiseksi.