A treia lectie




Lectia aceasta este dedicata formularelor. Doar ca intotdeauna se intampla asa: trebuie sa te ocupi de o chestie, dar iti vine sa faci altceva. :-) Asa ca o sa vorbesc mai intai despre altceva. Deja ati putut observa, daca ati fost atenti, ca exista diferente intre browsere. IE vede ceva, Netscape vede altceva. Acesta e unul dintre motivele pentru care lucrurile au ajuns ceva mai complicate cu HTML. Pentru ca o imagine sa aiba un sunet de fundal, de pilda, fisierul de sunet (midi sau wave) este asociat paginii cu ajutorul unei etichete. Din nefericire, pana la versiunea 4.0 a browserului IE (daca nu ma insel) nu era vorba de aceeasi eticheta pentru ambele browsere. IE vedea eticheta <BGSOUND SRC="sunet.wav">. Pentru a reda un sunet de mai multe ori la rand, era folosit atributul LOOP, care primea ca valoare un numar - de cate ori sa fie redat sunetul (1, 2, 3,...,1000 etc.). O exceptie era valoarea INFINITE (sau, ca valoare numerica echivalenta, -1) - sunetul era cantat la nesfarsit (sigur, la un moment dat vizitatorul paginii se plictiseste sau moare, calculatorul se distruge datorita uzurii, omenirea dispare, universul colapseaza, dar din cauza etichetei asteia nenorocite, sunetul se aude mai departe; la nesfarsit). Exemplu:
<BGSOUND SRC="sunet.mid" LOOP="-1">
Sa nu folositi niciodata eticheta asta! Uitati-o in momentul asta! Nu din cauza povestii deprimante cu sunetul cantat la infinit, ci fiindca Netscape nu o recunoaste, asa ca mai mult de jumatate din vizitatorii paginii nu vor auzi sunetul. Cei de la Netscape au propus o alta eticheta. Sa vedem mai intai cum arata si dupa aia vin si explicatiile: <EMBED SRC="sunet.mid" AUTOSTART="false" HIDDEN="true" LOOP="true"> SRC e acelasi atribut, functioneaza la fel ca pretutindeni unde l-ati mai intalnit. AUTOSTART e folosit pentru ca sunetul sa nu inceapa automat sa fie cantat (altfel, valoarea implicita e "true"). Care e poanta? Ce rost ar avea sa fie incarcat in pagina fara sa fie cantat? Uitati-va mai departe, la atributul HIDDEN. Atunci cand acesta nu este folosit (sau cand are valoarea "false"), in pagina apare o imagine cu butoane (dimensiunile acesteia se dau prin atribute suplimentare, HEIGHT si WIDTH) gen: play, pause, stop etc. iar vizitatorul paginii poate apasa singur pe ele pentru a asculta sunetul. Sigur, in exemplul de mai sus sunetul va fi incarcat complet degeaba, fiindca HIDDEN are valoarea "true". :-) In fine, LOOP functioneaza ca mai inainte. Pentru valori numerice sunetul e cantat de atatea ori cat spune numarul. Daca valoarea este "true", sunetul e cantat incontinuu, cat timp e incarcata pagina respectiva in browser. Daca valoarea este "false" sau atributul nu e folosit, sunetul e cantat o singura data. Eticheta e recunoscuta si de Internet Explorer, de la versiunea 4.0, dar e tratata un pic diferit. Valorile numerice pentru LOOP nu conteaza (poate ati observat, pagina aceasta are un sunet de fundal (v. codul); Netscape il reda de cinci ori la rand, dupa care se opreste, fiindca LOOP="5"; daca sunteti cu IE, sunetul nu se opreste, asa ca o sa va cam innebuneasca de cap). Daca atributul apare si are alta valoare decat "false", sunetul e redat incontinuu. Panoul cu butoane care apare atunci cand HIDDEN nu are valoarea "true" este diferit de cel din Netscape (in plus, nu e nevoie sa fie folosite atributele HEIGHT si WIDTH pentru a da dimensiunea corecta a imaginii)

Cam la fel stau lucrurile si cu secventele video. Initial pentru IE se folosea tot eticheta IMG si pentru a prezenta in interiorul paginii filmulete (fisiere cu extensia "avi" sau "mpg") doar ca pentru a da adresa fisierului se folosea atributul DYNSRC in loc de SRC (dupa aceea venea atributul LOOP + un atribut complet curios, START="MOUSEOVER,FILEOPEN" prin care se preciza daca secventa sa ruleze automat de la inceput sau cand vizitatorul trece cu mouse-ul peste imagine, eventual sa mai ruleze inca odata la trecerea mouse-ului s.a.m.d.). Chiar daca IE suporta in continuare eticheta asta, standardul care s-a impus a venit tot de la Netscape. Aceeasi eticheta ca pentru sunete, cam cu aceleasi atribute, e folosita si pentru secvente video. Nu mai dau o mie de explicatii. Iata un exemplu: <embed src="test.mov" autostart="true" loop="true" height="120" width="160"> Exista insa diferente suplimentare legate de felul in care au fost create programele pentru cele doua browsere. IE are incorporate module pentru redarea anumitor tipuri de fisiere video ("avi" si "mpg", de pilda, cum spuneam). Netscape nu. Pentru a vedea asa ceva trebuie instalate programase suplimentare (termenul e "plug-in"). Ideea principala e simpla: daca nu aveti nevoie NEAPARAT de astfel de elemente multimedia, nu le folositi. Nu e sigur ca ele pot fi vazute (sau auzite, ca de mirosit nici nu poate fi vorba) de vizitatorii potentiali ai paginilor voastre si, in plus, de obicei sunt pastrate in fisiere de dimensiuni mari, care ocupa loc pe server, se transfera greu prin retea etc. etc. etc. Puteti folosi elemente multimedia atunci cand folositi formatul HTML pentru a realiza prezentari pe care nu le distribuiti prin retea, ci pe dischete sau CD-uri.

