CAP. 10. FORMULARE

10.1. Noţiuni generale

Formulare: iată o noţiune de care ne lovim tot timpul, pentru că suntem nevoiţi să completăm formulare din momentul în care ne-am născut şi până murim.

Şi tot formularele sunt cele care fac cu adevărat din Internet o tehnologie interactivă. Fără aceste formulare, utilizatorul nu ar avea acces decât la anumite resurse statice, predefinite, pe când, cu ajutorul formularelor, pot fi introduşi anumiţi parametri care dau un caracter dinamic Internet-ului.

Dar pentru a analiza parametrii introduşi în formulare sunt necesare anumite aplicaţii care decid cum va acţiona serverul ca răspuns la datele primite. Codul acestor aplicaţii poate fi scris în limbaje de programare web precum ASP, JAVA, PHP, JSP etc. care nu fac însă subiectul acestui ghid.

Un formular poate conţine unul sau mai multe controale de tipul: casete text (text boxes), casete de parole (password boxes), ascunse (hidden), casete de validare (checkboxes), butoane radio (radio buttons), buton trimitere formular (submit), buton resetare formular (reset), buton imagine (image), liste etc., toate plasate în interiorul elementului marcat de tag-ul <FORM>.

Atributele specifice acestui element sunt:

Atribut	Valoare	Descriere
action	URL	Un URL ce defineşte adresa aplicaţiei web care prelucrează datele sau o adresă de e-mail validă unde vor fi trimise datele după apăsarea butonului Submit (Trimite).
accept	listă de conţinut	O listă cu elemente separate de virgulă a tipurilor de conţinut pe care serverul ce procesează formularul le poate interpreta corect.
accept-charset	listă de caractere	O listă cu elemente separate de virgulă a caracterelor posibile ce constituie datele formularului. Valoarea implicită este unknown.
enctype	mimetype	Determină mecanismul folosit la codificarea conţinutului formularului.
method	get post	Get (implicit) sau post specifică ce metodă HTTP va fi folosită la transmiterea datelor din formulat către serverul web.
name	numele formularului	Defineşte un nume unic pentru formular, util în cazul folosirii unor scripturi Java sau VB.
target	_blank _self _parent _top	Specifică unde va deschis URL-ul ţintă: Ø _blank – într-o fereastră nouă; Ø _self – în acelaşi cadru din care a fost accesat; Ø _parent – în cadrul părinte; Ø _top - direct în fereastra browser-ului, luând locul documentului existent.

10.2. Proiectarea unui formular

În procesul de proiectare de proiectare a unui formular se porneşte de la datele pe care le doriţi să le obţineţi. Pentru aceasta vă recomandăm următoarele:

- alegeţi controale care sunt adecvate pentru categoria de date pe care doriţi să le obţineţi si pentru interacţiunile pe care le furnizează;

- tag-ulţi cu claritate fiecare control, astfel încât utilizatorul să înţeleagă funcţia acestuia;

- în măsura posibilităţilor, aliniaţi tag-urile şi marginile din stânga ale controalelor. Structura unui formular bine proiectat este asemănătoare cu aceea a unei pagini de ziar, fiind compusă dintr-o serie de coloane în cadrul cărora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul său. Puteţi obţine acest tip de structura folosind tabelele sau tag-ul <BR>;

- grupaţi controalele corelate şi separaţi fiecare asemenea grup de celelalte grupuri prin încorporarea de spaţii albe în structura dvs.;

- secvenţa de controale din formular trebuie să fie asemănătoare cu ordinea în care le va manipula utilizatorul. În caz contrar, utilizatorul va fi obligat să piardă timp navigând de la un control la altul.

