Logo Facebook8    Logo Youtube12     Logo twitter

Creare Site
Ofera-i site-ului tau un stil aparte Lectii gratuite HTML & Joomla!
Invata Programare
Lectii C++, Java, Perl, Pascal
Simulator
Invata care este locul componentelor intr-o unitate centrala
Creare Site
Ofera-i site-ului tau un stil aparte Lectii gratuite HTML & Joomla!
Invata Programare
Lectii C++, Java, Perl, Pascal
Simulator
Invata care este locul componentelor intr-o unitate centrala

birdSalut!

Bun venit pe World-IT!
Site-ul care te invata tot ce trebuie sa stii despre noua tehnologie.

laptop terminalInvata programare!

Vrei sa iti construiesti propriul software?
Nimic mai simplu, urmeaza lectile noastre si invata unul dintre limbajele de programare.

workflowSimulator!

Tu stii care este locul componentelor intr-o unitate de calculator?
Intra in simulatorul nostru si invata sa iti asamblezi singur calculatorul.

stopwatchTeste IT!

Te pricepi la IT?
Dispunem de o gama variata de teste IT.
Afla cat de bun esti in domeniul IT rezolvand teste.

Formular contact html php 
Formular contact
Formular contact html php Formular contact

Formular contact html php

In acest articol iti voi explica pas cu pas cum se creeaza un formular de contact. Vom crea doua formulare identice din punct de vedere al designului, doar ca primul formular va transmite informațiile introduse în el la o adresa de e-mail specificata în cod, iar al doilea formular va transmite informațiile către o pagina separata a site-ului.

Vei alege formularul potrivit în funcție de nevoile personale. In spatele acestui formular se afla un cod scris in HTML, PHP și CSS. Este recomandat sa stapanesti limbajul PHP si HTML pentru o intelegere optima a functionarii formularului.
Iata aici 3 cursuri gratuite pentru a-ți reimprospata memoria cu privire la limbajele de mai sus: HTML, PHP, CSS.

Voi incerca sa explic codurile din spatele formularului pentru a le intelege chiar daca nu stapanesti foarte bine limbajele de mai sus.
La finalul paginii vei gasi codurile complete ale celor doua formulare. Pentru a copia codurile de la finalul paginii trebuie sa apesi click dreapta pe butonul "Copiere COD" de la fiecare formular.

Vom crea formularul in trei etape si anume: etapa 1 - HTML, etapa 2 - CSS, etapa 3 - PHP.
Etapa 1 - HTML
In aceasta etapa vom crea pagina propriu zisa și formularul standard. Pentru a face acest lucru trebuie sa deschidem un editor de text (notepad++) in care vom scrie urmatorul cod salvandu-l cu numele "formular" avand extensia ".php" (formular.php):


<html>
<head>
<title>Formular</title>
</head>
<body>
Formular contact
<form>
Numele tau
<input type="text" name="nume" placeholder="Nume">
<input type="text" name="prenume" placeholder="Prenume">
<br />
Email
<input type="text" name="email" placeholder="Email">
<br />
Subiect
    <select name="subiect">
      <option name="subiect" value="Altceva">Altceva</option>
      <option name="subiect" value="Subiect1">Subiect 1</option>
      <option name="subiect" value="Subiect2">Subiect 2 </option>
    </select>
<div>
Mesaj
</div>
<div>
<textarea name="mesaj" placeholder="Mesaj.."></textarea>
</div>
<input type="submit" value="Trimite">
</form> 
</div>
</body>
</html>

form html css

Nu te ingrijora cu privire la aspectul formularului. Dupa ce vom termina etapa 2 acesta va arata impecabil.
Acum sa explicam pas cu pas codul:
Prin folosirea etichetei "<form>" am initializat un formular.
Formularul contine trei "<input type="text">". Primele doua "<input type="text">" vor furniza numele si prenumele persoanei, iar ultimul va furniza email-ul.
In continuarea codului urmeaza eticheta "<select>". Aceasta eticheta permite alegerea unei optiuni dintr-o lista predefinita. Optiunile se creaza cu ajutorul tagului "<option>" care se scrie intre etichetele "<select> </select>".
Urmatorul element al formularului este eticheta "<textarea>". Aceasta eticheta creaza un spatiu in care utilizatorul poate scrie un text / mesaj mai lung.
Ultimul element al formularului este eticheta "<imput type="submit">". Aceasta eticheta creaza un buton care are rolul de a trimite toate datele completate in formular la o adresa specificata.

Fiecare eticheta enumerata pana acum mai contine un atribut si anume "name". Acest atribut ne va ajuta ajuta sa distingem datele de la formular prin intermediul codului PHP.
Elementele formularului in care utilizatorul poate scrie text mai contin un atribut "placeholder". Acest atribut are rolul de a pune un text ce va disparea cand utizilatorul va incepe sa scrie in elementul respectiv.
Acum ca am lamurit toate codurile din prima etapa, putem trece la etapa 2.

