Capitolul 7.

Utilizarea formulalelor interactive (forms)

n marea majoritate a documentelor (mai ales cele mai vechi), singura interactivitate dintre aplicaie (browser) i cel ce o folosete (utilizatorul) const n faptul c acesta decide ce legtur hypertext din respectivul document s urmreasc. Specificaiile HTML includ ns i o alt metod (de asemenea simpl, primitiv) de cretere a gradului de interactivitate a unui document HTML: formularele (forms) care permit integrarea n document a unor elemente preluate din interfaa aplicaiilor de tip Windows sau X Windows cmpurile text statice i editabile, butoanele radio, csuele de selecie, listele de selecie i cmpurile de editare. Interactivitatea se bazeaz pe faptul c acestea pot fi utilizate pentru introducerea unor date / strngerea de informaie necesar unei alte aplicaii aflat n "spatele" documentului, aplicaie care va utiliza aceste date (introduse de utilizatorul browser-ului i a documentului HTML) i care hotrte ce anume i cum anume va fi oferit clientului, ca rezultat al acestor informaii noi, introduse cu ajutorul formularului. Modul de introducere a datelor n formulare este similar cu modul de a introduce date ntr-o aplicaie Windows. Ca exemple tipice de aciuni realizate cu ajutorul (prin intermediul formularelor) pot fi date: o selecie dintr-o baz de date (starea vremii dintr-o anumit regiune, de pild) un rezultat al unui sondaj (la care a participat cel ce a introdus datele tocmai a participat) vizualizarea la un document cu acces restrns sau orice altceva care ndeplinete criteriile de selecie prezentate n formular

n procesul de proiectare a unui document care utilizeaz un formular HTML exist trei etape: 1. designul i implementarea (n HTML) a formularului de intrare, care va fi vizualizat, explorat i completat de utilizator 2. scrierea unei aplicaii care s interpreteze datele cu care utilizatorul completeaz formularul (aplicaie care primete datele i care este executat de un alt calculator dect cel al utilizatorului, cel care ruleaz browser-ul un server, de obicei cel care gazduiete serverul HTTP i care a oferit pagina cu formularul respectiv) 3. designul i implementarea documentului generat de aplicaia de la punctul 2, ca rspuns la cererea utilizatorului. De regul acest document este scris n HTML, dar aceast restricie nu este obligatorie. Un formular HTML este o seciune de document care conine text, elemente HTML uzuale, dar i elemente speciale numite controale (similare celor din interfaa aplicaiilor

Windows csue de selecie, butoane radio, etc), precum i etichete ale acestor controale. Utilizatorii vor completa formularul prin modificarea controalelor (sau coninutului acestora prin introducerea unui text, selectarea unui element dintr-o list, etc) nainte ca acesta s fie trimis unui agent (program) pentru a fi prelucrat (de exemplu unui server Web, unui server de mail, etc). Fiecare control are un nume dat de atributul NAME al acelui control, nume ce este definit (utilizabil, domeniul de definiie) n cadrul elementului FORM n care acesta apare. n plus, fiecare control are o valoare iniial i o valoare curent, fiecare fiind iruri de caractere (valorile posibile i restriciile ce se aplic asupra acestora difer de la un control la altul). n general, valoarea iniial poate fi specificat prin intermediul valorii atributului VALUE, dar la un element de tip TEXTAREA valoarea iniial este dat de coninutul acestuia, pe cnd valoarea iniial a unui element OBJECT este determinat de implementarea acestuia. Valoarea curent a unui control este iniial setat la valoarea iniial, apoi ea poate fi modificat de utilizator prin intermediul aciunilor ce snt permise asupra controlului sau de scripturi. Valoarea iniial a unui control nu se modific i de aceea atunci cnd un formular este resetat valorile curente ale fiecrui control snt readuse la valorile iniiale. Dac un control nu are specificat valoarea iniial, efectul acestei operaii este nedefinit (poate fi imprevizibil). Cnd un formular este transmis pentru a fi prelucrat, unele controale au numele legat de valoarea curent, astfel c se va transmite agentului (programului) care-l prelucreaz un set de dublete alctuite din numele coontrolului i valoarea sa curent. Astfel de controale snt numite controale de succes (successful controls). Limbajul HTML 4.0 definete urmtoarele tipuri de controale: butoane Autorii paginilor HTML pot crea 3 tipuri de butoane: butoane submit: Cnd este activat (apsat), un astfel de buton trimite un formular unui agent (program) de prelucrare. Un formular poate conine mai mult de un buton submit. butoane reset: Cnd este activat (apsat), un astfel de buton reseteaz toate controalele la valorile lor iniale. butoane push: Aceste butoane nu au o aciune implicit atunci cind snt activate (apsate). Fiecare astfel de buton poate avea asociat un script de tip client-side i genereaz evenimente care determin execuia unor astfel de scripturi (de exemplu cnd se apas un astfel de buton se poate apela un script specific).

Autorii creaz butoane cu unul din elementele BUTON sau INPUT, prima variant fiin mai bogat n opiuni. checkbox (csue de marcare) 2

Checkbox-urile (csuele de marcare), ca i butoanele radio, snt elemente cu 2 stri on/off (selectat/deselectat) care pot fi trecute dintr-o stare n alte de ctre utilizitator. Un astfel de element (switch) este "on" (selectat) cnd atributul selected al lui este setat. Cnd un formular este trimis unui agent de prelucrare numai controalele checkbox ce au valoarea "on" devin controale de succes. ntr-un formular mai multe checkbox-uri pot avea acelai nume. Pentru crearea unui checkbox se folosete elementul INPUT. butoane radio Butoanele radio snt exact ca checkbox-urile, cu excepia faptului c atunci cnd apar mai multe ntr-un formular snt mutual exclusive: cnd un astfel de buton este "on" (selectat), toate celelalte care au acelai nume snt trecute automat pe "off". Pentru crearea unui buton radio se folosete elementul INPUT. meniuri Menurile ofer utilizatorilor posibilitatea de a alege dintre mai multe opiuni. Pentru crearea unui control de tip meniu se folosete elementul SELECT n combinaie cu elementele OPTGROUP i OPTION. text input Autorii pot crea dou tipuri de controale pentru a permite utilizatorilor introducerea unui text. Elementul INPUT creaz un control care are doar o singur linie disponibil pentru introducerea textului, iar elementul TEXTAREA creaz un control cu mai multe linii n care se poate introduce text. n ambele cazuri textul ce se introduce devine valoarea curent a controlului. file select (selecie de fiiere) Acest control permite utilizatorilor s selecteze fiiere astfel nct coninutul acestora s fie transmis odat cu formularul. Pentru crearea unui control tip file select se folosete elementul INPUT. controale ascunse (hidden controls) Se pot crea controale care s nu fie afiate de ctre browsere, dar a cror valori s fie transmise odat cu formularul. Acest tip de control este util pentru a pstra informaie ntre schimburile client/server ce altfel s-ar pierde, datorit naturii fr stare (stateless) a protocolului HTTP. Pentru crearea unui control ascuns se folosete elementul INPUT. controale tip obiect (object controls) Autorii pot insera obiecte generice astfel ca valorile asociate acestora s fie transmise mpreun cu celelalte controale. Pentru crearea unui control ascuns se folosete elementul OBJECT.