Este important să reţineţi că acestea sunt doar îndrumări, nu reguli. Nefiind reguli, puteţi opta, din când în când, pentru încălcarea lor. Pentru a determina dacă o variantă de proiectare este superioară alteia, este util să cereţi părerea unui grup de utilizatori. Dacă nici aceştia nu vă pot fi de ajutor, încercaţi să obţineţi asistenţă din partea unui alt programator. În cel mai rău caz, străduiţi-vă să vă puneţi dvs. înşivă în rolul unui utilizator al formularului. Întrebaţi-vă dacă formularul este clar, uşor de utilizat şi eficient. În caz afirmativ, este momentul să treceţi mai departe şi să creaţi efectiv formularul HTML.

10.3. Crearea unui formular

Dacă procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura proiectată, este mai direct.

Mai întâi, creaţi schiţa HTML elementară, care va conţine controalele din formular, apoi încorporaţi controalele în structura respectivă. În particular, un formular HTML trebuie să includă un buton de expediere pe care utilizatorul execută click pentru a trimite serverului datele din formular. Deoarece o singură pagină HTML poate conţine mai multe formulare, puteţi repeta de mai multe ori etapele intermediare ale acestui proces.

Pentru a include un formular în interiorul corpului unei pagini HTML se foloseşte tag-ul <FORM>, care are următoarea sintaxă:

<FORM METHOD="metoda" ACTION="url">

Atributul METHOD al tag-ului FORM poate lua una din valorile GET sau POST. Pentru moment, specificaţi întotdeauna valoarea POST.

Atributul ACTION specifică adresa URL a scriptului ce prelucrează datele colectate prin intermediul formularului.

Adresa URL poate fi înscrisă ca adresă absolută (de exemplu http://www.domeniul_meu.com/prelucrare_formular.php), respectiv ca adresă relativă, care specifică o locaţie relativă la locaţia paginii curente (de exemplu prelucrare_formular.php).

Între tag-ul <FORM> şi tag-ul de închidere </FORM> corespunzătoare, plasaţi controalele formularului.

Ca începător, este mai bine să folosiţi în mod consecvent metoda POST, deoarece alegerea între metodele GET şi POST este destul de complicată. Ca regulă empirică, mulţi programatori folosesc GET pentru formulare care execută o căutare sau o interogare, respectiv POST pentru formulare care actualizează o bază de date sau un fişier. Două dezavantaje ale metodei GET sunt acelea că impune o limită asupra cantităţii de date care pot fi trimise scriptului de prelucrare şi că transferă datele prin ataşarea şirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de către utilizator. Un avantaj al metodei GET este acela ca utilizatorii pot insera semne de carte în rezultatele unei interogari sau al unei căutări care foloseşte metoda GET, dar nu pot executa aceeaşi operaţie în cazul unei interogări sau al unei căutări care foloseşte metoda POST.

10.4. Codificarea datelor

Înainte de a le trimite la destinatar, browser-ul codifică datele din formular. Tehnica de codificare depinde de valoarea atributului enctype. Valorile posibile pentru acest atribut sunt:

a) application/x-www-form-urlencoded – utilizată împreună cu metoda GET (parametri prestabiliţi). În acest caz:

- datele sunt trimise sub formă de listă de perechi nume=valoare, separate prin simbolul "&";

- spaţiile albe sunt înlocuite de simbolul "+";

- caracterele non-alfanumerice sunt înlocuite cu simbolul "%" urmat de codul ASCII corespunzător caracterului respectiv;

- întreruperile de rând sunt înlocuite de secvenţa "%0D%0A%" (CR/LF) (de exemplu: nume=Popescu&prenume=Ion&adresa=Str.Mare+nr.1 %0D%0A%Romania)

b) text/plain – utilizată împreună cu tipul de acţiune action="mailto" pentru trimiterea datelor prin e-mail. Acest caz este similar cazului precedent, cu excepţia faptului ca spaţiile nu mai sunt înlocuite de simbolul "+".

c) multiform/form-data – utilizată împreună cu metoda POST pentru trimiterea imaginilor sau a altor fişiere către server.

10.5. Inserarea controalelor de tip <INPUT> într-un formular

Utilizatorii interacţionează cu formularele prin ceea ce poartă denumirea de "controale".

Cele mai utilizate tipuri de controale sunt cele definite de elementul <INPUT> prin intermediul atributui TYPE. Acestea sunt:

a) Câmpuri de tip TEXT

Se folosesc la introducerea de caractere alfanumerice într-un formular. Sintaxa uzuală este de forma:

<FORM>

Nume: <INPUT TYPE="text" NAME="nume"><BR>

Prenume: <INPUT TYPE="text" NAME="prenume">

</FORM>

Rezultatul afişat în browser va fi următorul:

Câmpurilor de tip text le pot fi precizate următoarele atribute:

TYPE:	text
SIZE:	determină mărimea câmpurilor text ca număr de caractere. Implicit are valoarea de 20 de caractere
MAXLENGTH:	determină numărul maxim de caractere ce pot fi intruse în acel câmp
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	afişează o valoare implicită; în general rămâne necompletată

b) Câmpuri de tip parolă (PASSWORD)

Se folosesc la introducerea de parole într-un formular. Sintaxa uzuală este de forma:

<FORM>

Username: <INPUT TYPE="text" NAME="user"><BR>

Password: <INPUT TYPE="password" NAME="password">

</FORM>

Rezultatul afişat în browser va fi următorul:

Câmpurilor de tip parolă le pot fi precizate următoarele atribute:

TYPE:	password
SIZE:	determină mărimea câmpurilor parolă ca număr de caractere. Implicit are valoarea de 20 de caractere
MAXLENGTH:	determină numărul maxim de caractere ce pot fi intruse în acel câmp
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	afişează o valoare implicită; în general rămâne necompletată

c) Butoane de tip RADIO

Se folosesc pentru a determina efectuarea unei singure alegeri dintr-o serie limitată într-un formular. Sintaxa uzuală este de forma:

<FORM>

Sexul dvs.:<BR>

<INPUT TYPE="radio" NAME="sex" VALUE="Barbat"> Barbat <BR>

<INPUT TYPE="radio" NAME="sex" VALUE="Femeie"> Femeie

</FORM>

Rezultatul afişat în browser va fi următorul:

Butoanelor de tip radio le pot fi precizate următoarele atribute:

TYPE:	radio
CHECKED:	când se specifică, determină ca una din opţiuni să fie bifată iniţial. Nu se poate folosi decât pentru un singur buton radio, în caz contrar, această specificaţie va fi luată în considerare numai la ultimul buton radio.
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	reprezintă valoarea ce va fi trimisă aplicaţiei ce prelucrează formularul

d) Casete de validare (CHECKBOX)

Se folosesc pentru a determina efectuarea mai multor alegeri dintr-o serie limitată într-un formular. Sintaxa uzuală este de forma:

<FORM>

Sunteti interesat de :<BR>

<INPUT TYPE="checkbox" NAME="programare" VALUE="html" CHECKED> HTML <BR>

<INPUT TYPE="checkbox" NAME="programare" VALUE="css"> Stiluri CSS<BR>

<INPUT TYPE="checkbox" NAME="programare" VALUE="javascript"> Javascript <BR>

<INPUT TYPE="checkbox" NAME="programare" VALUE="php"> PHP

</FORM>

Rezultatul afişat în browser va fi următorul:

Casetelor de validare le pot fi precizate următoarele atribute:

TYPE:	checkbox
CHECKED:	când se specifică, determină ca una din opţiuni să fie bifată iniţial
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	reprezintă valoarea ce va fi trimisă aplicaţiei ce prelucrează formularul

De reţinut este faptul că doar casetele de validare selectate sunt incluse în datele transmise către server.

e) Buton de transmitere (SUBMIT)

Fiecare formular necesită un buton de transmitere. Acesta este elementul care determină browser-ul să trimită numele şi valorile elementelor formularului către server pentru a fi prelucrate.

Sintaxa uzuală este de forma:

<FORM>

<INPUT TYPE="submit" VALUE="Trimite">

</FORM>

Rezultatul afişat în browser va fi următorul:

Butonul de transmitere poate avea următoarele atribute:

TYPE:	submit
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	reprezintă textul (tag-ul) ce va fi afişat pe buton

Un formular îi pot fi definite unul sau mai multe butoane de transmitere.

f) Buton de transmitere tip imagine (IMAGE)

Se foloseşte în cazul în care doriţi să adăugaţi puţină "personalitate" butonului de transmitere.

Sintaxa uzuală este de forma:

<FORM>

<INPUT TYPE="image" SRC="URL">

</FORM>

Folosind ca imagine fişierul buton.jpg, existent pe site-ul nostru la adresa http://ghid-html.dap.ro/teste/buton.jpg, precum şi pe CD-ul ataşat prezentului ghid, rezultatul afişat în browser va fi următorul:

Acest tip de buton de transmitere poate avea următoarele atribute:

TYPE:	image
NAME:	reprezintă numele butonului ce poate fi utilizat în cazul folosirii unor scripturi
SRC:	indică URL-ul fişierului ce conţine imaginea respectivă

g) Buton de anulare (RESET)

Este o idee bună să includeţi în formular şi un buton de anulare. Acesta permite utilizatorului să golească întregul conţinut al formularului.

Sintaxa uzuală este de forma:

<FORM>

<INPUT TYPE="reset" VALUE="Anuleaza">

</FORM>

Rezultatul afişat în browser va fi următorul:

Butonul de anulare poate avea următoarele atribute:

TYPE:	reset
VALUE	reprezintă textul (tag-ul) ce va fi afişat pe buton

h) Buton generic (BUTTON)

Se foloseşte pentru a ataşa unui formular un buton generic, care nu are un comportament prestabilit, prin apăsarea lui lansându-se în execuţie un anumit script (folosind JavaScript sau alt limbaj de programare).

Sintaxa uzuală este de forma:

<FORM>

<INPUT TYPE="button" VALUE="Executa">

</FORM>

Rezultatul afişat în browser va fi următorul:

Butonul generic poate avea următoarele atribute:

TYPE:	button
NAME:	reprezintă numele butonului ce poate fi utilizat în cazul folosirii unor scripturi
VALUE	reprezintă textul (tag-ul) ce va fi afişat pe buton

i) Câmpuri de tip fişier (FILE)

Sunt folosite pentru a permite utilizatorilor să facă upload fişierelor pe server. Sintaxa uzuală este de forma:

<FORM>

Username: <INPUT TYPE="file">

</FORM>

Rezultatul afişat în browser va fi următorul:

Câmpurilor de tip fişier le pot fi precizate următoarele atribute:

TYPE:	file
SIZE:	determină mărimea câmpurilor fişier ca număr de caractere. Implicit are valoarea de 20 de caractere
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	specifică un nume de fişier prestabilit
ACCEPT:	lista tipurilor MIME separate de virgulă care indică tipul de transfer

j) Câmpuri ascunse (HIDDEN)

Sunt folosite pentru a trimite date fără însă a permite utilizatorilor să le poată vizualiza sau manipula, fiind totuşi necesare pentru prelucrarea corectă a formularului. Sintaxa uzuală este de forma:

<FORM>

<INPUT TYPE="hidden">

</FORM>

În acest caz, browser-ul nu va afişa nimic. Utilitatea acestui tip de câmpuri o veţi remarca în exemplul din finalul acestui capitol.

Câmpurilor ascunse le pot fi precizate următoarele atribute:

TYPE:	hidden
NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
VALUE:	reprezintă valoarea ce va fi trimisă aplicaţiei ce prelucrează formularul

10.6. Alte tipuri de controale

Pe lângă controalele prezentate anterior mai există o serie identificate fiecare prin propriul său element, şi anume:

a) Liste de selecţie

