Sunteți pe pagina 1din 37

Notiuni de baza CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de

exemplu formatare text, background sau aranjare in pagina, etc.). Beneficiile sintaxei CSS sunt:

formatarea este introdusa intr-un singur loc pentru tot documentul editarea rapida a etichetelor datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia Sintaxa CSS este structurata pe trei nivele: nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline nivelul 2 este informatia introdusa in blocul HEAD, tip embedded nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3. Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere. Extensia acestor fisiere este .css. Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii: <link rel="stylesheet" type="text/css" href="fisier_css.css"> Atributele indica urmatoarele: rel - fisierul este tip styleshhet type - tip text ce contine comenzi CSS href - fisierul sau adresa fisierului CSS. Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete <head> si </head> conform sintaxei: <style type="text/css"> <!-... comenzi CSS ... --> </style> Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style. Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa: <eticheta style="codul CSS dorit"> ...textul sau obiectul asupra caruia este aplicat codul CSS... </eticheta> Este permisa folosirea comentariilor in CSS ca si in HTML: /* Acesta este un comentariu in CSS */ 1

Elementele id si class id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _. Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern. Exemplu: folosirea elementului id <html> <head> <title>Exemplu 2_1</title> <style type="text/css"> <!-- #albastru{color: #0000FF;}--> </style> </head> <body> <p id="albastru">Text albastru introdus prin id "albastru"</p> Text negru </body> </html> Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern. Exemplu: folosirea elementului class <html> <head> <title>Exemplu 2_2</title> <style type="text/css"> <!-- .rosu{color: #FF0000;}--> </style> </head> <body> <p class="rosu">Primul text rosu introdus prin class "rosu"</p> Text negru <p class="rosu">Al doilea text rosu introdus prin class "rosu"</p> </body> </html> Stiluri pentru fonturi Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite. In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.

3.1 font-family font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace). In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna. Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea <html> <head> <title>Exemplu 3_1</title> <style type="text/css"> <!-- p{font-family: font1,font2,arial;}--> </style> </head> <body> <p>Text scris cu cu fontul Arial</p> Text negru <p>Text scris cu cu fontul Arial</p> </body> </html> Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML <html> <head> <title>Exemplu 3_2</title> </head> <body> <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p> Text negru <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p> </body> </html> 3.2 font-size Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>. Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli <html> <head> <title>Exemplu 3_3</title> <style type="text/css"> <!-- p{font-size: 20px;}--> </style> </head> <body> <p>Text scris cu font de 20px</p> Text negru 3

</body> </html> Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt. Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.

CSS keyword

numar FONT size

xx-small

x-small

small

medium

large

x-large

xx-large

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus. Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite. Ca verificare folositi acelasi exemplu schimband 20px cu 200%. 3.3 font-style font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic. 4

<style type="text/css"> <!-- p{font-style: italic;}--> </style> 3.4 font-weight font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER. <style type="text/css"> <!-- p{font-weight: 700;}--> </style> 3.4 Compunerea stilurilor Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula). Exemplu: folosirea unui stil compus aplicat etichetei p <html> <head> <title>Exemplu 3_4</title> <style type="text/css"> <!-p{ font-family: arial; font-size: 20px; font-style: italic; font-weight: 800;} --> </style> </head> <body> <p>Text scris cu Arial, 20px, italic, 800</p> Text negru </body> </html> Stiluri pentru text 4.1 Aliniere text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML. In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p: <style type="text/css"> <!-p{text-align: center;} --> </style> Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului <html> <head> 5

<title>Exemplu 4_1</title> <style type="text/css"> <!-p{text-align: center;} --> </style> </head> <body> <div class="pecentru"><img src="poza.jpg"></div> Text neformatat <div class="pecentru">Text formatat</div> </body> </html> vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom. In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului <style type="text/css"> <!-.sus{vertical-align: top;} --> </style> float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii. Exemplu: cream clasa auto si o aplicam inaginii <html> <head> <title>Exemplu 4_2</title> <style type="text/css"> <!-.auto{float: left;} --> </style> </head> <body> <img src="poza.jpg" class="auto"> Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto". </body> </html> 4.2 Tabulare text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px). In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior <style type="text/css"> <!-p{text-indent: 10px;} --> </style> 6

