Lucrare de laborator N1

Tema Crearea paginilor WEB in HTML. Crearea formularelor

Suport informational
Initiere in HTML :
http://www.lucian0308.com/tutorial-html/ http://www.drogoreanu.ro/tutorials/html.php

Crearea formularelor
Un formular HTML este o sectiune a unui document sectiune care contine te!t marca"e HTML si elemente speciale de formular #controls$ precum si etichetele aferente acestor elemente. %n lim&a"ul HTML formularele #forms$ sunt utili'ate: - pentru a selecta diferite optiuni e!istente in formular de catre un utili'ator( - pentru a permite unui utili'ator sa introduca infomatii etc. ormulare !form"#. Un formular repre'inta o 'ona care contine elemente de formular #form elements$. )lementele de formular sunt elemente care permit unui utili'ator sa introduca sau sa selecte'e informatia dintrun formular. )!emple de elemente de formular sunt: campurile te!t #te!t fields$ meniuri de selectie #drop-down menus$ &utoane radio #radio &uttons$ etc. Un formular este definit de marca"ul *form+ dupa cum se poate o&ser,a in urmatorul fragment dintr-un document HTML: $form% $input% $input% $&form% $form met'od()****) action()****)% !campurile formularului# $&form% -tri&utul met'od controlea'a modul in care informatia introdusa de utili'ator este transmisa ser,erului. .ele doua ,alori posi&ile sunt:

+ET Trimite informatia prin atasarea la U/L #"cript.p'p,nume(-.email(-/0.com$. -ceasta este optiunea implicita. )ste utila pentru date de dimensiuni mici #de e!emplu pentru un motor de cautare$. 0e asemenea utili'atorului ii este usor sa actuali'e'e re'ultatele formularului apasand &utonul de refresh al &rowser-ului. .antitatea de informatie transmisi&ila este limitata #cate,a sute de &iti$ si nu se pot transmite decat caractere -1.%%. 12ST Trimite informatia codificata prin HTT2. )ste recomandata pentru cele mai multe tipuri de formulare. Utili'atorul nu ,a ,edea datele din formular in U/L iar aceasta metoda poate fi folosita pentru a trimite datele de dimensiuni mari. 1pre deose&ire de metoda 3)T uti'atorul nu ,a putea reactuali'a usor re'ultatele formularului - de o&icei ,a aparea o casuta de dialog prin care poate specifica daca doreste sa trimita din nou datele din formular. -tri&utul action specifica unde ,or fi trimise datele din formularul completat de utili'ator de e!emplu http://www.site.com/formular.php sau http://www.site.com/date.asp.

$ 23M METH24()po"t) 5CTI2N()mailto:6ourname/6our.email.addre"")%

Campurile formularelor
.ampurile unui formular pot fi elemente de tip te*t bo* c'ec7bo* butoane radio sau liste drop8do9n. 4iecare camp are un nume si o ,aloare. 5umele este folosit de scriptul ser,er-side sau de un alt program pentru a sta&ili campul iar ,aloarea este informatia completata de utili'ator. %n cele ce urmea'a ,om studia tipurile de campuri si cum pot fi acestea utili'ate.

Campul Te*t

2ro&a&il cel mai des raspandit element de tip *input6+ este campul te!t. -cesta este un cadru in care utili'atorul poate introduce un te!t de dimensiuni mici cum ar fi numele sau adresa de mail. -re formatul: $input t6pe()te*t) name()****) :alue()****) "i;e()****) ma*lengt'()****)% -tri&utul name este numele elementului de e!emplu email sau ,arsta. -tri&utul :alue permite sa folositi o ,aloare predefinita care ,a aparea in cadru utili'atorul putand schim&a aceasta ,aloare daca doreste. -cest atri&ut este optional nu este o&ligatoriu sa introduci o ,aloare # :alue())$ sau il poti omite complet.

-tri&utul "i;e specifica latimea campului #numarul de caractere$. 0aca nu completa'i aceasta ,aloare &rowserul ,a folosi dimensiunea standard pentru acest camp. %n sfarsit atri&utul ma*lengt' limitea'a numarul de caractere pe care utili'atorul le poate introduce. 0aca nu specifici aceasta ,aloare utili'atorul poate introduce oricate caractere doreste.

Campul c'ec7bo*

.ampurile c'ec7bo* sunt elemente simple care pot fi selectate printr-un singur clic7 al mouse-ului. )le au o singura ,aloare de e!emplu 8es sau true. -ceste campuri sunt folosite pentru a trimite o singura informatie de e!emplu cand utili'atorul specifica daca ,rea sau nu sa primeasca reclame pe adresa de e-mail. Un camp c'ec7bo* are urmatorul format: $input t6pe()c'ec7bo*) name()****) :alue()****) c'ec7ed% -tri&utul name repre'inta numele campului. 2uteti crea mai multe elemente de tip c'ec7bo* cu acelasi nume ceea ce inseamna ca aceste elemente ,or apartine unui grup. 0upa ce formularul este trimis ,alorile acestor campuri ,or fi transmise cu acelasi nume. -tri&utul :alue specifica ,aloarea care ,a fi trimisa daca utili'atorul selectea'a casuta. 0aca utili'atorul deselectea'a casuta #astfel incat sa nu fie &ifata$ ,a fi transmisa o ,aloare nula. -tri&utul c'ec7ed daca este pre'ent ,a afisa casuta ca fiind de"a selectata. 0aca c'ec7ed nu apare in tag casuta ,a aparea ca fiind deselectata.

E*emplu < Urmatorul document HTML crea'a un formular care contine trei casute de selectie care permit utili'atorului sa selecte'e mai multe optiuni. .ontinutul documentului HTML este oferit in continuare:

Butonul 3adio
9utoanele radio sunt asemanatoare campurilor c'ec7bo* cu deose&irea ca dintr-un grup poate fi selectat un singur &uton radio. #.a si pentru c'ec7bo* un grup este format folosind acelasi nume pentru atri&utul name din tagul $input...%.$ 9utoanele radio sunt folosite atunci cand utili'atorul tre&uie sa aleaga o optiune dintre mai multe posi&ile. #0aca ai multe astfel de optiuni este mai &ine sa folosesti o lista$. Tag-ul pentru &utoanele radio este acelasi ca cel pentru chec7&o!: $input t6pe()radio) name()****) :alue()****) c'ec7ed% Name repre'inta numele campului #de e!emplu culoarea:preferata$. 0intr-un grup de &utoane radio #care au acelasi nume$ poate fi selectat unul singur. -tri&utul :alue sta&ileste ,aloarea care ,a fi transmisa daca &utonul este selectat. 0aca atri&utul c'ec7ed este pre'ent &utonul ,a fi afisat ca fiind selectat. 0aca acest atri&ut lipseste din tag &utonul ,a aparea deselectat.

Li"ta
Listele permit utili'atorului sa aleaga una sau mai multe optiuni dintr-o lista pre'entata. Un camp de tip lista are formatul: $"elect name()****) "i;e()****) multiple% $option :alue()****) "elected%Te*tul optiunii 1$&option% $option :alue()****)%Te*tul optiunii <$&option% ... $&"elect% Tag-urile $"elect%$&"elect% delimitea'a lista de optiuni in timp ce atri&utul name repre'inta numele listei #de e!emplu sport$. -tri&utul "i;e arata cate optiuni ,or fi afisate. 0aca acesta lipseste sau are ,aloarea ; ,a aparea o lista dropdown. -tri&utul optional multiple daca este pre'ent permite utili'atorului sa selecte'e mai multe optiuni tinand apasate tastele 1hift si .ontrol. %n interiorul tag-urilor $"elect% $&"elect% pot fi amplasate mai multe tag-uri $option%. 4iecare tag $option% repre'inta o optiune din lista. -tri&utul :alue este ,aloarea predefinita care ,a fi transmisa daca utili'atorul alege optiunea respecti,a. -tri&utul optional "elected ,a selecta optiunea respecti,a la afisarea pentru prima data a formularului.

%ntre tag-urile $option%$&option% puteti afisa o eticheta te*t pentru fiecare optiune. 2uteti o&ser,a ca aceste etichete te!t nu tre&uie sa fie identice cu atri&utul ,alue. Te!tul etichetelor nu ,a fi transmis odata cu formularul ci este doar un ghid pentru utili'ator.

