cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 10
Crearea formularelor folosind HTML
28873 afisari
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:
<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 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:
<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 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:

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
« Folosirea cadrelor intr-o pagina web Realizarea unui site in HTML »
37 comentarii
adi94 16 septembrie 2011, 20:58 1
poate reusiti sa faceti si ultima lectie cu,creearea sitului.Si sa faceti noi lectii mai complexe.
Multa bafta!
  1    Raspunde
Lucian.Iordache 20 septembrie 2011, 11:57 2
@adi94: Salut! Ultima lectie este in lucru (mai dureaza ceva). Referitor la complexitatea lectiilor, nu este ceea ce si-a propus cursul de la bun inceput: HTML pe intelesul tuturor (se adreseaza incepatorilor si celor care vor sa invete limbajul html). Lucruri mai complexe legate de HTML vom trata in sectiunea de tutoriale. Multumesc pentru feedback :)
  11    Raspunde
Paul09 18 septembrie 2011, 10:19 3
Bun pana acum. Astept cu mult interes si ultima lectie.
  2    Raspunde
Lucian.Iordache 10 octombrie 2011, 05:30 4
@Paul09: Nu mai trebuie sa astepti. Este online si ultima lectie :)
  7    Raspunde
florinsabin 04 octombrie 2011, 01:09 5
Lafel ca si toti ceilalti astept cu nerabdare ultima lectie. Pana acum cursul mi-a fost de mare ajutor, dar intentia mea e sa invat php. Iar html find un limbaj de baza (si recomandat de multi ca o baza pentru a putea invata php) sper ca veti considera crearea unui curs HTML mai complex. Sau daca acest curs poate fi considerat nivelul 1, sper si astept cu nerbadare un curs nivel 2 :D si cine stie, poate chiar si un level 1 php. Totusi, meritati toate laudele posibile pentru cursul de fata si tot o data pentru site. Felicitari!
  5    Raspunde
Lucian.Iordache 10 octombrie 2011, 05:35 6
@florinsabin: Salut, o sa tratam in viitorul apropiat si alte subiecte legate de HTML (cel mai probabil in cadrul sectiunii de tutoriale). Legat de PHP, ai destul de multe tutoriale publicate pe aceasta tema:
http://www.ecursuri.ro/tutoriale/php

si de MySQL:
http://www.ecursuri.ro/tutoriale/mysql
  2    Raspunde
mnt_stefan 08 octombrie 2011, 00:37 7
felicitari,habar nu aveam ce inseamna html pana astazi...inteleg complexitatea efortului depus de dvs.pt a publica si ultima lectie,acum ca am acumulat cunostinte noi cu ajutorul acestor cursuri si astept cu nerabdare indrumarea finala catre ceea ce am invatat pana acum..mii de multumiri!!!
  2    Raspunde
Lucian.Iordache 10 octombrie 2011, 05:30 8
@mnt_stefan: Salut Stefan, multumesc mult pentru aprecieri. Ma bucur sa citesc ca iti este util acest curs. Este gata si ultima lectie a cursului.
  1    Raspunde
claudiu88 18 octombrie 2011, 15:00 9
Salut Stefan,am si o intrebare...la exercitiu dupa ce scriu comenzile pentru varsta....apoi cand incerc sa introduc comenzile ptr judet,in pagina web judetele imi apar unele dupa altele..si nu imi apare sub forma de liste de selectare.
  3    Raspunde
Lucian.Iordache 19 octombrie 2011, 07:28 10
@claudiu88: Salut Claudiu, in primul rand, ai verificat codul paginii tale sa fie la fel cu codul paginii cu exercitiul (View > Page Source ...)?

Daca este la fel, ar trebui sa mearga fara probleme. Daca tot nu merge, trimite te rog pagina facuta de tine pe contact@ecursuri.ro
  1    Raspunde
Lucian.Iordache 19 octombrie 2011, 12:42 11
@claudiu88: Referitor la liste, NU ai inchis nici unul dintre cele 2 taguri SELECT (pune dupa optiuni si tagul ). Vei vedea ca apar ambele liste.
  0    Raspunde
