Crearea Formularelor Folosind HTML
5
9/14/13 Crearea formularelor folosind HTML www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 1/5 Crearea formularelor folosind HTML 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: Camp de editare Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
-
Upload
radu-mihai-anghel -
Category
Documents
-
view
212 -
download
0
description
k
Transcript of Crearea Formularelor Folosind HTML
9/14/13 Crearea formularelor folosind HTML
www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 1/5
Crearea formularelor folosind HTML
Iata-ne ajunsi si la ultima lectie a cursului "HTML pe intelesul tuturor" inainte de a trece la realizarea propriu-zisa aunui site.
Notiuni generale despre formulareFormularele reprezinta o metoda de interactivitate cu utilizatorii paginii tale web. Prin intermediul unui formular potiobtine date importante de la vizitatorii paginii tale. Dupa ce formularul a fost completat, utilizatorul apasa un butonde trimitere, iar tu primesti datele introduse in formular sub forma unui e-mail sau datele vor fi procesate cu ajutorulunui limbaj de programare si adaugate intr-o baza de date. In aceasta lectie vom invata cum se pot adauga incadrul unei pagini web diferite tipuri de formulare, dar si cum putem trimite datele introduse intr-un formular, prinemail.
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 iispunem browser-ului ce se va intampla cu datele introduse in formular. Astfel, valoarea atributului ACTION poate fio adresa URL a unui script, scris intr-un limbaj de programare, care va interpreta datele si le va introduce intr-obaza de date, daca este cazul, sau poate fi o adresa de email, caz in care datele introduse in formular vor fi trimiseprin email la adresa respectiva.
Atributul METHOD, asa cum ii spune si numele, precizeaza metoda de trimitere a datelor si poate avea douavalori. Valoarea implicita a acestui atribut este GET, cu ajutorul acestei metode putand fi trimise cantitati mici dedate, 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 cuelementele formularelor.
Elementele unui formularElementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului <INPUT>. Atributele celemai importante ale acestui tag sunt urmatoarele:
TYPE - tipul elementuluiNAME - numele elementuluiVALUE - valoarea elementului
Elementele ale unui formular pot fi:
campurile de editarebutoanele radiocasetele de validarecasetele de fisierelistele de selectiebutoanele submit si reset
In continuare vom vedea cum se poate realiza fiecare element al unui formular HTML.
Campurile de editarePentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul TYPE, al tagului<INPUT>, valoarea text. Exemplu:
Camp de editare
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
9/14/13 Crearea formularelor folosind HTML
www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 2/5
SIZE, care reprezinta latimea campului de editareMAX LENGTH, specifica numarul maxim de caractere care pot fi introduse in campul de editareVALUE, 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 vrei sa introduci un camp de editare de tip "parola", atributul TYPE va avea valoarea "password". In acestcaz, 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 maimulte randuri, folosim campurile de editare de tip multilinie. Pentru a folosi un astfel de camp de editare, avemnevoie de tag-urile <TEXTAREA> si </TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce uncamp 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 deranduri al campului de editare, iar atributul NAME pentru numele campului de editare. Iata rezultatul:
Butoanele radioDaca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. Pentru a introduce un butonradio, 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 ani20-25 ani
25-35 ani35-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 fiselectate mai multe butoane radio dintr-un grup, in acelasi timp.
9/14/13 Crearea formularelor folosind HTML
www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 3/5
Casetele de validarePentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu atributul TYPE avandvaloarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni.Exemplu:
Unde iti petreci concediul de obicei?La mare
La munteIn strainatate
La taraAcasa
Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de butoanele radio, pot fi selectate maimulte 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 fisierePentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-ului <INPUT>, valoarea"file". Sa vedem un exemplu:
No file chosenChoose File
Codul HTML este urmatorul:
<INPUT TYPE="file" NAME="file">
Listele de selectieO lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una saumai 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 numeSIZE, specifica numarul de elemente din cadrul listei de selectieVALUE, 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
Sa vedem cum arata o lista de selectie:
Alege un judet din Romania:
Bucuresti
Pentru a selecta in mod implicit valoarea Bucuresti, am folosit in dreptul acesteia atributul SELECTED. Codul listeide selectie de mai sus este urmatorul:
Alege un judet din Romania:<SELECT><OPTION value=Alba>Alba</OPTION><OPTION value=Arad>Arad</OPTION>
9/14/13 Crearea formularelor folosind HTML
www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 4/5
<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 ResetPentru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre un script scris intr-unlimbaj de programare care va interpreta aceste date, trebuie sa folosim un buton de trimitere. Pentru a introduce unasemenea buton folosim tag-ul <INPUT>, cu atributul TYPE avand valoarea "submit". Putem modifica si valoareabutonului, care in modimplicit este Submit, cu ajutorul atributului VALUE. Astfel, linia de cod pentru un buton de tip submit va fiurmatoarea:
<INPUT TYPE="submit" VALUE="Trimite">
Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset. Prin apasarea acestui buton toateelementele formularului vor reveni la valoarea lor prestabilita, indiferent de valorile introduse de utilizator. Pentru aintroduce un buton de tip Reset, se procedeaza la fel ca si la butonul de tip Submit, singura deosebire fiind ca
9/14/13 Crearea formularelor folosind HTML
www.ecursuri.ro/cursuri-online/crearea-formularelor-folosind-html-print.html 5/5
atributul TYPE va avea valoarea "reset". Sa vedem cum arata linia de cod care introduce in cadrul unui formular unbuton de tip Reset:
<INPUT TYPE="reset" VALUE="Sterge">
Trimiterea datelor dintr-un formular pr in e-mailPentru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim pentru atributul ACTION altag-ului <FORM>, valoarea "mailto:[email protected]". In felul acesta, datele introduse in formular vor fi trimise laadresa de e-mail specificata.
De exemplu, pentru a trimite datele dintr-un formular la adresa [email protected] vom folosi urmatoarea linie decod:
<FORM ACTION="mailto:[email protected]" METHOD="POST">
Exercitiu: realizarea unui formular HTMLAcum la finalul lectiei, dupa ce am invatat cum sa introducem diverse elemente in cadrul unui formular, este timpulsa 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 optiuneaPage Source (denumirile pot diferi in functie de browserul folosit).