Mai departe cu diferentele dintre Netscape si IE. Tineti minte eticheta BLINK? Textul Clipeste in Netscape dar nu si in IE. Incercati sa incarcati pagina asta, pe rand, in IE si Netscape si verificati ce se intampla cu urmatorul text:
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...
In Netscape nimic. In IE, lucrurile stau complet diferit. Va lamuriti in cod.
Mai am un exemplu. Incarcati, tot asa, in Netscape si IE pe rand, pagina asta, dupa care verificati codul.
Uneori, dincolo de diferentele dintre browsere, apar lucruri si mai ciudate. In documentatiile limbajului HTML veti gasi, probabil, urmatoarea eticheta: <BANNER>text</BANNER> Textul din aceasta eticheta ar trebui sa ramana in pagina acolo unde a aparut la inceput, fara sa curga impreuna cu restul textului atunci cand este folosita bara de scroll. Acum, de pilda, scriu un text cuprins in aceasta eticheta. Gata, am inchis-o. Ati observat ceva special? Nimic. Nici un browser nu o vede. Lucrurile stau asa fiindca, pur si simplu, cei care dezvolta limbajul HTML si cei care construiesc browserele nu sunt aceiasi oameni (nu, n-are legatura cu personal identity).

Acum nu mai am scapare, trebuie sa vorbesc si despre formulare. Ok, ok... In primul rand, formularele nu va folosesc la nimic deocamdata. Puteti folosi elementele unor formulare pentru hyperlink-uri, dar nu aveti nevoie de asta. De ce tin neaparat atunci sa le mai prezint? Nu stiu, probabil ca e ceva psihanalizabil :-) Mai vedem pe parcurs. Structura formularelor aminteste de cea a tabelelor, hartilor s.a.m.d. Exista anumite etichete speciale care introduc obiectele continute de un formular iar acestea, daca nu sunt incapsulate in eticheta dubla FORM, nu au absolut nici un efect. Un formular arata totdeauna asa, la nivelul codului: <FORM> <!-- aici vin etichetele pentru continutul formularului --> </FORM> Spre deosebire de cazul etichetelor duble TABLE si FRAMESET dar la fel ca MAP, etichetele duble FORM nu pot fi incapsulate unele in altele. Nu exista "subharti" si "subformulare". Este in schimb posibil sa avem mai multe formulare intr-o singura pagina.
Sa luam un exemplu:
COD REZULTAT
<form method="post" action="mailto://AD@RESA"> <input type="text" name="test" size="20"> <input type="submit" value="trimite mail"> </form>

Comentariu: formularul creat are doua atribute: method si action; method are doua valori posibile: "get" si "post"; atributul spune ce se intampla atunci cand cineva foloseste un buton de tip "submit" aflat in formular (vezi codul din formular: <input type="submit" value="trimite mail">.); pe langa un buton de "submit" (folosit pentru a trimite datele din formulare catre server), exista si elemente ale formularului folosite pentru introducerea datelor, cum ar fi aici casuta de text (codul: <input type="text" name="test" size="30">; atunci cand metoda de trimitere a datelor este "get", valorile introduse cu ajutorul elementelor formularului (aproape toate sunt create cu eticheta simpla <input>) sunt adaugate la coada adresei (absolute) de web a paginii in care se afla formularul, dupa care intregul sir e transmis catre server (acolo se afla aplicatii care preiau datele si raspund (eventual creeaza automat niste pagini de web etc.) in functie de acestea. Celalalt atribut al etichetei FORM, action, primeste ca valori siruri de semne care ar putea aparea si ca valori ale atributului HREF (la alte etichete); cu ajutorul acestor valori se stabileste de fapt carui computer ii sunt adresate datele, ce aplicatie de pe calculatorul respectiv sa le preia si sa le proceseze etc. etc. (in cazul de aici datele sunt trimise cu ajutorul programului de mail al browserului - Messenger pt. Netscape, Outlook pt. IE - la adresa specificata prin AD@RESA). Ok, nu va mai bat la cap cu toate astea. Oricum nu va pot fi de prea mare folos. Puteti, eventual, sa vedeti exemple de formulare folosite pentru a trimite date catre motoarele de cautare de pe internet (de obicei e folosita metoda "get"), daca sunteti curiosi.
Formularele pot fi insa folosite si altfel - datele pot fi introduse de utilizator (si se pot reintoarce catre el) folosind aplicatii care ruleaza in interiorul browserului, nu pe server. Despre asta insa NU VETI AFLA in acest tutorial, ci in urmatorul (:-). Deocamdata, insa puteti sa va uitati la exemplele urmatoare (vin si comentariile dupa aceea):
COD
 		 REZULTAT
 
<form> <select name="lista" size="1"> <OPTION VALUE="unu" SELECTED>prima val</option> <OPTION VALUE="doi">a doua</option> <OPTION VALUE="trei">a treia</option> </select> </form>
<form> <input type="radio" name="buton1"> <input type="radio" name="buton1"> <input type="radio" name="buton1" CHECKED><br> <input type="radio" name="buton2" value="test"> <input type="radio" name="buton2"> </form>

<form> <input type="checkbox" name="unu" CHECKED> <input type="checkbox" name="doi" value="test"> <input type="checkbox" name="trei" CHECKED> </form>
<form> <input type="text" name="abc" value="test"><br> <input type="password" size="6"><br> <input type="reset"> </form>


<form> <textarea name="abc" rows="3" cols="30"></textarea><br> <input type="button" name="buton_simplu" value="Buton"> </form>


Comentarii: Cum spuneam, majoritatea elementelor formularelor sunt create cu ajutorul etichetei <input>. Exceptie face elementul in care poate fi introdus text pe mai multe randuri (<textarea> </textarea>) si etichetele pentru drop-down lists (<select> </select> si <option> </option>). Toate etichetele suporta atributele name si value. NAME este folosit pentru a da un nume fiecarui element al formularului (acest nume va fi folosit pentru a identifica elementul respectiv in interiorul aplicatiei care foloseste elementele formularului pentru a interactiona cu utilizatorul). In cazul butoanelor radio, butoanele pot fi grupate impreuna daca li sa da acelasi nume. Dintre butoanele cu acelasi nume doar unul poate fi selectat la un moment dat. VALUE este folosit pentru a atribui o valoare by default elementului respectiv. In functie de element, valoarea va fi vizibila (textul de pe buton sau din casuta de text) sau nu (la radio button si checkbox). In cazul in care valoarea nu este specificata, o valoare va fi atribuita automat ("on" pentru un buton radio selectat sau o casuta - tip checkbox - selectata, "Reset" pentru butonul de reset, nimic - "" - pentru casute de text si arii de text etc.). VALUE, daca vreti, creaza un fel de conducta prin care datele sunt vehiculate, prin intermediul paginii HTML, intre aplicatie si utilizator. Unele etichete suporta atributul SIZE. Pentru a intelege ce si cum puteti experimenta cu diferite valori pentru eticheta <select> </select>. In rest, valoarea atributului da dimensiunea casutelor pt. text (in litere). Pentru <textarea> </textarea> acelasi lucru e realizat prin atributul COLS, in timp ce valorile atributul ROWS indica numarul de randuri de text care poate fi scris in ariile de text. In fine, etichetele pentru unele elemente ale formularelor ce pot fi selectate (radio buttons, checkboxes, linii din drowp-down lists) pot primi fie atributul fara valori CHECKED, fie atributul SELECTED (pentru <option> </option>). Cu titlu informativ, o sa va spun totusi ca selectarea si deselectarea elementelor respective, apasarea butoanelor (cu click) si alte cateva intamplari sunt considerate evenimente ce declanseaza executarea anumitor instructiuni in aplicatia care controleaza formularul. Uitati-va, la codul urmatorului exemplu, extrem de simplu:
Daca doriti sa va formati o idee despre ce se poate face cu ajutorul formularelor, uitati-va la acest exemplu.
Concluzia este ca formularele nu va folosesc aproape la nimic atata timp cat nu stiti sa scrieti aplicatiile care sa le controleze. Asta e :-(. Sorry. Asta e si motivul pentru care nu exista exercitii in aceasta lectie. In schimb, va mai ofer cateva exemple de formulare utile. Chiar daca nu puteti acum intelege tot codul, va puteti da seama usor cum sa folositi aceste exemple in paginile proprii:

Lista de linkuri

 


Linkuri cu butoane



Browser in browser

ADRESA:


Linkuri cu butoane radio

Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5


Feedback prin email


                                             


Gata, am terminat. Bineinteles, nu toate elementele care pot aparea intr-un formular au fost prezentate in aceasta lectie. Nu toate atributele au iesit la iveala. Stiu ca este destul de frustrant ca dupa ce te chinui sa intelegi ceva sa ti se spuna "Stii, de fapt mai sunt si alte lucruri pe care nu le-ai aflat." Ideea e ca daca tot faci un efort, la sfarsit sa stii ca ai terminat cu toata povestea si nu a ramas nimic pe dinafara (totul sa fie complet, rotund etc. etc.). Imi pare rau ca lucrurile ies mereu asa.

Cuprins  Lectia anterioara   Lectia urmatoare