Formulare

Acest tutorial iti va arata cum sa creezi formulare folosind HTML. Declaratiile de tip <form…> iti
permit sa faci site-ul tau interactiv. Formularele sunt folosite ,de exemplu, la inscrierea la un serviciu
de email sau semnarea unei carti de oaspeti.

Vom incepe cu analiza tag-ului form, care este baza in realizarea formularelor. Apoi vom studia 8
tipuri diferite de campuri pe care le poti utiliza in formulare: text field, checkbox, buton radio, meniu
sau lista, textarea, camp hidden (ascuns), camp password (parola) si camp file (pentru incarcarea de
fisiere).

Dupa aceea, vei invata cum sa folosesti butoanele submit, image si reset, si cum sa creezi si alte tipuri
de butoane. Butoanele sunt utilizate pentru a activa formularele, de exemplu, pentru a trimite
informatiile dupa ce utilizatorul a completat formularul.

In final, vom analiza metodele prin care puteti prelucra informatiile transmise prin formulare. Tag-ul
FORM Toate formularele HTML sunt create cu tag-ul <FORM>:

<form method="xxxx" action="xxxx">

(campurile formularului)
</form>

Atributul method controleaza modul in care informatia introdusa de utilizator este transmisa
serverului. Cele doua valori posibile sunt:

GET Trimite informatia prin atasarea la URL (script.php?nume=X&email=X@Y.com). Aceasta

este optiunea implicita. Este utila pentru date de dimensiuni mici (de exemplu pentru un motor
de cautare). De asemenea, utilizatorului ii este usor sa actualizeze rezultatele formularului
apasand butonul de refresh al browser-ului. Cantitatea de informatie transmisibila este limitata
(cateva sute de biti) si nu se pot transmite decat caractere ASCII.
POST Trimite informatia codificata prin HTTP. Este recomandata pentru cele mai multe tipuri de
formulare. Utilizatorul nu va vedea datele din formular in URL, iar aceasta metoda poate fi
folosita pentru a trimite datele de dimensiuni mari. Spre deosebire de metoda GET, utizatorul
nu va putea reactualiza usor rezultatele formularului - de obicei va aparea o casuta de dialog
prin care poate specifica daca doreste sa trimita din nou datele din formular.

Atributul action specifica unde vor fi trimise datele din formularul completat de utilizator, de exemplu
http://www.site.com/formular.php sau http://www.site.com/date.asp.
Campurile formularelor
Campurile unui formular pot fi elemente de tip text box, checkbox, butoane radio, sau liste drop-
down. Fiecare camp are un nume si o valoare. Numele este folosit de scriptul server-side sau de un
alt program pentru a stabili campul, iar valoarea este informatia completata de utilizator.

In cele ce urmeaza, vom studia tipurile de campuri si cum pot fi acestea utilizate.

Campul Text
Probabil cel mai des raspandit element de tip <input…> este campul text. Acesta este un cadru in care
utilizatorul poate introduce un text de dimensiuni mici, cum ar fi numele sau adresa de mail. Are
formatul:

<input type="text" name="xxxx" value="xxxx"

size="xxxx" maxlength="xxxx">

Atributul name este numele elementului, de exemplu email sau varsta.

Atributul value iti permite sa folosesti o valoare predefinita care va aparea in cadru, utilizatorul
putand schimba aceasta valoare daca doreste. Acest atribut este optional, nu este obligatoriu sa
introduci o valoare (value=""), sau il poti omite complet.

Atributul size specifica latimea campului (numarul de caractere). Daca nu completezi aceasta valoare,
browser-ul va folosi dimensiunea standard pentru acest camp.

In sfarsit, atributul maxlength limiteaza numarul de caractere pe care utilizatorul le poate introduce.
Daca nu specifici aceasta valoare, utilizatorul poate introduce oricate caractere doreste.

Exemplu:

Adresa de email: <input type="text" name="adresa_email"

value="" size="30" maxlength="50">
Adresa de email:

Campul checkbox
Campurile checkbox sunt elemente simple care pot fi selectate printr-un singur click al mouse-ului.
Ele au o singura valoare, de exemplu yes, sau true.

Aceste campuri sunt folosite pentru a trimite o singura informatie, de exemplu cand utilizatorul
specifica daca vrea sau nu sa primeasca reclame pe adresa de e-mail. Un camp checkbox are
urmatorul format:

<input type="checkbox" name="xxxx" value="xxxx" checked>