Există două tipuri de astfel de liste: liste cortină (drop-down list) şi liste derulante (scrolling list). Ambele se obţin folosind elementul <SELECT>, diferenţierea făcându-se cu ajutorul atributului SIZE, în cazul listelor cortină nefiind precizat sau având valoarea 1, iar în cazul listelor derulante putând avea orice valoare diferită de 1.

Atributele elementului <SELECT> sunt următoarele:

NAME:	reprezintă numele variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
SIZE:	reprezintă numărul de elemente din listă vizibile
MULTIPLE:	dacă este specificat, acest atribut permite realizarea de selecţii multiple, a mai multor elemente concomitent prin folosirea combinaţiilor SHIFT+click pentru elemente consecutive, respectiv CTRL+click pentru elemente neconsecutive

Elementele unor astfel de liste sunt marcate de tag-ul <OPTION>.

Atributele elementului <OPTION> sunt următoarele:

SELECTED:	când acest atribut este prezent, opţiunea respectivă este preselectată
VALUE:	reprezintă valoarea ce va fi trimisă aplicaţiei ce prelucrează formularul

Sintaxa uzuală este de forma:

<FORM>

<SELECT NAME="lista de selectie">

<OPTION VALUE="1">primul element al listei</OPTION>

<OPTION VALUE="2">al doilea element al listei</OPTION>

<OPTION VALUE="3">al treilea element al listei</OPTION>

<OPTION VALUE="4">al patrulea element al listei</OPTION>

<OPTION VALUE="5">al cincilea element al listei</OPTION>

</SELECT>

</FORM>

Întrucât atributul SIZE nu a fost precizat, valoarea sa implicită fiind "1", browser-ul va afişa o listă tip cortină:

Aplicând atributului SIZE valoarea 3 (<select name="lista de selectie" size="3">), vom obţine o listă derulantă, astfel:

Pentru realizarea de selecţii multiple se foloseşte atributul MULTIPLE. În acest caz vă recomandăm să specificaţi o valoare diferită de 1 atributului SIZE întrucât listele cortină nu acceptă selecţii multiple. Sintaxa folosită este următoarea:

<SELECT NAME="lista de selectie" SIZE="4" MULTIPLE>

Rezultatul afişat în browser va fi următorul:

Selecţie realizată cu SHIFT+click	Selecţie realizată cu CTRL+click

În cazul în care doriţi să introduceţi într-o astfel de listă unul sau mai multe elemente preselectate, atunci trebuie să adăugaţi atributul SELECTED fiecăruia din elementele respective, astfel:

<FORM>

<SELECT NAME="lista de selectie" SIZE="4" MULTIPLE>

<OPTION VALUE="1">primul element al listei</OPTION>

<OPTION VALUE="2" SELECTED>al doilea element al listei</OPTION>

<OPTION VALUE="3">al treilea element al listei</OPTION>

<OPTION VALUE="4">al patrulea element al listei</OPTION>

<OPTION VALUE="5">al cincilea element al listei</OPTION>

</SELECT>

</FORM>

Rezultatul afişat în browser va fi următorul:

Al doilea şi al treilea element preselectate

Pentru gruparea elementelor, se foloseşte sub-elementul <OPTGROUP> în interiorul elementului <SELECT>.

Acest sub-element are un singur atribut (a cărui prezenţă este obligatorie), şi anume LABEL, ce defineşte tag-ul unui grup.

Sintaxa folosită este următoarea:

<FORM>

<SELECT NAME="lista de selectie">

<OPTION SELECTED VALUE="none">none</OPTION>

<OPTGROUP LABEL="Grupa 1">

<OPTION VALUE="1.1">primul element al grupei 1</OPTION>

<OPTION VALUE="1.2">al doilea element al grupei 1</OPTION>

<OPTION VALUE="1.3">al treilea element al grupei 1</OPTION>

</OPTGROUP>

<OPTGROUP LABEL="Grupa 2">

<OPTION VALUE="2.1">primul element al grupei 2</OPTION>

<OPTION VALUE="2.2">al doilea element al grupei 2</OPTION>

<OPTION VALUE="2.3">al treilea element al grupei 2</OPTION>

