Formulare

Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a genera pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezinta doar o interfata pentru captarea informatiilor, el necesita elemente pentru tratarea datelor colectate. Prelucrarea finala a datelor se executa pe server, de exemplu, prin programele denumite CGI (Common Gateway Interface). Altfel spus, CGI asigura interactiunea server-navigator in sensul personalizarii rezultatelor prin diverse prelucrari asupra elementelor din paginile Web.

Scriptul CGI este lansat in executie pe baza unor parametri transmisi de client. Dialogul intre client si server, pentru prelucrarea unui formular, se deruleaza dupa urmatorul scenariu (fig. 4):

Clientul lanseaza o cerere catre un URL, ce include un formular.

Serverul receptioneaza cererea, o analizeaza si emite formularul de completat catre client.

Clientul completeaza formularul si-l transmite server-ului.

Server-ul lanseaza in executie scriptul CGI, care realizeaza o anumita prelucrare asupra datelor din formular (interogheaza o baza de date, calculeaza niste valori etc.) si pregateste rezultatele obtinute.

Scriptul transmite in final rezultatele catre server intr-un format care poate fi inteles de acesta.

Server-ul receptioneaza rezultatele si le transmite mai departe clientului.

Figura 4. Interactiunea server-client

Scripturile CGI sunt inregistrate in mod curent pe server, intr-un director care se creeaza la instalarea acestuia (demonul httpd). Pentru serverul Web NCSA, acest director este /cgi-bin. In plus, la configurarea serverului in fisierul srm.conf se pot specifica mai multe directoare care sa gazduiasca scripturi CGI. Un script poate fi scris intr-un limbaj de programare ca: C Fortran Perl Visual C++ Visual Basic. Limbajul Perl este specializat pentru acest scop, fiind de altfel si cel mai utilizat.

Prin intermediul tag-urilor HTML se descriu zonele formularului, care vor fi completate de utilizator. Sintaxa generala pentru deschiderea unui formular este:

<FORM METHOD=tip_m ACTION=URL_cgi NAME=nf TARGET=cadr>

unde:

Atributul METHOD=tip_m specifica modul cum se emite informatia catre server. Valorile cel mai frecvent utilizate pentru tip_m sunt: GET si POST

Cand se utilizeaza metoda GET sirul de caractere constituit din ansamblurile nume camp si valoare este adaugat la URL-ul scriptului cgi care se va executa. Separatorul intre numele scriptului si restul sirului de caractere il reprezinta caracterul . Deoarece majoritatea browserelor afiseaza URL curent, acest sir de caractere va fi vizibil. Din aceasta cauza se prefera metoda POST cand sirul de caractere este trimis catre server printr-o secventa HTTP speciala.

De exemplu, daca tag-ul de inceput este:

<FORM METHOD=GET ACTION=https://www.infocib.ase.ro/

cgi_bin/nume_script>

URL-ul pe care il va apela clientul, dupa completarea formularului, are urmatoarea forma:

https://www.infocib.ase.ro/cgi_bin/nume_script?

camp1=valoare1&camp2=valoare2&camp3=valoare3 .

Atributul ACTION=URL_cgi indica locul unde se emite informatia, unde se gaseste scriptul care se va executa. Valoarea sa este reprezentata prin URL-ul scriptului.

Atributul NAME=nf detine doua functii particulare:

Ø      indica scriptului CGI numele formularului care a trimis datele, in situatia cand mai multe formulare exista in acelasi document;

Ø      identifica un formular, prin numele sau, pentru a putea fi referit prin functiile JavaScript.

Atributul TARGET=cadr specifica fereastra sau cadrul (frame) in care se va afisa rezultatul executiei scriptului CGI. In absenta atributului TARGET se inlocuieste pagina curenta.

Textul incadrat de <FORM> si </FORM> va contine un ansamblu de comenzi: INPUT, SELECT etc.

Tag-uri pentru definirea intrarilor intr-un formular

Sintaxa generala a tag-ului care defineste un camp pentru introducerea datelor intr-un formular este:

<INPUT TYPE='tip' NAME='nume camp' VALUE='val' SIZE='n' MAXLENGHT='m'>

Atributul TYPE specifica tipul intrarii, care poate fi:

Ø      text text simplu, parola, ascuns, multilinie;

Ø      meniu: cu selectarea unei intrari sau selectare multipla;

Ø      butoane caseta de control, radio, reset si submit.