Elementele utilizate pentru crearea controalelor apar, n general, ntr-un element FORM, dar pot apare i n afara declaraiei acestui element cnd snt utilizate pentru a crea interfee, caz n care nu pot fi controale de succes. 1. Descrierea unui formular (elementul FORM) Elementul care descrie un formular este FORM. El se comport ca un container pentru controale i specific: Layout-ul (nfisarea) formularului (prin coninutul elementului). Programul ce va prelua formularul completat i transmis (atributul ACTION). Programul care-l recepioneaz trebuie s fie capabil s preia corect i s decodifice perechile nume/valoare transmise pentru a le putea folosi. Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributul METHOD). O codificare a caracterelor acceptabil pentru server, astfel ca acesta s poat prelua formularul (atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie si avertizeze asupra valorilor setului de caractere acceptat i/sau s restricioneze posibilitatea acestora de a introduce caractere necunoscute. Un formular poate conine n afara controalelor i text i elemente HTML (paragrafe, liste, etc.) Exemplul urmtor arat un formular care va fi procesat de un program numit "adduser", n momentul n care va fi transmis de browser. Metoda utilizat pentru transmitere va fi "post":
<FORM action="http://somesite.com/prog/adduser" method="post"> ...coninutul formularului... </FORM>

Iar exemplul urmtor arat cum se trimite un formular la o adres de email:

<FORM action="mailto:L.P@alpha.comp-craiova.ro" method="post"> ...coninutul formularului... </FORM>

Elementul FORM
Sintaxa: <FORM>... </FORM> Atribute posibile: ACTION=URI (handler-ul formularului / programul care l va prelucra) METHOD=[ get | post ] (metoda HTTP folosit la trimiterea formularului)

 ENCTYPE=ContentType (tipul coninutului / content type utilizat pentru trimitere) ACCEPT-CHARSET=Charsets (codificarea suportat a setului caractere) TARGET=FrameTarget (frame-ul n care se afieaz rezultatele) ONSUBMIT=Script (scriptul care se execut dup trimiterea formularului) ONRESET=Script (scriptul care se execut dup resetarea formularului) atribute comune Conine: n HTML 4.0 Strict, unul sau mai multe elemente SCRIPT sau elemente de tip bloc (block-level elements) cu excepia lui FORM In HTML 4.0 Transitional, elemente de tip inline sau elemente tip block-level, exceptnd FORM Coninut n: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere: Orice formular interactiv ncepe cu tagul <FORM> i se termin cu </FORM>, iar undeva n interiorul formularului se gsesc tag-urile (elementele) care definesc controalele (INPUT, SELECT, TEXTAREA i BUTON) prin intermediul crora utilizatorul interacioneaz cu acesta, precum i butoanele speciale SUBMIT i, opional, RESET care acioneaz asupra formularului ca entitate. Cele mai importante atribute ale tag-ului snt ACTION (aciune) i METHOD (metod), astfel nct tag-ul de nceput apare de forma: <FORM ACTION="aciune" METHOD="metod"> Valorile lui ACTION specific natura aciunii, care va avea loc printr-un program care va fi executat de serverul care este gazd pentru document. Acest program va trebui s preia datele din formular i s le prelucreze. Astfel: ACTION="URL" specific URL-ul programului care va fi executat, de obicei un program CGI sau un servlet Java. ACTION="mailto: adres@domeniu" specific un program de expediere a coninutului formularului. Aceast aciune nu este ns suportat de toate browserele (de exemplu Microsoft Internet Explorer 3.x) care, n acest caz, n mod tipic, vor deschide o fereastr de compoziie a unui mesaj email. n afara acestor neajunsuri, lipsa unui feed-back imediat face aceast metod de aciune nu foarte recomandat pentru a fi utilizat.

Atributele METHOD i ENCTYPE specific metoda utilizat pentru a trimite datele formularului serverului care gazduiete programul specificat n ACTION.

Cnd metoda este get (implicit), datele formularului snt transmise ca o cerere HTTP GET cu ?form_data adugat la adresa URI specificat de atributul ACTION. Utilizarea metodei get permite ca transmiterea (datelor) formularului s fie coninut complet n URL. Avantajul este ca se pot crea bookmark-uri (semne de carte) pe astfel de adrese, dar are i dezavantajul c nu poate conine caractere non-ASCII ca "" and "". Cea mai important limitare este dat de cantitatea de date care se pot transmite i care depinde de lungimea maxim a adresei URL permis de browser i server. De aceea, pentru siguran, orice formular care conine caractere non-ASCII sau mai mult de 100 caractere trebuie s utilizeze METHOD=post. Cnd metoda este post, datele formularului snt transmise ca o cerere HTTP POST cu datele formularului n corpul cererii. Majoritatea browserelor snt incapabile s creeze un bookmark pe o astfel de cerere, dar posibilitatea transmiteri de caractere non-ASCII i posibilitatea de transmite date orict de mari snt avantajele fa de GET. Atributul ENCTYPE specific tipul coninutului (content type) folosit n transmiterea formularului i are ca valoare implicit application/x-www-form-urlencoded. Acesta are ca rezultat perechi nume/valoare trimise serverului sub forma name1=value1&name2=value2..., cu caracterul spaiu nlocuit de "+" i cu caracterele speciale (ca, de exemplu, "#") nlocuite de "%HH", unde HH este codul hexa al caracterului respectiv. Sfritul de linie (line break) este codificat ca "%0D%0A" un carriage return urmat de un line feed. Dac formularul conine un element INPUT cu atributul TYPE=file, atunci este preferabil s se foloseasc un ENCTYPE de tipul multipart/form-data iar METHOD s fie post. Pentru preluarea datelor din formularele transmise la server autorii nu trebuie s cunoasc exact formatul n care snt codificate datele, ntruct exist biblioteci publice, free (ca de exemplu CGI.pm) care ofer rutine ce preiau transparent ceea ce se trimite cu get sau post (ca application/x-www-form-urlencoded sau multipart/form-data). Se poate i simula o astfel de transmitere cu unelte ca cg-eye care permit vizualizarea imediat, n oglind a datelor ce s-ar trimite. Atributul ACCEPT-CHARSET specific lista de codificri acceptate de handlerul formularului (programul care-l primete i prelucreaz). Valoarea acestui atribut este o list de seturi de caractere ("charsets") separate cu virgul sau blanc. Valoarea implicit este UNKNOWN i este considerat, de obicei, codificarea folosit pentru transmiterea documentului ce conine formularul. Atributul TARGET este folosit n cazul frame-urilor pentru a specifica n care frame se afieaz rspunsul. Dac nu e specificat nici un frame (sau numele nu exist), valoarea implicit este o fereastr nou. Se pot folosi i numele speciale de frame-uri: _blank ferastr nou, fr nume _self rspunsul se afieaz n frame-ul curent (util pentru suprascrierea atributului BASE al elementului TARGET) _parent rspunsul se afieaz n printele imediat din FRAMESET

 _top

rspunsul se afieaz n fereastra ntreag, fr frame-uri

FORM mai are i atribute pentru a specifica aciuni de tip client-side scripting n cazul anumitor evenimente (ONSUBMIT i ONRESET).

2. Crearea controalelor de baz ale unui formular (INPUT, BUTTON, TEXTAREA) Elementul INPUT este cel mai frecvent ntlnit deoarece creaz mai multe tipuri de controale care permit utilizatorului s aleag. Controalele includ trei tipuri de butoane care pot fi apsate, dou tipuri de butoane pe care utilizatorul le poate seta nchis/deschis, un element de selecie fiiere i cmpuri n care poate fi tastat text. Tag-ul INPUT este nevid. Controalele de baz pe care le poate utiliza un autor n cadrul formularelor interactive snt create cu elementul INPUT, individualizarea lor fcndu-se prin intermediul atributului su TYPE. Pe acestea (ca de fapt pe toate controalele unui formular) utilizatorul le expediaz prin intermediul unui buton creat cu INPUT de tipul SEND sau le reintroduce dup acionarea unui buton de tipul RESET. Nu exist o limit asupra numrului de elemente coninute ntr-un formular. Valorile atributului TYPE care creaz diversele tipuri de controale (pentru elementul INPUT) snt: text Creaz un control de introducere a unui text pe o singur linie: text input control. password La fel ca i "text", dar textul introdus este afiat astfel ca s nu fie descifrabil / s fie ascuns (de exemplu cte un asterix pentru fiecare caracter introdus), de aceea se i numete parol. Valoarea curent a acestui control este textul introdus de utilizator, nu cel afiat de formular! De remarcat c protecia oferit n acest fel este minim, textul transmindu-se, dac nu se folosesc tehnici adecvate, n clar! checkbox Creaz o csu de marcare: checkbox. radio Creaz un buton radio: radio button. file Creaz un control utilizat la selecia fiierelor: file select control. Se folosete valoarea atributului VALUE ca nume iniial de fiier. button Creaz un buton care poate fi apsat. Este utilizat prin intermediul valorii atributului VALUE care de fapt i este textul ce apare pe acesta.

submit Creaz un buton care trimite datele din formular: submit button. reset Creaz un buton care reiniializeaz datele din formular: reset button. image Creaz un buton de submit dar care are o nfiare grafic. Valoare atributului SRC specific adresa URI a imaginii care e folosit la decorarea butonului. Se recomand folosirea i a unui text alternativ (cu atributul ALT) pentru cazul cnd imaginea nu e vizibil. Cnd imaginea este apsat (cu mouse-ul, de exemplu) formularul este transmis serverului mpreun cu coordonatele punctului apsat exprimate n pixeli fa de colul stnga-sus. Datele transmise includ name.x=x-value i name.y=y-value, unde "name" este valoarea atributului NAME, iar x-value i y-value snt valorile coordonatelor. Dac serverul are implementate diferite aciuni n funcie de punctul apsat, utilizatorii cu browsere non-grafice vor fi dezavantajai i de aceea se pot lua n considerare urmtoarele alternative: hidden Creaz un control ascuns: hidden control. Exemplu: Acest exemplu definete un formular simplu care permite utilizatorului introducerea numelui, prenumelui, adresei de email i sexului. Cnd se activeaz (apas) butonul de trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION (aici adduser):
<FORM action="http://somesite.com/prog/adduser" method="post"> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="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>

Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Poziia acestora poate fi controlat cu style-sheet-uri. Utilizarea unei hri senzitive de tip client-side image map, care ruleaz pe client, mpreun cu un script.

Astfel, acest formular poate aprea astfel:

Exemplu: Acest exemplu folosete o funcie (verify) scris n JavaScript care este activat cnd apare evenimentul "onclick" pentru butonul care are pe el textul Click Me:
<HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> </HEAD> <BODY> <FORM action="..." method="post"> <INPUT type="button" value="Click Me" onclick="verify()"> </FORM> </BODY>

Exemplu: Acest exemplu sugereaz cum poate fi transmis coninutul unui fiier indicat de utilizator prin intermediul unui formular. Utilizatorul este ntrebat de numele su i de lista fiierelor al cror coninut se dorete a fi transmis. Prin specificarea valorii atributului ENCTYPE ca "multipart/form-data", fiecare coninut va fi mpachetat pentru a fi transmis ntr-o seciune separat a unui document de tip multipart.
<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> What is your name? <INPUT type="text" name="name_of_sender"> What files are you sending? <INPUT type="file" name="name_of_files"> </FORM>

Elementul INPUT
Sintaxa: <INPUT> Atribute posibile: TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ] NAME=CDATA (numele care se va asocia elementului) VALUE=CDATA (valoarea introdus) 9

 CHECKED (buton radio sau checkbox setat/apsat) SIZE=CDATA (numr sugerat de caractere pentru introducerea unui text) MAXLENGTH=Number (numr maxim de caractere pentru introducerea unui text) SRC=URI (sursa imaginii) ALT=CDATA (text alternativ pentru o imagine) USEMAP=URI (hart senzitiv de tip client-side image map) ALIGN=[ top | middle | bottom | left | right ] (alinierea imaginii) DISABLED (element inactiv/dezactivat) READONLY (previne modificri asupra elementului) ACCEPT=ContentTypes (tipul de media folosit la transmiterea fiierelor) ACCESSKEY=Character (shortcut key) TABINDEX=Number (poziia n ordinea de parcurgere cu TAB) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) ONSELECT=Script (elementul de tip text a fost selectat) ONCHANGE=Script (valoarea elementului a fost modificat) atribute comune Conine: Nimic Coninut n: block-level elements, inline elements, cu excepia lui BUTTON Descriere: Acest element definete un control al unui formular (form control) pentru a permite unui utilizator s introduc date. El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element INPUT n afara unui FORM. Cnd formularul este transmis valoarea curent a fiecrui element INPUT din FORM este trimis sub forma unei perechi name/value. Atributul NAME ofer numele ce va fi folosit pentru identificarea controlului respectiv. Tipul valorii depinde de tipul elementului INPUT. Un formular care include un element INPUT trebuie s specifice n tagul elementului

