Sunteți pe pagina 1din 8

Lecia 6: Formulare

Formularele HTML reprezinta o modalitate de comunicare intre utilizatori si server; prezinta o utilitate deosebita in momentul in care sunt folosite in combinatie cu scripturi server-side (ex. PHP, Perl).

Intr-un limbaj mai "normal", formularele permit administratorului unui site sa adune informatii, respectiv sa intre in contact cu utilizatorii site-ului sau.

Formularele sunt introduse prin marcajul <form>...</form>. Perechea <form>...</form> este o sectiune a paginii HTML (container) care include mai multe controale (elemente). In general, utilizatorii modifica aceste elemente (introducand text, selectand diferite optiuni, etc.); in final, aceste informatii sunt trimise serverului pentru a fi prelucrate.

Intr-o pagina HTML pot exista mai multe formulare, insa numai informatiile dintr-un singur formular pot fi trimise la un anumit moment catre server.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Exemplu formular</title> </head>

<body> <form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post"> Nume: <input type="text" id="nume"> Prenume: <input type="text" id="prenume"> <input type="radio" name="sex" value="Masculin"> Masculin <input type="radio" name="sex" value="Feminin"> Feminin <input type="submit" value="Trimite"> <INPUT type="reset"> </form> </body> </html>

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Exista doua metode (method) prin care un browser poate transmite informatiile catre server:

metoda "get" - informatiile din formular sunt adaugate la URL metoda "post" - informatiile din formular nu sunt adaugate la URL

Atributul action specifica fisierul sau aplicatia de pe server careia ii vor fi trimise informatiile din formular, pentru prelucrare.

In general, campurile unui formular destinate introducerii datelor, se specifica prin intermediul marcajului <input>.

<input [type=button|checkbox|file|hidden|image| password|radio|reset|submit|text] [name=nume] [value=valoare] [size=identificator] [maxlength=x] [checked] [disabled] [readonly]

Marcajul <input> are urmatoarele atribute:

type button - un buton pe care poti face "click", declansand astfel o actiune prin intermediul unui script (ex. JavaScript) checkbox - caseta de validare. Optiunea checked iti permite sa specifici daca aceasta caseta este "marcata" sau nu file - permite utilizatorului sa selecteze un fisier din computerul propriu, pentru a-l incarca pe server hidden - este "invizibil" utilizatorului. Pastreaza o pereche variabila/valoare care nu este vizibila utilizatorului. submit - informatiile din formular sunt trimise catre server image - un buton avand o imagine "aplicata", avand o functie asemanatoare cu submit. password - un camp de tip text, care inlocuieste fiecare caracter tastat cu un asterix (*), din motive de securitate radio - buton cu interblocare; un grup de elemente radio au acelasi nume, insa numai un singur element poate fi selectat text - permite introducerea de text de catre utilizator reset - "curata" intregul formular, revenind la valorile implicite name - numele controlului (elementului) value - valoarea atribuita elementului size - numarul de caractere care vor fi vizibile intr-un camp de tip text sau password

maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau password disabled - dezactiveaza un element readonly - un element poate fi citit, dar nu poate fi modificat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Exemplu formular</title> </head> <body> <form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post"> Nume: <input type="text" id="nume"> Prenume: <input type="text" id="prenume"> <input type="radio" name="sex" value="Masculin"> Masculin <input type="radio" name="sex" value="Feminin"> Feminin Ce masina ai: <input type="checkbox" name="alegere1" value="Dacia"> Dacia <input type="checkbox" name="alegere2" value="Trabant"> Trabant <input type="submit" value="Trimite"> <INPUT type="reset"> </form> </body>

</html>

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Un alt marcaj in cadrul formularelor este <textarea>...</textarea>. El permite realizarea unor spatii largi pentru introducerea de informatii (de tip text).

<textarea [cols=x] [rows=y] [name=nume] [wrap] [readonly] ... </textarea>

Atributele rows si cols specifica dimensiunea (numarul de randuri, respectiv coloane) ale campului de tip text rezultat.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <body> <title>Exemplu formular</title> </head>

<form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="post"> <textarea cols="9" rows="9">....text....</textarea> <input type="submit" value="Trimite"> <INPUT type="reset"> </form> </body> </html>

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Ultimul marcaj pe care il voi prezenta este <select>...</select>. El este folosit pentru afisarea meniurilor derulante.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Exemplu formular</title> </head> <body> <form action="http://situltau.ro/cgi-bin/exemplu.cgi" method="get"> <select name="meniu"> <option>hamburger</option> <option>hotdog</option> <option selected>mici</option>

</select> <input type="submit" value="Trimite"> <INPUT type="reset"> </form> </body> </html>

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Este posibil ca unii dintre voi sa considere utilizarea formularelor greu de realizat, atata vreme cat nu au cunostintele necesare pentru a prelucra pe server informatiile preluate de la utilizatori. In parte este adevarat, insa in acelasi timp este necesara cunoasterea mecanismului client - server, a modului in care se realizeaza transferul de informatii. Pentru cei vor fi interesati sa studieze un limbaj de programare web, formularele vor reprezenta un punct de plecare.

Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online Realizeaza o pagina HTML (folosind NotePad), care sa contina un formular avand o structura asemanatoare cu cel din pagina de inscriere la Academia Online. Elementele formularului vor fi integrate intr-un tabel.

Impreuna cu colegii tai de echipa, construiti un site cu urmatoarele 5 pagini, care sa relationeze intre ele:

1. Home page (folosind formatare de text si/sau inserare de imagini, denumind pagina index.html; aceasta pagina va contine inclusiv numarul echipei si titlul cursului pentru care site-ul reprezinta tema la Academia Online); 2. Despre mine/CV (o prezentare scurta a fiecarui membru din echipa, folosind inserare de imagini, liste, ancore); 3. Hobby-urile personale (folosind tabele); 4. Linkuri utile (inserand cel putin urmatoarele linkuri: http://www.downloadforge.com, http://www.academiaonline.ro si http://www.hostx.ro); 5. Contact (folosind formulare).

Folositi in mod logic notiunile invatate in acest curs (exclusiv cadre) si incercati sa imbinati armonios notiunile de formatare a paginilor cu cele de prezentare vizuala.

Validati fiecare pagina in parte din computerul personal la: http://validator.w3.org.

Gazduiti gratuit site-ul realizat la http://www.home.ro/signup/, http://webusers.rol.ro/ sau http://free.idilis.ro/).

ATENTIE: - numai site-urile care au minim continutul cerut mai sus si vor fi incarcate pe Internet vor fi verificate de tutor! - trimiteti tutorului doar linkul catre adresa unde ati incarcat proiectul.

Orice arhiva cu proiectul, atasata la emailul catre tutor va genera stergerea automata a emailului respectiv!!!