</OPTGROUP>

</SELECT>

</FORM>

Rezultatul afişat în browser va fi următorul:

b) Zone cu text (TEXTAREA)

La fel ca şi o casetă cu text, o zonă cu text permite unui utilizator să introducă un anumit text. Diferenţa constă în faptul că o zonă cu text poate permite utilizatorului să introducă mai multe linii de text, în timp ce o casetă cu text permite utilizatorului să introducă o singură linie.

Atributele elementului <TEXTAREA> sunt următoarele:

NAME:	reprezintă numele zonei cu text, respectiv al variabilei ce va fi trimisă aplicaţiei ce prelucrează formularul
ROWS:	specifică numărul de rânduri vizibile în zona cu text
COLS:	specifică numărul de coloane vizibile în zona cu text
READONLY:	când este specificat, indică faptul că utilizatorii formularului nu pot modifica conţinutul zonei cu text

Iată sintaxa pentru crearea unei zone cu text:

<FORM>

<TEXTAREA NAME="zona cu text" ROWS="5" COLS="25" READONLY>

Aceasta este o zona cu text definita pe 5 randuri si 25 de coloane

</TEXTAREA>

</FORM>

Rezultatul afişat în browser va fi următorul:

10.7. Alte atribute ale formularelor

În afară de cele prezentate anterior, mai există două atribute ce pot fi adăugate elementelor unui formular. Acestea sunt:

a) accesskey – ce defineşte o scurtătură pentru executarea unei comenzi specifice respectivului element şi/sau focalizează acel element. Ca valori posibile se poate folosi orice caracter (de exemplu "f"). Pentru a selecta sau executa comanda, utilizatorul trebuie să ţină apăsată tasta ALT şi apoi să apese tasta literei corespunzătoare (de exemplu ALT+f).

Notă: Nu toate browser-ele suportă acest atribut. De exemplu, deşi în Microsoft Internet Explorer funcţionează corect, în Mozilla Firefox combinaţia ALT+f va avea ca efect apelarea meniului File.

b) tabindex – ce defineşte o altă ordine de parcurgere a elementelor formularului în cazul apăsării tastei TAB (ordinea prestabilită fiind aceea a ordinii în care elementele au fost adăugate în formular). Valorile posibile ale acestui atribut sunt reprezentate de orice număr întreg pozitiv.

Sintaxa uzuală privind folosirea acestor atribute este:

<FORM>

Nume: <INPUT TYPE="text" NAME="nume" ACCESSKEY="n" TABINDEX="1">Acest control se poate accesa si cu ALT+n<BR>

Prenume: <INPUT TYPE="text" NAME="prenume" ACCESSKEY="p" TABINDEX="3">Acest control se poate accesa si cu ALT+p<BR>

Comentarii: <TEXTAREA NAME="comentarii" ROWS="5" COLS="25" ACCESSKEY="c" TABINDEX="2">Acest control se poate accesa si cu ALT+c. Folosind tasta TAB in loc de mouse pentru deplasarea dintr-un camp in altul, veti observa efectul atributului TABINDEX.

</TEXTAREA>

</FORM>

Rezultatul afişat în browser va fi următorul:

10.8. Aplicaţie practică

Pentru a pune în practică cele prezentate anterior, vom crea un fişier test10.html ce va cuprinde un model de formular complex, ale cărui rezultate vor fi expediate pe adresa voastră de e-mail.

Pentru obţinerea unui aspect cât mai plăcut, în sensul alinierii corespunzătoarele a elementelor formularului, vom crea un tabel în interiorul acestuia.

<HTML>

<HEAD>

<TITLE>Formulare</TITLE>

</HEAD>

<BODY BGCOLOR="wheat">

<FORM NAME="formular_F1" METHOD="POST" ENCTYPE="text/plain" ACTION="mailto:adresa_de_mail@domeniu.com">

<INPUT TYPE="hidden" NAME="Subiect" VALUE="Rezultatul exercitiului cu formulare">

<TABLE BORDER="0" CELLSPACING="10">

<TR><TD>Nume: </TD>

<TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50" NAME="Nume" ACCESSKEY="n" TABINDEX="1"></TD></TR>

<TR><TD>Prenume: </TD>

<TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50" NAME="Prenume" ACCESSKEY="p" TABINDEX="2"></TD></TR>

<TR><TD>Parola: </TD>

<TD><INPUT TYPE="password" SIZE="25" MAXLENGTH="50" NAME="Parola" ACCESSKEY="q" TABINDEX="3"></TD></TR>

<TR><TD>Sexul dvs.:</TD>

<TD><INPUT TYPE="radio" NAME="Sex" VALUE="B"> Barbat

<INPUT TYPE="radio" NAME="Sex" VALUE="F"> Femeie</TD></TR>

<TR><TD VALIGN="top">Sunteti interesat/a de:</TD>

<TD><INPUT TYPE="checkbox" NAME="Programare" VALUE="html" CHECKED> HTML <BR>

<INPUT TYPE="checkbox" NAME="Programare" VALUE="css"> Stiluri CSS<BR>

<INPUT TYPE="checkbox" NAME="Programare" VALUE="javascript"> Javascript <BR>

<INPUT TYPE="checkbox" NAME="Programare" VALUE="php"> PHP</TD></TR>

<TR><TD VALIGN="top">Ati ajuns la capitolul:</TD>

<TD><SELECT NAME="Capitolul curent">

<OPTION VALUE="1">CAP. 1. NOTIUNI GENERALE</OPTION>

<OPTION VALUE="2">CAP 2. CREAREA SI EDITAREA UNEI PAGINI WEB</OPTION>

<OPTION VALUE="3">CAP. 3. FORMATAREA DOCUMENTULUI</OPTION>

<OPTION VALUE="4">CAP. 4. FORMATAREA TEXTULUI</OPTION>

<OPTION VALUE="5">CAP. 5. CREAREA LISTELOR</OPTION>

<OPTION VALUE="6">CAP. 6. HYPERLINK-URI</OPTION>

<OPTION VALUE="7">CAP. 7. FOLOSIREA IMAGINILOR</OPTION>

<OPTION VALUE="8">CAP. 8. TABELE</OPTION>

<OPTION VALUE="9">CAP. 9. CADRE</OPTION>

<OPTGROUP LABEL="CAP. 10. FORMULARE">

<OPTION VALUE="10.1.">Notiuni generale</OPTION>

<OPTION VALUE="10.2.">Elementele formularelor</OPTION>

<OPTION VALUE="10.3.">Crearea unui formular </OPTION>

<OPTION VALUE="10.4.">Codificarea datelor</OPTION>

<OPTION VALUE="10.5.">Inserarea controalelor de tip "INPUT"</OPTION>

<OPTION VALUE="10.6.">Alte tipuri de controale </OPTION>

<OPTION VALUE="10.7.">Alte atribute ale formularelor</OPTION>

<OPTION VALUE="10.8." SELECTED>Aplicatie practica</OPTION></OPTGROUP>

</SELECT></TD></TR>

<TR><TD VALIGN="top">Comentarii:</TD>

<TD><TEXTAREA NAME="Comentarii" ROWS="5" COLS="25" ACCESSKEY="c" TABINDEX="4">Scrieti aici comentariile voastre</TEXTAREA></TD></TR>

<TR><TD ALIGN="center"><INPUT TYPE="submit" VALUE=" Trimite "></TD>

<TD ALIGN="center"><INPUT TYPE="reset" VALUE=" Anulează"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Rezultatul afişat în browser va fi următorul:

iar rezultatul primit (în cazul în care nu completaţi nimic) va fi:

Subiect=Rezultatul exercitiului cu formulare

Nume=

Prenume=

Parola=

Programare=html

Capitolul curent=10.8.

Comentarii=Scrieti aici comentariile voastre