10

FORM METHOD=post i ENCTYPE="multipart/form-data". Nu toate browserele permit trimiterea, odat cu formularul i a coninutului unui fiier. n acest caz trebuie utilizate alte metode: Exemplu: n exemplul urmtor se trimite un document HTML pemtru a fi validat. Numele lui se cere de la utilizator prin intermediul unui formular:
<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data"> <P> Selectai un document HTML pentru a fi trimis spre validare. Dac browser-ul Dvs. nu suport aceast metod folosii <A HREF="methods.html">metodele alternative de validare</A>.</P> <P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"> </P> <P><INPUT TYPE=submit VALUE="Validate it!"></P> </FORM>

Elementul INPUT poate avea mai muli parametri, cel mai important fiind TYPE, fiecare element TYPE avnd proprii lui parametri pentru definirea n continuare a elementului. Parametrul TYPE specific ce fel de INPUT se ateapt de la utilizator i poate primi urmtoarele valori: Valoare Text Password Descriere Permite utilizatorului s introduc un singur rnd de text La fel ca i Text, dar caracterele tastate de utilizator au ca ecou asteriscul * sau un alt semn echivalent menit s "ascund" textul introdus Implementeaz un buton care poate fi setat activ/inactiv (nchis/deschis) Permite implementarea unui grup de butoane n care, la un moment dat, numai unul poate fi activ (setat/deschis) Determin apariia unui buton care poate fi apsat Determin apariia unui buton care, cnd este selectat, reseteaz toate celelalte elemente ale formularului la valorile lor implicite Afieaz un buton care, dac este apsat, transmite formularul URL-ului specificat n ACTION Afieaz un buton Submit grafic (cu o imagine) Permite selecia unui fiier Invizibil n browser

Check box Radio button Button Reset Submit Image File Hidden Exemplu:

<INPUT TYPE="CHECKBOX" NAME="TEST">

11

Dac nu este specificat TYPE n elementul INPUT, valoarea implicit atribuit este TYPE=TEXT. Atributul NAME este un parametru cerut de toate elementele INPUT, cu excepia elementelor SUBMIT i RESET. Parametrul NAME creaz un nume generic care va fi asociat cu rspunsul utilizatorului i permite serverului s interpreteze formularul pentru a determina corelaia dintre fiecare rspuns al utilizatorului i elementele formularului. NAME poate avea orice valoare. Exemplu: NAME="cini" NAME="profesii" NAME="adres" ntr-o selecie de rase de cini ntr-o selecie de profesii pentru un cmp text

Elementul tip text (TYPE=TEXT) Sintaxa:

<INPUT TYPE="text" NAME="nume" VALUE="valoare" SIZE=xx MAXLENGTH=yy>

Cmpul text este utilizat frecvent ca form de intrare a datelor pentru culegerea unor informaii cum ar fi nume, adrese e-mail, numere de telefon, comentarii scurte sau orice altceva care poate fi tastat pe un rnd. Ca majoritatea elementelor INPUT, un rnd text trebuie s aib un nume (NAME). La trimiterea datelor din formular la server, numelui i va fi asociat valoarea tastat. De pild, pentru culegerea unor adrese email, dac am ales ca nume al rndului NAME=adres, la server va fi trimis secvena adres=ce s-a tastat. Parametrul VALUE este egal cu textul implicit pe care l dorim introdus n rndul text. Dac VALUE lipsete, rndul va fi iniial blanc. Parametrul SIZE (dimensiune) permite setarea lungimii rndului n numr de caractere. Dac numrul de caractere este mai mare (pn la valoarea maxim admis prin MAXLENGTH), rndul se va derula (scroll orizontal). Numrul maxim specificat de MAXLENGTH nu reprezint o cale sigur de a limita numrul de caractere introduse de utilizator care, de exemplu, poate edita pagina ce conine formularul i trimite un numr orict de mare de caractere pentru text. Aceast limitare trebuie luat n considerare i de programul care primete formularul. Dac parametrul SIZE lipsete, se consider c are valoarea implicit de 20 de caractere. Majoritatea navigatoarelor suport cmpuri text formate din mai multe rnduri, definite prin SIZE=X,Y unde X=numr de caractere pe rnd si Y=numr de rnduri. Deoarece HTML suport i comanda TEXTAREA (zon text), elementul tip text se folosete aproape exclusiv la definirea unui singur rnd. Atributul READONLY, nou n HTML 4.0, este destul de puin suportat de browsere. El previne editarea coninutului unui control de tip text sau parol, dar totui snt trimise cu formularul. Exemplu:

12

<FORM> Tastai numele Dvs.: <INPUT TYPE="text" NAME="nume" SIZE=40 MAXLENGTH=60></input> Si adresa e-mail: <INPUT TYPE="text" NAME="adresa" SIZE=30 MAXLENGTH=40></input> </FORM>

Tot un control utilizat la introducerea textelor pe o linie se poate crea i cu elementul ISINDEX. Cu ajutorul lui se poate introduce un text avnd oricte caractere. Acesta este ns un element depit, chiar i pentru crearea unui prompter simplu. Exemplu: Se poate nlocui declaraia lui ISINDEX:
<ISINDEX prompt="Enter your search phrase: ">

cu:
<FORM action="..." method="post"> <P>Enter your search phrase: <INPUT type="text"></P> </FORM>

Elementul parol (TYPE=PASSWORD) Sintaxa:

<INPUT TYPE="password" NAME="nume" VALUE="Valoare" SIZE=xx MAXLENGTH=yy></input>

Acest tip de intrri este folosit dac se accept date de la utilizator dar nu se dorete ca informaiile tastate s apar pe ecran (de pild n cazul furnizrii unor informaii confideniale; dar atenie, aceast modalitate nu realizeaz o criptare a datelor). Parametrii NAME, VALUE i MAXLENGTH acioneaz exact ca i n cazul elementului TEXT. Exemplu: Se utilizeaz elemente tip text i parol care au i etichete ataate cu LABEL:
<LABEL ACCESSKEY=U> User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8> </LABEL> <LABEL ACCESSKEY=P> Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12> </LABEL>

Csue de selecie (TYPE=CHECKBOX) Sintaxa:

13

<INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED>