Atributul name reprezinta numele campului. Poti crea mai multe elemente de tip checkbox cu acelasi
nume, ceea ce inseamna ca aceste elemente vor apartine unui grup. Dupa ce formularul este trimis,
valorile acestor campuri vor fi transmise cu acelasi nume.
Atributul value specifica valoarea care va fi trimisa daca utilizatorul selecteaza casuta. Daca
utilizatorul deselecteaza casuta (astfel incat sa nu fie bifata),va fi transmisa o valoare nula.

Atributul checked, daca este prezent, va afisa casuta ca fiind deja selectata. Daca checked nu apare
in tag, casuta va aparea ca fiind deselectata.

Exemplu:

Doriti sa primiti informatii pe adresa de mail?

<input type="checkbox" name="listamail"
value="yes" checked> Da

Butonul Radio
Butoanele radio sunt asemanatoare campurilor checkbox, cu deosebirea ca dintr-un grup poate fi
selectat un singur buton radio. (Ca si pentru checkbox, un grup este format folosind acelasi nume
pentru atributul name din tag-ul <input...>.)

Butoanele radio sunt folosite atunci cand utilizatorul trebuie sa aleaga o optiune dintre mai multe
posibile. (Daca ai multe astfel de optiuni, este mai bine sa folosesti o lista). Tag-ul pentru butoanele
radio este acelasi ca cel pentru checkbox:

<input type="radio" name="xxxx" value="xxxx" checked>

Name reprezinta numele campului (de exemplu, culoarea_preferata). Dintr-un grup de butoane radio
(care au acelasi nume), poate fi selectat unul singur.

Atributul value stabileste valoarea care va fi transmisa daca butonul este selectat.

Daca atributul checked este prezent, butonul va fi afisat ca fiind selectat. Daca acest atribut lipseste
din tag, butonul va aparea deselectat.

Exemplu:

Care este culoarea dvs. preferata ?

<input type="radio" name="culoarea_preferata"
value="rosu" checked> Rosu
<input type="radio" name="culoarea_preferata"
value="portocaliu"> Portocaliu
<input type="radio" name="culoarea_preferata"
value="roz"> Roz
Care este culoarea dvs. preferata? Rosu Portocaliu Roz
Lista
Listele permit utilizatorului sa aleaga una sau mai multe optiuni dintr-o lista prezentata. Un camp de
tip lista are formatul:

<select name="xxxx" size="xxxx" multiple>

<option value="xxxx" selected>Textul optiunii 1</option>
<option value="xxxx">Textul optiunii 2</option>
...
</select>

Tag-urile <select></select> delimiteaza lista de optiuni, in timp ce atributul name reprezinta

numele listei (de exemplu, sport).

Atributul size arata cate optiuni vor fi afisate. Daca acesta lipseste sau are valoarea 1, va aparea o
lista drop-down.

Atributul optional multiple, daca este prezent, permite utilizatorului sa selecteze mai multe optiuni
tinand apasate tastele Shift si Control.

In interiorul tag-urilor <select></select> pot si amplasate mai multe tag-uri <option>. Fiecare tag
<option> reprezinta o optiune din lista. Atributul value este valoarea predefinita care va fi transmisa
daca utilizatorul alege optiunea respectiva.

Atributul optional selected va selecta optiunea respectiva la afisarea pentru prima data a
formularului.

Intre tag-urile <option></option> poti afisa o eticheta text pentru fiecare optiune. Poti observa ca
aceste etichete text nu trebuie sa fie identice cu atributul value. Textul etichetelor nu va fi transmis
odata cu formularul, ci este doar un ghid pentru utilizator.

Exemplul 1: Liste Drop-Down

Care este sportul dvs. preferat?

<select name="sport" size="1">
<option value="all" selected>Toate</option>
<option value="cricket">Volei</option>
<option value="football">Fotbal</option>
<option value="ice_hockey">Inot</option>
</select>

Exemplul 2: Liste Line

Care este sportul dvs.preferat?

<select name="sport" size="3">
<option value="all" selected>Toate</option>
<option value="cricket">Volei</option>
<option value="football">Fotbal</option>
<option value="ice_hockey">Inot</option>
</select>
Campul Text Area
Daca vrei ca utilizatorul sa poata introduce texte de dimensiuni mari (mai mult de o linie), foloseste
campul textarea. Acesta are formatul:

<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">

(text predefinit)
</textarea>

Atributul name reprezinta numele campului (de exemplu, comentarii). Atributul rows specifica
inaltimea campului in caractere, iar cols defineste latimea.

