TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
HTML - HyperText Markup Language
10. FORMULARE
Formularele HTML reprezintă unul dintre principalele puncte de interacțiune dintre un utilizator și
un site sau o aplicație Web. Acestea permit utilizatorilor să transmită date către site-ul/pagina Web.
De cele mai multe ori, datele sunt trimise către serverul Web, însă pagina Web le poate intercepta și
le poate utiliza pe cont propriu.
Un formular HTML este alcătuit din unul sau mai multe widget-uri. Aceste widget-uri pot fi câmpuri
de text (linie unică sau multiline), casete de selecție, butoane simple, butoane de tip checkboxes sau
butoane radio. De cele mai multe ori, widget-urile sunt asociate cu o etichetă care descrie scopul lor
- etichetele implementate corect îi pot instrui în mod clar chiar și pe utilizatorii care nu au cunoștințe
cu privire la datele care trebuie introduse în formular.
Principala diferență dintre un formular HTML și un document HTML obișnuit este că, de cele mai
multe ori, datele colectate de către formular sunt trimise unui server Web, cum a fost menționat
anterior. În acest caz, devine necesară configurarea unui server Web pentru a primi și procesa datele.
Adesea, formularele HTML sunt create pentru a fi folosite alături de alte programe și script-uri Web,
cum sunt PHP, JavaScript și altele.
10.1 Eticheta <form>
Pentru a realiza un nou formular în HTML, se folosește eticheta <form> ... </form>, în cadrul căreia
se vor adăuga alte elemente specifice. Elementul <form> ... </form> nu conține atribute destinate
formatării, însă folosește atribute precum:
- Action: conține adresa URL a unui script de pe server (de obicei PHP sau CGI), program care
trebuie să accepte datele din FORM, le procesează și transmite răspunsul către browser;
- Method: specifică ce metodă HTTP va fi folosită pentru a trimite conținutul formularului la server
(valori posibile: get sau post);
- Enctye: determină mecanismul folosit pentru a codifica conținutul transmis din formular;
- Name: reprezintă denumirea formularului, folosit de script-uri VB (Visual Basic) sau JavaScript;
- Target: reprezintă ținta cadrului (frame) unde pagina va fi vizualizată, după transmiterea datelor
din form.
10.2 Elementele unui formular
În continuare sunt prezentate restul elementelor specifice unui formular care pot fi folosite pentru a
crea diferite câmpuri, casete, butoane în pagina Web, necesare pentru a aduna datele care vor fi
trimise la aplicație pe server. Majoritatea acestor elemente sunt realizate prin atributul type al
elementului <input> ... </input>.
[Link]. BOGOSLOV IOANA ANDREEA 1
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Proprietătile elementului <input> ... </input>
- Type: tipul de FORM folosit (casetă text, buton etc.);
- Name: denumirea elementului respectiv de formular, folosit de script-urile la care sunt trimise
datele;
- Value: datele (valoarea) asociate acelui element de formular și care sunt trimise, împreună cu
denumirea, către script-uri (PHP, CGI, JavaScript);
- Size: specifică numărul de caractere care dau lungimea zonei de text;
- Maxlength: numărul maxim de caractere acceptate;
- Checked: specifică dacă un buton sau altă formă va fi inițial selectată (bifată);
- Readonly: folosit pentru câmpuri de tip text, împiedică modificarea valorii (textului) din acel
câmp;
- Disabled: împiedică folosirea câmpului care are această proprietate. Va fi vizibil dar nu va putea
fi folosit, datele acestuia nu vor fi trimise din formular către un script.
10.3 Tipuri de elemente <input>
▪ Casete de text
Casetele de text sunt folosite pentru a realiza în pagină un câmp pentru text (cu o singura linie), iar
codul utilizat este <input type="text"></input>.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<form>
Prenume:<br>
<input type="text" name="prenume"><br>
Nume:<br>
<input type="text" name="nume">
</form>
</body>
</html>
Rezultat:
[Link]. BOGOSLOV IOANA ANDREEA 2
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Important!
Elementele de tip casete de text, pot avea, la rândul lor, următoarele atribute:
- type – text;
- name – denumirea căsuței de text, folosită de script-ul la care sunt trimise datele;
- value – va reprezenta propriul context ca valoare aleasă. Un șir de text care apare în căsuța de
text;
- size – specifică numărul de caractere care dau lungimea căsuței de text (default 20);
- maxlength – numărul maxim de caractere acceptate să fie adăugate de utilizator.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<form>
Prenume:<br>
<input type="text" name="prenume" size="45" maxlength="10"><br>
Nume:<br>
<input type="text" name="nume">
</form>
</body>
</html>
Rezultat:
▪ Câmpuri textarea
Câmpurile de tip “textarea” reprezintă elemente prin intermediul cărora, în cadrul paginii Web, se
realizează un câmp în care utilizatorul poate adăuga mai multe linii de text. Etichetele HTML utilizate
pentru realizarea unor astfel de câmpuri sunt: <textarea> … </textarea>.
Important!
Acest element folosește următoarele atribute:
- name – numele câmpului de text, folosit de script-ul la care sunt trimise datele;
- rows – numărul de linii a zonei de text;
- cols – numărul de coloane a zonei de text;
- wrap – standard este OFF. Dar poate avea valorile: "VIRTUAL" sau "PHYSICAL", astfel ca textul
wraps în browser să fie prezentat exact cum este scris de utilizator.
[Link]. BOGOSLOV IOANA ANDREEA 3
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<form>
Prenume:<br>
<input type="text" name="prenume" size="45" maxlength="10"><br>
Nume:<br>
<input type="text" name="nume"><br><br>
Introduceti mesajul dorit:<br>
<textarea rows="4" cols ="50">
</textarea>
</form>
</body>
</html>
Rezultat:
▪ Casete pentru parole
Elementele <input> de tip "password" oferă utilizatorului posibilitatea de a introduce în siguranță o
parolă. Elementul este prezentat ca un control al editorului de text simplu, în care textul este
acoperit, astfel încât să nu poată fi citit, de obicei înlocuind fiecare caracter cu un simbol precum
asterisk (“*”) sau un punct (“•”). Acest caracter variază în funcție de agentul utilizator și sistemul de
operare. Codul utilizat pentru introducerea unui câmp de tip parole este: <input
type="password"></input>
Important!
Acest element folosește următoarele atribute:
- type – password;
- name – numele căsuței pentru parole, folosit de script-ul la care sunt trimise datele;
- value – de obicei nu este adăugat; în cazul în care este scris, va reprezenta parola default din
caseta respectivă;
- size – specifică numărul de caractere care dau lungimea căsuței pentru adăugarea parolei (default
20);
- maxlength – numărul maxim de caractere acceptate pentru a fi adăugate de utilizator.
[Link]. BOGOSLOV IOANA ANDREEA 4
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu:
<html>
<body>
<form>
Introduceti parola:
<input type="password" maxlength="10"></input>
</form>
</body>
</html>
Rezultat:
▪ Casete de formular ascunse
Eticheta <input> de tip “hidden” este folosită pentru a adăuga în formular date care nu sunt vizibile
în browser și care sunt trimise la script-uri împreună cu celelalte date din formular. Codul utilizat
pentru realizarea unei astfel de etichete este <input type="hidden"></input>
Important!
Acest element folosește următoarele atribute:
- type – hidden;
- name – numele căsuței ascunse, folosit de script-ul la care sunt trimise datele;
- value – valoarea care se dorește să fie transmisă prin acea caseta ascunsă.
▪ Check box
Este folosit pentru adăugarea mai multor opțiuni pe care utilizatorul le poate alege prin bifarea lor.
Codul utilizat pentru realizarea unei astfel de etichete este: <input type="checkbox"></input>
Important!
Acest element folosește următoarele atribute:
- type – checkbox;
- name – numele căsuței checkbox, folosit de script-ul la care sunt trimise datele;
- value – valoarea casetei checkbox, care poate fi selectată (bifată);
- checked – dacă este adăugat acest atribut, caseta checkbox respectivă este selectată (bifată).
Exemplu:
<html>
<body>
<form>
Selectati specializarea/specializarile pentru care optati: <br><br>
<input type="checkbox" name="optiune1" value="CIG" checked>Contabilitate si Informatica de
Gestiune<br>
<input type="checkbox" name="optiune2" value="FB">Finante si Banci<br>
[Link]. BOGOSLOV IOANA ANDREEA 5
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
<input type="checkbox" name="optiune3" value="MK"> Marketing<br>
</form>
</body>
</html>
Rezultat:
▪ Radio button
Este folosit pentru adăugarea mai multor opțiuni dintre care utilizatorul poate alege una singură.
Codul utilizat pentru realizarea unei astfel de etichete este: <input type="radio"></input>
Important!
Acest element folosește următoarele atribute:
- type – radio;
- name – numele căsuței radio, folosit de script-ul la care sunt trimise datele;
- value – valoarea casetei radio, care poate fi selectată (bifată);
- checked – dacă este adăugat acest atribut, caseta radio respectivă este selectată (bifată).
▪ Casete pentru upload
Eticheta <input> de tip "file upload" este folosită pentru a permite utilizatorului să încarce alte
documente pe serverul Web. Această casetă este însoțită de un buton "Browse" prin care se alege
documentul care va fi transferat pe server. Upload-ul se face tot prin intermediul unui script (PHP,
CGI). Codul utilizat pentru realizarea unei astfel de etichete este: <input type="file"></input>
Important!
Acest element folosește următoarele atribute:
- type – file;
- name – numele căsuței upload, folosit de script-ul la care sunt trimise datele;
- size – specifică numărul de caractere care dau lungimea căsuței upload.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<form>
<input type="file"></input>
</form>
[Link]. BOGOSLOV IOANA ANDREEA 6
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
</body>
</html>
Rezultat:
▪ Buton simplu
Acesta este folosit cu JavaScript sau VBScript pentru a efectua o acțiune când este apăsat.
Codul utilizat pentru realizarea unei astfel de etichete este: <input type="button"
value="Buton"></input>
Important!
Acest element folosește următoarele atribute:
- type – button;
- name – numele butonului, necesar pentru a fi folosit de script;
- value – textul care apare pe buton.
▪ Buton Submit
Acest element face ca, prin apăsarea lui, browser-ul să trimită numele și valoarea tuturor celorlalte
elemente din formular la script-ul de pe server. Codul utilizat pentru realizarea unei astfel de etichete
este: <input type="submit" value="Trimite"></input>
Important!
Acest element folosește următoarele atribute:
- type – submit;
- name – numele butonului, poate fi folosit de script-ul la care se trimit datele;
- value – textul care apare pe buton.
Exemplu:
<html>
<body>
<form>
<input type="file"></input>
<input type="submit" value="Trimite"></input>
</form>
</body>
</html>
Rezultat:
[Link]. BOGOSLOV IOANA ANDREEA 7
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
▪ Imagine pentru buton Submit
Permite aplicarea unei imagine în locul butonului Submit standard. Codul utilizat pentru realizarea
unei astfel de etichete este: <input type="image" src="locatie_imagine"></input>
Important!
Acest element folosește următoarele atribute:
- type – image;
- name – numele butonului, poate fi folosit de scriptul la care se trimit datele;
- src – locația imaginii folosite.
▪ Buton Reset
Permite utilizatorului să șteargă toate datele pe care le-a scris în celelalte elemente din formular.
Codul utilizat pentru realizarea unei astfel de etichete este: <input type="reset"
value="Sterge"></input>
Important!
Acest element folosește următoarele atribute:
- type – reset;
- value – textul care apare pe buton.
10.4 Elemente SELECT
Pentru realizare unor astfel de elemente se folosesc etichetele "<select></select>", care formează
o listă, un meniu, cu date ce pot fi selectate.
!! "<select></select>" este folosit împreună cu elemente "<option> </option>" care reprezintă lista
elementelor ce sunt adăugate și afișate în lista de selectare.
!! <option> </option> folosește două atribute:
• selected - când acesta este adăugat, opțiunea respectivă este selectată când pagina Web
este inițial încărcată. Când sunt adăugate mai multe opțiuni, este indicată folosirea acestui
atribut doar cu una singură.
• value - specifică valoarea variabilei numită în opțiunea respectivă (necesară pentru script-
ul care va primi datele).
Important!
Acest element folosește următoarele atribute:
- name - numele acestui element, necesar pentru a fi folosit de script-ul la care sunt trimise datele;
- size - setează înălțimea elementului Select, care reprezintă și numărul de opțiuni din listă care vor
fi vizibile initial;
- multiple - prezența acestui atribut specifică faptul că utilizatorul poate selecta mai multe opțiuni.
[Link]. BOGOSLOV IOANA ANDREEA 8
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Există două tipuri de elemente Select, unde diferență o face folosirea atributului SIZE. Cele două tipuri
de elemente Select sunt: Drop Down List și List Box.
10.4.1. Drop Down List (Listă de derulare)
Exemplu:
<html>
<body>
<form>
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
</form>
</body>
</html>
Observatie:
"name" este atributul care definește numele acestui tag SELECT, iar "<option>" împreună cu "Opțiune
1" (și 2) reprezintă elementele din lista de selectare.
10.4.2. List Box
Exemplu:
<html>
<body>
<form>
<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
</form>
</body>
</html>
Observatie:
"name" este atributul care definește numele acestui tag SELECT, atributul "size" determină înălțimea
elementului select care determină și numărul de opțiuni vizibile inițial, iar "<option>" împreună cu
"Opțiune 1" (si 2) reprezintă elementele din lista de selectare.
Notă: Toate aceste elemente trebuie încadrate în tag-ul "<form> ... </form>"!
[Link]. BOGOSLOV IOANA ANDREEA 9
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
11. ELEMENTE SPECIALE META, EMBED, MARQUEE, OBJECT
Codul HTML conține și anumite elemente speciale, unele folosite pentru optimizarea paginii în
vederea unei indexări cât mai bune în motoarele de căutare sau altele pentru adăugarea de aplicații
audio și video ori alte elemente în pagină.
11.1. Elemente pentru optimizarea indexării paginii
Elementele utilizate cu scopul optimizării indexării paginii sau site-ului Web se adaugă în secțiunea
HEAD a documentului HTML.
▪ Eticheta <title>
Deși adesea omisă, cea mai importantă etichetă în acest sens este eticheta <title>…</title>. Această
etichetă de titlu, în mod evident, specifică titlul unei pagini Web. Etichetele <title>…</title> sunt
afișate în paginile cu rezultate ale motoarelor de căutare (Search Engine Results Page – SERPs) ca
titlul pe care se poate da click pentru un rezultat dat. Astfel, acestea sunt importante pentru
facilitarea accesului la o pagină Web, optimizarea în cadrul motoarelor de căutare (Search Engine
Optimization – SEO) și partajarea socială. Eticheta de titlu a unei pagini Web trebuie să fie o descriere
concisă a conținutului și va fi afișată în bara de titlu a browser-ului folosit de către utilizator.
Sintaxă generală:
<html>
<head>
<title>Titlul paginii Web</title>
</head>
</html>
▪ Meta tag-uri
Alte elemente importante pentru motoarele de căutare sunt cele META, numite și “meta tag-uri”.
Acestea conțin două atribute:
- Name: determină tipul meta tag-ului;
- Content: determină conținutul meta tag-ului.
În continuare sunt prezentate exemple de meta tag-uri care pot fi adăugate în orice pagină HTML:
• <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
- indică browser-ului că documentul este un fișier HTML;
- charset stabilește tipul de caractere (în general se folosește ISO-8859-1 sau UTF-8), dar
există și altele.
• <meta name="description" content="O fraza care descrie pe scurt continutul paginii">
- în cazul unei căutări după cuvinte-cheie, motorul de căutare ne dă o listă de pagini; pentru
fiecare pagină (site) din listă apare titlul ei (dat cu marcajul TITLE) urmat de o frază (cea de
la name="description" content="o fraza care descrie ..."); dacă nu avem în marcajul META
[Link]. BOGOSLOV IOANA ANDREEA 10
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
acea frază, motorul de căutare va indexa după prima frază din pagină; tot ea va fi dată ca
rezultat la o eventuală căutare;
- textul adăugat prin intermediul acestei etichete pentru descriere are prioritate înaintea
frazelor din conținut (folosiți maxim 40, 50 caractere).
• <meta name="keywords" content="listă, de cuvinte, separate, prin, virgulă">
- motoarele de căutare țin cont de cuvintele din meta “keywords” în momentul indexării site-
ului Web pentru momentul în care sunt afișate rezultate ale căutărilor (folosiți maxim 15-
20 cuvinte).
• <meta name="author" content="numele dvs., e-mail, etc">
- această etichetă oferă informații despre autorul paginii Web, însă nu este neapărat
necesară.
Un alt meta tag care este adesea necesar, dar nu are legătură cu motoarele de căutare, este
“Refresh”, având următoarea formă:
• <meta http-equiv="Refresh" content="4;url=[Link]
- acesta determină browser-ul să încarce o nouă pagină, cea care este adăugată la url-ul din
acest tag (aici [Link] după un anumit număr de secunde (aici 4).
Practic, face o redirecționare (eng. redirect).
11.2. Adăugarea sunetului la o pagina HTML
Pentru a adăuga sunet într-o pagină Web, puteți folosi elementele <embed> sau <bgsound>:
• <bgsound></bgsound> - introduce un background (fundal) audio în pagină și folosește
următoarele atribute:
- src - definește locația fișierului audio folosit (midi .au sau wav);
- loop - definește de câte ori se va repeta sunetul;
- delay - definește timpul dintre repetări;
- title - textul care va descrie sunetul.
Exemplu:
<bgsound src="[Link]" loop="3" title="titlul melodiei" derlay="5">
• <embed></embed> - are rolul de a afișa o consolă pentru sunet și folosește urmatoarele atribute:
- src - definește locația fișierului audio folosit (midi .au sau wav);
- controls - oferă posibilitatea de a alege mai multe controale care includ: console, console
mici, butoane de play și altele;
- autostart - când este TRUE sunetul începe în timp ce sunetul este descărcat de browser;
- hidden - când este TRUE va ascunde controalele, standard este FALSE;
- loop - definește de câte ori se va repeta sunetul;
- volume - setează volumul sunetului (sonorul);
- height - înălțimea în pixeli a consolei;
- width - lungimea în pixeli a consolei.
[Link]. BOGOSLOV IOANA ANDREEA 11
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu:
<embed src="[Link]" width="145"height="60" autostart="truie" volume"100"
controls="console" hidden="false">
Tag-ul “<embed>” poate fi folosit și pentru afișarea de imagini video, care au extensiile “.movs”,
“.mpeg” sau “.avi” (recomandat este “.movs”). Se adaugă similar ca și sunetul: la “src” scrieți calea
către fișierul video. Diferența constă în faptul că nu trebuie folosit atributul “hidden”, iar pentru
“width” și “height” dimensiunile nu trebuie sa fie mai mici decât dimensiunile în care este salvat
fișierul video. Totuși, afișarea de imagini video necesită mai mult timp deoarece fișierele video au
dimensiuni destul de mari.
Observatie!
"<embed>" se folosește și pentru adăugarea de imagini flash (cu extensia “.swf”). Pentru aceasta
este încadrat în alt element: <object> </object>.
Exemplu:
<object width="580" height="400">
<param name="movie" value="[Link]">
<embed src="[Link]" width="580" height="400">
</embed>
</object>
Unde:
“width” și “height” reprezintă dimensiunile cadrului în care este afișată imaginea flash, iar în cadrul
atributelor “value” și “src” se scrie calea către fișierul “.swf” (trebuie scrisă aceeași cale la ambele
atribute).
Notă: Afișarea în pagina a elementelor cu EMBED necesită folosirea unui plug-in care, de cele mai multe ori,
dacă acesta nu este deja instalat, este cerută automat încărcarea lui de către browser.
11.3. Elemente de animație text
HTML oferă o etichetă specială, <marquee> </marquee>, prin care puteți realiza un efect de mișcare
a unui text (sau imagine) care este încadrat de acest element.
Important!
Eticheta <marquee> folosește următoarele atribute:
- loop - definește de cate ori se va mișcă textul;
- height - înălțimea in pixeli a zonei în care se mișcă textul;
- width - lungimea în pixeli a zonei în care se mișcă textul;
- bgcolor - culoarea zonei în care se mișcă textul;
- direction - direcția de mișcare (left, right, up, down) - (stânga, dreapta, sus, jos);
- behavior - definește cum se va mișca textul (scroll, slide, alternate);
- scrolldelay - setează numărul, în milisecunde, între refresh-uri de mișcare.
[Link]. BOGOSLOV IOANA ANDREEA 12
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu de miscare pe orizontală
<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee>
Exemplu de miscare pe verticală:
<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>
În loc de text poate fi folosită și o imagine, înlocuind textul (aici “Marquee text”) cu tag-ul <img>
pentru imagine.
11.4. Includerea unei pagini HTML externe
Pe lângă modalitatea care implică folosirea tag-ului <iframe> pentru afișarea în pagina Web HTML a
conținutului din alta pagină HTML (Ex.: <iframe src="url_pagina.html" width="600" height="200"
align="center" scrolling="yes"> </iframe>), există și o altă soluție, dată de tag-ul <object>, folosit
alături de atributele “data” și “type”.
Sintaxa generală de afisare într-o pagină Web a continutului HTML aflat într-o
pagină externă:
<object data="adresa_pagina_externa" type ="text/html" width="600" height="400"> </object>
Avantajul utilizării uneia dintre metodele anterioare, pentru cei care realizează site-uri doar prin
intermediul HTML, este faptul ca același conținut HTML poate fi inclus în mai multe pagini din site,
fiind scris o singură dată. De exemplu, în cazul unui Meniu ce trebuie afișat în toate paginile site-ului;
codul acestuia poate fi scris într-un fișier special (“[Link]”) apoi, cu una din formulele de mai
sus (tag-ul “<iframe>” sau “<object>”) se adaugă în fiecare fișier al paginilor, iar la o eventuală
modificare a meniului se va face doar în codul acestuia din “[Link]”.
[Link]. BOGOSLOV IOANA ANDREEA 13