Campul Te*t 5rea

0aca ,reti ca utili'atorul sa poata introduce te!te de dimensiuni mari #mai mult de o linie$ folositi campul te*tarea. -cesta are formatul: $te*tarea name()****) ro9"()****) col"()****) 9rap()****)% !te*t predefinit# $&te*tarea% -tri&utul name repre'inta numele campului #de e!emplu comentarii$. -tri&utul ro9" specifica inaltimea campului in caractere iar col" defineste latimea. -tri&utul 9rap controlea'a cum se comporta te!tul atunci cand atinge marginea din dreapta a campului. <alorile posi&ile sunt: off Te!tul ,a aparea si ,a fi transmis asa cum a fost introdus de utili'ator. Soft Te!tul apare modificat la introducerea in camp dar ,a fi transmis asa cum a fost scris de utili'ator. 'ard Te!tul din camp ,a aparea si ,a fi transmis modificat adica se ,a trece la linia urmatoare acolo unde spatiul nu %n interiorul tag-urilor $te*tarea% $&te*tarea% puteti amplasa un te!t care ,a fi afisat in mod implicit la incarcarea formularului. Utili'atorul poate sterge sau modifica acest te!t. E*emplu: %ntroduceti comentariul in casuta de mai "os: *te!tarea name=>comentarii> rows=>?> cols=>?0> wrap=>soft>+ Te!t */te!tarea+ este suficient.

Campul 1a""9ord !parola#

-cestea permit utili'atorului sa introduca te!t in mod u'ual dar caracterele ,or fi afisate ca @ pentru a nu aparea pe ecran. .ampul password are formatul: $input t6pe()pa""9ord) name()****) "i;e()****)% -tri&utul name specifica numele campului #de e!emplu password$ iar atri&utul "i;e arata latimea campului in caractere. 0aca omiteti aceasta ,aloare &rowser-ul ,a folosi marimea predefinita. E*emplu: 2arola: *input t8pe=>password> name=>parola> si'e=>A0>+

Incarcarea fi"ierelor in formulare

-proape toate &rowserele noi permit transmiterea fisierelor de pe hard dis7-ul utili'atorului catre ser,er printr-un formular HTML. 2entru ca acesta sa functione'e scriptul de pe ser,er #.3% -12 2H2 etc$ tre&uie construit astfel incat sa preia informatiile primite. .ampul pentru transmiterea unui fisier este format de o&icei dintr-o casuta te!t si un &uton 9rowse... pe care utili'atorul il poate folosi pentru a cauta pe hard fisierele pe care ,rea sa le incarce. .ampul are formatul: $input t6pe()file) name()****) "i;e()****) ma*lengt'()****) accept()****)% -tri&utul name repe'inta numele campului #de e!emplu po'a$.2rin "i;e puteti specifica latimea campului pentru numele fisierului in caractere. 0aca omiteti aceasta ,aloare &rowserul ,a folosi ,aloarea predefinita. -tri&utul ma*lengt' permite sa sta&iliti lungimea ma!ima a numelui fisierului in caractere. 0aca nu folositi aceasta ,aloare numele fisierului poate a,ea oricate caractere. E*emplu: 2hoto: *input t8pe=>file> name=>p;> accept=>image/@>+

Butoanele formularelor

Un formular poate contine pe langa campurile descrise mai sus si diferite tipuri de &utoane. -ceste &utoane permit utili'atorului sa trimita ser,erului formularul completat pentru prelucrarea informatiilor. 4ormularul ,a contine in general cel putin un &uton de tip su&mit pentru transmiterea datelor. ;. Butonul S=BMIT 9utoanele de tipul su&mit trimit informatiile scriptului care a fost preci'at prin atri&utul action din tag-ul form. .odul HTML pentru crearea unui astfel de &uton este: $input t6pe()"ubmit) name()****) :alue()****)% -tri&utul optional name repre'inta numele &utonului #de e!emplu trimite$. -tri&utul :alue specifica ,aloarea asociata acestui &uton si este de asemenea te!tul care ,a aparea pe &uton. 2uteti o&ser,a ca &utonul se comporta ca un chec7&o! in sensul ca ,aloarea &utonului este trimisa ca numele unui camp. 0eci daca &utonul a fost denumit trimite si are ,aloarea Trimite datele>? atunci un camp trimite a,and ,aloarea Trimite dateleB ,a fi transmis ser,erului impreuna cu restul informatiilor din formular.

2uteti include mai multe &utoane "ubmit in formular folosind scriptul de pe ser,er pentru a sta&ili ce &uton a fost apasat prin anali'a campurilor care au fost transmise #doar ,aloarea &utonului apasat ,a fi trimisa ser,erului$.

#0aca primul &uton este apasat campul trimite cu ,aloare TrimiteB ,a fi transmis ser,erului. 0aca cel de-al doilea &uton este apasat ,a fi transmis campul trimite cu ,aloarea Trimite acumB.$ =tili;area unei imagini pe po"t de buton 4ormularele pot a,ea &utoane su&mit in forma de imagini folosind tipul image. C imagine se comporta ca un &uton su&mit o&isnuit dar coordonatele D si E ale punctului unde utili'atorul a apasat de imagine ,or fi transmise si ele. -ceste coordonate sunt relati,e la coltul din stanga sus al imaginii. .oordonatele apar ca ,alori pentru doua campuri name.* si name.6 unde name repre'inta numele imaginii &uton. 0e e!emplu daca utili'atorul a apasat pe o imagine denumita fred la 30 pi!eli pe ori'ontala si A? pi!eli pe ,erticala fata de coltul din stanga sus al acesteia campurile name.* si name.6 ,or fi trimise cu ,alorile 30 si respecti, A?. Un astfel de &uton are formatul: $input t6pe()image) name()****) "rc()****) 9idt'()****) 'eig't()****) border()****) align()****) '"pace()****) :"pace()****) alt()****)% -tri&utul name pre'inta numele campului. -tri&utele "rc 9idt' 'eig't border align '"pace :"pace si alt se comporta ca intr-un tag IM+. E*emplu: *input t8pe=>image> name=>&uton> ,alue=>1u&mit> src=>imagini/&uton.gif> width=>;F0> height=>?0> alt=>9uton su&mit>+

A. Butonul 3ESET 9utonul re"et este folosit pentru a reseta continutul formularului la ,alorile initiale. -ceasta inseamna ca fiecare camp ,a fi schim&at aparand fie gol #nul$ sau cu ,aloarea predefinita prin atri&utul :alue.

1inta!a pentru &utoanele reset este simpla: $input t6pe()re"et) name()****) :alue()****)% .a si la &utoanele o&isnuite folosind atri&utul ,alue poti defini o eticheta care ,a aparea pe &uton. E*emplu: *input t8pe=>reset> ,alue=>/esetea'a formularul>+ 3. 5lte butoane %n afara &utoanelor de tip su&mit si reset poti crea si alte tipuri de &utoane in cadrul formularelor. -ceste &utoane nu au nici o functionalitate daca nu li se asocia'a un cod #de e!emplu functia on.lic7 pentru a acti,a un cod Ga,a1cript$. 2entru a crea un astfel de &uton folositi sinta!a: $input t6pe()button) name()****) :alue()****)% -tri&utul optional name repre'inta numele &utonului. -tri&utul :alue specifica ,aloarea asociata &utonului care ,a aparea si ca eticheta pe acesta. E*emplu: *input t8pe=>&utton> name=>&uton> ,alue=>.lic7B>+

1relucrarea datelor dintr8un formular

Un formular care nu este insotit de un cod care sa prelucre'e informatiile trimise este de fapt nefolositor. 0upa ce ,i'itatorul a completat formularul si a apasat &utonul de su&mit datele ,or fi trimise la adresa specificata prin atri&utul action din tag-ul form. 0e o&icei aceasta adresa repre'inta un script ser,er-side cum ar fi un script 2H2 sau -12.

Sarcina 1
;. 4amiliari'ati-,a cu partea teoretica a lucrarii. A. /eali'ati toate e!emplele pre'entate in partea teoretica a lucrarii.

Sarcina <
;. .reati urmatorul formular