Atributul wrap controleaza cum se comporta textul atunci cand atinge marginea din dreapta a
campului. Valorile posibile sunt:

off Textul va aparea si va fi transmis asa cum a fost introdus de utilizator.

soft Textul apare modificat la introducerea in camp, dar va fi transmis asa cum a fost scris de
utilizator.
hard Textul din camp va aparea si va fi transmis modificat, adica se va trece la linia urmatoare acolo
unde spatiul nu este suficient.

In interiorul tag-urilor <textarea></textarea>, poti amplasa un text care va fi afisat in mod implicit
la incarcarea formularului. Utilizatorul poate sterge sau modifica acest text.

Exemplu:

Introduceti comentariul in casuta de mai jos:

<textarea name="comentarii" rows="5" cols="50" wrap="soft">
Text
</textarea>

Campul Hidden (ascuns)

Elementele de tip hidden sunt campuri ale formularului pe care utilizatorul nu le va vedea pe pagina.
Principalul scop al acestor campuri este de a transmite serverului informatii pe care utilizatorul nu are
nevoie sa le vada sau sa le modifice. De exemplu, daca vrei sa creezi un cos de cumparaturi online,
poti folosi un camp ascuns pentru a urmari ID-ul cosului.

Formatul unui control ascuns este urmatorul:

<input type="hidden" name="xxxx" value="xxxx">

Informatiile name si value vor fi transmise serverului cand formularul este trimis, dar ele nu vor fi
vizibile pentru utilizator (decat daca acesta urmareste codul HTML din sursa paginii).

Exemplu:

<input type="hidden" name="cart_id" value="1234">

Campul Password (parola)
Daca vrei ca utilizatorul sa introduca informatii secrete cum ar fi o parola, poti folosi campurile de tip
password. Acestea permit utilizatorului sa introduca text in mod uzual, dar caracterele vor fi afisate ca
* pentru a nu aparea pe ecran. Campul password are formatul:

<input type="password" name="xxxx" size="xxxx">

Atributul name specifica numele campului (de exemplu password), iar atributul size arata latimea
campului, in caractere. Daca omiti aceasta valoare, browser-ul va folosi marimea predefinita. (Poti
utiliza de asemenea o valoare predefinita pentru atributul value, desi in general nu este nevoie, din
motive evidente.)

Exemplu:

Parola: <input type="password" name="parola" size="20">

Parola:

Incarcarea fisierelor in formulare

Aproape toate browserele noi permit transmiterea fisierelor de pe hard disk-ul utilizatorului catre
server printr-un formular HTML. Pentru ca acesta sa functioneze, scriptul de pe server (CGI, ASP, PHP,
etc) trebuie construit astfel incat sa preia informatiile primite. Deoarece explicarea acestor scripturi nu
este scopul acestui tutorial, vom analiza doar modul cum sunt construite formularele.

Campul pentru transmiterea unui fisier este format de obicei dintr-o casuta text si un buton Browse...
pe care utilizatorul il poate folosi pentru a cauta pe hard fisierele pe care vrea sa le incarce. Campul
are formatul:

<input type="file" name="xxxx" size="xxxx"

maxlength="xxxx" accept="xxxx">

Atributul name repezinta numele campului (de exemplu, poza).Prin size poti specifica latimea
campului pentru numele fisierului, in caractere. Daca omiti aceasta valoare, browserul va folosi
valoarea predefinita.

Atributul maxlength iti permite sa stabilesti lungimea maxima a numelui fisierului, in caractere. Daca
nu folosesti aceasta valoare, numele fisierului poate avea oricate caractere.

In sfarsit, prin atributul accept poti specifica ce tipuri de fisiere pot fi trimise. Pentru aceasta,
foloseste tipurile MIME (ex. application/octet-stream, image/gif) separate prin virgule. De retinut este
faptul ca acestea functioneaza doar pe anumite browsere, in timp ce alte browsere vor permite
utilizatorului sa incarce ce fisiere doreste, indiferent de tipul lor.

Exemplu:

Poza:
<input type="file" name="poza" accept="image/*">
Butoanele formularelor
Un formular poate contine, pe langa campurile descrise mai sus, si diferite tipuri de butoane. Aceste
butoane permit utilizatorului sa trimita serverului formularul completat, pentru prelucrarea
informatiilor. Formularul va contine in general cel putin un buton de tip submit pentru transmiterea
datelor.

