[Tutorial HTML] Tagul LABEL si atributul ACCESSKEY

#1
Nume Tutorial: Tagul LABEL si atributul ACCESSKEY
Descriere: Tagul LABEL si atributul ACCESSKEY
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Probabil că mulţi dintre voi aţi observat, la multe aplicaţii, că pentru anumite acţiuni specifice acelei aplicaţii puteţi da click ori pe textul de lângă buton, ori chiar pe buton ori puteţi folosi 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 folosind 2 atribute HTML şi anume elementul LABEL pentru text şi elementul ACCESSKEY pentru activare din taste.
După cum observaţi, dacă daţi click direct pe text se bifează checkboxul ca şi când aţi da click direct pe el. Este un avantaj şi este mai profesional să apeşi direct pe o suprafaţă mai mare decât 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 anumită combinaţie de taste se va bifa checkboxul. Spun o anumită combinaţie de taste" deoarece 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 în formular pentru fiecare câmp atributul accesskey cu o tastă alfanumerică.
Acum, după 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:

Cod: Selectaţi tot

<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 exemplu) 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 că este pentru id-ul cu numele "test" şi pentru a putea şti vizitatorul care tastă este cea activă (în cazul în care uit să subliniez tasta din cuvânt, sau poate că tasta respectivă nici nu are legătură cu fraza din label, am specificat şi un atribut TITLE în care am scris care tastă corespunde pentru acel checkbox. Mai departe ştiţi ce se întâmplă, dacă puneţi cursorul pe text se va afişa mesajul specificat la atributul TITLE, iar dacă daţi click pe text sau folosiţi combinaţia corespunzătoare de taste se va bifa checkbox-ul.
Aceste atribute sunt opţionale, dar sunt foarte utile, iar dacă le folosiţi formularul vostru va arăta mai profesional, aproape la fel ca o aplicaţie desktop.

Înapoi la “Tutoriale HTML”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori