…meie igapäevast IT’d anna meile igapäev…

2006-12-26

<label> – unustatud HTML tag?

Filed under: HTML — Sander @ 12:45:47

label.pngHiljaaegu jäi silm peale ühele ingliskeelsele postitusele, mis rääkis “unustatud” HTML-tagidest – so, tagid, mida veebisepad ei kasuta. Minu üllatuseks olid nende seas sellised tagid nagu <fieldset>, <legend>, <optgroup> – ja eriti suure ootamatusena ka <label>.

See ei saa ju võimalik olla, mõtlesin. Olgu veel fieldset, legend ja optgroup – aga label‘it kasutavad ju kõik?

Siis möödusid mõned päevad, mille jooksul pöörasin võrgus kohatud HTML-vormidele rohkem tähelepanu. Midagi spetsiaalselt välja ei otsinud, lihtsalt asjad millele peale juhtusin. Ja ootamatult avastasin, et ca 80% nähtud vormidest ei kasutagi label-tagi kohtades kus võiks kasutada. Postimehe vormid, The Registeri kasutajaküsitlus, Amazon,… , … – ei üheski neist ei ole seda tagi kasutatud.

Aga mida <label> teeb?

Label on HTML-vormi elementide juurde kuuluv tag, mis määrab ära selle elemendi juurde kuuluva teksti. Eriti hea on see, et raadionuppude ja checkboxide labelil klikkimine linnutab vastava elemendi – nagu see on kõikjal Windowsi ja Linuxi kasutajaliidestes. Ehk teisisõnu, label annab oma fookuse edasi sellele vormi elemendile, millega ta seostatud on. Samuti on label’i kasutamisel mõned muud boonused – aga selle juurde jõuan hiljem.

Aga miks on labeli peal klikkimisega raadionupu linnutamine hea? Vaata seda pilti:

Punasega on märgitud ala, millel klikkimine linnutaks vastava checkboxi. Mis sa arvad, kas lihtsam on hiireklikiga tabada pisikest nelinurka – või ilusat suurt ala? Kui enamikule selle blogi lugejatest tundub vahe üsna väike, siis tegelikult enamiku inimeste jaoks see nii ei ole. Oled sa kunagi näinud, kuidas algaja arvutikasutaja kramplikult hiirt pigistab ja järske rabavaid klikke teeb? Nende jaoks on selline vorm õnnistus. Ja vaielda ei saa – omalgi on oluliselt mugavam.

Usability ehk kasutatavus on siinkohal märksõna – ja lisaks veel consistency ehk järjepidevus. Kasutaja ootab, et raadionupp käituks ühtemoodi nii operatsioonisüsteemis kui ka veebivormis. Ja sinu kui programmeerija asi on teha asjad kasutajasõbralikult – seda nii fat client programmis kui ka kõige elementaarsemal veebilehel. Kui sa sellest ei hooli, siis oled sa lihtsalt halb programmeerija/kujundaja/veebisepp/inimene.

Nii see näide, kui ka teised on üleval aadressil http://www.hot.ee/dukelupus/labeltest.html

Teine hea labeli omadus on, et sa saad võimaldada kasutajal visuaalselt näha milline raadionupp/checkbox on parasjagu hiire all. Pane labelle külge CSS klass, millele tee :hover‘i abil väike tekstivärvi muudatus (või lihtsalt label:hover) – ja kasutaja näeb täpselt milline raadionupp saab linnutatud, kui ta klikib:

Nagu on näha, hoiab kasutaja hiirt raadionupu “Teine valik” kohal – kiri on hallikas. Pildil on näha ka üks Internet Explorer 7 meeldivamaid omadusi – raadionupu või tema labeli kohal hiirt hoides muudab raadionupp automaatselt värvi. Taaskord, see ei tööta juhul kui labeli asemel kasutada tavateksti – sel juhul muudab raadionupp värvi ainult siis kui hiirt otse tema kohal hoida. Aga, see ei ole selline killer feature et selle pärast IE7 peamise brauserina kasutusele võtta…

Kolmas hea omadus ei ole nii otseselt labeli omadus – seda saab rakendada ka teiste tag’idega, kuid mitte nii lihtsalt.

