Label-elementti

label-elementti asettaa tunnisteen syöttökentälle tyyppiä input, textarea, select jne.

Tunniste sidotaan tiettyyn syöttökenttään käyttämällä for-attribuuttia. Siinä tulee määrittää sen syöttökentän id-attribuutin arvo, johon tunniste on sidottu. Tunniste myös sidotaan elementtiin, jos kyseinen elementti sijoitetaan label-elementin sisään. Tässä tapauksessa for-attribuuttia ei tarvitse määrittää. Katso esimerkkejä paremman ymmärtämisen vuoksi.

Painamalla tunnistetta, siihen liitetyt valintaruudut tai valintapainikkeet muuttavat tilansa valitusta ei-valituksi ja päinvastoin. Tunniste tässä tapauksessa on mukavuuden vuoksi: pieniin lomakkeen elementteihin on vaikea osua kursorilla, mutta pitkään tekstitunnisteeseen - paljon helpompaa.

Tunnisteeseen liitetty tekstisyötekenttä tyyppiä input ja textarea saa syöttökohteen. Kohdistus - on kun kursori vilkkuu syötekentässä, silloin, jos kirjoitat jotain näppäimistöllä - teksti menee tähän kenttään (ks. pseudoluokka focus kehittyneempää kohdistuksen ymmärtämistä varten).

label-tunnistetta voidaan käyttää valintaruudun tai valintapainikkeen matkimiseen. Tätä tarvitaan, jotta voidaan tehdä checkbox tai radio omalla muotoilulla (mikä CSS:llä on kiellettyä, mutta nokkela käyttäen on mahdollista).

Attribuutit

Attribuutti	Kuvaus
for	Tässä attribuutissa tulee määrittää sen syötekentän id-attribuutin arvo johon label-tunniste on liitetty.
accesskey	Asettaa pikanäppäimen, jolla voidaan siirtyä tunnisteeseen liitettyyn (for-attribuutin kautta) lomakkeen elementtiin. Lisätietoja ks. attribuutti accesskey.

Esimerkki . Valintaruutu

Liitetään checkbox-valintaruutuun tunniste käyttäen for-attribuuttia. Paina tunnistetta ja näet valintaruudun tilan muuttuvan valitusta ei-valituksi ja päinvastoin:

:

Esimerkki . Labelin sisällä

Älkäämme nyt liittäkö tunnistetta for-attribuutin kautta, vaan upotetaan elementit suoraan label-elementin sisään, tässä tapauksessa painamalla tekstiä label myös aktivoimme elementin:

:

Esimerkki . Tekstisyötekenttä

Liitetään input-elementtiin tunniste käyttäen for-attribuuttia. Tunnisteen painaminen johtaa syötekentän kohdistamiseen. Samalla kentässä oleva teksti (lisätty käyttäen value-attribuuttia) korostuu. Jos alkaa kirjoittaa jotain näppäimistöllä - tämä teksti ylikirjoitetaan. Pääsee eroon korostuksesta, poistamatta tekstiä, voi klikkaamalla hiirellä syötekenttää: kohdistus ei katoa, mutta korostus katoaa:

:

Katso myös