4.3 Decorare text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none. Exemplu: stilul asociat etichetei p este prezentat in HEAD <html> <head> <title>Exemplu 4_3</title> <style type="text/css"> <!-p{text-decoration: underline;} --> </style> </head> <body> Text normal <p>Text subliniat</p> </body> </html> 4.4 Culoare color defineste culoarea textului dintr-o zona sau intraga pagina. Exemplu: stilul asociat etichetei p este prezentat in HEAD <html> <head> <title>Exemplu 4_4</title> <style type="text/css"> <!-p{color: #0000FF;} --> </style> </head> <body> Text normal <p>Text albastru</p> </body> </html> 4.5 Stiluri pentru legaturi In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY. Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS. Exemplu <html> <head> <title>Exemplu 4_5</title> <style type="text/css"> <!-a{font-family: arial; font-size: 20px;} 7

a:link {color: #0000FF;} a:visited {color: #00FF00;} a:active {color: #FF0000;} a:hover {color: #000000;} --> </style> </head> <body> Text normal <a href="exemplu4_4.html">link</a> catre exemplul 4_4 </body> </html> a defineste stilul general pentru legatura a:link defineste stilul legaturii nevizitate a:visited defineste stilul legaturii vizitate a:active defineste stilul legaturii active (nu prea se foloseste) a:hover defineste stilul cand mouse-ul este deasupra legaturii Stiluri pentru background Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text. 5.1 Culoare de fond background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML. Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p <html> <head> <title>Exemplu 5_1</title> <style type="text/css"> <!-body {background-color: #FFFF00;} p {background-color: #FF0000;} --> </style> </head> <body> Text normal <p>Text cu background rosu</p> </body> </html> 5.2 Imagine de fond Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului. background-image asociaza o imagine ca fundal unui obiect. Exemplu: definim un stil pentru eticheta p <html> <head> <title>Exemplu 5_2</title> 8

<style type="text/css"> <!-p {background-image: url(poza.jpg);} --> </style> </head> <body> Text normal <p>Text cu imagine de fond</p> </body> </html> 5.3 Repetare Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala. Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile: repeat-x imaginea se repeta pe orizontala repeat-y imaginea se repeta pe verticala no-repeat imaginea nu se repeta Exemplu: imaginea nu se repeta sub eticheta p <html> <head> <title>Exemplu 5_3</title> <style type="text/css"> <!-p {background-image: url(poza.jpg); background-repeat: no-repeat;} --> </style> </head> <body> Text normal <p>Text cu imagine de fond</p> </body> </html> 5.4 Pozitia In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position. Sunt acceptate doua valori: in prima pozitie poate fi: top, center, bottom, percentage sau pixel in a doua pozitie poate fi: right, center, left, percentage sau pixel Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare <html> <head> <title>Exemplu 5_4</title> <style type="text/css"> <!-body {background-image: url(poza.jpg); 9

background-repeat: no-repeat; background-position: top center;} --> </style> </head> <body> Text normal </body> </html> Stiluri pentru liste 6.1 list-style-type Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li. Sintaxa este: <style type="text/css"> <!-li {list-style-type: valoare;} --> </style> valoarea poate fi:

valoare

disc

disc

disc

circle

cerc

square

patrat

decimal

numere intregi

lower-roman

numere romane, caractere mici (i, ii, iii, iv)

10

upper-roman

numere romane, caractere mari (I, II, III, IV)

upper-alpha

litere mari (A, B, C, D)

lower-alpha

litere mici (a, b, c, d)

none

nimic

Exemplu: lista ordonata folosind marcaje cu litere mici <html> <head> <title>Exemplu 6_1</title> <style type="text/css"> <!-li {list-style-type: lower-alpha;} --> </style> </head> <body> Necesar materiale: <ol> <li>caramida</li> <li>ciment</li> <li>ipsos</li> </ol> </body> </html> 6.2 list-style-image In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url(). Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif <html> <head> <title>Exemplu 6_2</title> <style type="text/css"> <!-li {list-style-image: url(punct.gif);} --> </style> </head> 11

<body> Necesar materiale: <ul> <li>caramida</li> <li>ciment</li> <li>ipsos</li> </ul> </body> </html> Chenare si margini Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

marginea (margin) este spatiul exterior chenarului pana la celelalte elemente chenarul (border) este o bordura care inconjoara elementul completarea (padding) stabileste distanta dintre continut si chenar continutul include informatia utila (text, tabele, imagini, formulare, etc.) Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate in continuare. 7.1 width si height Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS. Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii <html> <head> <title>Exemplu 7_1</title> <style type="text/css"> <!-img {width: 50px; height: 100px;} --> </style> </head> <body> <img src="margini.gif"> </body> </html>

12

7.2 padding si margin padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right. margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right. Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm (centimetri). Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px fata de latura de sus <html> <head> <title>Exemplu 7_2</title> <style type="text/css"> <!-img {margin-left: 100px; margin-top: 25px;} --> </style> </head> <body> <img src="margini.gif"> </body> </html> 7.3 border Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram pentru border cel putin width si style. border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt (puncte), cm (centimetri) sau in (inci). border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset. border-color stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau in cuvinte. Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-color <html> <head> <title>Exemplu 7_3</title> <style type="text/css"> <!-.clasa1 {border-width: 2px; border-style: dotted; border-color: red;} .clasa2 {border-width: 3px; border-style: dashed; border-color: blue;} .clasa3 {border-width: 2px; border-style: solid; border-color: green;} .clasa4 {border-width: 3px; border-style: double; border-color: black;} 13

.clasa5 {border-width: 2px; border-style: groove; border-color: silver;} .clasa6 {border-width: 3px; border-style: ridge; border-color: lime;} .clasa7 {border-width: 2px; border-style: inset; border-color: yellow;} .clasa8 {border-width: 3px; border-style: outset; border-color: aqua;} .clasa9 {border-width: 2px; border-style: hidden; border-color: olive;} --> </style> </head> <body> <div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br> <div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br> <div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br> <div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br> <div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br> <div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br> <div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br> <div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br> <div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div> </body> </html> Pozitionare Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt. Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri). 8.1 Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat pozitionarea absoluta etichetei h4 <html> <head> <title>Exemplu 8_1</title> </head> <body> <h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4> <h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4> </body> </html> 8.2 Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top. Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ <html> <head> <title>Exemplu 8_2</title> 14

<style type="text/css"> <!-.absolut {position: absolute; left: 200px; top: 150px;} .relativ {position: relative; left: 50px; top: 50px;} --> </style> </head> <body> <div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div> Text <div class="relativ">Pozitionare relativa, dupa "Text"</div> </body> </html> 8.3 Pozitionarea tridimensionala Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra. Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ <html> <head> <title>Exemplu 8_3</title> <style type="text/css"> <!-.element1 {position: absolute; left: 30px; top: 30px; z-index: 3} .element2 {position: absolute; left: 50px; top: 50px; z-index: 2} .element3 {position: absolute; left: 70px; top: 70px; z-index: 1} --> </style> </head> <body> <div class="element1"><img src="poza.jpg"></div> <div class="element2"><img src="poza.jpg"></div> <div class="element3"><img src="poza.jpg"></div> </body> </html>

Tutoriale Photoshop Flash Grafica 3D HTML - http://www.etutoriale.ro

Crearea formularelor HTML

http://www.etutoriale.ro/articles/127/1/Crearea-formularelor-HTML Seimour Birkoff www.farsoft.far-php.ro - portofoliu De Seimour Birkoff Publicat la 18.03.2006 Majoritatea programelor PHP folosesc formulare HTML pentru a prelucra datele de la utilizator si pentru a afisa rezultatele calculelor. In cadrul acestui articol, va explic 15

cum sa creati formulare HTML care permit paginilor dumneavoastra sa interactioneze cu utilizatorul.

Crearea formularelor HTML


Majoritatea programelor PHP folosesc formulare HTML pentru a prelucra datele de la utilizator si pentru a afisa rezultatele calculelor. In cadrul acestui articol, va explic cum sa creati formulare HTML care permit paginilor dumneavoastra sa interactioneze cu utilizatorul. Proiectarea unui formular - alegeti controale care sunt adecvate pentru categoria de date pe care le aduna si pentru interactiunile pe care le furnizeaza. - Etichetati cu claritate fiecare control, astfel incat utilizatorul sa inteleaga functia acestuia. - In masura posibilitatilor, aliniati etichetele si marginile din stanga ale controalelor. Structura unui formular bine proiectat este asemanatoare cu aceea a unei pagini de ziar, fiind compusa dintr-o serie de coloane in cadrul carora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul sau. Puteti obtine acest tip de structura folosind tabele HTML sau eticheta <BR>. - Grupati controalele corelate si separati fiecare asemenea grup de celelalte grupuri prin incorporarea de spatii albe in structura dvs. - Secventa de controale din formular trebuie sa fie asemanatoare cu ordinea in care le va manipula utilizatorul. In caz contrar, utilizatorul va fi obligat sa piarda timp navigand de la un control la altul. Este important sa retineti ca acestea sunt doar indrumari, nu reguli. Nefiind reguli, puteti opta pentru incalcarea lor, din cand in cand. Pentru a determina daca o varianta de proiectare este superioara alteia, este util sa cereti parerea unui utilizator. Daca nici utilizatorul nu va poate fi de ajutor, obtineti asistenta unui alt programator. In cel mai rau caz, straduiti-va sa va puneti dvs. insiva in rolul unui utilizator al formularului. Intrebati pe utilizator sau pe inlocuitorul acestuia daca formularul este clar, usor de utilizat si eficient. In caz afirmativ, este momentul sa treceti mai departe si sa creati efectiv formularul HTML. Crearea unui formular HTML Daca procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura dvs. este mai direct. Mai intai, creati schita HTML elementara, care va contine controalele din formular. Apoi, incorporati controalele in structura; in particular, un formular HTML trebuie sa includa un buton de expediere pe care utilizatorul executa clic pentru a trimite serverului datele din formular. Deoarece o singura pagina HTML poate contine mai multe formulare, puteti repeta de mai multe ori etapele intermediare ale acestui proces. Crearea structurii HTML Structura HTML pe care o folositi pentru a include un formular nu este deloc diferita, de fapt, de cea folosita pentru includerea unei pagini HTML obisnuite. De exemplu, iata o structura caracteristica paginilor HTML: <HTML> <HEAD> <TITLE>Titlul paginii este introdus aici</TITLE> </HEAD> <BODY> Continutul paginii sau al formularului este introdus aici </BODY> </HTML> In interiorul corpului unei pagini HTML care contine un formular puteti folosi orice eticheta HTML obisnuita. Pentru a descrie formularul in sine, folositi eticheta FORM, care are urmatoarea forma: <FORM METHOD="metoda" ACTION="url"> 16

Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificati intotdeauna valoarea POST. Atributul ACTION specifica adresa URL a scriptului PHP care prelucreaza datele adunate prin intermediul formularului. Adresa URL poate fi o adresa completa (de genul http://www.pagina_mea.ro/prelucrare_formular.php), respectiv o adresa partiala, care specifica o locatie relativa la locatia paginii curente (de genul prelucrare_formular.php). Intre eticheta <FORM> si eticheta sa </FORM> corespunzatoare, plasati controalele formularului. Ca incepator, este mai bine sa folositi in mod consecvent metoda POST, deoarece alegerea intre metodele GET si POST este destul de complicata. Ca regula empirica, multi programatori folosesc GET pentru formulare care executa o cautare sau o interogare, respectiv POST pentru formulare care actualizeaza o baze de date sau un fisier. Doua dezavantaje ale metodei GET sunt acelea ca impune o limita asupra cantitatii de date care pot fi trimise scriptului de prelucrare si ca transfera datele prin atasarea sirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de catre utilizator. Un avantaj al metodei GET este acela ca utilizatorii pot insera semne de carte in rezultatele unei interogari sau al unei cautari care foloseste metoda GET, dar nu pot executa aceeasi operatie in cazul unei interogari sau al unei cautari care foloseste metoda POST. Incorporarea controalelor Aceasta sectiune descrie doua controale elementare pe care le veti folosi frecvent: caseta cu text si butonul de expediere. O caseta cu text permite utilizatorului sa tasteze informatii care pot fi apoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obtine date precum numele utilizatorului, adresa sa postala sau adresa de e-mail. Pentru a crea o caseta cu text, scrieti o eticheta HTML care are urmatoarea forma elementara: <INPUT TYPE="TEXT" NAME="text"> Atributul NAME atribuie casetei cu text un nume, astfel incat continutul sau sa fie accesibil unui script PHP. Numele pe care il atribuiti unui control trebuie sa fie unic in cadrul formularului si trebuie sa respecte regulile pentru denumirea variabilelor PHP, cu exceptia faptului ca numele nu trebuie sa inceapa cu simbolul $. Cu alte cuvinte, numele trebuie sa inceapa cu o litera si nu trebuie sa contina alte caractere in afara literelor, a cifrelor si a caracterelor de subliniere; in particular, numele nu trebuie sa contina spatii. HTML nu are o eticheta </INPUT> deci nu incercati sa combinati o eticheta <INPUT> cu o asemenea eticheta. Un buton de expediere permite utilizatorului sa trimita serverului continutul unui formular. Fiecare formular HTML trebuie sa aiba un buton de expediere. Pentru a crea un buton de expediere, scrieti o eticheta HTML care are urmatoarea forma elementara: <INPUT TYPE="SUBMIT" VALUE="text"> Atributul VALUE specifica textul care trebuie sa apara pe suprafata butonului de expediere. In continuare este un exemplu de formular care include casete cu text ce preiau numele si adresa de e-mail a utilizatorului: EXEMPLU <HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale REZULTAT

Numele si adresa de e-mail ale utilizatorului


Nume:

Adresa de e-mail:

17

utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML>

Trimite datele

Observati utilizarea etichetelor <BR> pentru alinierea etichetelor si a controalelor, precum si numele atribuite controalelor de tip caseta cu text. Cand utilizatorul executa clic pe butonul de expediere, datele introduse de utilizator sunt trimise scriptului prelucrare_formular.php (in acest caz este doar o demonstratie si apasarea butonului va afisa aceasta pagina). Lucrul cu formulare multiple In interiorul corpului unei pagini HTML se pot include mai multe formulare. Daca procedati astfel, nu uitati sa inserati o eticheta </FORM> anterior etichetei <FORM> a urmatorului formular. Browserul utilizatorului va face indigestie daca suprapuneti formularele intr-o pagina. Exemplu <HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> <FORM METHOD="POST" ACTION="prelucrare_formular2.php"> <H3>Numerele de telefon si fax ale utilizatorului</H3> Rezultat

Numele si adresa de e-mail ale utilizatorului


Nume:

Adresa de e-mail:

Trimite datele

Numerele de telefon si fax ale utilizatorului


Numar de telefon:

FAX:

Trimite datele

18

<BR>Numar de telefon: <BR><INPUT TYPE="TEXT" NAME="telefon"> <BR>FAX: <BR><INPUT TYPE="TEXT" NAME="fax"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML> Cand utilizatorul executa clic pe butonul de expediere, datele incluse in campurile formularului care contine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeste fie un nume si o adresa de e-mail, fie numerele de telefon si fax, nu continutul tuturor celor patru campuri. Vizualizarea campurilor unui formular Exemplu <?php // afisarea datelor introduse in formularele anterioare . phpinfo() ?> In cazul in care pe server este restrictionata aceasta comanda (ca si in cazul serverului acesta, din motive de securitate) mai jos aveti un alt script cu care puteti vedea variabilele introduse de catre utilizator: Exemplu <?php /* acest script este doar pentru exemplificare, nu este complet deci este posibil sa contina erori */ // afisarea datelor introduse in formularele anterioare $numele_utilizatorului = $_POST['numele_utilizatorului']; $adresa_email = $_POST['adresa_email']; $telefon = $_POST['telefon']; $fax = $_POST['fax']; // daca nu a fost completat nici un formular afiseaza: if (($numele_utilizatorului == "") or ($adresa_email == "") or ($telefon == "") or ($fax == "")) { echo "Pentru a se afisa ceva aici completati oricare formular de pe aceasta pagina"; echo "<br><br>"; } echo $numele_utilizatorului; 19 Rezultat Pentru a se afisa ceva aici completati oricare formular de pe aceasta pagina Rezultat

echo "<br>"; echo $adresa_email; echo "<br>"; echo $telefon; echo "<br>"; echo $fax; ?> Crearea casetelor cu text personalizate In sectiunea precedenta am prezentat sintaxa elementara pentru crearea unei casete cu text. Cu toate acestea, HTML furnizeaza numeroase atribute suplimentare care va permit sa modificati aspectul si comportamentul unei casete cu text. Iata sintaxa completa pentru crearea unei casete cu text: <INPUT TYPE="TEXT" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text"> Atributele TYPE si NAME sunt obligatorii, celelalte atribute sunt optionale. Atributul SIZE, care este dat sub forma unui numar de caractere, stabileste dimensiunea vizibila a casetei cu text, atributul MAXLENGTH specifica numarul maxim de caractere pe care utilizatorul are permisiunea de a le tasta. Valoarea atributului MAXLENGTH o poate depasi pe aceea a atributului SIZE, in care caz continutul controlului defileaza spre dreapta atunci cand utilizatorul a introdus SIZE caractere. Atributul VALUE constituie o valoare care este afisata initial in caseta cu text. Crearea de suprafete cu text Ca o caseta cu text, o suprafata cu text permite unui utilizator sa introduca text. Cu toate acestea, o suprafata cu text poate permite utilizatorului sa introduca mai multe linii de text, in timp ce o caseta cu text permite utilizatorului sa introduca o singura linie. Iata sintaxa pentru crearea unei suprafete cu text: <TEXTAREA NAME="text" ROWS="numar" COLS="numar" WRAP="wrap"> Atributele NAME si ROWS sunt obligatorii, atributele COLS si WRAP sunt optionale. Atributul ROWS specifica numarul liniilor de text vizibile in suprafata cu text; deoarece suprafata de text defileaza dupa ce a fost umpluta, utilizatorul poate introduce linii suplimentare. Atributul COLS specifica numarul coloanelor de text vizibile in suprafata cu text; deoarece suprafata cu text se deruleaza sau se infasoara dupa ce s-a umplut, utilizatorul poate introduce linii mai lungi. Atributul WRAP specifica maniera de infasurare a textului in interiorul suprafetei cu text. Atributul WRAP poate avea urmatoarele valori: - off - Infasurarea cuvintelor la sfarsitul liniei de text este dezactivata; utilizatorul poate introduce caractere de sfarsit de linie pentru a forta infasurarea liniilor - virtual - Liniile par infasurate, dar caracteristica de infasurare a liniilor nu este trimisa la server - physical - Infasurarea cuvintelor la sfarsitul liniei este activata - soft - Identic cu virtual - hard - Identic cu physical O eticheta <TEXTAREA> trebuie combinata cu o eticheta </TEXTAREA>. Orice text care apare intre etichete va fi prezentat drept continut initial al controlului de tip suprafata cu text. Crearea casetelor cu parola Daca o aplicatie impune unui utilizator sa introduca o parola, puteti crea o caseta cu text in acest scop. Totusi, cand utilizatorul introduce parola, orice persoana aflata in apropiere poate vizualiza parola, situatie care duce la o posibila bresa de securitate. In loc de a se folosi o caseta cu text pentru introducerea de informatii confidentiale, trebuie sa folositi o caseta cu parola. Pentru a crea o caseta cu parola, folositi aceeasi sintaxa ca si cea utilizata pentru crearea unei casete cu text, cu exceptia faptului ca specificati PASSWORD (parola) in loc de TEXT ca valoare a atributului TYPE: <INPUT TYPE="PASSWORD" NAME="text" SIZE="numar" MAXLENGTH="numar" 20

VALUE="text"> Atributele unei casete cu parola au aceeasi semnificatie ca si acelea ale unei casete cu text. Crearea casetelor de validare Pentru date care pot avea numai una din doua valori, cum ar fi "pornit" sau "oprit", caseta de validare este controlul ideal. De exemplu, caseta de validare este un control adecvat pentru a permite utilizatorului sa opteze pentru livrarea rapida a unui colet. In cazul in care caseta de validare corespunzatoare este valida, coletul va fi livrat mai rapid; in caz contrar, coletul se va deplasa cu mijloacele obisnuite. Pentru a crea o caseta de validare, folositi urmatoarea sintaxa: <INPUT TYPE="CHECKBOX" NAME="text" CHECKED VALUE="text"> Atributul TYPE este obligatoriu; atributele NAME, CHECKED si VALUE sunt optionale. Daca atributul CHEKED apare, caseta de validare va fi selectata in mod prestabilit; in caz contrar, caseta de validare nu este selectata initial. Atributul VALUE specifica valoarea care este trimisa serverului in cazul in care caseta de validare este selectata; daca atributul nu este specificat, se va trimite valoarea on (activat). Crearea butoanelor radio Ca si casetele de validare, butoanele radio pot avea numai una din doua valori. Cu toate acestea, butoanele radio sunt organizate in grupuri, iar la un moment dat poate fi activat un singur buton radio din cadrul unui grup; toate celelalte trebuie sa fie dezactivate. (se aseamana ca la un chestionar grila cu mai multe raspunsuri, pe care trebuie sa il alegeti pe cel corect acelasi lucru se intampla si cu un grup de butoane radio - la un moment dat nu poate fi activ decat unul). De exemplu, puteti folosi un set de trei butoane radio pentru a permite utilizatorului sa specifice tipul de ambalaj pentru cadou: fara ambalaj, cu ambalaj simplu sau sofisticat. Numai unul dintre cele trei butoane radio poate fi activat; la un loc, setul de butoane radio ofera utilizatorului o tripla optiune. Pentru a crea un buton radio, sintaxa este urmatoarea: <INPUT TYPE="RADIO" NAME="text" CHECKED VALUE="text"> Retineti ca aceasta este aceeasi sintaxa folosita pentru crearea unei casete de validare, cu deosebirea ca atributul TYPE are valoarea RADIO in locul valorii CHECKBOX. Atributele unui buton radio au aceeasi semnificatie ca si acelea ale unei casete de validare. Totusi, atributul NAME este obligatoriu pentru butoanele radio, chiar daca este optional pentru casetele de validare. Toti membrii unui set de casete de validare prezinta aceeasi valoare a atributului NAME. Crearea de selectii O selectie este un meniu care defileaza, de unde utilizatorul poate alege una sau mai multe optiuni. De exemplu, intr-o selectie pot fi enumerate garniturile pentru pizza, astfel incat un utilizator sa poata selecta orice combinatie de garnituri pe care o doreste. Pentru a crea o selectie, folositi urmatoarea sintaxa: <SELECT NAME="text" MULTIPLE SIZE="numar">etichetele OPTION se insereaza aici</SELECT> Eticheta <SELECT> este folosita in combinatie cu eticheta </SELECT>. Intre cele doua etichete este introdusa o serie de etichete OPTION. Intr-o eticheta SELECT, numai atributul NAME este obligatoriu. Atributul MULTIPLE arata ca utilizatorul poate alege mai multe optiuni mentinand apasata tasta CTRL si executand clic pe aceasta. In absenta atributului MULTIPLE, utilizatorul poate selecta o singura optiune. Daca specificati atributul MULTIPLE, trebuie sa specificati si un atribut NAME, care atribuie un nume de tablou ca nume al controlului. De exemplu, un control de tip selectie care permite utilizatorului sa aleaga mai multe garnituri pentru desert trebuie denumit folosind sintaxa garnitura[], nu garnitura. Comportarea unei selectii care permite o singura optiune este echivalenta cu aceea a unui set de butoane radio, dar aspectul unei selectii este diferit de acela al unui set de butoane radio. Atributul SIZE specifica numarul optiunilor vizibile. Prin utilizarea unui buton de derulare in jos sau a unei bare de defilare, utilizatorul poate manipula selectia pentru a obtine accesul la restul optiunilor si a alege dintre acestea. Asa cum am spus, o selectie este asociata cu una sau mai multe optiuni. Pentru a crea o optiune care 21

urmeaza a fi utilizata in cadrul unei selectii, folositi urmatoarea sintaxa: <OPTION SELECTED VALUE="text">continutul optiunii este inserat aici</OPTION> Eticheta <OPTION> este combinata cu o eticheta </OPTION>. Textul dintre aceste etichete este cunoscut sub numele de continut al optiunii. Continutul optiunii apare in controlul SELECT. Multi programatori HTML omit eticheta </OPTION>, caz in care textul optiunii se extinde pana la urmatoarea eticheta <OPTION> sau </SELECT>. Totusi nu este recomandat din motive de compatibilitate intre browsere. Ambele atribute ale etichetei OPTION sunt optionale. Daca apare atributul VALUE, valoarea sa este trimisa serverului atunci cand este selectata optiunea asociata; in caz contrar, continutul optiunii este trimis la server. Atributul SELECTED arata ca optiunea corespunzatoare este selectata initial; in caz contrar, optiunea respectiva nu este selectata initial. Crearea campurilor ascunse Uneori este utila crearea asa-numitelor campuri ascunse. Valorile campurilor ascunse sunt trimise la server alaturi de valorile altor controale; cu toate acestea, utilizatorul nu are posibilitatea de a vizualiza sau manipula valorile campurilor ascunse. Campurile ascunse se utilizeaza frecvent in cadrul unei serii de formulare. De exemplu, datele introduse de utilizator in primul formular din serie pot fi necesare in formularele ulterioare. In loc de a determina utilizatorul sa introduca datele in fiecare formular, datele pot fi stocate intr-un camp ascuns, creat si initializat de scriptul care prelucreaza primul formular. Astfel, utilizatorul este scutit de o munca suplimentara si sunt preintampinate eventualele erori, care ar fi putut aparea daca utilizatorul nu ar fi introdus aceleasi date in formularele ulterioare. Sintaxa este: <INPUT TYPE="HIDDEN" NAME="text" VALUE="text"> Numai atributele TYPE si NAME sunt obligatorii; cu toate acestea, controlul este practic inutil in absenta atributului VALUE, a carui valoare este trimisa in mod automat la server in momentul expedierii formularului. Trimiterea unui fisier catre server prin intermediul unui formular Puteti permite utilizatorului sa aleaga un fisier si apoi sa trimita serverului continutul fisierului creand un control de tip fisier, prin intermediul urmatoarei sintaxe: <INPUT TYPE="FILE" NAME="nume" ACCEPT="tip_mime" VALUE="text"> Atributul TYPE este singurul obligatoriu; cu toate acestea, in general, apare si atributul NAME. Atributul VALUE specifica un nume de fisier prestabilit. Atributul ACCEPT specifica formatul continutului fisierului. Pot fi indicate mai multe formate, dar fiecare format trebuie separat de vecinii sai prin intermediul unei virgule. Formatul este specificat folosind un cod MIME (Multipurpose Internet Mail Extensions). Tabelul urmator descrie formatele folosite cel mai frecvent: TIP MIME application/msexcel application/msword application/octetstream application/pdf application/postscript application/ppt application/zip audio/midi audio/x-wav image/gif TIP DE DATE Microsoft Excel Microsoft Word Binara Adobe Acrobat Postscript Microsoft PowerPoint Date comprimate in format ZIP Musical Instrument Digital Interface (MIDI) Windows Audio Format (WAV) Compuserve Graphics Interchange 22 EXTENSII DE FISIER xls doc, dot exe pdf ai, eps, ps ppt zip mid, midi wav gif

image/jpeg image/TIFF text/HTML text/plain text/richtext video/mpeg video/quicktime video/x-msvideo

Format (GIF) Joint Photographics Expert Group (JPEG) jpeg, jpg, jpe Tagged Image Format (TIF) tif, tiff HTML htm, html Text simplu txt Rich Text Format (RTF) rtf Secventa video mpg, mpv, mpe, mpeg Secventa video qt, mov Secventa video avi

Eticheta FROM de delimitare trebuie sa aiba POST ca valoare a atributului sau METHOD. De asemenea, trebuie sa includa un atribut ENCTYPE cu valoarea multipart/form-data. Iata sintaxa pe care trebuie sa o folositi: <FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="url"> Este posibil ca serverul pe care aveti pagina sa nu fie configurat astfel incat sa accepte fiecare tip MIME. In accest caz trebuie sa vorbiti cu administratorul serverului, pentru a putea incarca fisiere pe server. Exemplu de formular Am creat mai jos un exemplu care contine casetele descrise pana acum (mai putin cele cu camp ascuns si cel de incarcare a unui fisier pe server), cu scopul de a intelege mai bine fiecare functie in parte: Exemplu <form name="form1" method="post" action=""> <input type="text" name="textfield">Textfield<br> <br> <textarea name="textarea"></textarea>Textarea<br> <br> <input type="password" name="textfield2">Textfield pentru parole <br> <br> <input type="checkbox" name="checkbox" value="checkbox">Checkbox<br> <br> <input name="checkbox2" type="checkbox" value="checkbox" checked> Checkbox cu valoarea checked<br> <br> <input name="radiobutton" type="radio" value="radiobutton"> Radio buton<br> <br> <select name="select"> <option selected>optiunea 1</option> 23 Rezultat

Textfield

Textarea Textfield pentru parole Checkbox Checkbox cu valoarea checked Radio buton

List / Menu Radio Group1 Radio Group1

<option>optiunea 2</option> <option>alegerea 3</option> </select> List / Menu<br> <br> <p> <label> <input name="RadioGroup1" type="radio" value="radio" checked> Radio</label> Group1<br> <label> <input type="radio" name="RadioGroup1" value="radio"> Radio</label> Group1 </p> </form>

Tutoriale Photoshop Flash Grafica 3D HTML - http://www.etutoriale.ro

Variabile de mediu
http://www.etutoriale.ro/articles/129/1/Variabile-de-mediu Seimour Birkoff www.farsoft.far-php.ro - portofoliu De Seimour Birkoff Publicat la 18.03.2006 Variabilele de mediu sunt folosite pentru stocarea optiunilor si a parametrilor care personalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorile variabilelor de mediu si isi pot ajusta comportamentul in consecinta. De exemplu, calea de cautare a programelor MS-DOS este stocata intr-o variabila de mediu denumita PATH.

Variabile de mediu
Variabilele de mediu sunt folosite pentru stocarea optiunilor si a parametrilor care personalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorile variabilelor de mediu si isi pot ajusta comportamentul in consecinta. De exemplu, calea de cautare a programelor MS-DOS este stocata intr-o variabila de mediu denumita PATH. In general, comenzile sistemelor de operare sunt folosite pentru a configura variabilele de mediu si pentru a stabili valorile acestora. Cu toate acestea, unele aplicatii manipuleaza valorile variabilelor de mediu. Atat serverul Web Apache, cat si serverul de aplicatie PHP folosesc variabile de mediu pentu a prezenta informatii de stare. Unele dintre cele mai importante variabile de mediu folosite de Apache si PHP sunt rezumate in tabelul de mai jos. Numeroase servere Web, altele decat Apache, furnizeaza o parte din aceste variabile de mediu sau chiar pe toate. Multe dintre aceste variabile reflecta caracteristicile cererii HTTP care a solicitat executia PHP. Puteti vizualiza toate variabilele de mediu disponibile pentru 24

programele PHP prin invocarea functiei phpinfo() si vizualizarea datelor de iesire generate de acesta. Variabila de mediu CONTENT_LENGTH CONTENT_TYPE DOCUMENT_ROOT Descriere Lungimea, in octeti, a corpului cererii. Tipul MIME al datelor din corpul cererii. Calea care constituie radacina arborelui catalogului cu documente al serverului Web. GATEWAY_INTERFACE Versiune a protocolului CGI (Common Gateway Interface) folosit de serverul Web. HTTP_ACCEPT Continutul antetului HTTP Accept:. HTTP_ACCEPT_CHARSET Continutul antetului HTTP Accept-Charset:, care specifica seturile de caractere intelese de client. HTTP_ACCEPT_ENCODING Continutul antetului HTTP Accept-Encoding:, care specifica tipurile de continuturi intelese de client. HTTP_ACCEPT_LANGUAGE Continutul antetului HTTP Accept-Language:, care specifica limbajele preferate de client. HTTP_CONNECTION Continutul antetului HTTP Connection:, care indica optiunile solicitate de client. HTTP_HOST Continutul antetului HTTP Host:, care indica numele de gazda, folosit de client la prezentarea cererii. HTTP_REFERER Adresa URL a paginii Web care a trimis browserul clientului la pagina curenta. HTTP_USER_AGENT Continutul antetului HTTP User-Agent, care indica browserului clientul si versiunea acestuia. PATH Calea de executie asociata cu mediul serverului. QUERY_STRING Sirul de interogare, daca exista, care a insotit cererea. REMOTE_ADDR Adresa IP a clientului. REMOTE_HOST Numele de gazda al clientului. REMOTE_PORT Adresa portului clientului de unde a pornit cererea. REQUEST_METHOD Metoda de cerere HTTP folosita; de exemplu, GET, POST, PUT sau HEAD. REQUEST_URI URI folosit pentru accesul la pagina curenta. URI este alcatuit dintr-un URL si un sir optional de interogare. SCRIPT_FILENAME Numele de cale absolut al scriptului curent. SCRIPT_NAME Adresa URL a scriptului curent. SERVER_ADMIN Adresa de e-mail a administratorului serverului Web. SERVER_HOST Numele de gazda asociat serverului Web care prelucreaza cererea. SERVER_PORT Port folosit de serverul Web pentru comunicatii. SERVER_PROTOCOL Numele si versiunea protocolului prin intermediul caruia sa executat cererea. SERVER_SIGNATURE Sirul care identifica versiunea serverului Web si numele de gazda folosit pentru prelucrarea cererii. SERVER_SOFTWARE Sirul care identifica programul server Web si versiunea acestuia. 25

Puteti obtine accesul la variabila de mediu exact asa cum procedati pentru orice alta variabila PHP. Pur si simplu inserati inaintea numelui variabilei de mediu un simbol al dolarului ($), astfel incat numele sa se conformeze sintaxei PHP. De exemplu, urmatoarea instructiune echo trimite browserului adresa IP a clientului: echo "Adresa IP este $REMOTE_ADDR."; Puteti folosi aceste informatii pentru a modifica comportamentul unui script in functie de valoarea respectiva. De exemplu, puteti folosi acest procedeu pentru a exclude cererile care provin din afara unui anumit set de adrese IP, cum ar fi cele care reprezinta o anumita retea. Astfel, aplicatia dvs. poate deveni mai rezistenta la atacurile hackerilor care incearca sa creeze o bresa in sistemul de securitate (Daca de exemplu creati o pagina de administrare puteti sa limitati accesul doar la IP-ul calculatorului dvs. Astfel de pe alt calculator nu se poate intra pe pagina restrictionata - bineinteles, trebuie sa aveti IP static). O alta utilizare importanta a variabilelor de mediu consta in ocolirea limitarilor impuse de un anumit browser. Variabila de mediu HTTP_USER_AGENT identifica browserul client si versiunea acestuia. Un script PHP poate verifica valoarea acestei variabile de mediu si trimite o anumita pagina pentru browserul respectiv (o pagina daca foloseste Internet Explorer si o alta pagina daca foloseste Netscape de exemplu)

Tutoriale Photoshop Flash Grafica 3D HTML - http://www.etutoriale.ro

Alte notiuni referitoare la expedierea unui formular


http://www.etutoriale.ro/articles/128/1/Alte-notiuni-referitoare-la-expedierea-unuiformular Seimour Birkoff www.farsoft.far-php.ro - portofoliu De Seimour Birkoff Publicat la 18.03.2006 In articolul precedent, am prezentat modul de creare a formularelor HTML care pot trimite date unui server. In continuare o sa va spun mai multe despre procesul de expediere a formularelor.

Alte notiuni referitoare la expedierea unui formular

In articolul precedent, am prezentat modul de creare a formularelor HTML care pot trimite date unui server. In continuare o sa va spun mai multe despre procesul de expediere a formularelor. Inlocuirea unui buton cu o imagine Aspectul unui buton de expediere este monoton si obisnuit. Daca aspectul paginii este important, puteti folosi o imagine in locul unui buton de expediere. O asemenea imagine se numeste buton imagine. Cand un utilizator executa clic pe buton imagine, datele din formular sunt trimise serverului, ca si cum utilizatorul ar fi executat clic pe un buton de expediere. Sintaxa pentru crearea unui buton imagine este: <INPUT TYPE="IMAGE" SRC="url" NAME="text" ALIGN="aliniere"> Atributele SRC si TYPE sunt obligatorii; celelalte atribute sunt optionale. Atributul SRC determina adresa URL a fisierului care contine imaginea ce va fi afisata. Atributul NAME atribuie un nume controlului de tip buton imagine. Atributul ALIGN poate lua oricare din valorile top (sus), middle (la mijloc) sau bottom (jos) si 26

specifica modul de aliniere a butonului imagine relativ la textul inconjurator. Crearea unui buton de reinitializare Uneori, este folositor ca utilizatorul sa poata executa clic pe un buton care sa stearga toate informatiile incluse intr-un formular. Un asemenea buton se numeste buton de reinitializare. Sintaxa este: <INPUT TYPE="RESET" VALUE="text"> Unicul atribut obligatoriu este TYPE. Atributul optional VALUE specifica textul care va aparea pe suprafata butonului de reinitializare; daca atributul este omis, pe buton va scrie "Reset". Utilizarea unei legaturi pentru a furniza date unui script In afara de a expedia unui script datele dintr-un formular prin intermediul campurilor din formular, puteti expedia date cu ajutorul adresei URL a scriptului, asa cum se specifica in atributul ACTION al etichetei FORM. Pentru aceasta, atasati la sfarsitul adresei URL un semn al intrebarii (?) si apoi includeti o serie de perechi numevaloare cu urmatoarea forma: nume1=valoare1&nume2=valoare2&nume3=valoare3 Exemplul include numai trei perechi nume-valoare; cu toate acestea, puteti include oricate asemenea perechi doriti, in functie de limita impusa de browserul utilizatorului. Adresa URL rezultata se numeste sir de interogare si nu poate contine spatii. Daca doriti sa trimiteti un spatiu ca parte a unui sir de interogare, trimiteti in locul spatiului un semn plus (+). Iata un exemplu de sir de interogare care cere de pe server o anumita pagina inclusa in alta (in acest exemplu este vorba chiar de aceasta pagina): http://www.php4.as.ro/pag.php?pagina=articole/28_creare_formular2.php Adrersa de mai sus trimite scriptului inclus in pagina pag.php cererea de a include pagina de la adresa articole/28_creare_formular2.php. Puteti incerca sa deschideti direct pagina 28_creare_formular2.php folosind adresa URL urmatoare: http://www.php4.as.ro/articole/28_creare_formular2.php Aceeasi situatie este de exemplu cand incercati sa descarcati un fisier din pagina de download; se transmit 2 variabile (adresa pagini de unde a fost efectuat download-ul si numele fisierului zip pe care utilizatorul vrea sa il descarce. (Aflati mai multe citind si articolul 06 - Construieste un site cu PHP) Daca doriti sa trimiteti unui script, prin intermediul adresei URL, caractere speciale precum un semn al intrebarii, un semn egal sau un ampersand, pentru a nu se crea confuzie si pentru a functiona corect, un sir trebuie codificat URL. Pentru a codifica URL un sir care contine o interogare, caracterele speciale se inlocuiesc cu echivalentele lor hexazecimale, precedate de un simbol procent (%). Pentru detalii, consultati documentul Request for Comments (RFC) 1738, disponibil la adresa www.rfc.net. Unele dintre cele mai comune caractere speciale si echivalentele lor codificate URL sunt prezentate mai jos. de exemplu, forma codificata URL a sirului "la mult ani!" este %22la multi ani%21%22. Caracter special Echivalent codificat URL . %2e ? %3e ^ %5e ~ %7e + %2b 27

` / : ; < = > [ \ ] { | } Tab Spatiu ! " # $ % & ' ( ) @ ,

%2c %2f %3a %3b %3c %3d %3e %5b %5c %5d %5f %7b %7c %7d %09 %20 %21 %22 %23 %24 %25 %26 %27 %28 %29 %40 %60

Utilizarea scripturilor php in formulare Odata am avut nevoie intr-un formular sa fie afisata initial data din ziua completarii formularului. Ma gandesc ca uneori o sa aveti si voi nevoie de anumite date (de exemplu la o comanda intr-un formular sa apara intr-un camp doar ceea ce exista in acel moment pe stoc, care stoc se gaseste in baza de date mysql de pe server). Iata ce trebuie sa faceti: Exemplu <form name="form1" method="post" Data curenta: action=""> Data curenta: Trimite <input name="data" type="text" id="data" value="<?php $data=date("dh-Y",time()); echo $data; ?>"> <br> <br> <input type="submit" name="Submit" value="Trimite"> </form> 28 Rezultat

Dupa cum observati, la valoarea campului "data" am introdus un mic script php care citeste data curenta de pe server si o timite browserului, acesta o afiseaza in campul de text corespunzator. Puteti incerca si voi sa cititi anumite date dintr-un fisier txt sau din baza de date si sa le afisati in formular. Daca doriti sa apara un mesaj in interiorul campului dar sa dispara cand un utilizator vrea sa introduca propiul lui text codul ar fi cam asa: Exemplu Rezultat

<form> <INPUT name=test id="test" onclick="this.value='';" value=cauta GO size=15 maxLength=30> <INPUT name="submit" type=submit id="submit" value=GO> </form> Daca cineva incearca sa scrie ceva, textul "cauta" va dispare si va fi inlocuit cu mesajul introdus de utilizator.

Tutoriale Photoshop Flash Grafica 3D HTML - http://www.etutoriale.ro

Filtrarea avansata a datelor


http://www.etutoriale.ro/articles/117/1/Filtrarea-avansata-a-datelor Avasilcai Daniel Constantin Freelancer, web designer & developer. Cunostinte in web design : XHTML, CSS, Photoshop, Illustrator ... Cunostinte in web develop : PHP, SQL ... De Avasilcai Daniel Constantin Publicat la 14.03.2006 In lectia aceasta ,veti invata cum sa combinati clauzele WHERE pentru a crea conditii de cautare puternice si sofisticate. Veti afla de asemenea cum se folosesc operatorii NOT si IN.

Filtrarea avansata a datelor

In lectia aceasta ,veti invata cum sa combinati clauzele WHERE pentru a crea conditii de cautare puternice si sofisticate. Veti afla de asemenea cum se folosesc operatorii NOT si IN. Combinarea clauzelor WHERE Toate clauzele WHERE introduse in lectia "Filtrarea datelor",filtreaza datele utilizand un singur criteriu.Pentru un grad superior de control al filtrarii,limbaju SQL va permite sa specificati mai multe clauze WHERE.Acestea pot sa fie folosite in doua modalitati:sub forma de clauze AND,sau OR. OperatoriCuvintele cheie speciale ,folosite pentru unirea sau modificarea clauzelor din interiorul unei clauze WHERE. Cunoscute si ca operatorii logici.

Operatorul AND Pentru a filtra dupa mai multe coloane ,folositi operatorul AND ca sa adaugati conditii clauzei WHERE,Urmatorul fragment de cod demonstreaza acest lucru:

29

SELECT FORUM WHERE

prod_id, Produse vanz_id

prod_pret , =DLL01 AND

prod_nume prod_pret <= 4;

Instructiunea de mai sus regaseste numele si pretul produsului pentru toate produsele vandute de vanzatorul DLL01 atata timp cat pretul este de maximum 4$. Clauza WHERE din aceasta instructiune SELECT este alcatuita din doua conditii,iar cuvantul cheie AND este folosit pentru unirea conditiilor specificate.Daca un produs este vandut de vanzatorul DLL01 ,dar costa mai mult de 4$,el nu va fi regasit.In mod similar ,produsele ce costa mai putin de 4$,dar care sunt vandute de alti vanzatori decat cel specificat,nu vor fi regasite.Rezultatul generat de aceasta instructiune SQL este urmatorul:

Prod_id prod_pret prod_nume ........................................................ BNBG01 3.4900 Jucarie tip BNBG02 3.4900 Jucarie tip BNBG03 3.4900 Jucarie tip

peste pasare impure

AND----cuvant cheie folosit intr-o clauza WHERE,pentru a specifica regasirea exclusiv a liniilor ce corespund tuturor conditiilor specificate.

Operatorul OR Operatorul OR este exact opusul operatorului AND .El instruieste sistemul de gestionare a bazei de date sa returneze liniile ce corespund oricareia dintre conditii.De fapt ,cele mai multe SGBD-uri bune nici macar nu vor evalua a doua conditie dintr-o clauza OR din WHERE ,daca prima conditie a fost deja indeplinita .(Daca prima conditie a fost indeplinita ,linia va fi regasita ,indiferent care ar fi fost a doua conditie).
SELECT FROM WHERE prod_nume, Produse vanz_id = prod_pret DLL01 OR vanz_id =BRS01;

Instructiunea SQL de mai sus regaseste numele si pretul produsului pentru toate produsele detinute de oricare dintre doi vanzatori specificati. Operatorul OR anunta sistemul de gestionare a bazei de date sa caute corespondenta cu orcare dintre conditii ,nu cu amandoua. Daca ar fi fost folosit un operator AND nu ar fi fost returnata nici o data . Rezultatu generat de aceasta instructiune SQL este:
prod_nume prod_pret ................................................... Jucarie tip peste 3.4900 Jucarie tip pasare 3.4900 Jucarie tip iepure 3.4900 Ursulet 8 inch 5.9900 Ursulet 12 inch 8.9900 Ursulet 18 inch 11.9900 Papusa fata 4.9900

30

OR.-Cuvant cheie folosit intr-o clauza WHERE,pentru a specifica regasirea orcaror linii ce corespund indiferent careia dintre conditiile specificate.

Ordinea de evaluare Clauzele WHERE pot contine orcat de multi operatori AND si OR .Combinarea celor doua tipuri de operatori va permite sa efectuati filtrari sofisticate si complexe.Totusi combinarea operatorilor AND si OR ridica o problema.Pentru a demonstra acest lucru ,vom examina un exemplu.Aveti nevoie de lista tuturor produselor care costa minimum 10$,detinute de vanzatorii DLL01 si BRS01. Urmatoarea instructiune SELECT foloseste o combinatie de operatori AND si OR pentru a construi o clauza WHERE.
SELECT prod_nume, prod_pret FROM Produse WHERE vanz_id=DLL01 OR vanz_id =BRS01 AND prod_pret > =10; prod_nume prod_pret ..................................................... Jucarie tip peste 3.4900 Jucarie tip pasare 3.4900 Jucarie tip iepure 3.4900 Ursulet 18 inch 11.9900 Papusa fata 4.9900

Priviti rezultatele de mai sus.Patru dintre liniile returnate au preturi mai mici de 10$,asadar este limpede ca ele nu au fost filtrate asa cum se dorea.De ce s-a intamplat asta?Raspunsul il constituie ordinea de evaluare.SQL (ca majoritatea limbajelor)prelucreaza operatorii AND inaintea operatorilor OR .Atunci cand vede clauza WHERE de mai sus ,limbaju SQL o citeste astfel:toate produsele care costa 10$sau mai mult,detinute de vanzatorul DLL01 ,si toate produsele detinute de vanzatorul BRS01, indiferent de pret.Cu alte cuvinte ,deoarece AND are precedenta mai ridicata in ordinea de evaluare ,operatorii au fost uniti in mod eronat. Solutia la aceasta problema este folosirea parantezelor,pentru a grupa in mod explicit operatorii asociati grupurilor.Iata de exemplu ,urmatoarea instructiune SELECT si rezultatu corespunzator:
SELECT prod_nume, prod _pret FROM Produse WHERE (vanz_id = DLL01 OR vanz_id prod_nume prod_pret .............................................. Ursulet 18 inch 11.9900

BRS01)

Singura diferenta intre aceasta instructiune SELECT si cea anterioara este ca, acum, primele doua conditii ale clauzei WHERE sunt cuprinse intre paranteze.Deoarece parantezele au precedenta de evaluare mai ridicata decat orcare dintre operatorii AND si OR sistemul de gestionare a bazei de date filtreaza mai intai conditia OR din interiorul lor. Astfel instructiunea SQL devine:toate produsele detinute fie de vanzatorul DLL01 fie de vanzatorul BRS01 care costa 10$ sau mai mult.--adica exact ceea ce doream.

31

Folosirea parantelelor in clauzele WHERE.Ori de cate ori scrieti clauzele WHERE care folosesc simultan operatorii AND si OR utilizati paranteze pentru a grupa operatorii in mod explicit.Nu va bazati niciodata pe ordinea de evaluare prestabilita ,chiar daca este exact ceea ce doreati.Nu exista nici un neajuns in folosirea parantezelor si intodeauna este preferabil sa eliminati orce ambiguitati

Operatorul IN Operatorul IN se foloseste pentru a specifica un domeniu de conditii ,oricare dintre ele putand fi indeplinite.IN necesita o lista de valori valide,care sa fie separate prin virgule si cuprinse intre paranteze.Urmatorul exemplu demonstreaza acest lucru:
SELECT prod_nume, prod_pret FROM Produse WHERE vanz_id IN (DLL01 ,BRS01) ORDER BY prod_nume; prod_nume prod _pret ............................................................ Jucarie tip iepure 3.4900 Jucarie tip pasare 3.4900 Jucarie tip peste 3.4900 Papusa fata 4.9900 Ursulet 8 inch 5.9900 Ursulet 12 inch 8.9900 Ursulet 18 inch 11.9900

Instructiunea SELECT regaseste toate produsele detinute de vanzatorii DLL01 si BRS01.Operatorul IN este urmat de o lista de valori valide despartite prin virgule si intreaga lista este cuprinsa intre paranteze.Daca vi se pare ca operatorul IN obtine acelasi rezultat ca OR, nu va inselati.Urmatoarea instructiune SQL obtine exact acelasi rezultat ca exemplul de mai sus:
SELECT FROM WHERE ORDER BY prod_nume, Produse vanz_id =DLL01 prod_nume; prod_pret OR vanz_id = BRSO1

prod_nume prod_pret ............................................................. Jucarie tip iepure 3.4900 Jucarie tip pasare 3.4900 Jucarie tip peste 3.4900 Papusa fata 4.9900 Ursulet 8 inch 5.9900 Ursulet 12 inch 8.9900 Ursulet 18 inch 11.9900

Care este atunci utilitatea folosirii operatorului IN?Avantajele sale sunt: -Cand lucrati cu liste lungi de optiuni valide,sintaxa operatorului IN este mai simpla si mai usor de citit. -Ordinea de evaluare este mai simplu de gestionat,cand operatorul IN este folosit in asociatie cu operatorii AND si OR. -Aproape intotdeauna,operatorii IN executa mai repede decat listele de operatori OR . 32

-Avantajul cel mai mare este ca operatorul IN poate sa contina o alta instructiune SELECT, si astfel va permite sa construiti clauzeWHERE foarte dinamice. IN.Cuvant cheie folosit intr-o clauza WHERE pentru specificarea unei liste de valori ce trebuie regasite,folosind o comparatie OR

Folosirea operatorului NOT Operatorul NOT al clauzei WHERE are o singura functie-neaga orce conditie care il urmeaza.Deoarece NOT nu este niciodata utilizat in sine(intotdeauna se foloseste in asociatie cu alt operator),sintaxa lui difera de ceilalti operatori.Spre deosebire de alti operatori cuvantul cheie NOT poate fi utilizat inaintea coloanei dupa care se va face filtrarea,nu imediat dupa aceasta. NOT. Cuvant cheie folosit intr-o clauza WHERE pentru a nega o conditie. Urmatorul exemplu demonstreaza folosirea operatorului NOT .Pentru ca sa afisati produsele detinute de toti vanzatorii, cu exeptia vanzatorului DLL01,puteti scrie:
SELECT prod_nume FROM Produse WHERE NOT vanz_id =DLL01 ORDER BY prod_nume; prod_nume ........................ Ursulet 8 inch Ursulet 12 inch Ursulet 18 inch Papusa rege Papusa regina

Operatorul NOT din acest caz neaga conditia care-l urmeaza ;de aceea, in loc sa potriveasca vanz_id cu DLL01 SGBD-ul potriveste vanz _id cu orce identificator care nu este DLL01.Exemplul anterior putea fi de asemenea obtinut prin folosirea operatorului <>asa cum vom vedea:
SELECT FROM WHERE ORDER prod_nume Produse vanz_id <>DLL01 BY prod_nume;

prod_nume ........................ Ursulet 8 inch Ursulet 12 inch Ursulet 18 inch Papusa rege Papusa regina

De ce atunci sa folositi operatorul NOT?Pentru clauzele WHERE simple,asa cum au fost cele prezentate aici,nu se poate spune ca ar exista vreun avantaj real in folosirea operatorului NOT .Acesta este util in clauzele mai complexe .De 33

exemplu ,daca folositi operatorul NOT in asociatie cu cu un operator IN va fi simplu sa gasiti toate liniile care nu corespund cu o lista de criterii.

Pana aici ati invatat cum sa combinati clauzele WHERE cu operatorii AND si OR Ati aflat de asemenea cum sa gestionati in mod explicit ordinea de evaluare si cum sa folositi operatorii IN si NOT.

POZITIONARE <html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>

POZITIONAREA UNUI ELEMENT IN SPATELE ALTUIA <html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> 34

</html> linkuri vizitate <html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p> </body> </html>

SA FAC PRIMA LITERA MARE.... FATA DE RESTU TEXTULUI <html> <head> <style type="text/css"> p:first-letter { color: #ff0000; font-size:xx-large } </style> </head> <body> <p> You can use the :first-letter pseudo-element to add a special effect to the first letter of a text! </p> </body> </html> PENTRU LINKURI ISI SCHIMBA CULORILE SAU DIMENSIUNEA <html> 35

<head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head> <body> <p>Mouse over the links to see them change layout.</p> <p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p> <p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p> <p><b><a class="three" href="default.asp" target="_blank">This link changes backgroundcolor</a></b></p> <p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p> <p><b><a class="five" href="default.asp" target="_blank">This link changes textdecoration</a></b></p> </body> </html>

SA PUI O POZA IN DREAPTA <html> <head> <style type="text/css"> div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } 36

</style> </head> <body> <div> <img src="logocss.gif" width="95" height="84" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption. </p> </body> </html>

37

S-ar putea să vă placă și