Lectia 10- Crearea formularelor folosind HTML

Notiuni Generale despre formulare

Formularele sunt foarte importante intr-un site deoarece practic, prin acestea interactionam cu utilizatorii paginii tale web. Prin intermediul unui formular, poti obtine date importante de la utilizatorii paginii tale web. 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 in formular prin e-mail.

Pentru a crea un formular in pagina ta web, vei folosi perechea de taguri <FROM> si </FROM>. Intre acestea vor fi introduse toate elementele formularului.

Tagul <FROM> are doua atribute foarte importante: ACTION si METHOD. Cu ajutorul atributului ACTION ii spunem browseru-lui ce se va intampla cu datele introduse in formular. Astfel valoatrea 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 e cazul, sau poate fi o adresa de e-mail, caz in care datele introduse in formular vor fi trimise prin e-mail 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 totul de acum. Pe parcursul acestei lectii vei vedea cat de usor este sa creezi un formular, iar, la sfarsitul lectiei vom crea impreuna un formular mai complex. Momentan ne vom familiariza cu elementele formularelor.

Elementele unui formular

Elementele unui formular vor trebui 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, vom folosi atributul TYPE, al tagului <INPUT>, cu 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:

<INPUT NAME=”exemplu” TYPE=”text” VALUE=”Camp de editare” SIZE=”20″ MAXLENGTH=”30″>

Daca doresti 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 vor fi marcate cu „****” sau „„. Sa vedem un exemplu:

Acum 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 vrei sa adaugi in cadrul formularului tau un camp de editare in care sa poata fi introduse mai multe randuri, folosesti 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:

<TEXTAREA COLS=”50″ ROWS =”5″ NAME=”exemplu”></TEXTAREA>

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 putem 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:

Unde iti petreci concediul de obicei?

<INPUT TYPE=”checkbox” NAME=”optiunea1″>La mare

<INPUT TYPE=”checkbox” NAME=”optiunea2″>La munte

<INPUT TYPE=”checkbox” NAME=”optiunea3″>In strainatate

<INPUT TYPE=”checkbox” NAME=”optiunea4″>La tara

<INPUT TYPE=”checkbox” NAME=”optiunea5″>Acasa

Casetele de fisiere

Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-ului <INPUT>, valoarea „file„. Sa vedem un exemplu:

Codul HTML este urmatorul:

<INPUT TYPE=”file” NAME=”file”>

Listele de selectie

O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una sau mai multe optiuni dintr-o lista. Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si </SELECT>. Atributele cele mai folosite pentru tag-ul <SELECT>sunt:

  • NAME, atribuie listei de selectie un nume
  • SIZE, specifica numarul de elemente din cadrul listei de selectie
  • VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perechi „name = value”
  • SELECTED(fara alte valori), selecteaza in mod prestabilit un element al listei

Asadar vedem cum arata o lista de selectie:

Alege un judet din Romania:

 

Pentru a selecta in mod implicit valoarea Bucuresti, am folosit in dreptul acesteia atributul SELECTED. Codul listei de selectie de mai sus este urmatorul:

Alege un judet din Romania:

<SELECT><OPTION value=Alba>Alba</OPTION>

<OPTION value=Arad>Arad</OPTION>

<OPTION value=Arges>Arges</OPTION>

<OPTION value=Bacau>Bacau</OPTION>

<OPTION value=Bihor>Bihor</OPTION>

<OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION>

<OPTION value=Botosani>Botosani</OPTION>

<OPTION value=Brasov>Brasov</OPTION>

<OPTION value=Braila>Braila</OPTION>

<OPTION value=Bucuresti selected>Bucuresti</OPTION>

<OPTION value=Buzau>Buzau</OPTION>

<OPTION value=Caras-Severin>Caras-Severin</OPTION>

<OPTION value=Calarasi>Calarasi</OPTION>

<OPTION value=Cluj>Cluj</OPTION>

<OPTION value=Constanta>Constanta</OPTION>

<OPTION value=Covasna>Covasna</OPTION>

<OPTION value=Dambovita>Dambovita</OPTION>

<OPTION value=Dolj>Dolj</OPTION>

<OPTION value=Galati>Galati</OPTION>

<OPTION value=Giurgiu>Giurgiu</OPTION>

<OPTION value=Gorj>Gorj</OPTION>

<OPTION value=Harghita>Harghita</OPTION>

<OPTION value=Hunedoara>Hunedoara</OPTION>

<OPTION value=Ialomita>Ialomita</OPTION>

<OPTION value=Iasi>Iasi</OPTION>

<OPTION value=Ilfov>Ilfov</OPTION>

<OPTION value=Maramures>Maramures</OPTION>

<OPTION value=Mehedinti>Mehedinti</OPTION>

<OPTION value=Mures>Mures</OPTION>

<OPTION value=Neamt>Neamt</OPTION>

<OPTION value=Olt>Olt</OPTION>

<OPTION value=Prahova>Prahova</OPTION>

<OPTION value=Satu-Mare>Satu-Mare</OPTION>

<OPTION value=Salaj>Salaj</OPTION>

<OPTION value=Sibiu>Sibiu</OPTION>

<OPTION value=Suceava>Suceava</OPTION>

<OPTION value=Teleorman>Teleorman</OPTION>

<OPTION value=Timis>Timis</OPTION>

<OPTION value=Tulcea>Tulcea</OPTION>

<OPTION value=Vaslui>Vaslui</OPTION>

<OPTION value=Valcea>Valcea</OPTION>

<OPTION value=Vrancea>Vrancea</OPTION></SELECT>

Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim pentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.

Butoanele de tip Submit si Reset

Pentru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre un script scris intr-un limbaj de programare care va interpreta aceste date, trebuie sa folosim un buton de trimitere. Pentru introducerea unui buton de trimitere folosim tag-ul <INPUT>, cu atributul TYPE avand valoarea „submit”. Putem modifica si valoarea butonului, care in mod implicit este Submit, cu ajutorul atributului VALUE. Astfel, linia de cod pentru un buton de tip submit va fi urmatoarea:

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

Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset. Apasand acest buton toate campurile se vor reseta, revenind la valorile lor prestabilite indiferent de datele introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedeaza la fel ca si la butonul de tip Submit, singura deosebire fiind ca atributul TYPE va avea valoarea „reset”. Sa vedem cum arata linia de cod care introduce in cadrul unui formular un buton de tip Reset:

<INPUT TYPE=”reset” VALUE=”Sterge”>

Trimiterea datelor dintr-un formular prin e-mail

Pentru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim pentru atributul ACTION al tag-ului <FORM>, valoarea „mailto:email@domeniu.ro”. In felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificata.

De exemplu, pentru a trimite datele dintr-un formular la adresa contact@marinelpadurice.ro vom folosi urmatoarea linie de cod:

<FORM ACTION=”mailto:contact@marinelpadurice.ro” METHOD=”POST”>

Exercitiu: realizarea unui formular HTML

Acum la finalul lectiei, dupa ce am invatat cum sa introducem diverse elemente in cadrul unui formular, este timpul sa realizam unul. Astfel, folosind notiunile invatate, incearca sa realizezi urmatorul formular: click aici

Pentru a vedea codul acestui formular, alege din pagina sau tabul care se deschide, din meniul View optiunea Page Source (denumirile pot diferi in functie de browserul folosit).

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *