Css Romana

5/8/2018 Css Romana - slidepdf.com

http://slidepdf.com/reader/full/css-romana 1/37

Notiuni de bazaCSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatareapaginilor 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 coduluipaginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inlinenivelul 2 este informatia introdusa in blocul HEAD, tip embeddednivelul 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 maimica importanta o are cea de nivelul 3.

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practicdeoarece 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 sitotodata 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 styleshhettype - tip text ce contine comenzi CSShref - 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">

</style>

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru aascunde 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 comenziCSS. 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 dorimsa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunileanterioare 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 zonaHEAD sau intr-un fisier extern.

Exemplu: folosirea elementului id

<html><head><title>Exemplu 2_1</title><style type="text/css">

</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 orisau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-unfisier extern.

Exemplu: folosirea elementului class

<html><head><title>Exemplu 2_2</title><style type="text/css"></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 fonturiAceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluseori in zona HEAD ori in interiorul etichetei dorite.

In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumenteletype, style, size si weight .

2

http://www.drogoreanu.ro/tutorials/css/exemplu2_1.html

3.1 font-familyfont-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care lerecunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea sitot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (deexemplu serif, sans-serif sau monospace).In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimeleduble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele douafonturi din lista, folosindu-l pe al treilea

<html><head><title>Exemplu 3_1</title><style type="text/css"></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"></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 inlocuiescdimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.

CSS keyword numar FONT size

xx-small 1

x-small 2

small 3

medium 4

large 5

x-large 6

xx-large 7

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul dincuvintele de mai sus.

Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fivizualizata diferit de browsere diferite.Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

3.3 font-stylefont-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal siitalic.

4

<title>Exemplu 4_1</title><style type="text/css"></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 luavalorile: 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"></style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right . In functiede 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"></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 Tabularetext-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">

</style>

6

4.3 Decoraretext-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorileunderline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html>

<head><title>Exemplu 4_3</title><style type="text/css"></style></head><body>Text normal<p>Text subliniat</p>

</body></html>

4.4 Culoarecolor 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"></style></head><body>Text normal<p>Text albastru</p></body>

</html>

4.5 Stiluri pentru legaturiIn HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate ininteriorul 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 legaturaa:link defineste stilul legaturii nevizitatea:visited defineste stilul legaturii vizitatea:active defineste stilul legaturii active (nu prea se foloseste)a:hover defineste stilul cand mouse-ul este deasupra legaturii

Stiluri pentru backgroundBackground culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului saupentru text.

5.1 Culoare de fondbackground-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"></style></head>

<body>Text normal<p>Text cu background rosu</p></body></html>

5.2 Imagine de fondImaginile 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

background-repeat: no-repeat;background-position: top center;}--></style></head><body>Text normal

</body></html>

Stiluri pentru liste6.1 list-style-typeFolosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS inzona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nupermite asocierea comenzilor CSS decat pentru eticheta li .

Sintaxa este:

<style type="text/css"></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"></style></head><body>Necesar materiale:<ol><li>caramida</li><li>ciment</li><li>ipsos</li></ol></body></html>

6.2 list-style-imageIn afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini princomansa 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"></style></head>

11

<body>Necesar materiale:<ul><li>caramida</li><li>ciment</li><li>ipsos</li></ul>

</body></html>

Chenare si marginiFiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

marginea (margin) este spatiul exterior chenarului pana la celelalte elementechenarul (border) este o bordura care inconjoara elementulcompletarea (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 toatedimensiunile prezentate in continuare.

7.1 width si heightLatimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Acesteatribute 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"></style></head><body><img src="margini.gif">

</body></html>

12

7.2 padding si marginpadding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fistabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right.

margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toatelaturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-leftsau 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 25pxfata de latura de sus

<html><head><title>Exemplu 7_2</title><style type="text/css">

</style></head><body><img src="margini.gif"></body></html>

7.3 border Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definireachenarului este border avand proprietatile asociate width, style si color . Pentru a fi siguri caaceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declarampentru 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 sauin 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>

PozitionarePozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodataobiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta ( ASOLUTE ) cat si cea relativa (RELATIVE ) folosesc proprietatileLEFT 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. Astfelpoate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplutext 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 elementeleanterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosindproprietatile left si top.

Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

<html><head><title>Exemplu 8_2</title>

14







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

Crearea formularelor HTML

Majoritatea programelor PHP folosesc formulare HTML pentru a prelucra datele de la utilizator sipentru a afisa rezultatele calculelor. In cadrul acestui articol, va explic cum sa creati formulareHTML 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 pentruinteractiunile 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 unuiformular bine proiectat este asemanatoare cu aceea a unei pagini de ziar, fiind compusa dintr-oserie de coloane in cadrul carora fiecare element vizual este aliniat cu elementele plasatedeasupra, respectiv dedesubtul sau. Puteti obtine acest tip de structura folosind tabele HTMLsau eticheta <BR>.

- Grupati controalele corelate si separati fiecare asemenea grup de celelalte grupuri prinincorporarea de spatii albe in structura dvs.- Secventa de controale din formular trebuie sa fie asemanatoare cu ordinea in care le vamanipula utilizatorul. In caz contrar, utilizatorul va fi obligat sa piarda timp navigand de la uncontrol la altul.Este important sa retineti ca acestea sunt doar indrumari, nu reguli. Nefiind reguli, puteti optapentru incalcarea lor, din cand in cand. Pentru a determina daca o varianta de proiectare estesuperioara alteia, este util sa cereti parerea unui utilizator. Daca nici utilizatorul nu va poate fi deajutor, 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 dacaformularul 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 HTMLDaca 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 vacontine controalele din formular. Apoi, incorporati controalele in structura; in particular, unformular HTML trebuie sa includa un buton de expediere pe care utilizatorul executa clic pentru atrimite serverului datele din formular. Deoarece o singura pagina HTML poate contine mai multeformulare, 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, decea folosita pentru includerea unei pagini HTML obisnuite. De exemplu, iata o structuracaracteristica 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 HTMLobisnuita. 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 adresacompleta (de genul http://www.pagina_mea.ro/prelucrare_formular.php), respectiv o adresapartiala, 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 intremetodele GET si POST este destul de complicata. Ca regula empirica, multi programatorifolosesc GET pentru formulare care executa o cautare sau o interogare, respectiv POST pentruformulare 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 prelucraresi 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 metodeiGET este acela ca utilizatorii pot insera semne de carte in rezultatele unei interogari sau al uneicautari care foloseste metoda GET , dar nu pot executa aceeasi operatie in cazul unei interogarisau al unei cautari care foloseste metoda POST .

Incorporarea controalelor Aceasta sectiune descrie doua controale elementare pe care le veti folosi frecvent: caseta cu textsi butonul de expediere. O caseta cu text permite utilizatorului sa tasteze informatii care pot fiapoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obtine date precumnumele 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 unuiscript PHP. Numele pe care il atribuiti unui control trebuie sa fie unic in cadrul formularului sitrebuie sa respecte regulile pentru denumirea variabilelor PHP, cu exceptia faptului ca numelenu trebuie sa inceapa cu simbolul $. Cu alte cuvinte, numele trebuie sa inceapa cu o litera si nutrebuie sa contina alte caractere in afara literelor, a cifrelor si a caracterelor de subliniere; inparticular, numele nu trebuie sa contina spatii. HTML nu are o eticheta </INPUT> deci nuincercati sa combinati o eticheta <INPUT> cu o asemenea eticheta. Un buton de expedierepermite utilizatorului sa trimita serverului continutul unui formular. Fiecare formular HTML trebuiesa aiba un buton de expediere. Pentru a crea un buton de expediere, scrieti o eticheta HTMLcare are urmatoarea forma elementara:<INPUT TYPE="SUBMIT" VALUE="text">Atributul VALUE specifica textul care trebuie sa apara pe suprafata butonului de expediere. Incontinuare este un exemplu de formular care include casete cu text ce preiau numele si adresade e-mail a utilizatorului:

EXEMPLU REZULTAT

<HTML><HEAD><TITLE>Numele si adresa de e-mail aleutilizatorului</TITLE></HEAD><BODY>

<FORM METHOD="POST"ACTION="prelucrare_formular.php"><H3>Numele si adresa de e-mail ale

Numele si adresa de e-mail aleutilizatorului

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 sinumele atribuite controalelor de tip caseta cu text. Cand utilizatorul executa clic pe butonul deexpediere, 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 multipleIn 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 Rezultat

<HTML><HEAD>

<TITLE>Numele si adresa de e-mail aleutilizatorului</TITLE></HEAD><BODY><FORM METHOD="POST"ACTION="prelucrare_formular.php"><H3>Numele si adresa de e-mail aleutilizatorului</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 aleutilizatorului</H3>

Numele si adresa de e-mail ale

utilizatorului

Nume:

Adresa de e-mail:

Trimite datele

Numerele de telefon si fax aleutilizatorului

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 formularuluicare contine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeste fieun nume si o adresa de e-mail, fie numerele de telefon si fax, nu continutul tuturor celor patrucampuri.

Vizualizarea campurilor unui formular

Exemplu Rezultat

<?php // afisarea datelor introduse in formulareleanterioarephpinfo()?>

.

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 decatre utilizator:

Exemplu Rezultat

<?php/* acest script este doar pentru exemplificare, nueste complet deci este posibil sa contina erori */// afisarea datelor introduse in formulareleanterioare$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 completatioricare formular de pe aceasta pagina";echo "<br><br>";}echo $numele_utilizatorului;

Pentru a se afisa ceva aici completatioricare formular de pe aceasta pagina

.

19



echo "<br>";echo $adresa_email;echo "<br>";echo $telefon;echo "<br>";echo $fax;?>

Crearea casetelor cu text personalizateIn sectiunea precedenta am prezentat sintaxa elementara pentru crearea unei casete cu text. Cutoate acestea, HTML furnizeaza numeroase atribute suplimentare care va permit sa modificatiaspectul si comportamentul unei casete cu text. Iata sintaxa completa pentru crearea unei casetecu text:<INPUT TYPE="TEXT" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text">Atributele TYPE si NAME sunt obligatorii, celelalte atribute sunt optionale. Atributul SIZE , careeste 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 aatributului SIZE , in care caz continutul controlului defileaza spre dreapta atunci cand utilizatorul aintrodus SIZE caractere. Atributul VALUE constituie o valoare care este afisata initial in caseta cutext.

Crearea de suprafete cu textCa o caseta cu text, o suprafata cu text permite unui utilizator sa introduca text. Cu toateacestea, o suprafata cu text poate permite utilizatorului sa introduca mai multe linii de text, intimp ce o caseta cu text permite utilizatorului sa introduca o singura linie. Iata sintaxa pentrucrearea 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. AtributulROWS specifica numarul liniilor de text vizibile in suprafata cu text; deoarece suprafata de textdefileaza 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 sederuleaza 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. AtributulWRAP poate avea urmatoarele valori:- off - Infasurarea cuvintelor la sfarsitul liniei de text este dezactivata; utilizatorul poate introducecaractere 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 physicalO eticheta <TEXTAREA> trebuie combinata cu o eticheta </TEXTAREA>. Orice text care apareintre etichete va fi prezentat drept continut initial al controlului de tip suprafata cu text.

Crearea casetelor cu parolaDaca o aplicatie impune unui utilizator sa introduca o parola, puteti crea o caseta cu text in acestscop. Totusi, cand utilizatorul introduce parola, orice persoana aflata in apropiere poate vizualizaparola, situatie care duce la o posibila bresa de securitate. In loc de a se folosi o caseta cu textpentru introducerea de informatii confidentiale, trebuie sa folositi o caseta cu parola. Pentru acrea o caseta cu parola, folositi aceeasi sintaxa ca si cea utilizata pentru crearea unei casete cutext, cu exceptia faptului ca specificati PASSWORD (parola) in loc de TEXT ca valoare aatributului 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 validarePentru date care pot avea numai una din doua valori, cum ar fi "pornit" sau "oprit", caseta devalidare este controlul ideal. De exemplu, caseta de validare este un control adecvat pentru apermite 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 vadeplasa 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. Dacaatributul 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 trimisaserverului in cazul in care caseta de validare este selectata; daca atributul nu este specificat, seva trimite valoarea on (activat).

Crearea butoanelor radioCa 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 unsingur buton radio din cadrul unui grup; toate celelalte trebuie sa fie dezactivate. (se aseamanaca 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 activdecat unul). De exemplu, puteti folosi un set de trei butoane radio pentru a permite utilizatoruluisa specifice tipul de ambalaj pentru cadou: fara ambalaj, cu ambalaj simplu sau sofisticat. Numaiunul dintre cele trei butoane radio poate fi activat; la un loc, setul de butoane radio oferautilizatorului 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, cudeosebirea ca atributul TYPE are valoarea RADIO in locul valorii CHECKBOX . Atributele unuibuton radio au aceeasi semnificatie ca si acelea ale unei casete de validare. Totusi, atributulNAME este obligatoriu pentru butoanele radio, chiar daca este optional pentru casetele devalidare. Toti membrii unui set de casete de validare prezinta aceeasi valoare a atributuluiNAME .

Crearea de selectiiO selectie este un meniu care defileaza, de unde utilizatorul poate alege una sau mai multeoptiuni. De exemplu, intr-o selectie pot fi enumerate garniturile pentru pizza, astfel incat unutilizator sa poata selecta orice combinatie de garnituri pe care o doreste. Pentru a crea oselectie, folositi urmatoarea sintaxa:

<SELECT NAME="text" MULTIPLE SIZE="numar">etichetele OPTION se insereazaaici</SELECT>Eticheta <SELECT> este folosita in combinatie cu eticheta </SELECT>. Intre cele doua eticheteeste introdusa o serie de etichete OPTION . Intr-o eticheta SELECT , numai atributul NAME esteobligatoriu. Atributul MULTIPLE arata ca utilizatorul poate alege mai multe optiuni mentinandapasata tasta CTRL si executand clic pe aceasta. In absenta atributului MULTIPLE , utilizatorulpoate selecta o singura optiune. Daca specificati atributul MULTIPLE , trebuie sa specificati si unatribut NAME , care atribuie un nume de tablou ca nume al controlului. De exemplu, un control detip selectie care permite utilizatorului sa aleaga mai multe garnituri pentru desert trebuie denumitfolosind sintaxa garnitura[] , nu garnitura. Comportarea unei selectii care permite o singuraoptiune 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 poatemanipula selectia pentru a obtine accesul la restul optiunilor si a alege dintre acestea. Asa cumam 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 estecunoscut sub numele de continut al optiunii. Continutul optiunii apare in controlul SELECT . Multiprogramatori HTML omit eticheta </OPTION>, caz in care textul optiunii se extinde pana laurmatoarea eticheta <OPTION> sau </SELECT>. Totusi nu este recomandat din motive decompatibilitate intre browsere. Ambele atribute ale etichetei OPTION sunt optionale. Daca apare

atributul VALUE , valoarea sa este trimisa serverului atunci cand este selectata optiuneaasociata; in caz contrar, continutul optiunii este trimis la server. Atributul SELECTED arata caoptiunea corespunzatoare este selectata initial; in caz contrar, optiunea respectiva nu esteselectata initial.

Crearea campurilor ascunseUneori este utila crearea asa-numitelor campuri ascunse. Valorile campurilor ascunse sunttrimise la server alaturi de valorile altor controale; cu toate acestea, utilizatorul nu areposibilitatea de a vizualiza sau manipula valorile campurilor ascunse. Campurile ascunse seutilizeaza frecvent in cadrul unei serii de formulare. De exemplu, datele introduse de utilizator inprimul 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, creatsi initializat de scriptul care prelucreaza primul formular. Astfel, utilizatorul este scutit de o muncasuplimentara si sunt preintampinate eventualele erori, care ar fi putut aparea daca utilizatorul nuar 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 inabsenta atributului VALUE , a carui valoare este trimisa in mod automat la server in momentulexpedierii formularului.

Trimiterea unui fisier catre server prin intermediul unui formular Puteti permite utilizatorului sa aleaga un fisier si apoi sa trimita serverului continutul fisieruluicreand 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 formatulcontinutului fisierului. Pot fi indicate mai multe formate, dar fiecare format trebuie separat devecinii sai prin intermediul unei virgule. Formatul este specificat folosind un cod MIME(Multipurpose Internet Mail Extensions). Tabelul urmator descrie formatele folosite cel maifrecvent:

TIP MIME TIP DE DATE EXTENSII DE FISIER

application/msexcel Microsoft Excel xlsapplication/msword Microsoft Word doc, dot

application/octet-stream

Binara exe

application/pdf Adobe Acrobat pdf

application/postscript Postscript ai, eps, ps

application/ppt Microsoft PowerPoint ppt

application/zip Date comprimate in format ZIP zip

audio/midi Musical Instrument Digital Interface

(MIDI)

mid, midi

audio/x-wav Windows Audio Format (WAV) wav

image/gif Compuserve Graphics Interchange gif

22



Format (GIF)

image/jpeg Joint Photographics Expert Group (JPEG) jpeg, jpg, jpe

image/TIFF Tagged Image Format (TIF) tif, tiff

text/HTML HTML htm, html

text/plain Text simplu txt

text/richtext Rich Text Format (RTF) rtf

video/mpeg Secventa video mpg, mpv, mpe,mpeg

video/quicktime Secventa video qt, mov

video/x-msvideo Secventa video avi

Eticheta FROM de delimitare trebuie sa aiba POST ca valoare a atributului sau METHOD. Deasemenea, trebuie sa includa un atribut ENCTYPE cu valoarea multipart/form-data. Iata sintaxape 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 fiecaretip MIME. In accest caz trebuie sa vorbiti cu administratorul serverului, pentru a putea incarcafisiere pe server.

Exemplu de formular Am creat mai jos un exemplu care contine casetele descrise pana acum (mai putin cele cu campascuns si cel de incarcare a unui fisier pe server), cu scopul de a intelege mai bine fiecarefunctie in parte:

Exemplu Rezultat

<form name="form1" method="post"action=""><input type="text"name="textfield">Textfield<br><br><textareaname="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>

Textfield

Textarea

Textfield pentru parole

Checkbox

Checkbox cu valoarea checked

Radio buton

List / Menu

Radio Group1

Radio Group1

23

þÿ

þÿ

http://www.php4.as.ro/pag.php?pagina=articole/27_creare_formular.php#1














<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>


Variabile de mediuhttp://www.etutoriale.ro/articles/129/1/Variabile-de-mediuSeimour 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 carepersonalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorilevariabilelor de mediu si isi pot ajusta comportamentul in consecinta. De exemplu,calea de cautare a programelor MS-DOS este stocata intr-o variabila de mediudenumita PATH .

Variabile de mediu

Variabilele de mediu sunt folosite pentru stocarea optiunilor si a parametrilor carepersonalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorilevariabilelor de mediu si isi pot ajusta comportamentul in consecinta. De exemplu,calea de cautare a programelor MS-DOS este stocata intr-o variabila de mediudenumita PATH . In general, comenzile sistemelor de operare sunt folosite pentru aconfigura 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 prezentainformatii de stare. Unele dintre cele mai importante variabile de mediu folosite deApache 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 solicitatexecutia PHP. Puteti vizualiza toate variabilele de mediu disponibile pentru

24



programele PHP prin invocarea functiei phpinfo() si vizualizarea datelor de iesiregenerate de acesta.

Variabila de mediu Descriere

CONTENT_LENGTH Lungimea, in octeti, a corpului cererii.

CONTENT_TYPE Tipul MIME al datelor din corpul cererii.

DOCUMENT_ROOT Calea care constituie radacina arborelui catalogului cudocumente 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 specificaseturile de caractere intelese de client.

HTTP_ACCEPT_ENCODINGContinutul antetului HTTP Accept-Encoding:, care specificatipurile de continuturi intelese de client.

HTTP_ACCEPT_LANGUAGEContinutul antetului HTTP Accept-Language:, care specificalimbajele preferate de client.

HTTP_CONNECTION Continutul antetului HTTP Connection:, care indicaoptiunile solicitate de client.

HTTP_HOST Continutul antetului HTTP Host:, care indica numele degazda, folosit de client la prezentarea cererii.

HTTP_REFERER Adresa URL a paginii Web care a trimis browserul clientuluila pagina curenta.

HTTP_USER_AGENT Continutul antetului HTTP User-Agent , care indicabrowserului 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 estealcatuit 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 prelucreazacererea.

SERVER_PORT Port folosit de serverul Web pentru comunicatii.

SERVER_PROTOCOL Numele si versiunea protocolului prin intermediul caruia s-a executat cererea.

SERVER_SIGNATURE Sirul care identifica versiunea serverului Web si numele degazda folosit pentru prelucrarea cererii.

SERVER_SOFTWARE Sirul care identifica programul server Web si versiuneaacestuia.

25



Puteti obtine accesul la variabila de mediu exact asa cum procedati pentru orice altavariabila PHP. Pur si simplu inserati inaintea numelui variabilei de mediu un simbol aldolarului ($), 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 infunctie 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 celecare reprezinta o anumita retea. Astfel, aplicatia dvs. poate deveni mai rezistenta laatacurile hackerilor care incearca sa creeze o bresa in sistemul de securitate (Dacade exemplu creati o pagina de administrare puteti sa limitati accesul doar la IP-ulcalculatorului dvs. Astfel de pe alt calculator nu se poate intra pe paginarestrictionata - bineinteles, trebuie sa aveti IP static). O alta utilizare importanta avariabilelor de mediu consta in ocolirea limitarilor impuse de un anumit browser.Variabila de mediu HTTP_USER_AGENT identifica browserul client si versiuneaacestuia. Un script PHP poate verifica valoarea acestei variabile de mediu si trimite oanumita pagina pentru browserul respectiv (o pagina daca foloseste Internet

Explorer si o alta pagina daca foloseste Netscape de exemplu)


Alte notiuni referitoare la expedierea unui formular http://www.etutoriale.ro/articles/128/1/Alte-notiuni-referitoare-la-expedierea-unui-formularSeimour Birkoff

www.farsoft.far-php.ro - portofoliuDe Seimour Birkoff Publicat la 18.03.2006

In articolul precedent, am prezentat modul de creare a formularelor HTML care pottrimite date unui server. In continuare o sa va spun mai multe despre procesul deexpediere a formularelor.

Alte notiuni referitoare la expedierea unui formular In articolul precedent, am prezentat modul de creare a formularelor HTML care pottrimite date unui server. In continuare o sa va spun mai multe despre procesul de

expediere a formularelor.

Inlocuirea unui buton cu o imagineAspectul unui buton de expediere este monoton si obisnuit. Daca aspectul paginiieste important, puteti folosi o imagine in locul unui buton de expediere. O asemeneaimagine se numeste buton imagine. Cand un utilizator executa clic pe butonimagine, datele din formular sunt trimise serverului, ca si cum utilizatorul ar fiexecutat clic pe un buton de expediere. Sintaxa pentru crearea unui buton imagineeste:<INPUT TYPE="IMAGE" SRC="url" NAME="text" ALIGN="aliniere">

Atributele SRC si TYPE sunt obligatorii; celelalte atribute sunt optionale. AtributulSRC 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 reinitializareUneori, este folositor ca utilizatorul sa poata executa clic pe un buton care sastearga toate informatiile incluse intr-un formular. Un asemenea buton se numestebuton de reinitializare. Sintaxa este:<INPUT TYPE="RESET" VALUE="text">

Unicul atribut obligatoriu este TYPE . Atributul optional VALUE specifica textul care vaaparea pe suprafata butonului de reinitializare; daca atributul este omis, pe buton vascrie "Reset ".

Utilizarea unei legaturi pentru a furniza date unui scriptIn afara de a expedia unui script datele dintr-un formular prin intermediul campurilordin formular, puteti expedia date cu ajutorul adresei URL a scriptului, asa cum sespecifica in atributul ACTION al etichetei FORM . Pentru aceasta, atasati la sfarsituladresei URL un semn al intrebarii (?) si apoi includeti o serie de perechi nume-valoare cu urmatoarea forma:

nume1=valoare1&nume2=valoare2&nume3=valoare3Exemplul include numai trei perechi nume-valoare; cu toate acestea, puteti includeoricate asemenea perechi doriti, in functie de limita impusa de browserulutilizatorului. Adresa URL rezultata se numeste sir de interogare si nu poate continespatii. Daca doriti sa trimiteti un spatiu ca parte a unui sir de interogare, trimiteti inlocul spatiului un semn plus (+). Iata un exemplu de sir de interogare care cere depe server o anumita pagina inclusa in alta (in acest exemplu este vorba chiar deaceasta pagina):http://www.php4.as.ro/pag.php?pagina=articole/28_creare_formular2.phpAdrersa 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 deschidetidirect pagina 28_creare_formular2.php folosind adresa URL urmatoare:http://www.php4.as.ro/articole/28_creare_formular2.phpAceeasi situatie este de exemplu cand incercati sa descarcati un fisier din pagina dedownload; se transmit 2 variabile (adresa pagini de unde a fost efectuat download-ulsi numele fisierului zip pe care utilizatorul vrea sa il descarce. (Aflati mai multe citindsi articolul 06 - Construieste un site cu PHP)Daca doriti sa trimiteti unui script, prin intermediul adresei URL, caractere specialeprecum un semn al intrebarii, un semn egal sau un ampersand, pentru a nu se creaconfuzie si pentru a functiona corect, un sir trebuie codificat URL. Pentru a codifica

URL un sir care contine o interogare, caracterele speciale se inlocuiesc cuechivalentele lor hexazecimale, precedate de un simbol procent (%). Pentru detalii,consultati documentul Request for Comments (RFC) 1738, disponibil la adresawww.rfc.net. Unele dintre cele mai comune caractere speciale si echivalentele lorcodificate 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

http://www.php4.as.ro/pag.php?pagina=articole/28_creare_formular2.php

http://www.php4.as.ro/articole/28_creare_formular2.php

http://www.php4.as.ro/pag.php?pagina=articole/06_constr_site.php

http://rfc.net/rfc1738.html

http://www.php4.as.ro/pag.php?pagina=articole/28_creare_formular2.php

http://www.php4.as.ro/articole/28_creare_formular2.php

http://www.php4.as.ro/pag.php?pagina=articole/06_constr_site.php

http://rfc.net/rfc1738.html



` %2c

/ %2f

: %3a

; %3b

< %3c

= %3d

> %3e

[ %5b

\ %5c

] %5d

- %5f

{ %7b

| %7c

} %7d

Tab %09Spatiu %20

! %21

" %22

# %23

$ %24

% %25

& %26

' %27

( %28

) %29

@ %40

, %60

Utilizarea scripturilor php in formulareOdata 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-unformular 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 Rezultat

<form name="form1" method="post"action="">Data curenta:<input name="data" type="text"id="data" value="<?php $data=date("d-h-Y",time()); echo $data; ?>"><br>

<br><input type="submit" name="Submit"value="Trimite"></form>

Data curenta:

Trimite

28

þÿ



Dupa cum observati, la valoarea campului "data" am introdus un mic script php care citeste datacurenta 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 informular.Daca doriti sa apara un mesaj in interiorul campului dar sa dispara cand un utilizator vrea saintroduca propiul lui text codul ar fi cam asa:

Exemplu Rezultat<form><INPUT name=test id="test"onclick="this.value='';" value=cautasize=15 maxLength=30><INPUT name="submit" type=submitid="submit" value=GO></form>

GO

Daca cineva incearca sa scrie ceva, textul "cauta" va dispare si va fi inlocuit cumesajul introdus de utilizator.


Filtrarea avansata a datelor http://www.etutoriale.ro/articles/117/1/Filtrarea-avansata-a-datelorAvasilcai 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 conditiide cautare puternice si sofisticate. Veti afla de asemenea cum se folosesc operatoriiNOT si IN.

Filtrarea avansata a datelor

• In lectia aceasta ,veti invata cum sa combinati clauzele WHERE pentru a creaconditii de cautare puternice si sofisticate. Veti afla de asemenea cum sefolosesc operatorii NOT si IN.

• Combinarea clauzelor WHEREToate clauzele WHERE introduse in lectia "Filtrarea datelor",filtreaza dateleutilizand un singur criteriu.Pentru un grad superior de control al filtrarii,limbajuSQL va permite sa specificati mai multe clauze WHERE.Acestea pot sa fiefolosite in doua modalitati:sub forma de clauze AND,sau OR.

OperatoriCuvintele cheie speciale ,folosite pentru unirea sau modificareaclauzelor 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 coddemonstreaza acest lucru:

29

þÿ



SELECT prod_id, prod_pret , prod_numeFORUM ProduseWHERE vanz_id =´DLL01´ AND prod_pret <= 4;

Instructiunea de mai sus regaseste numele si pretul produsului pentru toateprodusele vandute de vanzatorul DLL01 atata timp cat pretul este de

maximum 4$. Clauza WHERE din aceasta instructiune SELECT este alcatuitadin doua conditii,iar cuvantul cheie AND este folosit pentru unirea conditiilorspecificate.Daca un produs este vandut de vanzatorul DLL01 ,dar costa maimult de 4$,el nu va fi regasit.In mod similar ,produsele ce costa mai putin de4$,dar care sunt vandute de alti vanzatori decat cel specificat,nu vor firegasite.Rezultatul generat de aceasta instructiune SQL este urmatorul:

Prod_id prod_pret prod_nume........................................................BNBG01 3.4900 Jucarie tip peste

BNBG02 3.4900 Jucarie tip pasareBNBG03 3.4900 Jucarie tip impure

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

• Operatorul OR Operatorul OR este exact opusul operatorului AND .El instruieste sistemul degestionare a bazei de date sa returneze liniile ce corespund oricareia dintreconditii.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 dejaindeplinita .(Daca prima conditie a fost indeplinita ,linia va fi regasita,indiferent care ar fi fost a doua conditie).

SELECT prod_nume, prod_pretFROM ProduseWHERE vanz_id = ´DLL01´ OR vanz_id =´BRS01´;

Instructiunea SQL de mai sus regaseste numele si pretul produsului pentrutoate produsele detinute de oricare dintre doi vanzatori specificati. Operatorul

OR anunta sistemul de gestionare a bazei de date sa caute corespondenta cuorcare dintre conditii ,nu cu amandoua. Daca ar fi fost folosit un operator ANDnu ar fi fost returnata nici o data . Rezultatu generat de aceasta instructiuneSQL este:

prod_nume prod_pret...................................................Jucarie tip peste 3.4900Jucarie tip pasare 3.4900Jucarie tip iepure 3.4900Ursulet 8 inch 5.9900Ursulet 12 inch 8.9900

Ursulet 18 inch 11.9900Papusa fata 4.9900

30



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

• Ordinea de evaluareClauzele WHERE pot contine orcat de multi operatori AND si OR .Combinareacelor doua tipuri de operatori va permite sa efectuati filtrari sofisticate sicomplexe.Totusi combinarea operatorilor AND si OR ridica o problema.Pentru a

demonstra acest lucru ,vom examina un exemplu.Aveti nevoie de lista tuturorproduselor care costa minimum 10$,detinute de vanzatorii DLL01 si BRS01.Urmatoarea instructiune SELECT foloseste o combinatie de operatori AND siOR pentru a construi o clauza WHERE.

SELECT prod_nume, prod_pretFROM ProduseWHERE vanz_id=´DLL01´ OR vanz_id =´BRS01´AND prod_pret > =10;prod_nume prod_pret.....................................................Jucarie tip peste 3.4900Jucarie tip pasare 3.4900Jucarie tip iepure 3.4900Ursulet 18 inch 11.9900Papusa fata 4.9900

Priviti rezultatele de mai sus.Patru dintre liniile returnate au preturi mai micide 10$,asadar este limpede ca ele nu au fost filtrate asa cum se dorea.De ces-a intamplat asta?Raspunsul il constituie ordinea de evaluare.SQL (camajoritatea limbajelor)prelucreaza operatorii AND inaintea operatorilor OR.Atunci cand vede clauza WHERE de mai sus ,limbaju SQL o citesteastfel:toate produsele care costa 10$sau mai mult,detinute de vanzatorul DLL01 ,si toate produsele detinute de vanzatorul BRS01, indiferent de pret.Cualte cuvinte ,deoarece AND are precedenta mai ridicata in ordinea deevaluare ,operatorii au fost uniti in mod eronat. Solutia la aceasta problemaeste folosirea parantezelor,pentru a grupa in mod explicit operatorii asociatigrupurilor.Iata de exemplu ,urmatoarea instructiune SELECT si rezultatucorespunzator:

SELECT prod_nume, prod _pretFROM Produse

WHERE (vanz_id = ´DLL01´ OR vanz_id = ´BRS01´)prod_nume prod_pret..............................................Ursulet 18 inch 11.9900

Singura diferenta intre aceasta instructiune SELECT si cea anterioara este ca,acum, primele doua conditii ale clauzei WHERE sunt cuprinse intreparanteze.Deoarece parantezele au precedenta de evaluare mai ridicata decatorcare dintre operatorii AND si OR sistemul de gestionare a bazei de datefiltreaza 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 clauzeleWHERE care folosesc simultan operatorii AND si OR utilizati paranteze pentru agrupa operatorii in mod explicit.Nu va bazati niciodata pe ordinea de evaluareprestabilita ,chiar daca este exact ceea ce doreati.Nu exista nici un neajuns infolosirea parantezelor si intodeauna este preferabil sa eliminati orceambiguitati

• Operatorul IN Operatorul IN se foloseste pentru a specifica un domeniu de conditii ,oricaredintre ele putand fi indeplinite.IN necesita o lista de valori valide,care sa fieseparate prin virgule si cuprinse intre paranteze.Urmatorul exempludemonstreaza acest lucru:

SELECT prod_nume, prod_pretFROM ProduseWHERE vanz_id IN (´DLL01´ ,´BRS01´)ORDER BY prod_nume;

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

Instructiunea SELECT regaseste toate produsele detinute de vanzatorii DLL01si BRS01.Operatorul IN este urmat de o lista de valori valide despartite prinvirgule si intreaga lista este cuprinsa intre paranteze.Daca vi se pare caoperatorul IN obtine acelasi rezultat ca OR, nu va inselati.Urmatoareainstructiune SQL obtine exact acelasi rezultat ca exemplul de mai sus:

SELECT prod_nume, prod_pretFROM ProduseWHERE vanz_id =´DLL01´ OR vanz_id = ´BRSO1´ORDER BY prod_nume;

prod_nume prod_pret

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

Care este atunci utilitatea folosirii operatorului IN?Avantajele sale sunt: -Candlucrati 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,candoperatorul IN este folosit in asociatie cu operatorii AND si OR. -Aproapeintotdeauna,operatorii IN executa mai repede decat listele de operatori OR .

32



-Avantajul cel mai mare este ca operatorul IN poate sa contina o altainstructiune SELECT, si astfel va permite sa construiti clauzeWHERE foartedinamice.

IN.Cuvant cheie folosit intr-o clauza WHERE pentru specificarea unei liste devalori ce trebuie regasite,folosind o comparatie OR

• Folosirea operatorului NOTOperatorul NOT al clauzei WHERE are o singura functie-neaga orce conditiecare il urmeaza.Deoarece NOT nu este niciodata utilizat in sine(intotdeauna sefoloseste in asociatie cu alt operator),sintaxa lui difera de ceilaltioperatori.Spre deosebire de alti operatori cuvantul cheie NOT poate fi utilizatinaintea 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 saafisati produsele detinute de toti vanzatorii, cu exeptia vanzatoruluiDLL01,puteti scrie:

SELECT prod_numeFROM ProduseWHERE NOT vanz_id =´DLL01´ORDER BY prod_nume;prod_nume........................Ursulet 8 inchUrsulet 12 inch

Ursulet 18 inchPapusa regePapusa regina

Operatorul NOT din acest caz neaga conditia care-l urmeaza ;de aceea, in locsa potriveasca vanz_id cu DLL01 SGBD-ul potriveste vanz _id cu orceidentificator care nu este DLL01.Exemplul anterior putea fi de asemeneaobtinut prin folosirea operatorului <>asa cum vom vedea:

SELECT prod_nume

FROM ProduseWHERE vanz_id <>´DLL01´ORDER BY prod_nume;

prod_nume........................Ursulet 8 inchUrsulet 12 inchUrsulet 18 inchPapusa regePapusa regina

De ce atunci sa folositi operatorul NOT?Pentru clauzele WHERE simple,asa cumau fost cele prezentate aici,nu se poate spune ca ar exista vreun avantaj realin 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 fisimplu 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 ORAti aflat de asemenea cum sa gestionati in mod explicit ordinea de evaluare sicum sa folositi operatorii IN si NOT.

POZITIONARE

<html>

<head>


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>


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>


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>


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 background-

color</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 text-

decoration</a></b></p>

</body>

</html>

SA PUI O POZA IN DREAPTA

<html>

<head>


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.



</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

Css Romana

Documents

Transcript of Css Romana