Olen mieltynyt hehkuttamaan verkkolomakkeiden label-elementin käyttämistä lomakkeissa. Tämän jännittävääkin jännittävämmän elementin avulla voi sitä oikeaoppisesti käytettäessä suurentaa lomakkeessa esimerkiksi tekstikentän tai pudotusvalikon aktivoimista varten sen klikkauspinta-alaa. Olen puhunut blogissa labelista aikaisemminkin. Ensimmäisen kerran vuoden 2005 marraskuussa.
Oikeaoppisesti tämä elementti voidaan niitata yhteen halutun lomakkeesta löytyvän tavaran kanssa laittamalla ensin label-tagiin for="id-tunnisteen-nimi" ja sitten yhdistettävään yksi- tai moniriviseen tekstikenttään tai vaikka pudotusvalikkoon vastaava id-tunniste, joka on esimerkissä id="id-tunnisteen-nimi". Esimerkiksi tekstikenttään yhdistettäessä merkkaus näyttäisi tältä:
<label for="id-tunnisteen-nimi">Käyttäjätunnus</label>
<input type="text" id="id-tunnisteen-nimi" />
Näin yksinkertaista. Tämän tempun teho ilmenee käytännössä siten, että nämä kaksi elementtiä on ikään kuin sidottu toisiinsa ajatustasolla. Päällisin puolin ne usein toimivat siten, että nyt tekstikentän aktivoimista varten osoitettu alue on kasvanut kattamaan myös label-laatikon pinta-alan. Klikkaamalla hiiren osoittimella sanan “Käyttäjätunnus” päällä, tuo tekstikenttä aktivoituu.
Yleensä label-kenttien kohdalla käyttäjälle ei kuitenkaan vihjata mahdollisuudesta hyödyntää kyseistä tekstialuetta jonkin lomake-elementin aktivoimiseksi. Siispä ohjeistetaan. Tehdään siis CSS-merkkauksen sekaan yhden rivin pituinen mahtikäsky:
label { cursor: pointer; }
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 0 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Web. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2008/04/17/label-label-label.