Elementele de structura dintr-un formular (elementele FIELDSET, LEGEND)
Elementul FIELDSET permite gruparea tematica a controalelor si a etichetelor unui formular. Prin aceasta operatie se usureaza procesul de întelegere a scopului pentru care au fost introduse controalele (facînd documentele mai accesibile), oferind în plus si facilitati de navigare (pentru browserele vizuale, de exmplu cu tasta TAB).
Elementul LEGEND permite asignarea unei explicatii (unui titlu, sir de caractere) unui element FIELDSET, îmbunatatind accesibilitatea la acesta pentru browserele nevizuale.
Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este împartit în 3 sectiuni: informatii personale, antecedente medicale (istoria bolilor) si tratamentul curent. Fiecare sectiune contine controale pentru a se introduce informatia corespunzatoare.
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND> Informatii Personale</LEGEND>
Numele: <INPUT name="personal_lastname" type="text" tabindex="1">
Prenumele: <INPUT name="personal_firstname" type="text" tabindex="2">
Adresa: <INPUT name="personal_address" type="text" tabindex="3">
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Rujeola" tabindex="20"> Rujeola
<INPUT name="history_illness"
type="checkbox"
value="Varicela" tabindex="21"> Varicela
<INPUT name="history_illness"
type="checkbox"
value="Rubeola" tabindex="22"> Rubeola
<INPUT name="history_illness"
type="checkbox"
value="Pojar" tabindex="23"> Pojar
...alte boli mai vechi...
</FIELDSET>
<FIELDSET>
<LEGEND>Medicamente Curente</LEGEND>
Luati medicamente acum?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Da
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">Nu
</FIELDSET>
<FIELDSET>
Daca da, ce luati:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
De remarcat ca în acest exemplu se poate îmbunatati reperezentarea vizuala a formularului prin alinierea elementelor din fiecare FIELDSET (utilizînd style-sheet-urile), prin adaugarea de informatii de culoare si stil (utilizînd tot style-sheet-urile), adaugînd scripturi (activînd, de exemplu, zona în care se scriu medicamentele curente doar daca se selecteaza butonul radio cu "Da"), etc.
Sintaxa:
<FIELDSET> ... </ FIELDSET >
Atribute posibile:
atribute comune
Contine:
Un element LEGEND urmat de zero sau mai multe elemente de tip bloc sau in-line.
Continut în:
APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH
Descriere:
Acest element defineste un grup de controale într-un formular. Prin aceasta operatie de grupare, formularele se divid în parti mai mici, mai usor de întretinut, utilizatorul putîndu-se orienta mai usor, îmbunatatind modul de utilizare atît pentru browserele vizuale cît si pentru cele auditive.
Chiar daca FIELDSET nu este suportat de toate browser-ele, el poate fi utilizat în deplina siguranta prin includerea lui între tagurile <P> si </P>, sau prin inserarea unui tag P înainte de FIELDSET, în acest fel browser-ele care nu-l recunosc vor include continutul lui într-un element de tip bloc, separat de restul formularului.
Continutul lui trebuie sa înceapa cu un element LEGEND care sa ofere un titlu (o explicatie) pentru grupul de controale, apoi pot sa apara oricîte elemente inline sau de tip bloc, inclusiv un alt element FIELDSET.
Exemplu:
Acest exemplu defineste un formular pentru comanda unor informatii (manuale): ghid HTML 3.2, ghid HTML 4.0 sau manual de referinta CSS. Se cer datele clientului (numele, adresa de e-mail, adresa postala), se cer informatii despre ceea ce se doreste a se cumpara si apoi despre modalitatea de plata. Fiecare grup de informatii se afla într-un FIELDSET separat, fiecare avînd un element LEGEND asociat. La sfîrsit se introduc cele 2 butoane obligatorii într-un formular (Submit si Reset), trimiterea formularului facîndu-se catre un program CGI (order.cgi) aflat în folderul /cgi.
<FORM METHOD=post ACTION="/cgi-bin/order.cgi">
<FIELDSET>
<LEGEND ACCESSKEY=I>Contact Information</LEGEND>
<TABLE>
<TR>
<TD><LABEL FOR=name ACCESSKEY=N>Name:</LABEL></TD>
<TD><INPUT TYPE=text NAME=name ID=name></TD>
</TR>
<TR>
<TD><LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL></TD>
<TD><INPUT TYPE=text NAME=email ID=email></TD>
</TR>
<TR>
<TD><LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL></TD>
<TD><TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
<P>Please select the product(s) that you wish to order:</P>
<P>
<LABEL ACCESSKEY=3>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
<A HREF="/reference/html32/">HTML 3.2 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=4>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
<A HREF="/reference/html40/">HTML 4.0 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
<A HREF="/reference/css/">Cascading Style Sheets Guide</A>
</LABEL>
</P>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=u>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
<P>
<INPUT TYPE=submit VALUE="Submit order">
<INPUT TYPE=reset VALUE="Clear order form">
</P>
</FORM>
Sintaxa:
<LEGEND> ... </LEGEND>
Atribute posibile:
ACCESSKEY=Character (shortcut key)
ALIGN=[ top | bottom | left | right ] (alinierea relativa la FIELDSET)
atribute comune
Contine:
elemente inline
Continut în:
FIELDSET
Descriere:
Acest element defineste un titlu (explicatie) pentru un grup de controale definite cu FIELDSET. Elementul LEGEND trebuie sa apara la începutul lui FIELDSET, înainte de orice alt element. Chair daca nu este suportat de toate browserele, poate fi utilizat în siguranta daca este urmat imediat de un element de tip bloc. Pentru astfel de browsere se pot folosi elemente ca STRONG, B sau BIG pentru a sugera faptul ca acela este titlul unui grup de controale.
Atributul ACCESSKEY se foloseste la fel ca la INPUT, iar atributul (depasit) ALIGN sugereaza pozitia relativa fata de FIELDSET. Valorile posibile sînt: top, bottom, left, right. Chair daca e depasit, este interesant de remarcat ca în tehnica style-sheet-urilor nu exista alternativa!
<FIELDSET>
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=N>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
|
