Lecia 4 - Forms

Una din cele mai rspndite metode de culegere i prezentare a informaiilor pe Web este utilizarea formularelor, prin intermediul crora se pot selecta i culege informaii despre i de la utilizatori. Problema gestionrii datelor implic cunoaterea utilizrii i gestionrii bazelor de date. Tendina actual a site-urilor Web, pe lng oferirea informaiilor din baze de date, este aceea de culegere i validare a datelor direct n baze de date de diferite tipuri. n mod nativ culegerea informaiilor prin formulare HTML, utiliznd doar cod HTML, nu este posibil, aceast operaiune presupunnd utilizarea script-urilor JavaScript, VBScript i aplicaiilor CGI (common gateway interface). Concepute iniial pentru sisteme de tip Linux/Unix, CGI-urile nu-i au relevan n free web programming (FWP) (independena de mediu, platform, sistem de operare). Singurele aplicaii care pot, oarecum s ndeplineasc conceptul de FWP sunt cele de genul JavaScript, dar care sunt foarte, foarte limitate. Un limbaj superior este limbajul Java, care presupune cunotine de programare orientat obiect. Revenind la obiectul leciei curente creare formularelor implic folosirea tagului <form method="post" name="form1">, n care, method reprezint forma lucru cu datele "post", pictarea datelor ntr-o baz de date, sau "get" preluarea datelor dintr-o baz de date. n HTML prin baz de date se poate nelege i un fiier de tip text, un document HTML sau o alt form de clasic de reprezentare a acestora. Un alt atribut al tagului form este action, care poate lua drept valoare pe lng calea de accesare a unui program CGI, i o adresare mailto care presupune trimiterea datelor prin email, n vederea postrii acestora ntr-un viitor, ct mai apropiat. Principalele elemente pe care le poate conine un formular sunt n marea lor majoritate cunoscute din ferestrele/formularele de tip Windows: cmpuri de text (text box), liste, butoane radio (radio buttons), csue de selecie (check box), csue text de tip parola (password). Pentru crearea elementelor mai sus menionate se folosete tagul general <input type="valoare" valoare care poate fi: text, radio, checkbox, button, submit, reset, image, password, hidden, file. Alte atribute care pot fi luate de tagul input sunt: - Name="nume" - numele simbolic al valorii cmpului,folosit de obicei in cadrul scripturilor pentru a identifica respectivul element (este de preferat ca oricrui element din formular sa-i asociem un nume); - Value="valoare" - pentru tipul text specifica textul afiat implicit, iar pentru butoanele radio i csuele de validare reprezint valoarea trimisa serverului daca utilizatorul selecteaz acest buton. - Checked - precizeaz daca butonul radio/csua de validare a fost selectata de vizitator. - Size="marime" - numrul de caractere al csuei de text afiate; - Maxlength ="mrime" - specifica numrul maxim de caractere acceptat n csua de text; a) Crearea unei csue de text: <input type="text" name="text1"> Pentru identificare se poate folosi prefixarea declaraiei respective cu o linie de text obinuit: Aceasta este o casu de text: <input type="text" name="txt1">

ValG

Pagina 12 din 14

b) Crearea butoanelor radio: De obicei butoanele radio sunt prezente ntr-o colecie de cel puin dou care ofer o singur variant de rspuns (o singur opiune) la o anumit ntrebare. Spre exemplu:
<B> Care este parerea d-voastr despre acest produs?</B><BR> <Input Type="radio" Name="intrebare1" Value="a" Checked>Foarte buna <BR> <Input Type="radio" Name="intrebare1" Value="b">Proasta <BR> <Input Type="radio" Name="intrebare1" Value="c">Nasoala rau tare de tot<BR>

c) Crearea listelor de alegere (checkbox). n categoria acestor tipuri de controale se ncadreaz ntrebrile din care se pot alege mai multe variante de rspuns.
<B> Care sunt culorile d-voastra preferate?</B><BR> <Input Type="checkbox" Name="intrebare2" Value="a" Checked>Albastru<BR> <Input Type="checkbox" Name="intrebare2" Value="b">Red 153 (rosu FEAA)<BR> <Input Type="checkbox" Name="intrebare2" Value="c">Ambele dar sunt si altele<BR>

d) Crearea butoanelor. Butoanele se folosesc pe lng transmiterea informaiilor n baze de date i la crearea legturilor ntre diferitele pagini ale unui site. Creare unui buton se realizeaz conform urmtoarei declaraii:
<input type="button" name="Confirma" value="Confirma" onclick="afiseaza()"> n care name reprezint numele pe care-l poart butonul respectiv n cadrul formularului, value textul care va fi afiat pe butonul respectiv, onclick numele unei funcii declarat printr-un script

la nceputul documentului, apelat la evenimentul click asupra butonului respectiv. e) submit i reset reprezint alte forme de butoane prin care submit trimite date conform specificaiilor din declaraia formului, iar reset sterge toate datele introduce in formularul current. f) Valorile de tip image presupun utilizarea diferitelor imagini n loc de butoanele clasice. Ele au aceleai attribute ca la inserarea imaginilor obinuite n documentele HTML. g) Cmpurile de tip password se folosesc pentru protecia datelor introduse de ctre utilizator de la consol. n loc de caracterele obinuite vor aprea stelue (caracterul asterisc * ). h) Cmpurile de tip file se folosesc pentru introducerea anumitor fiiere n cadrul documentelor HTML. Sunt foarte asemntoare attachment - urilor de la conturile de e-mail. Alte tipuri de controale care pot fi introduse n documentele HTML:

1. <Textarea>
Acest marcaj a fost creat pentru ca vizitatorul sa poat introduce un text de lungime mai mare, care se ntinde pe mai multe rnduri. Atributele specifice acestui marcaj sunt: Cols=numar_coloane - specifica lungimea unui rnd in caractere; Rows=numar_linii - specifica numarul de randuri; Exemplu: <Textarea Cols=50 Rows=6>Aici se poate introduce mai mult text</Textarea>

2. <Select>
Este un marcaj container ce introduce meniuri derulante de opiuni. 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. Acest control este asemntor listelor derulante din formularele Windows (combo box) Ce prere avei despre pagina aceasta ? Foarte buna Proasta Foarte proasta Sursa Html este :
<B>Ce parere aveti despre pagina aceasta ?</B><BR> <Select Name="lista"><BR>
ValG

Pagina 13 din 14

<Option Value="a" Selected>Foarte buna </Option><BR> <Option Value="b">Proasta </Option><BR> <Option Value="c">Foarte proasta </Option><BR>

Urmrind sursa de mai sus trebuie s facem urmtoarele observaii: Nu este obligatoriu sa nchidem marcajul <Option> - Valoarea asociata fiecrei opiuni prin atributul Value este valoare ce va fi transmisa scriptului CGI prin trimiterea formularului. - Anumite opiuni pot fi selectate implicit; marcajul<Option> corespunztor va conine atributul Selected. Selectarea mai multor opiuni se poate face doar daca a fost folosit atributul Multiple in conjuncie cu marcajul <Select>. Combinnd exemplele anterioare putem ajungem la urmtorul cod HTML: Exemplul nr. 1 Fiierul forms.html care conine majoritatea tipurilor de controale ntlnite n cadrul formularelor HTML:

EXERCITIU: Creai un document HTML care s cuprind informaii i preri despre anumite produse, pe care le-ar comercializa magazinul d-voastr virtual.

ValG

Pagina 14 din 14