Etapa 2 - CSS
In aceasta etapa vom modifica formularul din punct de vedere al design-ului.
Codurile vor fi aceleasi ca si in prima etapa doar ca le vom mai adauga completari cu ajutorul codului CSS.
La finalul etapei 2 formularul va arata exact ca in imaginea urmatoare:

form CSS HTML PHP

Am colorat completarile cu culoarea mov pentru a le putea distingemai bine:

<html>
<head>
<title>Formular</title>
</head>
<body style="background-size: cover;" background="imagine.jpg">
<div style="margin-top: 100px; margin-left: 100px;">
<h1 style="font-family: Helvetica; color: white;">Formular contact</h1>
<form style="margin-top: 30px;">
<h4 style="font-family: Helvetica; color: white;">
Numele tau
<input style="width: 150px; margin-left: 50px;" type="text" name="nume" placeholder="Nume">
<input style="width: 150px; margin-left: 15px;" type="text" name="prenume" placeholder="Prenume">
<br />
Email
<input style="width: 319px; margin-top: 20px; margin-left: 94px;" type="text" name="email" placeholder="Email">
<br />
Subiect
    <select style="width: 250px; height: 23px; margin-top: 20px; margin-left: 79px;" name="subiect">
      <option name="subiect" value="Altceva">Altceva</option>
      <option name="subiect" value="Subiect1">Subiect 1</option>
      <option name="subiect" value="Subiect2">Subiect 2 </option>
    </select>
</h4>
</div>
<div style="float: left; margin-left: 100px;">
<h4 style=" margin-top: 0px; font-family: Helvetica; color: white;">
Mesaj
</h4>
</div>
<div>
<textarea style="width: 319px; height: 100px; margin-left: 97px;" name="mesaj" placeholder="Mesaj.."></textarea>
</div>
<hr style="width: 458px; margin-top: 20px; margin-left: 100px;">
<input style="border-radius: 6px; background-color: 3070AE; border-color: white; width: 100px; height: 30px; margin-top: 20px; margin-left: 94px;" type="submit" value="Trimite">
</form> 
</div>
</body>
</html>

 Formular contact html php

Acum iti voi explica noile coduri adaugate:
Codurile adaugate sunt scrise in limbajul CSS si nu influenteaza cu absolut nimic modul de functionare al formularului. Singurul lucru pe care il influenteaza codurile CSS este design-ul.
Codurile CSS sunt scrise in eticheta "style".

Primul cod CSS adaugat este aplicat etichetei "<body>" si anume: "style="background-size: cover;" background="imagine.jpg"". Acest cod aplica o imagine de fundal paginii. Atributul "background-size: cover" incadreaza imaginea pe tot ecranul, iar "background=""" sugereaza numele si locatia imaginii.

Urmatorul cod CSS este aplicat etichetei "<div>": "<div style="margin-top: 100px; margin-left: 100px;">"Acesta pozitioneaza formularul la 100 px distanta de marginea de sus si la 100 px distanta de  marginiea din dreapta.

Codurile CSS aplicate etichetelor "<h1>" si "<h4>" au rolul de a formata textul prin schimbarea dimensiunii, formei si a culorii acestuia.
Urmatoarele coduri CSS sunt aplicate etichetelor "<input>" avand rolul de a redimensiona si a pozitiona campurile formularului.
Ultimul cod CSS este aplicat etichetei "<hr>". Eticheta "<hr>" creeaza o linie orizontala de-a lungul paginii iar codul CSS aplicat ecesteia are rolul de a pozitiona si a redimensiona aceasta linie.
Am finalizat si etapa 2!

Etapa 3 - PHP
In aceasta ultima etapa vom seta formularul sa transmita informatiile completate de un utilizator catre o adresa de email sau catre o pagina separata a unui site.

Transmitere informatii catre o adresa de email:
Pentru ca formularul sa transmita informatiile catre o adresa de email trebuie doar sa adaugam atributul "action="mailto: This email address is being protected from spambots. You need JavaScript enabled to view it."" in eticheta "<form>". In locul "This email address is being protected from spambots. You need JavaScript enabled to view it." va trebui sa completezi cu o adresa de email catre care doresti sa se trimita informatiile.

Transmitere informatii catre o pagina separata a unui site:
Pentru a t
ransmitere informatii catre o pagina separata a unui site trebuie sa mai cream un fisier text avand extensia ".php" care sa preia informatiile si sa le afiseze.
Vom numi acest fisier "date.php".
Acum va trebui sa adaugam sa adaugam atributul "action="date.php"" si atributul "method="POST" in eticheta "<form>" din fisierul "formular.php". Aceste doua atribute au
 rolul de a transmite informatiile catre fisierul "date.php" prin metoda "POST".