Tipul CHECKBOX (csue de selecie) permite crearea unui buton pe care utilizatorul l poate seta activ/inactiv (nchis/deschis). Funcia ndeplinit de CHECKBOX permite culegerea de rspunsuri la ntrebri simple, pentru care nu exist dect dou rspunsuri posibile. ntr-un formular se pot include oricte csue de selecie. Fiecare va fi independent de celelalte. La trimiterea formularului, vor fi remise serverului doar csuele selectate. Csua selectat implicit are parametrul CHECKED (selectat) n elementul formularului. Elementele CHECKBOX pot conine de asemenea un parametru VALUE care permite setarea irului de caractere care va fi trimis serverului la selectarea csuei. Dac VALUE nu apare, valoare implicit asignat este ON. Utilizatorul poate selecta nici una, una sau mai multe csue. Pentru fiecare csu selectat va fi trimis serverului un ir nume=valoare. Exemplu:
<FORM> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Cocker"> Cocker <P> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Setter"> Setter <P> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Mioritic"> Mioritic <P> </FORM>

Butoane Radio (TYPE=RADIO) Sintaxa:

<INPUT TYPE="radio" NAME="nume" VALUE="valoare" CHECKED>

Elementele tip butoane radio funcioneaz asemntor cu csuele de selecie, adic pot fi n poziiile selectat/deselectat. Diferena const c ntr-un grup de butoane, numai unul poate fi selectat la un moment dat. Selectarea altuia conduce automat la deselectarea celui selectat anterior. Elementul este util pentru a fora selecia unui singur element dintr-o list multipl. Ca i csuele de selecie, butoanele radio pot avea nume generice, acelai pentru toate butoanele unui anumit grup. ntr-un grup poate fi activat un singur buton. Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu CHECKED. Exemplu:
<FORM> <INPUT TYPE="RADIO" NAME="abonament" VALUE="3_luni"> 3_luni <P> <INPUT TYPE="RADIO" NAME="abonament" VALUE="6_luni"> 6_luni <P> <INPUT TYPE="RADIO" NAME="abonament" VALUE="12:luni"> 12 luni <P> </FORM>

Exemplu:

14

n exemplul urmtor se selecteaz o metod de plat prin intermediul butoanelor radio. De remarcat c toate butoanele au acelai nume, atributul NAME), deci fac parte din acelai grup. Se mai folosete i o csu (un buton) de marcare.
<P>Please indicate your method of payment:</P> <P> <LABEL ACCESSKEY=C> <INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card </LABEL><BR> <LABEL ACCESSKEY=D> <INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card </LABEL><BR> <LABEL ACCESSKEY=M> <INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL> </P><P> <LABEL ACCESSKEY=S> <INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail </LABEL></P>

Elemente tip push-buton (TYPE=BUTTON) Sintaxa:

<INPUT TYPE="button" NAME="nume" VALUE="valoare">

Elementele tip buton specific un buton care se poate apsa i care se folosete cu scripturi (client-side). Valoarea atributului VALUE d textul ce apare pe buton. Atributul ONCLICK este folosit n mod tipic pentru a defini o aciune ce se declaneaz cnd butonul este apsat, ca n exemplul urmtor:
<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

n acest caz, n momentul n care butonul este apsat (click) se execut funcia toggle(), definit anterior cu un element SCRIPT. ntruct astfel de butoane snt utile doar cnd posibilitatea de execuie a scripturilor pe partea de client (client-side scripting) este activ (permis), se recomand evitarea unor butoane care nu fac nimic prin inserarea tagului <INPUT TYPE=button> folosind scripturi, ca n exemplul urmtor:
<SCRIPT TYPE="text/javascript"> <!-document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\"" + "ID=toggler ONCLICK=\"toggle()\">"); // --> </script>

15

Un set mai complet de opiuni este oferit de elementul BUTTON, dar suportul sczut acordat de browsere acestuia fac utilizarea lui INPUT nc extrem de util. Butonul RESET (TYPE=RESET) Sintaxa:
<INPUT TYPE="reset" VALUE="Reseteaz">

n HTML se poate defini un singur buton pentru resetarea tuturor cmpurilor din interiorul unui formular. Resetarea aduce toi parametrii la valorile lor implicite. Butonul de resetare nu are nume deoarece starea lui nu este niciodat transmis serverului, apsarea lui afectnd doar navigatorul utilizatorului. Singurul parametru pentru RESET este VALUE, a crui valoare va fi nscris pe buton. Butonul SUBMIT (TYPE=SUBMIT) Sintaxa:
<INPUT TYPE="submit" NAME="nume" VALUE="Trimite">

Elementul INPUT TYPE="submit" (trimite) este utilizat pentru crearea butonului care trimite formularul serverului. La apsarea butonului, formularul i coninutul lui curent snt trimise serverului specificat de atributul ACTION al elementului FORM, utiliznd procedeul specificat cu METHOD. Cmpurile necompletate i butoanele neselectate nu vor fi transmise. Parametru VALUE d o valoare care va fi nscris pe buton. Dac apare i atributul NAME, browserul va trimite o pereche name/value i pentru butonul SUBMIT, aceasta permind existena mai multor butoane SUBMIT ntr-un formular, fiecare cu propria aciune. Butonul grafic SUBMIT (TYPE=IMAGE) Sintaxa:
<INPUT TYPE="image" NAME="nume" VALUE="Trimite" SRC="URL" ALT="text" USEMAP="URL">

Elementul INPUT TYPE="image" este utilizat pentru crearea unui buton submit grafic. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite, atributul ALT oferind o alternativ (un text) pentru browser-ele care nu afieaz imagini. Numai HTML 4.0 definete acest atribut, browser-ele bazndu-se pe valorile atributelor NAME sau VALUE, astfel c recomandarea este ca toate s aib acelai text asociat. Atributul ALIGN, depit acum, specific modul de aliniere al acestui tip de buton. Valorile top, middle i bottom specific poziia butonului n raport de coninutul adiacent n dreapta i stnga, iar valorile left i right transform butonul ntr-un element flotant, plasnd imaginea la marginea din stnga, respectiv dreapta, restul

16

coninutului curgnd pe lng el. Pentru a trimite restul coninutului sub buton se folosete <BR CLEAR=left|right|all>. n locul acestui atribut se recomand folosirea proprietilor CSS vertical-align i float. Un astfel de buton trimite n plus i coordonatele punctului n care s-a apsat sub forma perechilor: name.x=x-value i name.y=y-value. Dac se combin atributul USEMAP cu TYPE=image, se definete o hart senzitiv prelucrat de client (clientside image map) dar metoda este foarte puin suportat. Selecia unui fiier (TYPE=FILE) Sintaxa:
<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

Elementele tip selecie de fiier creaz un cmp prin intermediul cruia utilizatorii pot trimite fiiere de pe computerul local n reea. Valoarea atributului VALUE specific numele fiierului iniial, dar este ignorat (n mod normal) de toate browser-ele din motive de securitate. Atributul ACCEPT ofer o list cu tipurile de media (fiiere) suportate, permind browser-elor un filtru asupra acestora, dar n general este ignorat. Elemente ascunse (TYPE=HIDDEN) Sintaxa:
<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

Elementele tip ascuns permit inserarea n formulare a unor elemente care nu snt vizibile (de fapt nu snt afiate de browser dar ele pot fi vzute n sursa documentului fr nici o problem). Ele snt extrem de utile cnd aplicaiile utilizeaz mai multe documente HTML: ceea ce introduce utilizatorul poate fi transportat de la un formular la altul fr ca acesta s vad acest lucru. De asemenea, astfel de elemente snt utile i pentru anumite scripturi CGI generale, cnd snt folosite pentru a defini variabile pentru acesta, ca n exemplul urmtor (unde se definete un subiect i o adres de email pentru un rspuns trimis prin email):
<INPUT TYPE=hidden NAME=recipient VALUE="lp@csd.com"> <INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course">

Atribute comune tuturor tipurilor de INPUT Atributul DISABLED, puin suportat, dezactiveaz un control. Astfel, un control devine read-only, nu poate primi focusul, este srit cnd se navigheaz cu tasta TAB i, n plus, valoare sa nu este trimis serverului. Atributele ACCESSKEY i TABINDEX se aplic tuturor, excepie fcnd hidden. ACCESSKEY specific un singur caracter Unicode (inclusiv entitile) ca shortcut pentru a da focusul unui control. Acelai rezultat se obine i dac se seteaz la elementul LABEL Atributul TABINDEX specific un numr ntre 0 i 32767 pentru a indica ordinea elementului n lista de parcurgere (cu TAB). Un element cu TABINDEX=0 sau fr TABINDEX va fi vizitat dup toate elementele cu o valoare pozitiv. ntre elementele cu valoare pozitiv a lui TABINDEX, primele se viziteaz 17

cele cu valori mai mici. n caz de egalitate, primele aprute n document snt primele vizitate. Toate variaiile lui INPUT pot specifica i atribute utilizate de scripturi pe diverse evenimente. Pe lng evenimentele de tip core ce apar pentru majoritatea elementelor, INPUT mai accept i urmtoarele: ONFOCUS, cnd elementul primete focusul; ONBLUR, cnd elementul pierde focusul; ONSELECT, cnd textul dintr-un control de tip text sau password este selectat; ONCHANGE, cnd elementul pierde focusul i valoarea lui a fost schimbat fa de momentul n care l-a primit

