Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "xhtml" kytketyt jutut.
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; }
Particletree julkaisi hiljattain äärimmäisen kiehtovan artikkelin verkkolomakkeiden nappuloiden muotoilusta.
<input type="submit" value="Lähetä" />
<button type="submit">Lähetä</button>
Kummatkin napit toimivat ja käyttäytyvät samalla tavalla. Molemmat on myös W3C:n mukaan ihan OK. Asian ydin ja jutun juuri tuossa Particletreen kirjoituksessa on se, että jälkimmäistä button-elementtiä voidaan muokata huomattavasti helpommin, kuin yleisempää input-nappia, esimerkiksi CSS:n avulla. Kyseisen nappulan sisälle voi myös liittää kuvatiedostoa (img) tai muuta tavaraa.
Testataanpa vielä miltä button oikein näyttää. Tältähän se:
Nappula luotiin tällä yksinkertaisella merkkauksella:
<button>Nappula</button>
<hr />, tai sitten näin: <hr></hr>.Tagit: xhtml