Tagul LABEL si atributul ACCESSKEY

Tagul LABEL si atributul ACCESSKEY

Probabil că mulţi dintre voi aţi observat la numeroase aplicaţii că pentru anumite acţiuni specifice acelei aplicaţii puteţi da clik ori pe textul de lângă buton, ori chiar pe buton ori puteţi utiliza o anumită combinaţie de taste pentru a activa acel buton.
Exact la fel puteţi face şi într-o pagină web, la un formular de contact de exemplu utilizând 2 atribute HTML şi anume elementul LABEL pentru text şi elementul ACCESSKEY pentru activare din taste.

Exemplu:

Clik pe acest text
După cum observaţi, dacă daţi clik direct pe text se bifează checkboxul ca şi îndată ce aţi da clik direct pe el. Este un avantaj şi este mai profesional să apeşi direct pe o suprafaţă mai mare decat să te chinui să nimeresti cine ştie ce radiobuton sau textarea. De asemenea, observaţi că litera C de la text este subliniată iar dacă apăsaţi în browser o anumita combinaţie de taste se va bifa checkboxul. Spun o anumită combinaţie de taste" fiindcă pentru fiecare browser combinaţiile diferă, ba chiar şi între diferite versiuni ale aceluiaşi browser combinaţiile pentru accesskey diferă. Tot citind help-urile din browsere am descoperit că:

Opera versiunea 9.x
Shift + Esc + tasta respectivă (C în exemplul de faţă)

Firefox versiunea 2.x
Alt + Shift + tasta respectivă

Internet Explorer versiunea 7.x
Alt + Shift + tasta respectivă

Atenţie!
Combinaţiile de taste nu sunt active decât dacă aţi specificat in formular pentru fiecare câmp atributul accesskey cu o tastă alfanumerică.

Acum, pe urmă tot acest tamtam să vă arăt şi codul scris în formularul de mai sus ca să nu fiţi nevoiţi să citiţi tot codul sursă al acestei pagini :-d

Cod:

<form method="post">
<input name="test" id="test" accesskey="c" type="checkbox" value="bifat">
<label for="test" title="Tasta de acces este C">
<u>C</u>lik pe acest text</label>
</form>

După cum observaţi în codul de mai sus, în cadrul unui formular (ignoraţi că nu am specificat tot ce trebuie la tagul form, e doar un eemplu) am pus un checkbox cu numele "test", id-ul tot "test", cheia de acces "C" şi valoarea ce va fi trimisă serverului în cazul de faţă valoarea "bifat".
Mai departe avem un tag html LABEL în care specificăm ca este pentru id-ul cu numele "test" şi pentru a putea şti vizitatorul care tastă este cea activă (în cazul in care uit să subliniez tasta din cuvănt, sau poate ca tasta respectivă nici nu are legătură cu fraza din label, am specificat şi un atribut TITLE în care am scris care tasta corespunde pentru acel checkbox. Mai departe ştiţi ce se întâmplă, dacă puneţi cursorul pe text se va afişa mesajulspecificat la atributul TITLE, iar dacădaţi clik pe text sau folositi combinaţia corespunzătoare de taste se va bifa checkbox-ul.

Aceste semnale sunt opţionale, dar sunt foarte utile, iar dacă le folosiţi formularul vostru va arăta mai profesional, aproximativ la fel ca o aplicaţie desktop.
Pentru mai multe detalii despre tagul LABEL şi ce elemente îi mai puteţi da găsiti în documentaţia oficială la
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
De întocmai si pentru accesskey puteţi afla mai multe detalii la
http://www.w3.org/TR/html401/interact/forms.html#h-17.11.2