Elementul BUTTON
Sintaxa: <BUTTON> ... </BUTTON> Atribute posibile: NAME=CDATA (numele care se va asocia elementului) VALUE=CDATA (valoarea introdus) TYPE=[ submit | reset | button ] (tipul butonului) DISABLED (element inactiv/dezactivat) ACCESSKEY=Character (shortcut key) TABINDEX=Number (poziia n ordinea de parcurgere cu TAB) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) atribute comune Conine: Elemente inline exceptnd A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, IFRAME Elemente block-level exceptnd FORM, ISINDEX, FIELDSET Coninut n: Elemente block-level, elemente inline, cu excepia lui BUTTON Descriere: Acest element creaz butoane ntr-un mod similar cu INPUT, dar ofer mai multe 18

posibiliti de afiare (mai multe etichete, asocierea cu imagini, coninut). Mai mult, toate browser-ele sugereaz pentru aceste butoane apsarea, spre deosebire de cele definite cu INPUT care pot fi plate. Totui elementul este nou n HTML 4.0 i exist browsere care nc nu-l suport! Butoanele care pot fi definite cu acest element snt submit button (implicit), reset button i push button i snt stabilite de valoarea lui TYPE. Atributele NAME i VALUE determin perechea name/value trimis la server, oferind posibilitatea de avea mai multe butoane submit ntr-un formular. Exemple de tipuri de butoane:
<BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modificare </BUTTON> <BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continuare </BUTTON> <BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif" ALT="&#10004;"></BUTTON> <BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON> <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide </BUTTON>

Atributul DISABLE face butonul inaccesibil: nu se mai poate apsa, nu mai primete focusul i este srit cnd se navigheaz cu TAB. Atributele ACCESSKEY, TABINDEX i cele care specific aciuni de scriptare (ONFOCUS i ONBLUR) se folosesc la fel ca i la INPUT. Exemplu: Acest exemplu l extinde pe cel de la INPUT, dar creaz butoanele Submit i Reset cu BUTON n locul lui INPUT. Butoanele pot conine imagini (inserate cu elementul IMG) i se recomand folosirea atributului ALT al acestora pentru cazul n care nu snt afiate.
<FORM action="http://somesite.com/prog/adduser" method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <BUTTON name="submit" value="submit" type="submit"> Send<IMG src="/icons/wow.gif" alt="wow"> </BUTTON> <BUTTON name="reset" type="reset"> Reset<IMG src="/icons/oops.gif" alt="oops"> </BUTTON> </P> </FORM>

19

Exemplu ilegal: De remarcat c este ilegal s se asocieze o hart senzitiv cu un IMG care apare ca i coninut al unui element BUTTON. De aceea exemplul urmtor este ILEGAL!
<BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON>

Elementul TEXTAREA
Sintaxa: <TEXTAREA> ... </TEXTAREA> Atribute posibile: NAME=CDATA (numele care se va asocia elementului) ROWS=Number (numr de rnduri) COLS=Number (numr de coloane) DISABLED (element inactiv/dezactivat) READONLY (previne modificri asupra elementului) ACCESSKEY=Character (shortcut key) TABINDEX=Number (poziia n ordinea de parcurgere cu TAB) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) ONSELECT=Script (elementul de tip text a fost selectat) ONCHANGE=Script (valoarea elementului a fost modificat) atribute comune Conine: Text (incluznd entiti) Coninut n: Elemente block-level, elemente inline, cu excepia lui BUTTON Descriere: TEXTAREA creaz un control pentru introducerea unui text multi-linie, valoarea iniial fiind afiat de browser la nceput n interiorul controlului (nu trebuie s conin taguri HTML). El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element TEXTAREA n afara unui formular definit cu FORM.

20

Acest element ofer posibilitatea de a accepta de la utilizator un bloc de text, astfel c acesta i poate "lipi" un document ntreg ntr-o pagin HTML. Elementul TEXTAREA nu este o comand de tip INPUT ci una de cu totul alt tip. Ca i elementele INPUT, regiunile text au un nume care permite identificarea acestui cmp de ctre server, care va primi informaia de form nume=coninut. Elementul TEXTAREA are parametrii (obligatorii) ROWS i COLS care specific dimensiunile ferestrei afiate utilizatorului, exprimate n numr de caractere pe orizontal, respectiv vertical. Aceasta nu nseamn o limitare a utilizatorului n privina volumului de informaie care poate fi tastat deoarece umplerea ferestrei determin apariia unor bare de derulare. Se limiteaz totui cantitatea total de text ce se poate introduce (n practic) la 32 ... 64 KB. Limitarea final este fcut de scriptul CGI sau de servletul Java care primete formularul. Elementul TEXTAREA nu este vid, ceea ce nseamn c trebuie un terminator </TEXTAREA>. Ceea ce se afl ntre cele dou etichete va apare ca text implicit n cmpul definit. Atributul READONLY, nou n HTML 4.0 i destul de puin suportat, determin afiarea unui text nemodificabil. Diferena fa de textul simplu este ca acesta este trimis serverului odat cu formularul. Atributul DISABLED se comport ca i la INPUT, transformnd textul n read-only. Atributele ACCESSKEY, TABINDEX i cele care specific aciuni de scriptare (ONFOCUS, ONBLUR, ONSELECT i ONCHANGE) se folosesc la fel ca i la INPUT. Exemplu: Acest exemplu creaz un control TEXTAREA de 20 de rnduri i 80 de coloane, avnd iniial 2 linii de text. Acest control este urmat de dou butoane: Submit i Reset.
<FORM action="http://somesite.com/prog/text-read" method="post"> <P> <TEXTAREA name="thetext" rows="20" cols="80"> Prima linie a textului iniial. A doua linie a textului iniial. </TEXTAREA> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM>

3. Crearea controalelor de selecie ntr-un formular (SELECT, OPTGROUP, OPTION) HTML permite crearea mai multor tipuri de liste de selecie (meniuri), de orice lungime, prin intermediul elementului SELECT. Fiecare list prezint utilizatorului unul sau mai multe elemente care pot fi selectate individual sau multiplu. Listele pot fi afiate n interiorul unei ferestre sau de forma drop-down. Ferestrele inserate permit accesarea elementelor coninute cu ajutorul unor bare de derulare.

21

n interiorul elementului SELECT snt permise doar dou elemente: text simplu i cel puin un element OPTION. Elementul OPTION este utilizat pentru definirea fiecrui element al meniului. OPTION are un singur parametru: SELECTED. Utilizarea lui nseamn c elementul respectiv este selectat implicit. Atunci cnd un formular este transmis spre a fi prelucrat (submit), numele (NAME) listei va fi trimis serverului mpreun cu elementul selectat din list. Elementele unui meniu pot fi grupate logic n grupuri cu ajutorul elementului OPTGROUP. Aceast posibilitate este util cnd trebuie ales dintr-o list foarte lung: opiunile ce au legtur ntre ele dpdv logic se pot grupa i utiliza mpreun mai uor dect dac snt toate ntr-o singur list (la fel ca submeniurile unui meniu). n HTML 4.0 grupurile nu pot fi, ns, mbricate.

Opiuni preselectate
Dintre opiunile unei liste pot fi preselectate zero sau mai multe. Determinarea elementelor preselectate se face dup cum urmeaz: Dac nici un element OPTION nu are atributul SELECTED setat, atunci nu vor fi elemente preselectate. Dac un element OPTION are atributul SELECTED setat, atunci acesta va fi preselectat. Daca elementul SELECT are atributul MULTIPLE i mai mult de un element OPTION are atributul SELECTED setat, atunci toate acestea vor fi preselectate Se consider eroare dac mai mult de un element OPTION are atributul SELECTED setat i elementul SELECT nu are atributul MULTIPLE. Fiecare browser va aciona diferit, dar nu trebuie s fie preselectat mai mult de o singur opiune La afiarea unui menu, se folosete valoarea atributului LABEL de la fiecare element OPTION pentru afiarea acelei opiuni. Dac nu este specificat se folosete coninutul elementului OPTION. n cazul unui grup de opiuni, atributul LABEL specific eticheta acelui grup de opiuni. Exemplu: Se creaz un meniu ce permite selectarea unor componente software care s se instaleze. Prima i a doua component snt preselectate i pot fi deselectate, celelalte nefiind preselectate. Atributul SIZE indic faptul c meniul are doar 4 rnduri, chiar dac snt 7 opiuni. Ce nu se vede se acceseaz dup ce se face scroll. Dupa definirea meniului apar butoanele Submit i Reset.
<FORM action="http://somesite.com/prog/component-select" method="post"> <P> <SELECT multiple size="4" name="component-select"> <OPTION selected value="Component_1_a">Component_1</OPTION> <OPTION selected value="Component_1_b">Component_2</OPTION>

22

<OPTION>Component_3</OPTION> <OPTION>Component_4</OPTION> <OPTION>Component_5</OPTION> <OPTION>Component_6</OPTION> <OPTION>Component_7</OPTION> </SELECT> <INPUT type="submit" value="Send"><INPUT type="reset"> </P> </FORM>

