Un formular HTML este o sectiune a unui document, sectiune care contine text, marcaje HTML si elemente speciale de formular (controls), precum si etichetele aferente acestor elemente.
In general un utilizator "completeaza" un formular prin modificarea acestor elemente speciale, inainte de a trimite formularul unui agent care va procesa acest formular (server Web, server mail, ...).
In limbajul HTML formularele (forms) sunt utilizate:
- pentru a selecta diferite optiuni existente in formular de catre un utilizator;
- pentru a permite unui utilizator sa introduca infomatii, etc.
H.1. Formulare (forms).
Un formular reprezinta o zona care contine elemente de formular (form elements).
Elementele de formular sunt elemente care permit unui utilizator sa introduca sau sa selecteze informatia dintr-un formular. Exemple de elemente de formular sunt: campurile text (text fields), meniuri de selectie (drop-down menus), butoane radio (radio buttons), etc.
Un formular este definit de marcajul <form>, dupa cum se poate observa in urmatorul fragment dintr-un document HTML:
<form>
<input>
<input>
</form>
H.2. Marcajul <input>.
Cel mai des utilizat marcaj intr-un formular este marcajul <input>, marcaj care permite introducerea de informatii de catre un utilizator (client).
Tipul acestui marcaj este specificat cu ajutorul atributului "type".
Marcajul <input> are doua importante atribute:
- "name", acest atribut reprezinta numele ce va fi atribuit acestui marcaj, nume ce va fi utilizat in rezultatul trimiterii sau prelucrarii formularului;
- "value", acest atribut reprezinta valoarea initiala ce va fi atribuita acestui marcaj, valoare ce va fi utilizata in rezultatul trimiterii sau prelucrarii formularului;
H.3. Campurile text (text fields).
Campurile text sunt utilizate atunci cand dorim ca un utilizator sa poata introduce informatii (text) intr-un formular.
Urmatorul document HTML defineste un formular ce contine doua campuri text definite prin intermediul marcajului <input> utilizand valoarea "text" pentru atributul "type". In cele doua campuri text utilizatorul va introduce numele si prenumele sau, dupa cum se poate remarca in continuare:
<html>
<body bgcolor="orange">
<form>
Nume:<input type="text" name="nume">
<br>
Prenume:<input type="text" name="prenume">
</form>
</body>
</html>
H.4. Butoanele radio (radio buttons).
Butoanele radio sunt utilizate atunci cand dorim ca utilizatorul formularului sa poata selecta doar o singura optiune dintre mai multe optiuni.
Urmatorul document HTML creaza un formular care contine doua butoane radio care permit utilizatorului sa selecteze sexul unei persoane.
Continutul documentului HTML este oferit in continuare:
<html>
<body bgcolor="orange">
<form>
<b>Sex:</b>
<br>
<input type="radio" name="sex" value="masculin">Masculin
<br>
<input type="radio" name="sex" value="feminin">Feminin
</form>
</body>
</html>
H.5. Casute de selectie (checkboxes).
Casutele de selec]ie sunt utilizate atunci cand dorim ca utilizatorul formularului sa poata selecta una sau mai multe optiuni dintre mai multe optiuni.
Urmatorul document HTML creaza un formular care contine trei casute de selectie care permit utilizatorului sa selecteze mai multe optiuni.
Continutul documentului HTML este oferit in continuare:
<html>
<body bgcolor="orange">
<form>
<b>Selectati produsul dorit:</b>
<br>
<input type="checkbox" name="alimente">Lapte
<br>
<input type="checkbox" name="alimente">Branza
<br>
<input type="checkbox" name="alimente">Paine
</form>
</body>
</html>
H.6. Meniul de selectie.Un meniu de selectie se obtine utilizand elementul "select" (<select> ... </select≶).
Fiecare optiune a acestui meniu se obtine prin intermediul elementului "option" (<option> ... </option>).
Un meniu ce utilizeaza elementul "select" trebuie sa contina cel putin un element "option".
Atributul "value" al marcajului <option> specifica valoarea initiala a marcajului.
Urmatorul exemplu ne prezinta un meniu de selectie realizat utilizand elementul "select":
<html>
<body bgcolor="orange">
<form>
<b>Selectati produsul dorit:</b>
<select name="Produs">
<option>Tricou</options>
<option>Camasa</options>
<option>Pantofi</options>
</select>
</form>
</body>
</html>
H.7. Atributul "action" si butonul "Submit".
Pentru ca un formular sa poata fi folosit de catre un utilizator este necesar sa introducem un buton "Submit", buton care va trimite continutul formularului unui alt fisier sau va trimite un mesaj de posta electronica (e-mail).
Un buton "Submit" se introduce intr-un formular prin intermediul marcajului <input> utilizand valoarea "submit" pentru atributul "type".
Atributul action este utilizat pentru a stabili unde va fi trimis continutul formularului, ceea ce poate fi remarcat in urmatorul document HTML:
<html>
<body bgcolor="orange">
<form method="post" action="mailto:nume@yahoo.com?subject = Mesaj de test!" enctype="text/plain">
<table>
<tr>
<td><b>Nume:</b></td>
<td><input type="text" name="Nume"></td>
</tr>
<tr>
<td><b>Prenume:</b></td>
<td><input type="text" name="Prenume"></td>
</tr>
</table>
<hr>
<b><i>Selectati produsul dorit:</i></b><br>
<select name="Produs">
<option>Tricou</options>
<option>Camasa</options>
<option>Pantofi</options>
</select>
<hr>
<b>Transmite un mesaj:</b><br>
<textarea name="Mesaj" rows="5" cols="30">
Aici introduceti mesajul!
</textarea>
<hr>
<center>
<input type="submit" Value="Trimite!">
<input type="reset" Value="Sterge!">
</center>
</form>
</body>
</html>
Daca se va da click pe butonul "Trimite!" continutul formularului va fi trimis ca mesaj de posta electronica la adresa "nume@yahoo.com", adresa ce poate fi modificata.
Executarea unui click pe marcajul <input type="reset" Value="Sterge!"> are ca efect stergerea datelor introduse de catre utilizator (reinitializarea formularului).
In codul sursa anterior se poate observa elementul "textarea", element care permite introducerea unui text de catre utilizator (<textarea name="Mesaj" rows="5" cols="30"> Aici introduceti mesajul! </textarea>).
Atributele "rows" si "cols" stabilesc marimea zonei din formular in care se poate introduce mesajul (textul).
Atributul "rows" specifica numarul de linii de text vizibile (in cazul nostru 5 linii).
Atributul "cols" specifica numarul de caractere vizibile intr-o linie de text (in cazul nostru fiind vorba de 30 caractere). |
BluePink 
