Formularele Html (forms) au fost introduse pentru realizarea unei mai mari interactivitati cu vizitatorul site-ului Web. Utilizand formulare se pot culege mai usor informatii cu privire la vizitator si la preferintele si dorintelor 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 a onorarii acesteia, e.t.c).
Foarte multe site-uri ofera posibilitati de cautare a informatiilor pe Web (asa-zisele 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 in site-uri 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)

     Realizarea formularelor se face in interiorul marcajelor:

	<FORM>  </FORM>

• Action: stabileste ce anume se va intampla cu datele scrise in formular. Ca valoare a acestui atribut se poate specifica:
  • un program/script care trateaza continutul formularului ca un set de cuvinte cheie ce vor defini o cautare;
  • 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 tag-ul Action. Valorile posibile sunt POST si GET

• 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> 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:
  1. text
  2. radio
  3. checkbox
  4. button
  5. submit
  6. reset
  7. image
  8. password
  9. hidden
• Name="nume" - numele simbolic al valorii campului,folosit de obicei in cadrul scripturilor prntru a identifica respectivul element (este de preferat ca oricarui element din formular sa-i asociem un 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;

TEXT, PASSWORD, RESET/SUBMIT

     Atributul NAME permite definirea numelor, pentru identificarea datelor care vor fi trimise catre server
VALUE - este un atribut optional care permite definirea continutului din campul text, adica ceea ce o sa apara pe ecran la prima activare a formularului
SIZE - atribut optional prin care se stabileste lungimea campului de intrare text (in caractere)
MAXLENGTH - atribut optional prin care se limiteaza numarul de caractere care pot fi introduse

PASSWORD

    Daca un ecran (formular) cere utilizatorului sa tasteze o parola, formularul poate da atributului TYPE valoarea PASSWORD (TYPE =PASSWORD). Utilizand PASSWORD în acest mod formularul nu va afisa caracterele introduse de utilizator. Urmatorul fragment HTML ilustreaza utilizarea atribuirii TYPE =PASSWORD: < INPUT NAME=" login" > Parola_mea < INPUT TYPE="Parola" NAME="P_numep" >

RESET

    Cand un utilizator tasteaza raspunsuri într-un formular, pot exista situatii în care va dori sa o ia de la început, în asemenea cazuri, proiectantii pot include în formular un buton Reset pe care utilizatorul poate efectua clic pentru a restabili valorile originale (prestabilite). Atunci cand utilizatorul selecteaza butonul Reset, formularul reface valorile prestabilite ale tuturor elementelor < INPUT > care includ atributul TYPE=RESET.
Pentru a crea un buton de Reset, proiectantii utilizeaza un element < INPUT > cu atributul TYPE=RESET. Browserul afiseaza ca raspuns butonul Reset. Atunci cand un form utilizeaza atributul RESET, elementul < INPUT > poate include un atribut optional VALUE. Atributul VALUE furnizeaza valoarea prestabilita a unui camp formular.

SUBMIT

    Cand un proiectant utilizeaza un formular HTML pentru a obtine informatii de la utilizator, formularul trebuie sa furnizeze utilizatorului o cale pentru a raspunde, în acest scop se utilizeaza elementul < INPUT > cu atributul TYPE=SUBMIT. Browserul, ca raspuns, va reda elementul sub forma unui buton pe care utilizatorul poate efectua un clic. Atunci cand vin formular utilizeaza un element < INPUT > cu atributul SUBMIT, elementul < INPUT > poate utiliza doua atribute optionale: NAME si VALUE. Atributul NAME specifica numele butonului SUBMIT, iar atributul VALUE furnizeaza o valoare pentru variabila reprezentata prin campul din formular.

Exemplu

ROWS - arata numarul de randuri care pot fi afisate
COLS - arata numarul de coloane care pot fi afisate
OPTION - specifica o optiune a meniului
VALUE - atribut optional prin care se specifica valoarea optiunii emise spre server
SELECTED - atribut optional prin care se specifica prima optiune afisata a meniului

    Prin introducerea atributului MULTIPLE SIZE se pot alege mai multe optiuni dintr-o lista

In functie de scopul formularului, exista situatii în care acesta poate necesita o zona mare de text pentru introducerea de date de catre utilizator, în astfel de cazuri, proiectantii utilizeaza elementul < TEXTAREA > pentru a crea un camp de text cu mai multe randuri.
Continutul elementulului < TEXTAREA > furnizeaza valoarea initiala a campului, în mod obisnuit, un browser va utiliza atributele ROWS si COLS pentru a determina dimensiunile vizibile ale campului pe baza unui font de latime fixa.

Exemplu

VALUE - atribut optional care specifica valoarea trimisa catre server in caz ca acest atribut este selectat
CHECKED - atribut optional pentru selectarea in mod implicit a casetei

    Cand proiectati formulare, vor exista situatii în care utilizatorul va trebui sa raspunda cu da sau nu, ori cu adevarat sau fals. De exemplu, daca pagina dumneavoastra Web permite utilizatorului sa aleaga cea mai grozava pizza, locatia va trebui sa permita utilizatorului sa „aleaga" ingredientele dorite, de exemplu piper, branza si ardei iute. Pentru a crea casete de validare în formulare HTML, utilizati un element < INPUT > cu un atribut TYPE=CHECKBOX. în functie de continutul formularului, utilizatorul poate selecta mai multe casete. Atunci cand un formular utilizeaza un element < INPUT > cu atributul CHECKBOX, elementul trebuie sa includa atributele NAME si VALUE. Atributul NAME specifica un nume pentru acest camp de intrare (pentru caseta de validare). Atributul VALUE va memora valoarea campului.

Exemplu

    In unele cazuri, un formular poate solicita utilizatorului selectia unei optiuni diri rnai multe. De exemplu, formularul îl poate întreba cum doreste sa ajunga într-un oras: cu trenul, cu avionul sau cu automobilul, în acest caz, utilizatorul poate selecta una si numai una dintre optiuni. Pentru a crea un formular în care utilizatorul poate selecta o singura optiune, formularul trebuie sa foloseasca un element < INPUT > cu un atribut TYPE =RADIO. Cand un formular utilizeaza atributul RADIO, elementul < INPUT > trebuie sa specifice un atribut NAME si un atribut VALUE. Atributul NAME specifica numele unui anumit camp (un buton de selectare). Atributul VALUE contine valoarea campului. în functie de optiunile formularului, dumneavoastra puteti preselecta unul din butoanele de selectare ca buton prestabilit. La selectarea unui buton, formularul trebuie sa asocieze atributul CHECKED elementului corespunzator.

Exemplu

     - transmite o informatie la server ascunzand textul. Este necesara prezenta atributului VALUE pentru a se specifica valoarea textului ascuns, care va fi emis catre server.

     In functie de continutul ecranului, exista situatii în care proiectantii doresc ca utilizatorii sa livreze formularul printr-un clic de mouse pe o imagine, în acest scop, proiectantul furnizeaza un element < INPUT > cu atributul TYPE=IMAGE. Daca utilizatorul va efectua clic pe imagine, browserul va memora coordonatele x si y ale pixelului respectiv. In continuare, browserul va furniza întregul formular. Cand un formular utilizeaza atributul IMAGE, elementul < INPUT > trebuie sa includa un atribut NAME si un atribut SRC. Atributul NAME specifica un nume pentru campul de intrare al formularului. Atributul SRC specifica adresa URI a sursei de imagine. Atributul ALIGN este optional, dar daca îl includeti, trebuie utilizat exact ca în cazul elementului < IMG >.

Exemplu

     Pe masura ce formularele HTML devin mai complexe, proiectantii includ adesea liste cu derulare (scrolling lists) sau meniuri derulante (pull-down). Pentru aceasta, proiectantii utilizeaza elementul < SELECT > cu atributul TYPE=SELECT. Pentru definirea intrarilor listei, se folosesc elementele < OPTION >. Elementul < SELECT > admite trei atribute optionale: MULTIPLE, NAME si SIZE.
Atributul MULTIPLE permite utilizatorului sa efectueze mai multe selectii simultan. Dupa cum puteti banui, atributul NAME specifica acest element < SELECT >. Atributul SIZE specifica, de asemenea, numarul articolelor din lista pe care utilizatorul le poate vizualiza simultan. Daca un formular stabileste pentru atributul SIZE al elementului < SELECT > valoarea unu, browserul va prezenta campul sub forma unui meniu derulant. Daca atributul SIZE are o valoare mai marc decat unu, browserul va prezenta o lista.
Un formular poate utiliza numai elementul < OPTION > în cadrul unui element < SELECT >. Elementul < OPTION > permite doua atribute optionale: SELECTED si VALUE. Un formular cu atributul SELECTED permite selectarea initiala a unei optiuni. Atributul VALUE specifica valoarea returnata de formular la selectarea acestei optiuni. Valoarea prestabilita a campului este preluata din elementul < OPTION >.

Exemplu 1     Exemplu 2      Exemplul 3