Exemplu: n acest exemplu se utilizeaz OPTGROUP pentru a grupa opiunile meniului:

<FORM action="http://somesite.com/prog/someprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="PortMaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1 <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7 <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7 <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="IRX"> <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R </OPTGROUP> </SELECT> </FORM>

Grupurile (logice) de opiuni snt, n acest caz:

PortMaster 3 3.7.1 3.7 3.5 PortMaster 2 3.7 3.5 IRX 3.7R 3.5R

Browser-ele pot permite utilizatorilor selectarea unei opiuni dintr-un grup utiliznd, de exemplu, meniuri ierarhice sau alt mecanism asemntor. O posibil afiare a meniului definit anterior este prezentat n figura urmtoare:

23

Elementul SELECT
Sintaxa: <SELECT> ... </SELECT> Atribute posibile: NAME=CDATA (numele care se va asocia elementului) MULTIPLE (permite selecii multiple) SIZE=Number (numrul de opiuni vizibile) DISABLED (element inactiv/dezactivat) TABINDEX=Number (poziia n ordinea de parcurgere cu TAB) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) ONCHANGE=Script (valoarea elementului a fost modificat) atribute comune Conine: Unul sau mai multe elemente OPTGROUP sau OPTION Coninut n: elemente de tip block-level, elemente inline, cu excepia lui BUTTON Descriere: Acest element definete un control pentru selecia dintr-o list de opiuni. El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element SELECT n afara unui formular definit cu FORM. Elementul SELECT conine unul sau mai multe elemente OPTGROUP sau OPTION pentru a oferi un meniu de posibiliti de alegere pentru utilizator. Fiecare opiune este coninut ntr-un element OPTION, iar acestea pot fi grupate logic cu OPTGROUP. Valoarea atributului NAME va fi trimis serverului ca identificator al controlului (mpreun cu opiunea selectat). Elementul SELECT are un parametru opional, SIZE. Dac acest parametru lipsete, valoarea lui implicit este l, lista va fi de tip drop-down i din list poate fi selectat doar un singur element. Utilizarea este pentru situaii similare celor rezolvate de butoanele radio. Dac parametrul este mai mare dect 1, lista este prezentat ntr-o fereastr inserat, valoarea lui SIZE indicnd cte elemente pot fi vzute simultan. Dac lista este mai lung, celelalte elemente pot fi vzute cu ajutorul barei de derulare (scroll) care apare n dreapta listei. 24

Un alt parametru opional pentru <SELECT> este MULTIPLE. Parametrul nu are o valoare numeric asociat, iar prezena lui asigur doar posibilitatea seleciei mai multor elemente ale listei simultan (cu ajutorul tastei CTRL) care vor fi trimise la Submit, ca n exemplul urmtor.
<P>Selectai una sau mai multe seciuni n care dorii s cutai: <SELECT NAME=sections MULTIPLE> <OPTION>Web Authoring Reference</OPTION> <OPTION>FAQ Archives</OPTION> <OPTION>Design Elements</OPTION> <OPTION>Tools</OPTION> <OPTION>Feature Article</OPTION> </SELECT>

Atributele DISABLED i TABINDEX, precum i cele legate de aciunile de scriptare pe anumite evenimente snt similare cu cele de la INPUT. Exemplu: Exemplul urmtor creaz un meniu de 5 opiuni (5 elemente OPTION), afiat ntr-o fereastr n care snt vizibile simultan 3 opiuni (SIZE=3), prima fiind selectat implicit (OPTION SELECTED>Rou), cu posibilitatea de a selecta mai multe opiuni (MULTIPLE).
<FORM> Selectai culorile favorite din urmtoare list: <SELECT NAME="culori" SIZE=3 MULTIPLE> <OPTION SELECTED>Rou <OPTION>Verde <OPTION>Albastru <OPTION>Turcoaz <OPTION>Magenta </SELECT> </FORM>

Elementul OPTGROUP
Sintaxa: <OPTGROUP> ... </OPTGROUP> Atribute posibile: LABEL=Text (eticheta grupului de opiuni) DISABLED (grupul de opiuni este dezactivat)

25

 atribute comune Conine: Unul sau mai multe elemente OPTION Coninut n: elementul SELECT Descriere: Acest element definete un grup de opiuni ntr-un meniu definit cu SELECT i trebuie s conin cel puin un element OPTION. Atributul LABEL este obligatoriu, identific grupul de opiuni, fiind afiat de browser i pentru utilizator. El trebuie s descrie grupul de opiuni grupate dpdv logic mpreun cu atributele LABEL ale fiecrei opiuni n parte. OPTGROUP nu este foarte bine suportat de toate browserele, dar cele care nu l recunosc nu creaz nici o problem. Cele care l suport permit o afiare mai compact prin intermediul meniurilor cascadate (submeniuri). Cascadarea este ns n HTML 4.0 doar pe un singur nivel (nu snt permise OPTGROUP n OPTGROUP)! Atributul DISABLED face ntregul grup de opiuni inactive (le dezactiveaz), acestea neputnd fi selectate i nici trimise la server odat cu formularul. Exemplu: Exemplul urmtor se poate folosi pentru a cere utilizatorului informaii despre browser-ul pe care l utilizeaz mai frecvent. Se utilizeaz OPTGROUP pentru a grupa informaiile legate de acelai tip de browser (Netscape Navigator, Microsoft Internet Explorer, Opera sau altul).
<P>Ce browser Web folosii n mod curent? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x">Netscape Navigator higher</OPTION> <OPTION LABEL="3.x">Netscape Navigator <OPTION LABEL="2.x">Netscape Navigator <OPTION LABEL="1.x">Netscape Navigator </OPTGROUP>

4.x or 3.x</OPTION> 2.x</OPTION> 1.x</OPTION>

<OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x </OPTION> <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION> <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION> <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION> <OPTION LABEL="2.x">Opera 2.x</OPTION>

26

</OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P>

Elementul OPTION
Sintaxa: <OPTION > ... </OPTION > Atribute posibile: VALUE=CDATA (valoarea opiunii) SELECTED (opiune iniial selectat) DISABLED (dezactivat/inactiv) LABEL=Text (eticheta opiunii) atribute comune Conine: Text (inclusiv entiti) Coninut n: elementul SELECT sau OPTGROUP Descriere: Acest element definete o opiune (un elemnt de meniu) ntr-un meniu (list de opiuni). Valoarea acestei opiuni este cea care va fi trimis la Submit i este specificat cu atributul VALUE. Dac lipsete, se consider valoare a acestui element coninutul lui OPTION. Atributul boolean SELECTED definete o opiune ce este iniial selectat preselectat (a se vedea paragraful anterior relativ la elemente preselectate). Exist posibilitatea de a stabili ca opiune preselectat o valoare fr semnificaie (dummy) pentru a fi siguri c utilizatorul selecteaz o opiune i nu trece doar peste meniu. De exemplu, starea civil se poate cere astfel:
<SELECT NAME="marital_status"> <OPTION SELECTED VALUE="">Select...</OPTION> <OPTION>Single</OPTION> <OPTION>Married</OPTION> <OPTION>Separated</OPTION> <OPTION>Divorced</OPTION> <OPTION>Widowed</OPTION> </SELECT>

Atributul DISABLED, dei nu este suportat global, determin transformarea unei opiuni n opiune inactiv (nu poate fi selectat, nu este trimis odat cu formularul).

27

Atributul LABEL specific eticheta unei opiuni, care altfel (implicit) este coninutul elementului. Se recomand folosirea ei pentru c permite utilizarea mult mai uoar a gruprii cu OPTGROUP, fr a sacrifica compatibilitatea cu browser-ele care nu suport acest element. Exemplu:
<P>Which Web browser do you use most often? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x or higher">Netscape Navigator 4.x</OPTION> <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION> <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION> <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION LABEL="4.x or higher">Microsoft Internet Explorer 4.x</OPTION> <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION> <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION> <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION> <OPTION LABEL="2.x">Opera 2.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P>

Atributul LABEL al elementelor OPTGROUP i OPTION's LABEL au fost introduse mpreun, astfel c un browser sau le suport pe amndou sau pe niciunul. Cele care le suport vor afia acest exemplu folosind atributul LABEL al lui OPTION pentru a oferi ca element de selecie doar numrul de versiune, mpreun cu atributul LABEL al lui OPTGROUP care d numele complet al aplicaiei (browserului), obinndu-se o afiare mai compact. Celelalte, care nu suport atributul OPTGROUP, le vor ignora (mpreun cu atributele lor, aici LABEL), afind numele complet i versiunea la fiecare opiune.

28

