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:
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)
@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 :)
11Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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!
5RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
@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
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!!!
2RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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.
3RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
@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.
-1Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
@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).
0Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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
1RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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.
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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!
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
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!
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
@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!
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Buna ziua, poate nu am parcurs eu toate lectiile si imi cer scuze, insa vreau sa te intreb daca ai abordat si tema mecanismului de adaugare a unui comentariu intr-o pagina htm , exact cum fac eu acum cu acest comentariu. Multumesc.
0RaspundeAi votat deja acest comentariu!Multumim pentru votul tau!
Raspunde
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Adauga comentariu
Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro
Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
