Etichetele controalelor dintr-un formular (elementul LABEL)
Cīteva controale care se utilizeaza īn formularele interactive au asociate etichete cu ele (butoanele ce se apasa), dar multe nu au (cīmpurile text, checkbox-urile, butoanele radio si meniu). Pentru controalele care au etichete asociate, browserele trebuie sa le foloseasca ca siruri de ca 232h78c ractere afisate pentru ele. Pentru cele care nu, specificarea se face cu elementul LABEL. Acesta ataseaza informatie pentru un control si numai unul.
Cīnd un element LABEL primeste focusul īl paseaza controlului asociat.
Elementul LABEL are un atribut, FOR, care asociaza o eticheta cu un alt control, īn mod explicit: valoarea atributului FOR trebuie sa fie exact aceeasi cu valoarea atributului ID al controlului asociat. Īn acest fel aceluiasi control i se pot asocia mai multe elemente LABEL prin crearea de referinte multiple (cu ajutorul lui FOR).
Exemplu:
Acest exemplu creaza un tabel care este folosit pentru a alinia doua controale text (si etichetele asociate lor). Fiecare eticheta este asociata explicit cu un control de tip text:
<FORM action=" https://somesite.com/prog/adduser " method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>
Acelasi lucru se poate face si prin includerea elementelor explicite LABEL:
<FORM action="https://somesite.com/prog/adduser" method="post">
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
Aceasta tehnica nu poate fi īnsa utilizata cīnd tabelul este folosit pentru asezarea elementelor īn pagina (layout), cīnd eticheta este īntr-o celula si controlul asociat īn alta.
Pentru a se asocia implicit o eticheta cu un alt control, controlul trebuie sa apara īn interiorul (continutul) elementului LABEL. Īn acest caz, LABEL poate contine doar un singur control. Eticheta īnsasi poate fi pozitionata sau īnainte sau dupa controlul asociat.
Exemplu:
Īn acest exemplu asociem implicit doua etichete cu doua controale de tip text:
<FORM action="..." method="post">
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</FORM>
Sintaxa:
<LABEL> ... </LABEL>
Atribute posibile:
FOR=IDREF (cīmpul formularului asociat)
ACCESSKEY=Character (shortcut key)
ONFOCUS=Script (elementul a primit focusul)
ONBLUR=Script (elementul a pierdut focusul)
atribute comune
Contine:
elemente inline cu exceptia lui LABEL
Continut īn:
elemente de tip block-level, elemente inline, cu exceptia lui BUTTON
Descriere:
Acest element asociaza o eticheta (label) cu un control al unui formular. Prin aceasta asociere autorii paginilor Web ofera sugestii importante utilizatorilor de browsere auditive, iar celor care folosesc browsere vizuale li se permite duplicarea unor caracteristici ale interfetei utilizator (GUI), cum ar fi, de exemplu, posibilitatea de a apasa o eticheta (text) pentru a selecta un buton radio sau o casuta de marcare.
Fiecare element LABEL este asociat cu exact un control. Continutul elementului este eticheta controlului si poate include elemente inline, ca de exemplu IMG sau STRONG.
Atributul FOR specifica īn mod explicit controlul care se asociaza cu LABEL. Valoarea lui FOR trebuie sa se potriveasca cu valoarea atributului ID al controlului asociat. Īn absenta lui FOR, elementul LABEL trebuie sa contina controlul asociat! Aceasta metoda (de asociere implicita) functioneaza īn majoritatea cazurilor, dar devine inutulizabila cīnd eticheta si controlul asociat sīnt īn celule diferite de tabel, īn paragrafe sau diviziuni diferite .
Atributul ACCESSKEY, precum si cele legate de actiunile de scriptare pe anumite evenimente sīnt similare cu cele de la INPUT.
Exemplu:
Acest exemplu ilustreaza ambele metode de asociere a unei etichete cu un control: asocierea explicita (cu FOR) si asocierea implicita (control continut de LABEL):
<TABLE>
<TR>
<TD>
<LABEL FOR=user ACCESSKEY=U>User</LABEL>
</TD>
<TD>
<SELECT NAME=user ID=user>
<OPTION>Jean</OPTION>
<OPTION>Kim</OPTION>
<OPTION>Brian</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD>
<TD><INPUT TYPE=password NAME=password ID=passwd></TD>
</TR>
</TABLE>
<P>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=save VALUE=yes>
Save user name and password in a cookie
</LABEL>
</P>
<P>
<LABEL ACCESSKEY=C>
Comments to post:
<TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>
</LABEL>
</P>
|
