|
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>
|
|
|
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>
|
|
|
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>
|
|
|
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>
|
|
|
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.
|
- 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 5 pagini care sa relationeze
intre ele. Folositi in mod logic notiunile invatate in acest curs:
inserare de imagini, liste, cel putin un formular, cadre (optional),
tabele.
Incercati sa
imbinati armonios notiunile de formatare a paginilor cu cele de
prezentare vizuala.
Alegeti un subiect/scop/tematica/destinatie pentru site-ul realizat.
Validati fiecare pagina in parte din computerul personal.
Gazduiti gratuit site-ul realizat (ex: home.ro)
|
|
|
