Crearea formularelor folosind HTML (Lectia10)

Iata-ne ajunsi si la ultima lectie a cursului "HTML pe intelesul tuturor" inainte de a trece la realizarea propriu-zisa a unui site.

Notiuni generale despre formulare

Formularele reprezinta o metoda de interactivitate cu utilizatorii paginii tale web. Prin intermediul unui formular poti obtine date importante de la vizitatorii paginii tale. Dupa ce formularul a fost completat, utilizatorul apasa un buton de trimitere, iar tu primesti datele introduse in formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare si adaugate intr-o baza de date. In aceasta lectie vom invata cum se pot adauga in cadrul unei pagini web diferite tipuri de formulare, dar si cum putem trimite datele introduse intr-un formular, prin email.

Pentru a folosi un formular in pagina ta web, va trebui sa folosesti tag-urile <FORM> si </FORM>. Intre aceste tag-uri vor fi introduse toate elementele formularului.

Tag-ul <FORM> are doua atribute foarte importante: ACTION si METHOD. Cu ajutorul atributului ACTION ii spunem browser-ului ce se va intampla cu datele introduse in formular. Astfel, valoarea atributului ACTION poate fi o adresa URL a unui script, scris intr-un limbaj de programare, care va interpreta datele si le va introduce intr-o baza de date, daca este cazul, sau poate fi o adresa de email, caz in care datele introduse in formular vor fi trimise prin email la adresa respectiva.

Atributul METHOD, asa cum ii spune si numele, precizeaza metoda de trimitere a datelor si poate avea doua valori. Valoarea implicita a acestui atribut este GET, cu ajutorul acestei metode putand fi trimise cantitati mici de date, cea mai folosita metoda fiind POST.

Nu trebuie sa intelegi acum totul, vei vedea cat de simplu este sa realizezi formulare pentru paginile tale web. La sfarsitul acestei lectii vom face impreuna un formular mai complex, dar mai intai sa ne familiarizam cu elementele formularelor.

Elementele unui formular

Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului <INPUT>. Atributele cele mai importante ale acestui tag sunt urmatoarele:

TYPE - tipul elementului
NAME - numele elementului
VALUE - valoarea elementului

Elementele ale unui formular pot fi:

campurile de editare
butoanele radio
casetele de validare
casetele de fisiere
listele de selectie
butoanele submit si reset

In continuare vom vedea cum se poate realiza fiecare element al unui formular HTML.

Campurile de editare

Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul TYPE, al tagului<INPUT>, valoarea text. Exemplu:

Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:

SIZE, care reprezinta latimea campului de editare
MAX LENGTH, specifica numarul maxim de caractere care pot fi introduse in campul de editare
VALUE, valoarea initiala a campului de editare

De exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod:

Daca vrei sa introduci un camp de editare de tip "parola", atributul TYPE va avea valoarea "password". In acest caz, caracterele introduse in campul de editare, nu vor fi vizibile. Sa vedem un exemplu:

Scrie cateva caractere in campul de editare de mai sus, pentru a vedea diferenta fata de un camp de editare de tip "text".

Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa poata fi introduse mai multe randuri, folosim campurile de editare de tip multilinie. Pentru a folosi un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un camp de editare multilinie:

Am folosit atributul COLS pentru a stabili numarul de caractere al fiecarui rand, atributul ROWS pentru numarul de randuri al campului de editare, iar atributul NAME pentru numele campului de editare. Iata rezultatul:

Butoanele radio

Daca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE, valoarea "radio". Sa luam un exemplu:

In ce categorie de varsta te incadrezi?
sub 15 ani
15-20 ani
20-25 ani
25-35 ani
35-45 ani
peste 45 ani

Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de raspuns, este urmatorul:

In ce categorie de varsta te incadrezi?
<INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED>sub 15 ani
<INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani
<INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani
<INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani
<INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani
<INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani

Cu ajutorul atributului CHECKED, fara alte valori, putem selecta un buton radio in mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.

Casetele de validare

Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu atributul TYPE avand valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni. Exemplu:

Unde iti petreci concediul de obicei?
La mare
La munte
In strainatate
La tara
Acasa

Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de butoanele radio, pot fi selectate mai multe optiuni. Codul casetelor de validare de mai sus este urmatorul:

Tag-uri

ADS2

Mini-chat

ADS

Top 66