1. Butonul SUBMIT
Butoanele de tipul submit trimit informatiile scriptului care a fost precizat prin atributul action din tag-
ul form. Codul HTML pentru crearea unui astfel de buton este:

<input type="submit" name="xxxx" value="xxxx">

Atributul optional name reprezinta numele butonului (de exemplu, trimite). Atributul value specifica
valoarea asociata acestui buton, si este de asemenea textul care va aparea pe buton.

Poti observa ca butonul se comporta ca un checkbox, in sensul ca valoarea butonului este trimisa ca
numele unui camp.

Deci, daca butonul a fost denumit trimite si are valoarea Trimite datele!, atunci un camp trimite avand
valoarea Trimite datele! va fi transmis serverului impreuna cu restul informatiilor din formular.

Poti include mai multe butoane submit in formular, folosind scriptul de pe server pentru a stabili ce
buton a fost apasat prin analiza campurilor care au fost transmise (doar valoarea butonului apasat va
fi trimisa serverului).

Exemplul 1: Buton SUBMIT simplu

<input type="submit" value="Trimite datele!">

Examplul 2: Doua butoane SUBMIT

<input type="submit" name="trimite" value="Trimite!">

<input type="submit" name="trimite" value="Trimite acum!">

(Daca primul buton este apasat, campul trimite cu valoare Trimite! va fi transmis serverului. Daca cel
de-al doilea buton este apasat, va fi transmis campul trimite cu valoarea Trimite acum!.)

Utilizarea unei imagini pe post de buton

Formularele pot avea butoane submit in forma de imagini, folosind tipul image. O imagine se
comporta ca un buton submit obisnuit, dar coordonatele X si Y ale punctului unde utilizatorul a apasat
de imagine vor fi transmise si ele. Aceste coordonate sunt relative la coltul din stanga sus al imaginii.

Coordonatele apar ca valori pentru doua campuri, name.x si name.y, unde name reprezinta numele
imaginii buton. De exemplu, daca utilizatorul a apasat pe o imagine denumita fred, la 30 pixeli pe
orizontala si 25 pixeli pe verticala fata de coltul din stanga sus al acesteia, campurile name.x si
name.y vor fi trimise cu valorile 30 si respectiv 25.

Un astfel de buton are formatul:

<input type="image" name="xxxx" src="xxxx" width="xxxx"

height="xxxx" border="xxxx" align="xxxx" hspace="xxxx"
vspace="xxxx" alt="xxxx">

Atributul name prezinta numele campului. Atributele src, width, height, border, align, hspace,
vspace si alt se comporta ca intr-un tag IMG.

Exemplu:

<input type="image" name="buton"

value="Submit"
src="imagini/buton.gif" width="160" height="50"
alt="Buton submit">

2. Butonul RESET
Butonul reset este folosit pentru a reseta continutul formularului la valorile initiale. Aceasta inseamna
ca fiecare camp va fi schimbat, aparand fie gol (nul), sau cu valoarea predefinita prin atributul value.

Sintaxa pentru butoanele reset este simpla:

<input type="reset" name="xxxx" value="xxxx">

Ca si la butoanele obisnuite, folosind atributul value, poti defini o eticheta care va aparea pe buton.

Exemplu:

<input type="reset" value="Reseteaza formularul">

3. Alte butoane
In afara butoanelor de tip submit si reset, poti crea si alte tipuri de butoane in cadrul formularelor.
Aceste butoane nu au nici o functionalitate daca nu li se asociaza un cod (de exemplu, functia onClick
pentru a activa un cod JavaScript).

Pentru a crea un astfel de buton, folositi sintaxa:

<input type="button" name="xxxx" value="xxxx">

Atributul optional name reprezinta numele butonului. Atributul value specifica valoarea asociata
butonului, care va aparea si ca eticheta pe acesta.

Exemplu:

<input type="button" name="buton" value="Click!">

Prelucrarea datelor dintr-un formular
Un formular care nu este insotit de un cod care sa prelucreze informatiile trimise este de fapt
nefolositor.

Dupa ce vizitatorul a completat formularul si a apasat butonul de submit, datele vor fi trimise la
adresa specificata prin atributul action din tag-ul form. De obicei, aceasta adresa reprezinta un script
server-side, cum ar fi un script PHP sau ASP.

De asemenea, poti folosi JavaScript pentru a prelucra formularul pe server fara ca acesta sa fie
transmis serverului (sau inainte de a fi trimis). De obicei, formularul este verificat pentru a vedea daca
utilizatorul a completat corect campurile inainte ca el sa fie transmis.