A label tag

A label tag egy címkét határoz meg a input, textarea, select típusú beviteli mezőkhöz és így tovább.

A címke egy adott beviteli mezőhöz köthető a for attribútum segítségével. Ebben annak a beviteli mezőnek a id attribútumának értékét kell megadni, amelyhez a címke tartozik. A címke akkor is hozzárendelődik egy elemhez, ha az elemet a label tagbe helyezzük. Ebben az esetben nem kell megadni a for attribútumot. A jobb megértés érdekében lásd a példákat.

A címkére kattintva a hozzá tartozó jelölőnégyzetek vagy választógombok állapota megváltozik bejelöltből be nem jelöltté és fordítva. A címke ebben az esetben a kényelem miatt szükséges: a kis űrlapelemeket nehéz eltalálni a kurzorral, míg egy hosszú, szöveges címkét - sokkal könnyebb.

A címkéhez kötött szöveges beviteli mező input és textarea típusok esetén a beviteli fókuszt kapja. A fókusz - amikor a kurzor villog a beviteli mezőben, ebben az esetben, ha valamit gépel - a szöveg ebbe a mezőbe kerül (lásd a focus pszeudoosztályt a fókusz haladó szintű megértéséhez).

A label címke használható jelölőnégyzet vagy választógomb utánzására is. Erre azért van szükség, hogy saját designú checkbox-ot vagy radio gombot készíthessünk (ami CSS-sel tilos, de trükkös megoldásokkal lehetséges).

Attribútumok

Attribútum	Leírás
for	Ebben az attribútumban kell megadni annak a beviteli mezőnek a id attribútum értékét, amelyhez a label címke tartozik.
accesskey	Egy gyorsbillentyűt határoz meg, amellyel a címkéhez (a for attribútumon keresztül) kötött űrlapelemhez lehet ugrani. Részletek: lásd a accesskey attribútumot.

Példa . Jelölőnégyzet

Kössünk egy címkét a checkbox jelölőnégyethez a for attribútum segítségével. Kattintsunk a címkére, és látni fogjuk a jelölőnégyzet állapotának változását a bejelölt és a be nem jelölt állapot között:

:

Példa . Label-en belül

Most ne a for attribútumon keresztül kössük a címkét, hanem helyezzük az elemeket közvetlenül a label tagbe, ebben az esetben a label szövegére kattintva szintén aktiválódik az elem:

:

Példa . Szöveges beviteli mező

Kössünk egy címkét a input taghez a for attribútum segítségével. A címkére kattintás a beviteli mező fókuszához vezet. Eközben a mezőben lévő szöveg (amit a value attribútummal adtunk hozzá) kijelölődik. Ha bármit elkezdünk gépelni a billentyűzeten - ez a szöveg eltűnik. A kijelölés megszüntetésére anélkül, hogy a szöveget törölnénk, a egeret a beviteli mezőre kattintva lehet: a fókusz ekkor nem tűnik el, de a kijelölés megszűnik:

:

Lásd még