4. Etichetele controalelor dintr-un formular (elementul LABEL) Cteva controale care se utilizeaz n formularele interactive au asociate etichete cu ele (butoanele ce se apas), dar multe nu au (cmpurile text, checkbox-urile, butoanele radio i meniu). Pentru controalele care au etichete asociate, browserele trebuie s le foloseasc ca iruri de caractere afiate pentru ele. Pentru cele care nu, specificarea se face cu elementul LABEL. Acesta ataeaz informaie pentru un control i numai unul. Cnd un element LABEL primete focusul l paseaz controlului asociat. Elementul LABEL are un atribut, FOR, care asociaz o etichet cu un alt control, n mod explicit: valoarea atributului FOR trebuie s fie exact aceeai cu valoarea atributului ID al controlului asociat. n acest fel aceluiai control i se pot asocia mai multe elemente LABEL prin crearea de referine multiple (cu ajutorul lui FOR). Exemplu: Acest exemplu creaz un tabel care este folosit pentru a alinia dou controale text (i etichetele asociate lor). Fiecare etichet este asociat explicit cu un control de tip text:
<FORM action=" <TABLE> <TR> <TD><LABEL <TD><INPUT <TR> <TD><LABEL <TD><INPUT </TABLE> </FORM> http://somesite.com/prog/adduser " method="post"> for="fname">First Name</LABEL> type="text" name="firstname" id="fname"> for="lname">Last Name</LABEL> type="text" name="lastname" id="lname">

Acelai lucru se poate face i prin includerea elementelor explicite LABEL:

<FORM action="http://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>

Aceast tehnic nu poate fi ns utilizat cnd tabelul este folosit pentru aezarea elementelor n pagin (layout), cnd eticheta este ntr-o celul i controlul asociat n alta. Pentru a se asocia implicit o etichet cu un alt control, controlul trebuie s apar n interiorul (coninutul) elementului LABEL. n acest caz, LABEL poate conine doar un singur control. Eticheta nsi poate fi poziionat sau nainte sau dup controlul asociat. Exemplu: n acest exemplu asociem implicit dou etichete cu dou controale de tip text:

29

<FORM action="..." method="post"> <LABEL> First Name <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname"> Last Name </LABEL> </FORM>

Elementul LABEL
Sintaxa: <LABEL> ... </LABEL> Atribute posibile: FOR=IDREF (cmpul formularului asociat) ACCESSKEY=Character (shortcut key) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) atribute comune Conine: elemente inline cu excepia lui LABEL Coninut n: elemente de tip block-level, elemente inline, cu excepia lui BUTTON Descriere: Acest element asociaz o etichet (label) cu un control al unui formular. Prin aceast asociere autorii paginilor Web ofer sugestii importante utilizatorilor de browsere auditive, iar celor care folosesc browsere vizuale li se permite duplicarea unor caracteristici ale interfeei utilizator (GUI), cum ar fi, de exemplu, posibilitatea de a apsa o etichet (text) pentru a selecta un buton radio sau o csu de marcare. Fiecare element LABEL este asociat cu exact un control. Coninutul elementului este eticheta controlului i poate include elemente inline, ca de exemplu IMG sau STRONG. Atributul FOR specific n mod explicit controlul care se asociaz cu LABEL. Valoarea lui FOR trebuie s se potriveasc cu valoarea atributului ID al controlului asociat. n absena lui FOR, elementul LABEL trebuie s conin controlul asociat! Aceast metod (de asociere implicit) funcioneaz n majoritatea cazurilor, dar devine inutulizabil cnd eticheta i controlul asociat snt n celule diferite de tabel, n paragrafe sau diviziuni diferite .

30