Pahatihti on vaja kasutajal valida kümnete või isegi sadade valikute seast – näiteks valida elukohariik – või linn. Üks võimalus selleks on muidugi drop-down valik – kuid selles navigeerimine ei ole just kõige lõbusam tegevus. Aga alternatiiviks on avanev dialoogiaken – kus näidata kõik valikud ilusti ära. Veidike CSS’i-maagiat ja tulemuseks on kasutajasõbralik valikudialoog:

Siin on raadionupud üldse peidetud – ja selle asemel näha labelid, mis display:block; abil kastikesteks muudetud. Eks kujundust saab igaüks muuta nii nagu soovib. Labeli peal klikkimisel linnutatakse raadionupp – ja siis on juba väike töö teha Javascripti abil vormile submit või edastada väärtus väljakutsunud aknasse (või teed kogu asja lihtsat layerina).

Muideks, testlehel on selle näitega seotud jupp Javascripti, mis lihtsalt näitab kus sa klikkisid. Algselt tegin selle fancy‘lt – raadionupule onclick event, mis luges raadionupu väärtuse ja näitas seda. Firefoxis oli kõik korras, aga nagu ilmnes, IE7 ei pea klikki labelil klikiks raadionupul – nii et tegelikult tuli asi teha hoopiski koledasti labeli onclickis. Aga võibolla ongi parem, algajatel lihtsam aru saada ja tegeliku vormi funktsionaalsust ei mõjuta see vähimalgi määral.

Loodetavasti suutsin siinkohal labeli kasulikkust selgitada – ning selle väärt tagi populaarsust veidigi tõsta.

6 kommentaari »

  1. Tartu Ülikooli mati-iti teaduskonna listi tuleb aeg-ajalt kirju stiilis “olen suurt uurimistööd tegev tudeng ja palun täitke minu koostatud küsimustik ära”.

    No hea meelega, loomulikult aitan, kui saan! Ja siis tuleb välja, et tõesti mingil 90% juhtudest on tegu küsimustikuga, kus koostaja ei tunne label’it. Ja siis tuleb jahtida mingeid pisikesi checkboxe ja raadionupukesi kusagil. Ja mingi hetk ajab see niivõrd närvi, et ma tänapäeval labelit mitte kasutavaid teste ei viitsi enam üldse täita.

    Usability kursus oleks vajalik, aga seda ei tehta. Kahju.

    kommentaar kirjutas Elver — 2006-12-26 @ 16:02:35 | Vasta

  2. 1 labeli unustamise põhjus paistab olevat see, et IE seda ei tunne/tundnud- vähemalt IE 6.0-ga toodud leht ei tööta, Mozillaga töötab

    kommentaar kirjutas 0tt — 2007-04-01 @ 01:20:14 | Vasta

  3. Label töötab päris kindlasti ka IE6’ga – IE5 kohta enam ei tea. Mis seal lehel nimelt IE6’ga ei töötanud?

    kommentaar kirjutas dukelupus — 2007-04-01 @ 08:08:41 | Vasta

  4. Kurat, ma olen aastaid veebis pidanud pisikesi kaste sihtima!
    Ka enda (vähestel) lehtedel.

    Nüüd selgub, et jah, labelit otsi kui tikutulega, kuigi see kasutusmugavust oluliselt tõstaks.

    Tänud väärt tag’ide meelde tuletamise eest.

    kommentaar kirjutas ketas — 2007-05-22 @ 22:16:04 | Vasta

  5. Ka minul IE6’ga ei näi label töötavat, ehk pole vahet, kas see seal on või mitte.

    kommentaar kirjutas Carl — 2007-08-08 @ 21:12:29 | Vasta

  6. Nüüdseks on see küsimus pigem akadeemiline, IE kuue kasutajad võivad vaid iseennast süüdistada – et ei ole läinud üle kas teisele brauserile või IE7’le. Siiski, huvitav on see, et kontrollisin pärast 0tt’i kommentaari IE6’ga üle – ja minul töötas. Võimalik, et see on theme‘ga või IE suvanditega seotud.

    kommentaar kirjutas dukelupus — 2007-08-08 @ 21:43:20 | Vasta


RSS feed for comments on this post. TrackBack URI

Lisa kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s

Blog at WordPress.com.