Silt label

Silt label määrab sisestusvälja sildi tüübiga input, textarea, select jne.

Silt seotakse kindla sisestusväljaga atribuudi for abil. Selles tuleks määrata sisestusvälja atribuudi id väärtus, millega silt on seotud. Samuti seotakse silt elemendiga, kui see element asetatakse sildi label sisse. Sel juhul ei pea atribuuti for määrama. Vaadake parima mõistmise huvides näiteid.

Sildile vajutades sellega seotud märkeruudud või raadionupud muudavad oma olekut märgitudlt märgimata peale ja vastupidi. Silt on sel juhul mõeldud mugavuseks: väikestele vormielementidele on kursoriga raske tabada, kuid pikka tekstitükiga silti on palju lihtsam.

Sildiga seotud tekstisisestusväli tüübiga input ja textarea saab sisestusfookuse. Fookus - see on siis, kui kursor vilgub sisestusväljal, sel juhul, kui te klaviatuuril midagi kirjutate - satub tekst sellesse välja (vt pseudoklass focus fookuse täiendavaks mõistmiseks).

Silti label saab kasutada märkeruudu või raadionupu imiteerimiseks. Seda on vaja selleks, et teha checkbox või radio oma disainiga (mida CSS-iga on keelatud, kuid kasutades nutikaid võtteid on võimalik).

Atribuudid

Atribuut	Kirjeldus
for	Selles atribuudis tuleks määrata atribuudi id väärtus sellest sisestusväljast, millega silt label on seotud.
accesskey	Määrab kiirklahvi, mille abil on võimalik sildiga seotud (atribuudi for kaudu) vormielemendile liikuda. Täpsemalt vaata atribuuti accesskey.

Näide . Märkeruut

Seome märkeruudu checkbox sildiga kasutades atribuuti for. Vajutage sildile ja näete märkeruudu olemu muutumist märgitud pealt märgimata peale ja vastupidi:

:

Näide . Sildi sees

Nüüd ärgem seome silti läbi atribuudi for, vaid paneme elemendid otse sildi label sisse, sel juhul sildi label teksti vajutamine toob kaasa elemendi aktiveerimise:

:

Näide . Tekstisisestusväli

Seome sildi input sildiga kasutades atribuuti for. Sildile vajutamine toob kaasa sisestusvälja fookuse saamise. Samal ajal väljas olev tekst (lisame atribuudi value abil) saab esile tõstetud. Kui hakata klaviatuuril midagi kirjutama - see tekst kustutatakse. Esiletõstmisest vabanemiseks, kustutamata teksti, saab hiireklõpsuga sisestusväljal: fookus ei kao sel juhul, kuid esiletõstmine kaob:

:

Vaata ka