In fisierul "date.php" vom scrie urmatorul cod:


<?php
$nume = $prenume = $email = $mesaj = $subiect = "";
if($_SERVER["REQUEST_METHOD"] == "POST"){
$nume=$_POST['nume'];
$prenume=$_POST['prenume'];
$email=$_POST['email'];
$mesaj=$_POST['mesaj'];
$subiect=$_POST['subiect'];
}
echo "Nume:", $nume, "<br />";
echo "Prenume:", $prenume, "<br />";
echo "Email:", $email, "<br />";
echo "Mesaj:", $mesaj, "<br />";
echo "Subiect:", $subiect;
?>

Explicatia codului din fisierul "date.php" este urmatoarea:
Am creat cinci variabile (
$nume = $prenume = $email = $mesaj = $subiect = "";pe care le-am egalat cu (""). Egalandu-le cu ("") inseamna ca initial variabilele nu au nicio valoare.
Am initializat functia (if($_SERVER["REQUEST_METHOD"] == "POST")) avand rolul de a prelua prin metoda "POST" informatiile din fisierul "formular.php".
In corpul functiei "if" am apelat cele cinci variabile create si le-am egalat pe fiecare in parte cu "$POST_[' ']". Intre apostrofuri am pus valoarea atributului "name" de la fiecare element al etichetei "form" din fisierul "formular.php".

Dupa ce fiecare variabila a preluat valoarea elementelor din formular am folosit "echo" pentru afisarea acestora pe pagina separata.

Mai jos se regasesc codurile complete ale fiecarui tip de formular.

 

Cod complet formular ce transmite informatii catre o adresa de email:
(Acest formular contine un singur fisier "formular.php")

Cod "formular.php":

 

Cod complet formular ce transmite informatii catre o pagina separata a unui site:
(Acest formular contine doua fisiere "formular2.php respectiv date.php" ce trebuie salvate impreuna intr-un singur folder)

Cod "formular2.php"



Cod "date.php"


Banner 300x250

ntroducere PHP

Instructiunea for phpBucla FOR este o instructiune repetitiva cu un numar cunoscut de pasi.
Instructiunea for executa codul din corpul sau de atatea ori cat este specificat.

Structura instructiunii for este urmatoarea:
for(initializare; conditie; indecrementare){corpul for}.
Acum sa luam fiecare parametru din structura for pentru a-l explica:
   • Parametrul "initializare": aici vom initializa o variabila atribuindu-i in acelasi timp si o valoare. Variabila are intotdeauna numele "i" si poarta numele de contor "$i=1;". Bucla for va porni de la valoarea variabilei contor incrementand-o sau decrementand-o pana cand aceasta va fi egala cu valoarea specificata in parametrul conditiei.
Pentru a afla mai multe despre incrementare / decrementare apasa click aici!

   • Parametrul "conditie": in acest parametru vom initializa o a doua variabila pe care va trebui sa o comparam cu variabila contor. Compararea se va face cu ajutorul operatorilor de comparatie (<; >; <=; >=).

   • Parametrul "indecrementare": va contine variabila contor care va fi incrementata sau decrementata cu ajutorul operatorilor (++; --).

EXEMPLU:

<?php

$a = 3;

for($i = 1; $i <= $a; $i++){

echo"Acest text se va afisa de 3 ori!", '<br />';

$a++;

}

?>

Acest text se va afisade 3 ori!
Acest text se va afisade 3 ori!
Acest text se va afisade 3 ori!


Explicatia exemplului este urmatoarea:
Am declarat o variabila "$a=3" a carei valoare va fi comparata cu cea a variabilei contor.
Am initializat functia for cu trei parametrii:
- primul parametru contine variabila contor "$i=1" (atribuindu-i valoarea 1 inseamna ca functia for va porni de la 1).
- in al doilea parametru am comparat valoarea variabilei contor "$i" cu cea a variabilei "$a";
- in ultimul parametru am incrementat variabila contor "$i" ca la fiecare repetare a buclei for aceasta sa se adune cu valoarea 1.
In corpul functiei for am scris un text ce se va afisa de fiecare data cand se repeta functia (in cazul exemplului de mai sus se va repeta de trei ori).

La fiecare repetare functia for va verifica cat este valoarea contorului tracand apoi la parametrul "conditie" unde va stabili prin compararea variabilei contor cu o alta variabila daca acesta este adevarat. in cazul in care parametrul "conditie" se dovedeste a fi adevarat functia for va trece la ultimul parametru unde va incrementa variabila contor.

In cazul exemplului de mai sus:
Valoare de pornire a buclei este 1 "$i=1". Valoarea contorului este mai mica ca valoarea variabilei "$a" (1<=3) si se va incrementa contorul i cu 1 valoarea acestuia devenind 1+1=2. Acum se va executa corpul buclei si apoi functia for va verifica din nou parametrul "conditie" pentru a stabili daca acesta este inca adevarat. Noua valoare a contorului este 2 ceea ce inseamna ca parametrul "conditie" este inca adevarat (2<=3), prin urmare se va incrementa din nou variabila contor cu 1 valoarea acestuia devenind 2+1=3.
La un moment dat valoarea contorului "$i" va fi egala cu 4 si parametrul conditie nu va mai fi adevarat deoarece 4 este mai mare decat valoarea variabilei a "$a=3". In acest caz bucla for se va incheia.

Instructiunea while loopWhile Loop este o bucla repetitiva care ruleaza din nou si din nou instructiunile din corpul acesteia cat timp este verificata o expresie.

Structura buclei while este urmatoarea:
while(expresie){corpul while}
Intre parantezele rotunde "()" se introduce o expresie care va fi verificata de mai multe ori. Atata timp cat expresia va fi adevarata se va executa corpul while in mod repetat. Retine faptul ca daca expresia va fi mereu adevarata, atunci corpul while se va executa la infint.
Un exemplu de expresie ar fi "$a < 5". Cat timp valoarea variabilei a va fi mai mica decat 5 se va executa in mod repetat corpul while. Va trebui sa incrementam sau sa decrementam valoarea lui a la fiecare verificare a expresiei pentru a nu se afisa corpul while la infinit.
Despre operatorii de incrementare "++" respectiv decrementare "--" am vorbit in lectia 5. Apasa click aici pentru a-ti reaminti cum se folosesc acesti operatori.

Intre acolade "{}" vom introduce instructiunile pe care dorim sa le afisam. Incrementarea variabilei se va face in corpul while.

EXEMPLU:

<?php

$a = 1;

while($a <= 5){

echo"Acest text se va afisa de 5 ori!", '<br />';

$a++;

}

?>

Acest text se va afisade 5 ori!
Acest text se va afisade 5 ori!
Acest text se va afisade 5 ori!
Acest text se va afisade 5 ori!
Acest text se va afisade 5 ori!


Explicatia exemplului este urmatoarea:
Am declarat variabila a si i-am atribuit valoarea 1.
Am initializat instructiunea while si intre parantezele rotunde am introdus expresia "$a <= 5". Expresia se citeste in felul urmator: cat timp valoarea variabilei a este mai mica sau egala cu 5 sa se afiseze corpul instructiunii while.
In corpul instructiunii while am afisat mesaj (echo "Acest text se va afisa de 5 ori!") si am incrementat cu ajutorul operatorului "++" valoarea variabilei a "a++". Incrementand variabila a am facut ca la fiecare repetare a lui while valoarea acesteia sa se adune cu 1.

Rularea functiei din exemplu a fost facuta dupa cum urmeaza:
Initial valoarea variabilei a a fost egala cu 1. La prima parcurgere a instructiunii while expresia din interiorul parantezelor rotunde a fost adevarata deoarece 1 este mai mic decat 5 si astfel s-a rulat corpul instructiunii while. In corpul while s-a afisat mesajul respectiv pe pagina, dar pentru ca am incrementat variabila a "$a++" valoarea acesteia s-a adunat cu 1. Acum valoarea variabilei este 1+1 care este egal cu 2. La a doua parcurgere a instructiunii while, expresia din interiorul parantezelor a fost din nou adevarat deoarece noua valoare a variabilei a a fost mai mica decat 5 (2<5) ceea ce inseamna ca s-a rulat din nou corpul while si s-a afisat a doua oara mesajul incrementanduse variabila a cu 1 si obtinanduse valoarea 3.
Aceasta repetitie va continua pana in momentul in care valoarea variabilei a va fi egala cu 6. Cand valoarea variabilei a va fi egala cu 6 expresia dintre parantezele rotunde nu va mai fi adevarata deoarece 6 nu este nici mai mic si nici egal cu 5 si asftel bucla while se va opri.

In lectia urmatoare vom vorbi despre instructiunea "For".


 

 

Acest site foloseste cookie-uri.

Folosim cookie-uri pentru a vă asigura că aveti cea mai bună experiență pe acest site.

I understand
DESPRE NOI
World-IT este un site care are ca domeniu Tehnologia Informatiei(IT).
Acest site are ca prim scop introducerea persoanelor in acest domeniu. Mai multe informatii aici.

URMARESTE-NE 
Logo Facebook8  Logo Youtube12  Logo twitter