Label-tag
Die label-tag spesifiseer 'n etikette vir 'n invoerveld
van die tipe input,
textarea,
select
ensovoorts.
Die etikette word aan 'n spesifieke invoerveld
gekoppel met behulp van die for-kenmerk. Hierin
moet die waarde van die id-kenmerk
van die invoerveld gespesifiseer word waaraan die etikette gekoppel is. Die
etikette word ook gekoppel aan die element as hierdie
element binne die label-tag geplaas word. In hierdie
geval hoef die for-kenmerk nie gespesifiseer te word nie. Kyk na die
voorbeelde vir beter begrip.
Deur op die etikette te klik, sal die daaraan gekoppelde merkblokkies of radio-knoppies hul toestand verander van gemerk na ongemark en omgekeerd. Die etikette is in hierdie geval vir gemak: dis moeilik om met die muis op klein vormelemente te klik, maar op 'n lang etikette met teks - aansienlik makliker.
Die daaraan gekoppelde teksinvoerveld
van die tipe input
en textarea
sal die invoerfokus ontvang. Fokus
- dit is wanneer die kursor in die invoerveld flikker,
in hierdie geval, as jy iets op die sleutelbord tik - sal die teks in hierdie veld beland
(kyk na die pseudoklas focus
vir gevorderde begrip van fokus).
Die label-etikette kan gebruik word vir die
nabootsing van 'n merkblokkie
of 'n radio-knoppie.
Dit is nodig om 'n
checkbox of radio met sy eie ontwerp te maak (wat
op CSS verbode is, maar met behulp van slim truuks
moontlik is).
Kenmerke
| Kenmerk | Beskrywing |
|---|---|
for |
In hierdie kenmerk moet die waarde van die id-kenmerk
van die invoerveld gespesifiseer word waaraan die label-etikette gekoppel is.
|
accesskey |
Spesifiseer 'n sleutelkombinasie waarmee na die vormelement wat aan die etikette gekoppel is
(deur die for-kenmerk) gespring kan word.
Vir meer inligting, kyk na die kenmerk accesskey.
|
Voorbeeld . Merkblokkie
Kom ons koppel 'n etikette aan 'n merkblokkie checkbox
met behulp van die for-kenmerk.
Klik op die etikette en jy sal sien hoe die toestand van die
merkblokkie verander van gemerk na ongemark en omgekeerd:
<input type="checkbox" id="checkbox">
<label for="checkbox">Ek is gekoppel aan die merkblokkie met id checkbox.</label>
:
Voorbeeld . Binne label
En nou, laat ons nie die etikette koppel
deur die for-kenmerk nie, maar plaas die elemente direk
binne die label-tag, in hierdie geval sal die teks
label, wanneer daarop geklik word, die element aktiveer:
<label><input type="checkbox"> etikette</label>
:
Voorbeeld . Teksinvoerveld
Kom ons koppel 'n etikette aan die input-tag
met behulp van die for-kenmerk.
Om op die etikette te klik, sal die invoerveld fokus ontvang. Intussen sal die inhoud
in die veld (wat ons bygevoeg het met behulp van die
value-kenmerk)
gemerk word. As jy iets op die sleutelbord begin tik - sal hierdie teks uitgewis word.
Om van die merk ontslae te raak, sonder om die teks te skrap, kan jy
met die muis op die invoerveld klik: die fokus
sal dan nie verdwyn nie, maar die merk sal verdwyn:
<input type="text" id="input1" value="een of ander teks">
<label for="input1">Ek is gekoppel aan die invoer met id input1.</label>
:
Kyk ook na
-
die tag
legend,
wat 'n onderskrif spesifiseer bo 'n groepering van velde