claudiu88 18 octombrie 2011, 15:23 12
scuze, intrebarea este ptr lucian...respectiv intrebarea privind comanda trime...am scris comanda isa nu imi apare butonul...cum apare la sterge.
  0    Raspunde
Lucian.Iordache 19 octombrie 2011, 12:39 13
@claudiu88: In fisierul pe care mi l-ai trimis pe email, scrie la final: submite (in loc de submit) la butonul Trimite. Dupa ce corectezi, o sa vezi ca apare butonul.
  -1    Raspunde
claudiu88 20 octombrie 2011, 12:18 14
multumesc foarte mult pentru ajutor
  0    Raspunde
dorin 23 octombrie 2011, 20:08 15
Foarte bun cursul pt. incepatori. Multumesc
  0    Raspunde
Mondor 15 decembrie 2011, 21:35 16
Foarte bine!Dar auzi...Cum pot pune mai multe"Butoane radio"? Dar sa fie la intrebari diferite pe aceeasi pagina?
  -3    Raspunde
Lucian.Iordache 31 ianuarie 2012, 07:22 17
@Mondor: Folosesti acelasi cod de mai multe ori. Practic in curs ai ca exemplu o singura intrebare, dar tu poti folosi oricate intrebari vrei intr-o pagina (sunt sigur ca ai aflat pana acum, dar e bine venit si un raspuns).
  0    Raspunde
Curmei 21 decembrie 2011, 18:10 18
de ce cand apas pe butonul de trimitere(submit)nu se trimit direct cum ar trebuie se deschide o fereastra outlook adik cea din windows....http://img819.imageshack.us/ img819/1227/14375560.jpg
  0    Raspunde
x7up 26 februarie 2012, 16:15 19
de 2 zile urmez cursul
sunt la lectia a 10-a,chair acum o invat
e putin mai greoaie
la inceput eram incepator in html... adica nici nu auzim de asa ceva si acum,peste 2 zile,sunt un mic expert:)
e incredibil site-ul
chiar explicati pe intelesul tuturor
  1    Raspunde
feersad 01 iunie 2012, 15:01 20
Super..sa continuati la fel..mi-ati fost de mare folos..multumesc anticipat...bravo
  1    Raspunde
lorddarkelf 17 martie 2013, 15:44 21
Salut. Invat pentru concursul CIA din clasa a 11-a si html-ul prezentat de voi este exact ce-mi trebuie. Am o intrebare. La ce foloseste acel atribut NAME? Am vazut ca(scuzat cacofonia) codul se poate introduce si faca acel atribut, nefiind nici o schimbare la pagina de internet.
  0    Raspunde
lucibarbone 04 mai 2013, 00:02 22
Super
  0    Raspunde
Anonim63 05 iunie 2013, 08:14 23
MA bucur ca cineva sa gandit sa ii ajute si pe cei care nu stiu!! Foarte bine explicat! Multumesc!
  1    Raspunde
razvan1234 15 iunie 2013, 15:07 24
imi poti explica cum se posteaza comentarile din formularul meu pe aceeasi pagina cu acesta? la fel cum ai tu aici. Multumiri anticipate
  0    Raspunde
iasi1.ro 06 iulie 2013, 19:07 25
Salutare lume.
  0    Raspunde
horia_ch 08 noiembrie 2013, 12:48 26
De ce formularul exercitiului nu trimite prin e-mail decat primul raspuns (in cazul acesta numele). Nu se trimite nici sexul, nici varsta, nici judetul, nici parerea si nici fisierul atasat). Ma poate ajuta cineva? Multumesc!
  0    Raspunde
Iulys 03 aprilie 2014, 14:01 27
Mulumesc pentru acest curs gratuit. Chiar e pe intelesul tuturor. O treaba excelenta! Mult succes pe mai departe!
  0    Raspunde
Lethiery 29 aprilie 2014, 12:16 28
excelent curs. multumesc
  0    Raspunde