Atributul ACCESSKEY, precum i cele legate de aciunile de scriptare pe anumite evenimente snt similare cu cele de la INPUT. Exemplu: Acest exemplu ilustreaz ambele metode de asociere a unei etichete cu un control: asocierea explicit (cu FOR) i asocierea implicit (control coninut 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>

5. Elementele de structur dintr-un formular (elementele FIELDSET, LEGEND) Elementul FIELDSET permite gruparea tematic a controalelor i a etichetelor unui formular. Prin aceast operaie se uureaz procesul de nelegere a scopului pentru care au fost introduse controalele (fcnd documentele mai accesibile), oferind n plus i faciliti de navigare (pentru browserele vizuale, de exmplu cu tasta TAB). Elementul LEGEND permite asignarea unei explicaii (unui titlu, ir de caractere) unui element FIELDSET, mbuntind accesibilitatea la acesta pentru browserele nevizuale. Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este mprit n 3 seciuni: informaii personale, antecedente medicale (istoria bolilor) i tratamentul curent. Fiecare seciune conine controale pentru a se introduce informaia corespunztoare.
<FORM action="..." method="post">

31

<P> <FIELDSET> <LEGEND> Informaii 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 c n acest exemplu se poate mbunti reperezentarea vizual a formularului prin alinierea elementelor din fiecare FIELDSET (utiliznd style-sheeturile), prin adugarea de informaii de culoare i stil (utiliznd tot style-sheet-urile), adugnd scripturi (activnd, de exemplu, zona n care se scriu medicamentele curente doar dac se selecteaz butonul radio cu Da), etc.

32

Elementul FIELDSET
Sintaxa: <FIELDSET> ... </ FIELDSET > Atribute posibile: atribute comune Conine: Un element LEGEND urmat de zero sau mai multe elemente de tip bloc sau inline. Coninut n: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere: Acest element definete un grup de controale ntr-un formular. Prin aceast operaie de grupare, formularele se divid n pri mai mici, mai uor de ntreinut, utilizatorul putndu-se orienta mai uor, mbuntind modul de utilizare att pentru browserele vizuale ct i pentru cele auditive. Chiar dac FIELDSET nu este suportat de toate browser-ele, el poate fi utilizat n deplin siguran prin includerea lui ntre tagurile <P> i </P>, sau prin inserarea unui tag P nainte de FIELDSET, n acest fel browser-ele care nu-l recunosc vor include coninutul lui ntr-un element de tip bloc, separat de restul formularului. Coninutul lui trebuie s nceap cu un element LEGEND care s ofere un titlu (o explicaie) pentru grupul de controale, apoi pot s apar oricte elemente inline sau de tip bloc, inclusiv un alt element FIELDSET. Exemplu: Acest exemplu definete un formular pentru comanda unor informaii (manuale): ghid HTML 3.2, ghid HTML 4.0 sau manual de referin CSS. Se cer datele clientului (numele, adresa de e-mail, adresa postal), se cer informaii despre ceea ce se dorete a se cumpra i apoi despre modalitatea de plat. Fiecare grup de informaii se afl ntrun FIELDSET separat, fiecare avnd un element LEGEND asociat. La sfrit se introduc cele 2 butoane obligatorii ntr-un formular (Submit i Reset), trimiterea formularului fcndu-se ctre 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>

33

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

34

<INPUT TYPE=submit VALUE="Submit order"> <INPUT TYPE=reset VALUE="Clear order form"> </P> </FORM>

Elementul LEGEND
Sintaxa: <LEGEND> ... </LEGEND> Atribute posibile: ACCESSKEY=Character (shortcut key) ALIGN=[ top | bottom | left | right ] (alinierea relativ la FIELDSET) atribute comune Conine: elemente inline Coninut n: FIELDSET Descriere: Acest element definete un titlu (explicaie) pentru un grup de controale definite cu FIELDSET. Elementul LEGEND trebuie s apar la nceputul lui FIELDSET, nainte de orice alt element. Chair dac nu este suportat de toate browserele, poate fi utilizat n siguran dac 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 c acela este titlul unui grup de controale. Atributul ACCESSKEY se folosete la fel ca la INPUT, iar atributul (depit) ALIGN sugereaz poziia relativ fa de FIELDSET. Valorile posibile snt: top, bottom, left, right. Chair dac e depit, este interesant de remarcat c n tehnica style-sheet-urilor nu exist alternativ!
<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>

35

Expiry: <INPUT TYPE=text NAME=expiry> </LABEL> </P> </FIELDSET>

6. Procesarea datelor din formulare 1. Metode de transmitere a formularului Valorile completate n cadrul unui formular pot fi transmise nspre server pe mai multe ci, metodele de baz fiind GET sau POST, dar pot fi utilizate i posibilitile oferite de elementul ISINDEX. Fiecare metod trateaz intrrile ntr-un mod aparte, avnd n comun doar variabilele de mediu. <ISINDEX> este un tag vid de un tip mai special. Includerea lui n header s-a fcut iniial (nainte de existena formularelor) pentru ca acesta s activeze un cmp text n bara de butoane sau n fereastra navigatorului. Vizitatorul putea tasta n acel cmp irul de caractere dorit i, apsnd RETURN, trimitea datele serverului. Este o modalitate de a implementa interaciunea nainte de existena formularelor. Metoda se alege n funcie de aplicaie. GET poate fi folosit n cazul cnd informaia transmis este scurt (de exemplu un cuvnt cheie i tipul acestuia). Dac formularul lucreaz cu mai multe cmpuri de date, variabilele de mediu pot fi trunchiate, dar acest defect se poate elimina prin apelul metodei POST. Metoda folosit de protocolul HTTP pentru a trimite datele la server este stabilit de atributul METHOD al elementului FORM, atribut ce poate lua dou valori: get: Cu metoda "get" a protocolului HTTP, setul de date al formularului este adugat la adresa URI specificat de atributul ACTION, folosind semnul ntrebrii ("?") ca separator. Noua adres URI este trimis astfel la agentul (programul) care o proceseaz. post: Cu metoda "post" a protocolului HTTP, setul de date al formularului este inclus n corpul formularului i transmis agentului (programului) care-l proceseaz. Metoda "get" trebuie folosit cnd formularul este idempotent, adic nu cauzeaz alte efecte laterale. Multe cutri n bazele de date nu au efecte laterale (secundare, ascunse) vizibile i reprezint aplicaii ideale pentru aceast metod. n plus datele din setul de date al formularului trebuie s fie obligatoriu, n exclusivitate, caractere ASCII. Dac, ns, serviciul asociat cu procesarea formularului are efecte laterale (side-effects), ca de exemplu cazul n care formularul modific baza de date sau reprezint o subscriere la un serviciu, se va folosi metoda "post". Aceasta ofer i posibilitatea de a trimite date din ntreg setul de caractere (Unicode), prin specificarea atributului enctype="multipart/form-data".

36

2. Controalele de succes (successful controls) ale unui formular Un control de succes este acel control al unui formular valid pentru a fi trimis (la Submit). Fiecare astfel de control are numele su ascociat, ntr-o pereche, cu valoarea sa curent. Aceast pereche face parte din setul de date al formularului. Un control de succes trebuie s fie definit ntr-un element FORM i trebuie s aib un nume. Nu toate controalele unui formular snt de succes. Astfel: Controalele care snt dezactivate/inactive (disable) nu pot fi de succes Dac un formular conine mai mult de un buton Submit, numai acela care este activat (apsat) este de succes Toate csuele de marcare (checkbox-urile) setate la on (activate), i numai ele, snt de succes Dintre butoanele radio care au aceeai valoare a atributului NAME numai cel care activ/setat (pe "on") poate fi de succes. Pentru meniuri (liste de selecie), numele controlului este oferit de un element SELECT iar valorile snt date de elementele OPTION. Numai opiunile selectate snt de succes. Valoarea curent a unui element de selectare a unui fiier este o list de unul sau mai multe nume. La transmiterea unui formular, coninutul fiecrui fiier este transmis cu restul datelor din formular. Coninutul fiierului este mpachetat conform tipului coninutului formularului (content-type). Valoarea curent a unui obiect este determinat de implementarea specific a acelui obiect. Dac un control nu are o valoare curent cnd formularul este transmis, browserul nu este obligat s l trateze ca pe un control de succes. n plus, nu vor fi considerate controale de succes nici: Butoanele Reset Elementele OBJECT care au atributul DECLARE setat. Controalele ascunse (hidden) care chiar dac nu snt afiate de browsere (nu snt vizibile) pot fi controale de succes. Exemplu:
<FORM action="..." method="post"> <P> <INPUT type="password" style="display:none" name="invisible-password" value="mypassword"> </P> </FORM>

37

va crea un control de succes pentru elementul parol, adic o pereche din numele "invisible-password" i valoarea "mypassword". 3. Procesarea datelor unui formular Cnd utilizatorul trimite un formular (prin activarea butonului Submit), browserul su realizeaz urmtorii pai (urmtoarele aciuni): Pasul 1: Identificarea controalelor de succes (successful controls) Pasul 2: Crearea unui set de date asociat formularului Un set de date asociat unui formular este o secven de perechi nume-control/valoarecurent construit din controale de succes. Pasul 3: Codificarea setului de date Setul de date creat la pasul anterior este codificat n conformitate cu tipul coninutului (content type) specificat de atributul ENCTYPE al elementului FORM. Pasul 4: Transmiterea setului de date codificat n final setul de date astfel codificat este trimis de browserul client agentului de prelucrare (programului) desemnat de atributul ACTION, folosind protocolul specificat de atributul METHOD. Aceast specificare nu acoper toate metodele valide de trimitere sau tipurile de coninut ce pot fi folosite cu formularele. Totui, browserele compatibile HTML 4.0 trebuie s suporte conveniile stabilite n urmtoarele cazuri: Dac metoda este "get" i aciunea (atributul ACTION) este o adres (URI) HTTP, browserul ia valoarea atributului ACTION, adaug un ? la ea, iar apoi adaug setul de date asociat cu formularul, stabilind tipul coninutului (content type) la "application/x-www-form-urlencoded". Browserul urmeaz apoi noua legtura astfel creat. n acest scenariu, datele formularului snt restricionate la codurile ASCII. Dac metoda este "post" i aciunea (atributul ACTION) este o adres (URI) HTTP, browserul va genera o tranzacie HTTP "post" folosind valoarea atributului ACTION i un mesaj creat n conformitate cu tipul coninutului (content type) specificat de atributul ENCTYPE. Pentru orice alt valoare a atributelor ACTION i METHOD comportamentul este nespecificat. Browserele trebuie s afieze rspunsul generat de tranzaciile HTTP "get" i "post". 4. Tipurile posibile de coninut (content-type) pentru un formular Atributul ENCTYPE al elementului FORM specific tipul coninutului folosit pentru a codifica setul de date asociat formularului n momentul transmiterii ctre server. Browserele utilizatorilor trebuie s suporte tipurile indicate n cele ce urmez. Comprtamentul pentru alte tipuri este nespecificat:

38

application/x-www-form-urlencoded Acesta este tipul implicit. Formularele transmise cu acest tip de coninut trebuie codificate dup cum urmeaz: 1. Numele controalelor i valorile snt escaped. Caracterele blanc (spaiu) snt nlocuite de `+', iar caracterele rezervate snt i ele escaped: caracterele nonalphanumeric snt nlocuite cu `%HH', (semnul procent i dou cifre hexazecimale reprezentnd codul ASCII al caracterului). Sfritul de linie (line break) este reprezentat ca o pereche "CR LF" (adic `%0D%0A'). 2. Perechile nume/valoare pentru controale apar n ordinea din document. Numele este separat de valoare prin semnul egal `=' i fiecare pereche este separat de celelalte prin semnul`&'. Tipul de coninut "application/x-www-form-urlencoded" este ineficient pentr a trimite cantiti mari de date binare sau texte coninnd caractere non-ASCII. Tipul de coninut "multipart/form-data" va fi folosit cnd se trimit formulare ce conin fiiere, date nonASCII i date binare. multipart/form-data Este tipul folosit cnd coninutul setului de date este alctuit din mai multe feluri de (seturi de) date. Se supune regulilor de la toate irurile de date (stream-urile) de tip multipart MIME. Un stfel de mesaj conine o serie de pri, fiecare reprezentnd un control de succes. Prile snt trimise agentului care le proceseaz n ordinea n care apar n document. La fel ca la orice tip multipart MIME, fiecare parte are un header opional "Content-Type" care implicit are valoarea "text/plain" i care este nsoit de un parametru "charset". Fiecare parte trebuie s conin: 1. Un header tip "Content-Disposition" a crui valoare s fie "form-data". 2. Un atribut NAME care specific numele controlului corespondent. Numele controalelor care snt codificate ntr-un set de caractere non-ASCII pot fi modificate. Astfel, de exemplu, pentru controlul cu numele "mycontrol" partea corespunztoare lui va fi specificat astfel: Content-Disposition: form-data; name="mycontrol" Ca la toate transmiterile MIME, pentru a separa liniile de date se folosete "CR LF" (` %0D%0A'). Dac se trimite un fiier (coninutul lui) acesta trebuie s fie identificat obligatoriu de tipul coninutului (de exemplu"application/octet-stream"). Dac se trimit mai multe (ca rezultat al unei sigure selecii din formular), ele trebuie trimise ca "multipart/mixed", nuntrul lui "multipart/form-data". Fiecare fiier trebuie trimis cu un nume, specificat cu parameterul "filename" al headerului 'Content-Disposition: form-data'. Dac acesta nu este codificat ASCII el trebuie fie aproximat fie codificat. Exemplu: Acest exemplu ilustraz codificarea "multipart/form-data". Presupunem c avem urmtorul formular:

39

<FORM action=http://server.dom/cgi/handle enctype="multipart/form-data" method="post"> <P> Numele Dvs? <INPUT type="text" name="submit-name"><BR> Fisierele pe care le trimiteti? <INPUT type="file" name="files"><BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM>

Dac utilizatorul introduce "Larry" n controlul de tip text i selecteaz "file1.txt", browserul lui va trebui s trimit urmtoarele date la server:
Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --AaB03x--

Dac utilizatorul selecteaz al doilea fiier (o imagine), cu numele "file2.gif", browserul va trebui s contruiasc prile componente ale tranzaciei dup cum urmeaz:
Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files" Content-Type: multipart/mixed; boundary=BbC04y --BbC04y Content-Disposition: attachment; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --BbC04y Content-Disposition: attachment; filename="file2.gif" Content-Type: image/gif Content-Transfer-Encoding: binary ...contents of file2.gif... --BbC04y---AaB03x

40