Tutorial HTML - Formulare
Formularul este unul dintre cele mai importante unete folosite de un webmaster pentru a obtine informatii importante despre un internaut, informatii precum email, nume, adressa, telefon sau orice alte informaii.
In functie de necesitati infoarmatia poate fi procesata si stocata intr-un fisier, se pot realiza statistici, formulare de inscriere sau abonamente la informatia prezentata in pagina ta si multe altele.
HTML - Campuri de text
Inainte sa intram in detalii trebuie ar trebuii sa expunem putin bazele unui formular. Campurile de text au cateva atribute care trebuiesc mentionate inca de la inceput:
- type - Determina tipul campului de text. De exemplu: text, trimite, sau parola.
- name - Atribuie un nume campului pentru a pute face referire la el mai tarziu
- size - Seteaza marimea campului.
- maxlength - valoarea maxima de caractere ce pot fi introduse.
|
<form method="post" action="mailto:youremail@email.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"> |
Vizualizare
NU folosi acest cod. Datele din formular nu vor fi criptate si nu vor fi sigure din punct de vedere al securitatii.
HTML - Formular de email
Sa adaugam acum si butonul de trimitere. In general, butonul de "trimitere" ar trebuii sa fie ultimul si sa aibe atributul name definit ca "Trimite". "Send", "Submit" sau ceva asemanator. Acest nume va fi numele butonului.
Va trebui deasemenea sa specificam o destinatie a datelor introduse in formular la fel ca si modul de transfer. Aceasta se poate face agaugand urmatoarele atribute formularului./p>
- method - Vom folosi metoda "post". Aceasta trimite formularul cu informatia introdusa fara sa afiseze detalli userului.
- action - Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisa informatia.
|
<form method="post" action="mailto:youremail@email.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"><br /> <input type="submit" value="Send"> </form> |
Vizualizare
Trebuie doar sa schimbi adresa de e-mail cu una valabila pentru ca formularul sa functioneze corect.
HTML - Butoane Radio
Butoanele Radio sunt foarte populare, utile si usor de folosit. Cel mai intalnit exemplu a fi o intrebare cu multiple variante de raspuns. Atributele care ar trebuii cunoscute sunt urmatoarele.
- value - specifica ceea ce va fi trimis in cazul in care un user selecteaza un anume buton. Doar o singura valoare va fi trimissa.
- name - decide carui set de butoane apartine butonul selectat.
|
<form method="post" action="mailto:youremail@email.com"> Ce tip de pantofi porti ? <br /> Culoare: <input type="radio" name="culoare" value="deschis">Deschis <br /> Marime: <input type="radio" name="marime" value="medie">Medie <input type="radio" name="marime" value="mare">Mare <br /> <input type="submit" value="Email Myself"> </form> |
Vizualizare
In cazul in care vei inlocuii adresa de email cu a ta vei primi un email cu: "marime=(alege) culoare=(alege)".
HTML - Checkbox
Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, doua sau mai multe variante de raspuns. Atributele name si value se folosesc la fel ca si pentru butoanele radio.
|
<form method="post" action="mailto:youremail@email.com"> <p>Ce culoare de pantofi preferi ? </p> <p> <input type="checkbox" name="pantofi" value="negru">Negru simplu <br/> <input type="submit" value="Email Myself"></p> </form> |
Vizualizare
HTML - Alte tipuri de formulare de liste
Un alt model de formular tip lista este urmatorul, in care userul selecteaza o anumita linie care va fi trimisa ca si optiunea aleasa.
|
<form method="post" action="mailto:youremail@email.com"> Preferinte muzicale |
Vizualizare
Un alt model de formular este meniul "dropdown". Acesta va fi afisat ca si un camp, care va afisa o lista atunci cand este executat un clik asupra lui.
|
<form method="post" action="mailto:youremail@email.com"> Nivel de studii? <input type="submit" value="Email Yourself"> |
Vizualizare
HTML - formular de upload
Mai intai de toate trebuie mentionat ca acest formular este doar interfata, partea vizibila cu care un user va putea interactiona.. Pentru a face un formular complet de upload sunt necesare cunostinte de PHP si PERL iar javascriptul este si el binevenit.
Un formular de upload este compus din mai multe parti. Vom incepe prin a stabili marimea fisierului pe care il vom uploada. Acest lucru se face cu ajutorul unui cam ascuns. In continuare vom crea campul propriu-zis in care userul va putea scrie adresa fisierului sau pur si simplu sa sa dea browse pentru a deschide o fereastra windows explore.
|
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" /> |
Vizualizare
HTML - Zone de text, Comentarii
In general zonele de text sunt foosite pentru a trimite comentarii. Blogurile si forumurile sunt principalele tipuri de pagini web care folosesc aceste optinui. Totusi exista multe alte tipuri de situri care folosesc zonele de text pentru a afla parerea userilor despre un anumit aspect.
Pentru a crea o zona de text vom specifica mai intaii atributele rows si cols in interiorul tag-ului <textarea>. "Rows" va stabilii innaltime campului in linii de caractere iar "cols" lungimea unei linii in caractere. In exemplul urmator exista 5 linii a cate 20 de caractere. De asemenea strebuie specificat unul dintre atributele tagului wrap, acestea sunt:
wrap=
- "off"
- "virtual"
- "physical"
Vom insista mai mult pe explicarea acestor valori in tutorialul destinat campurilor de text
|
<form method="post" action="mailto:youremail@email.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Scrie un comentariu </textarea> <input type="submit" value="Email Yourself"> </form> |
Vizualizare
Deasemenea trebuie specificat ca ceea ce vei scrie intre tagul de deschidere si cel de inchidere va apare in interiorul zonei de text. In acest caz a fost folosita o invitatie predefinita: "Scrie un comentariu"
Comentarii
Foarte util Si frumos . felicitari 100% funcional
Cel care a facut siteul asta e cel mai tare !
Multumesc mult!
Chiar daca am 11 ani si is cam mic vreau sami fac un jok cu naruto ^_^
ehhe si uite asa imi incep ... primele mele scripturi mersi mult staff-ului
tareeeeeeee
La cmpuri de text scrie ca nu trebuie folosit acel cod. Care e codul care cripteaza astfel incat sa nu apara probleme?
Cand am scris acel articol ma refeream la faptul ca formularele care trimit informatii catre o baza de date au nevoi de cateva protectii:
-limitare la numarul de caractere introduse
(Ex: <input type="text" name="nume" value="" maxlength="100" />
-verificarea adresei de email
-verificarea telefonului
-transformarea eventualului cod html sau php introdus de catre un hacker etc.
Daca nu pui protectii pe campurile de text care fac trimitere la baza de date un hacker poate introduce un script care sa iti dea peste cap tot situl. Si credema ca sunt multi care se ocupa cu asa ceva. Mai devreme sau mai tarziu o sa te intalnesti cu unul.
Succes
salut!
Nu reusesc sa primesc pe mailul(yahoo) introdus in cod datele introduse in formulare. In IE spune ca "mail client not properly installed" iar in opera si firefox am incercat si tot nu mere!
Putin ajutor va rog!
P.S: folosesc Windows 7...
Ca sa poti trimite email folostind astfel de formulare trebuie sa ai setat un client de email gen outlook. Daca nu este asta ceea ce cauti poate iti este de folos generatorlul de formulare de contact de aici
Cel mai tare site! Mersi mult! Am lipsit la ora si acum dau test din astea. Tineti-o tot asa!
este super
hey, cum pot face ca in momentul cand dau click pe un buton radio sa ma directioneze la o pagina oarecare?
As dori daca se poate sa ma ajutati sa fac un formluar pe care sa-l pun pe site. Vizitatorii sa completeze: nume, prenume si e-mail si cand da send sa-mi vina mie pe e-mail datele
Buna ziua
As vrea sa fac pe un site un formular de inscriere care sa contina nume, e-mail, telefon si un buton de trimitere. Cand se apasa butonul trimitere sa-mi vina toate datele direct pe e-mail. Am gasit ceva de acest gen pe acest site, dar cand dau trimitere se leaga de Outlook Express - eu vreau sa se trimita direct. Ma poate ajuta cineva cu un cod HTML?
Salut @catalin georgescu
Gasesti un generator de formulare de contact cu trimiterea datelor pe email aici:
http://www.scriptgenerator.net/generator/html-basic/contact-form-generator.php
tare site asta!!!
tineo tot asa!!
eu deja am cateva site-uri facute de mine.
de aici am invatat multe.
si voi invata in continuare.
Trimite un comentariu!