Atributul NAME permite definirea numelor, in scopul identificarii datelor care vor fi trimise catre server. Intr-un formular se utilizeaza o singura data acelasi nume.

Celelalte atribute sunt dependente de tipul intrarii.

Intrarea text este cel mai simplu tip de intrare intr-un formular. Zona de introducere date accepta un cuvant sau o linie de text. Atributele sunt:

VALUE='val', atribut optional care permite predefinirea continutului din campul text, cu alte cuvinte, ceea ce o sa apara pe ecran la prima activare a formularului;

SIZE ='n', atribut optional prin care se stabileste lungimea campului de intrare text (in caractere);

MAXLENGTH ='m', atribut optional prin care se limiteaza numarul caracterelor care pot fi introduse (daca se depaseste acest numar apare un semnal sonor).

Exemplul 1.

Intrarea: password utilizeaza aceleasi atribute ca si intrarea text

Exemplul 2.

Intrare: textarea se utilizeaza pentru introducerea unui text multilinie. De data aceasta tag-ul <INPUT TYPE='text'> este inlocuit cu:

<TEXTAREA NAME='nume_camp' ROWS='r' COLS='c'>

[Text implicit]

</TEXTAREA>

Atributele sunt:

ROWS='r' specifica numarul de randuri care pot fi afisate, din textul care se va introduce;

COLS='c', specifica numarul de coloane care pot fi afisate;

Text implicit, text afisat initial.

Exemplul 3.

Cand numarul liniilor si al coloanelor introduse depasesc pe cele prevazute a fi afisate se utilizeaza scrollbars.

Intrarea meniu: SELECT are loc selectia unei intrari din meniu. De data aceasta se utilizeaza tag-ul SELECT in contextul:

<SELECT NAME='nume_camp'>

<OPTION [VALUE='v'][SELECTED] > Nume_Optiune1

<OPTION > Nume_Optiune2

</SELECT>

Atributele sunt:

OPTION prin care se specifica o optiune a meniului;

VALUE='v', atribut optional prin care se specifica valoarea optiunii emise spre server    (daca nu se regaseste acest parametru, numele optiunii va fi emis ca valoare);

SELECTED, atribut optional prin care se specifica prima optiune afisata a meniului (daca acest atribut lipseste se va afisa prima optiune din lista meniu).

Exemplul 4.

In faza initiala se afiseaza:

Ulterior, cand se doreste selectarea unei optiuni, se va afisa:

Intrare meniu: SELECT cu SIZE permite alegerea multipla dintr-o lista de optiuni. Diferenta fata de situatia anterioara consta in utilizarea optiunilor: SIZE, prin care se specifica numarul de linii afisate si MULTIPLE, care permite o selectie multipla.

Exemplul 5.

Intrarea buton: checkbox caseta de control), principiul de introducere a datelor este: daca da, completeaza caseta.    Pentru acest tip de intrare se revine la tag-ul:

<INPUT TYPE='checkbox' VALUE='v' CHECKED>

unde:

VALUE='v', atribut optional prin care se specifica valoarea trimisa catre server, in cazul selectarii (daca nu este definita, o valoare "on" se emite catre server);

CHECKED, atribut optional pentru selectarea in mod implicit a casetei.

Exemplul 6.

Intrare buton: radio selecteaza una dintre posibilitatile existente. Sunt cazuri cand trebuie aleasa o optiune din mai multe, tipul campului de intrare este definit prin atributul TYPE='radio'. Alte atribute:

VALUE='v', atribut necesar pentru a indica valoarea asociata butonului, daca acesta este selectat. Valoarea specificata prin atributul NAME identifica blocul de butoane;

CHECKED, buton radio selectat (se recomanda sa se foloseasca acest atribut).

Exemplul 7.

Intrarea buton: reset/submit prin activarea acestor campuri are loc stergerea tuturor zonelor de intrare din formular (se vor regasi valorile initiale), respectiv transmiterea datelor catre server. Butonul SUBMIT transfera informatia, din formularul completat, la URL specificat prin atributul ACTION al tag-ului <FORM . >. Atributul optional VALUE se utilizeaza pentru afisarea unui text pe buton.

Exemplul 8.

Intrarea: hidden transmite informatie ascunzand textul.

Atributul VALUE='v' este necesar pentru a se specifica valoarea textului ascuns, care va fi emis catre server.

Exemplul 9.

Exemplul 10. Ordin de bursa (fig. 5)

Figura 5. Exemplul 1 de formular

Exemplul 11. Chestionar (fig. 6)

Figura 6. Exemplul 2 de formular

Figura 6. Prelucrarea formularelor in contextul JavaScript

Meta - informatii in paginile Web

Paginile Web poseda, in afara continutului acestora, o serie de informatii care nu sunt destinate direct utilizatorului. Aceste informatii se numesc meta-informatii si sunt destinate in special programelor specializate in analiza documentelor HTML. Exista programe robot de analiza automata a documentelor HTML de pe Internet, care indexeaza paginile Web, pentru a crea cataloage. Pe de alta parte, exista programe de cautare rapida care folosesc aceste rezultate.

Specificarea meta-informatiilor intr-o pagina HTML se face prin tag-ul META, care se plaseaza in antet, inainte de tag-ul <HEAD> </HEAD>

<META NAME='cuvant_cheie' CONTENT='v_cuvant_cheie'>

Atributele NAME si CONTENT permit asocierea unei valori pentru un cuvant_cheie. Cuvintele cheie care pot fi specificate ca valori ale atributului NAME sunt:

AUTHOR specifica autorul/autorii documentului;

KEYWORDS, cuvintele cheie din interiorul documentului;

DESCRIPTION, o scurta descriere a documentului sau serverului Web.

Atributul NAME va fi inlocuit cu HTTP-EQUIV, daca meta-informatia este inclusa in zona antet a raspunsului.

Exemplu:

<META HTTP-EQUIV='Expira:' CONTENT='Marti, 15 decembrie 1998">

Mesajul Expira: Marti, 15 decembrie 1998 va fi inclus de server in antetul documentului raspuns.

8. Tabele

HTML permite descrierea tabelelor intr-o maniera amanuntita ca si in cazul listelor. Un tabel poate contine un alt tabel. O celula dintr-un tabel poate contine: text, liste, imagini, legaturi hipertext sau elemente ale unui formular. Sintaxa generala pentru crearea unui tabel este:

<TABLE BORDER=m CELLPADING=n₂ CELLSPACING=n₃ WIDTH=n₄ >

--- descrierea tabelului---

</TABLE>

Proprietatile generale ale unui tabel se specifica prin atributele:

BORDER, grosimea bordurii de incadrare a tabelului;

CELLPADING, spatiul din jurul textului unei celule;

CELLSPACING, spatiul intre celule;

WIDTH specifica in procente cat la suta din suprafata ferestrei ocupa tabelul.

Tabelul este descris rand cu rand cu ajutorul tag-ului:

<TR VALIGN=TOP|BOTTOM|MIDDLE ALIGN=RIGHT|LEFT|CENTER>

</TR>

Atributul VALIGN specifica alinierea verticala a textului in toate celulele randului, iar ALIGN da alinierea orizontala.

Definirea unei celule in cadrul unui rand se face prin:

<TD VALIGN=v₁ ALIGN=v₂ COLSPAN=n₁ rowspan='n₂ NOWRAP>

</TD>

Toate celulele unui rand mostenesc valorile atributului VALIGN definit in tag-ul <TR>, cu exceptia cazului cand acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar in raport cu primul.

Atributul COLSPAN specifica latimea celulei, ca multiplu de latimea coloanei de baza, iar ROWSPAN specifica inaltimea celulei, ca multiplu de inaltimea randului de baza. Dimensionarea celulelor unui tabel se face automat la lungimea maxima a textului din celule. Daca textul introdus intr-o celula este mai lung de 64 caractere, navigatorul il imparte automat in mai multe randuri. Atributul NOWRAP permite inhibarea acestei reguli, lasand textul pe un singur rand, indiferent de lungimea acestuia.

Antetul tabelului se descrie prin tag-ul <TH> </TH> care are aceleasi atribute ca si <TD>. Textul din acest tag este automat centrat si bolduit.

Titlul tabelului se specifica prin tag-ul:

< CAPTION ALIGN=TOP|BOTTOM> </CAPTION>

Se poate colora intreg tabelul, o linie sau o celula cu ajutorul atributului BGCOLOR din tag-urile TABLE TR sau TD

Exemplul 18. Tabel ale carui celule contin elemente de tipuri diferite: legaturi hipertext, imagini, formular, liste si text (fig. 8).

Figura 8. Tabel multielement

Exercitiu 2

Sa se realizeze o pagina HTML a carei reprezentare este: