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>
|