PaulCAM 05 octombrie 2014, 13:56 29
Deci ca sa pot la butonul Trimite,unde pun valoarea aia? Am incercat in mai multe locuri.Excelent curs.
  0    Raspunde
LupStudent 01 decembrie 2014, 10:03 30
Salut Lucian. Ma intereseaza si pe mine sa fac in html un formular de inscriere, sa isi faca lumea cont pe site. Se poate asa ceva?
  0    Raspunde
zodrac 16 ianuarie 2015, 17:07 31
Bun tutorialul DAR, ca alte lectii, mai are greseli.
La exemplul de la butoanele radio, daca iei cu copy si paste codul veti vedea ca nu va arata in pagina cum se sustine aici ca arata....toate optiunile vor fi intr-un singur sir si nu una sub alta....ca sa apara una sub alta probabil trebuie pus <br> la sfarsitul fiecarei optiuni.Exact acelasi lucru se intampla si la exemplul cu casetele de validare, si anume le arata in pagina intr-un singur sir, nu una sub alta..lipseste iarasi <br> de la fiecare optiune.
Eu apreciez ce au facut creatorii acestui curs, DAR pentru ca se adreseaza unor incepatori, ar fi fost mult mai bine sa fie corect 100% ceea ce prezinta aici, pt ca altfel invatam gresit
  0    Raspunde
Rapunzell 07 iunie 2015, 18:00 32
Minunaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaattttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
  0    Raspunde
Rapunzell 07 iunie 2015, 18:00 33
Minunaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaattttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
  0    Raspunde
Programatorul 09 februarie 2016, 10:50 34
Scrie aici comentariul tau
  0    Raspunde
rizeacgm 05 decembrie 2016, 14:17 35
Foarte folositor sit-ul.Multumim pentru efort.
  0    Raspunde
mihai_ela 06 aprilie 2017, 15:00 36
Luciane vezi ca site-ul este spart. Mi-am facut un cont si cand am deschis mailul de activare am fost redirectionat catre acest cont mihai_ela, habar-n-am cine e. Linkul de activare te conecteaza direct la cont, chiar daca nu esti conectat in browser, asa ca daca schimbi id-ul din link intri pe alt cont. Site-ul are multe buguri. Pot accesa conturi cu datele personale, am incercat sa dau de tine, dar aparent nu exista profil utilizatori. Mno mihai_ela pare rau ca am intrat aici, dar am fost redirectionat in contul tau asa ca l-am folosit pe al tau. E bine ca nu ai numarul de telefon si mailul. E a 3 oara cand intru pe un site din greseala :)) Ureaza-mi bafta la olimpiada:)) Cineva ar putea sa faca experimente pe acest site if you know what I mean. O zi frumoasa!
  0    Raspunde
mihai_ela 06 aprilie 2017, 15:00 37
@Lucian.Iordache
Luciane vezi ca site-ul este spart. Mi-am facut un cont si cand am deschis mailul de activare am fost redirectionat catre acest cont mihai_ela, habar-n-am cine e. Linkul de activare te conecteaza direct la cont, chiar daca nu esti conectat in browser, asa ca daca schimbi id-ul din link intri pe alt cont. Site-ul are multe buguri. Pot accesa conturi cu datele personale, am incercat sa dau de tine, dar aparent nu exista profil utilizatori. Mno mihai_ela pare rau ca am intrat aici, dar am fost redirectionat in contul tau asa ca l-am folosit pe al tau. E bine ca nu ai numarul de telefon si mailul. E a 3 oara cand intru pe un site din greseala :)) Ureaza-mi bafta la olimpiada:)) Cineva ar putea sa faca experimente pe acest site if you know what I mean. O zi frumoasa!
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera

7 lectii online
Excel prin exemple

10 lectii online
Windows XP prin exemple

10 lectii online
Infiintarea unei firme

6 lectii online
Gramatica limbii engleze

27 lectii online
Introducere in e-Business

25 lectii online
Curs de Machiaj

13 lectii online
Curs de Fashion

17 lectii online
Curs de Barman

10 lectii online
HTML pe intelesul tuturor

11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro