Crearea formularelor HTML

Crearea formularelor HTML

Formularele HTML (forms) au fost introduse pentru realizarea unei mai mari interactiviati cu vizitatorul site-ului Web. Utilizand formulare se pot culege mai usor informatii cu privire la vizitator si la preferintele si dorintele acestuia, informatii ce urmeaza a fi preluate si prelucrate de aplicatii aflate 'in spatele' paginii (aplicatiile acestea se numesc, generic, scripturi CGI - Common Getway Interface - si ruleaza pe serverul ce gazduieste pagina Web). De exemplu, vizitatorul unui site ce ofera spre vanzare anumite produse va trebui sa completeze un formular de comanda. Scriptul CGI preia datele din formular, le prelucreaza (include vizitatorul in baza de date a clientilor firmei, de exemplu) si creeaza un document de raspuns (document Html sau mesaj E-mail prin care clientul este anuntat despre receptionarea comenzii,

data limita de onorare a acesteia, e.t.c).

Foarte multe site-uri ofera posibilitati de cautare a informatiilor pe Web (cautatoare Web). Vizitatorul precizeaza domeniul sau tema care-l intereseaza intr-o rubrica (un 'textbox') si apasa un buton pentru a porni cautarea. Mecanismul de cautare se realizeaza prin aplicatii complexe, dar interfata cu utilizatorul este bazata pe formulare Html

Inserarea formularelor intr-un document web se realizeaza in mai multe etape:

• proiectarea formularului de intrare, care va fi completat de vizitator;
• scrierea aplicatiei care va prelucra informatiile din formular;
• proiectarea documentului-raspuns generat de scriptul CGI (raspuns la cererea adresata prin completarea formularului);

Descrierea unui formular se face in interiorul marcajului

Atributele acestui marcaj sunt:

• Action: stabileste ce anume se va intampla cu datele scrise in formular. Ca valoare a acestui atribut se poate specifica:
• URL-ul unui script CGI, aflat, de obicei, in directorul cgi-bin de pe serverul WWW local (cel care contine pagina respectiva)
• Action='mailto:adresa_de_mail': specifica faptul ca datele din formular vor fi trimise prin posta electronica la adresa data; acestea pot fi prelucrate ulterior, eventual 'manual';
• Method: specifica metoda utilizata de server pentru a trimite datele din formular  scriptului specificat in atributul Action. Valorile posibile sunt POST si GET .

Formularul poate contine unul dintre urmatoarele elemente (sunt elemente care se intalnesc si in interfata Windows):

• campuri de text(text) = permit scrierea unui text pe unul sau mai multe randuri;
• liste (select)= permit selectarea unei optiuni dintr-o lista;
• butoane radio(radio buttons) = permit selectarea unei singure optiuni dintre cele disponibile;
• casute de selectie(check box)= permit selectarea unuia sau mai multor optiuni
• parola(password) = asemanator campurilor de text, dar caracterele care apar pe ecran sunt asteriscuri; folositor pentru introducerea unei parole;

Marcajul INPUT

Marcajul <Input> poate fi utilizat in conjunctie cu urmatoarele atribute:

• Type='tip_element' - specifica tipul elementului de formular care se utilizeaza si care poate fi unul dintre urmatoarele:
• text - caseta de text;
• radio - buton radio;
• checkbox - casuta de validare;
• button - buton de comanda;
• submit - buton de comanda special, care determina trasmiterea datelor din formular catre server;
• reset - restaureaza valorile initiale din campurile formularului;
• image - permite inlocuirea unui buton de comanda cu o imagine specificata;
• password - caseta de text in care, in locul caracterelor introduse sunt afisate asteriscuri;
• hidden - camp ascuns;
• Name='nume' - numele simbolic al valorii campului, folosit de obicei in cadrul scripturilor, pentru a identifica respectivul element (este de preferat ca oricarui element din formular sa-i asociem un unic  nume);
• Value='valoare' - pentru tipul text specifica textul afisat implicit, iar pentru butoanele radio si casutele de validare reprezinta valoarea trimisa serverului daca utilizatorul selecteaza acest buton.
• Checked - precizeaza daca butonul radio/casuta de validare a fost selectata de vizitator.
• Size='marime' - numarul de caractere al casutei de text afisate;
• Maxlength='marime' - specifica numarul maxim de caractere acceptat in casuta de text;

Marcajul TEXTAREA

Acest marcaj a fost creat pentru ca vizitatorul sa poata introduce un text de lungime mai mare, care se intinde pe mai multe randuri. Atributele specifice acestui marcaj sunt:

• Cols=numar_coloane - specifica lungimea unui rand in caractere;
• Rows=numar_linii - specifica numarul de randuri;
• Wrap=off/soft/hard - specifica modul de transmitere al continutului catre scriptul CGI;

Marcajul <SELECT>

Marcajul <Select> este un marcaj container ce introduce meniuri derulante de optiuni. Atributul Size=numar indica numarul optiunilor prezente in meniu. Fiecare optiune este inserata cu ajutorul marcajului <Option></Option>. Apare si atributul Multiple care permite selectarea mai multor optiuni din lista.

Iata un exemplu de caseta combinata:

Ce parere aveti despre pagina aceasta ?

Sursa HTML a exemplului este:

Urmarind sursa de mai sus trebuie sa facem urmatoarele observatii:

• Nu este obligatoriu sa inchidem marcajul <Option>
• Valoarea asociata fiecarei optiuni prin atributul Value este valoare ce va fi transmisa scriptului CGI prin trimiterea formularului.
• Anumite optiuni pot fi selectate implicit; marcajul<Option> corespunzator va contine atributul Selected. Selectarea mai multor optiuni se poate face doar daca a fost folosit atributul Multiple in conjunctie cu marcajul <Select>.

Urmatorul exemplu de formular Html contine cele mai utilizate elemente de formular. Alinierea elementelor in pagina a fost posibila utilizand un tabel:

Sursa HTML este urmatoarea: