Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • WEBlab 3

    Enviado por

    Mirela Marinescu
    18 visualizações25 páginas

    Título original

    WEBlab3

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    18 visualizações25 páginas

    WEBlab 3

    Enviado por

    Mirela Marinescu

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 25

    smaranda.belciug@inf.ucv.

    ro Laborator 3 Tehnologii Web si Programare Client Server

    Folosirea tabelelor Elementele de baz ale unui Tabel Toat complexitatea tabelelor HTML pornete de la trei elemente de baz: Borders (margini): fiecare tabel trebuie s aib exact patru margini care s formeze un dreptunghi. Celule: Acestea sunt spaii individuale (arii) nuntrul marginilor tabelului. Cell span: nuntrul structurii de patru perei, poi s tergi sau s adaugi pereii unei celule, (ca n figura de mai jos). Cnd tergi pereii unei celule, creezi un cell span cu linii sau coloane multiple. Cell span (cuprinderea celulei i cell width (limea celulei) lucreaz n moduri diferite: Cell span: modifici spaiul celulei combinnd celule. Astfel se renun la pereii celulei Cnd mreti limea unei celule, schimbi doar spaiul din acea celul.

    smaranda.belciug@inf.ucv.ro

    Schiarea Tabelului Tabelele pot fi complexe. Trebuie s tii s le planifici cu mult grij. Maparea fiecrui pixel n parte este destul de dificil. De cte coloane i de cte linii ai nevoie Limea tabelului i a celulelor Dac trebuie s ai cell span pe linii sau pe coloane Dac tabelul o s fie n centru, n stnga sau n dreapta Dac o s aib hyperlink-uri i unde vor fi ele poziionate. Noteaz ce dimensiuni n pixeli au imaginile pe care vrei s le foloseti. Verific dac tabelul se vede frumos n browser, fr ca utilizatorul s fie forat s fac scroll n stnga i n dreapta pentru a vedea totul (este frustrant!)

    Cum se construiete un tabel?

    n momentul n care schia cu tabelul este gata, deschide un editor HTML i creeaz scheletul tabelului tu.

    smaranda.belciug@inf.ucv.ro Componente Un tabel are trei componente: Tabelul: <table> Linie nou: <tr> (<tr> trebuie inclus n <table>) Celul: <td> (<td> trebuie inclus n <tr>) Crearea unui tabel simplu Tag-ul <tag> i markup-ul specific apar ntre tag-urile <body> din document. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body> <table> <tr> <td> cell 1 </td> <td> cell 2 </td> </tr> <tr> <td> cell 3 </td> <td> cell 4 </td> </tr> </table> </body> </html>

    Dac avem un tabel cu numr egal de coloane i de linii totul e simplu, dar ce facem cnd nu este aceasta situaia? Pentru a rezolva problema cu ajutorul unui atribut care i spune browser-ului cum trebuie s arate tabelul. Numrul din acest atribut corespunde numrului de coloane sau de linii pe care vrei s se ntind (span) o celul, deci dac se creeaz un tabel asemntor cu schia de mai sus, atributul colspan = 2. <table> <tr> <td colspan=2> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> 3

    smaranda.belciug@inf.ucv.ro </table>

    Adugarea marginilor Exist dou metode pentru a afia sau nu marginea tabelului: Prin setarea atributului border n elementul <table>. Valoarea atributului border trebuie s fie un ntreg care definete grosimea marginii n pixeli. Evident, pentru a nu afia marginea setm valoarea la 0: <table border=0> Prin definirea marginii folosind proprietatea CSS border. Poi s defineti stilul marginii, ltimea sau culoarea folosind CSS.

    Setarea atributului border <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body> <table border=1> <tr> <td colspan=2> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table> </body> </html> Folosirea proprietii CSS border Spre deosebire de atributul (X)HTML border, CSS i permite s defineti stilul marginii. selector {border-style: value;} Valorile posibile sunt: dotted dashed solid double

    smaranda.belciug@inf.ucv.ro groove ridge inset outset table {border-style: solid;} selector {border-width: value;} table {border-width: 1px;} selector {border-color: value;} table {border-color: black;} table {border: 1px solid gray;} Ajustarea limii i nlimii tabelului <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body> <table border=1 width=630> <tr> <td colspan=2 width=630> contents </td> </tr> <tr> <td width=400> contents </td> <td width=230> contents </td> </tr> </table> </body> </html> Proprietatea CSS width selector {width: value;} table {width: 630px;} td.cellone {width: 630px;} td.celltwo {width: 630px;} td.cellthree {width: 630px;}

    smaranda.belciug@inf.ucv.ro Padding i spacing Determinarea spaiului dintre celule este esenial pentru un layout bun. Atribute (X)HTML Dou atribute care pot s defineasc spaiile albe sunt cellpadding i cellspacing. cellspacing: adaug spaiu ntre celule (limea border-ului este ajustat) cellpadding: adaug spaiu n celul (ntre pereii celulei).

    <table cellpadding=5 cellspacing=5> Lucrul cu cellpadding i cellspacing pentru a aranja layout-ul tabelului poate s provoace dureri de cap. Cteodata e nevoie de crearea de celule goale pentru a controla layout-ul. Trebuie s: 1. Creezi o celul. 2. S adaugi n celul: o <br /> o o imagine transparent de 1x1 pixeli, creia i poi manipula limea CSS Poi s foloseti CSS-ul pentru a controla cellpadding-ul sau cellspacing-ul. Pentru cellpadding n celul: selector {padding: value;} td {padding: 10px;} ntre celule: selector {border-spacing: value;} td {padding: 10px;}

    Shiftarea aliniamentului Aliniament orizontal Poi alinia celule orizontal folosind atributul align: pentru a alinia tabelul orizontal, se folosete atributul align cu elementul <table>. Acesta poate avea urmtoarele valori: left, right, center. Poi s foloseti atributul align n elementele <td>,<tr>. Valorile pot fi: o align=right: aliniaz tabelul sau coninutul celulei la dreapta o align=center: aliniaz tabelul sau coninutul celului la stnga (default) o align=justify: centreaz tabelul sau coninutul celulelor.

    smaranda.belciug@inf.ucv.ro <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body> <table border=2 width=430 align=center cellpadding=20> <tr> <td width=630 colspan=2 align=center> contents </td> </tr> <tr> <td width=230 align=center> contents </td> <td width=200 align=center> contents </td> </tr> </table> </body> </html>

    Aliniament vertical Poi s aliniezi vertical coninutul celulelor folosind atributul valign. Poate fi folosit doar n <tr> i <td>. Valorile posibile sunt: valign = top valign = bottom valign = middle valign = baseline

    Folosirea CSS-ului pentru definirea aliniamentului Exist dou proprieti care controleaz aliniamentul tabelului folosind CSS-ul: textalign i vertical-align. Au acelai valori ca i precedentele.

    Exemple 1. Colspan <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body>

    smaranda.belciug@inf.ucv.ro <table border=2 width=430 align=center cellpadding=20 type=text/css style=font-family: Arial, sans-serif; font-size: 18pt;> <tr> <td width=430 colspan=2 align=center type=text/css style=background-color: blue; color: white; font-weight: bolder;> contents </td> </tr> <tr> <td width=230 align=center> contents </td> <td width=200 align=center> contents </td> </tr> </table> </body> </html>

    2. Rowspan <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Tables</title> </head> <body> <table border=2 width=430 align=center cellpadding=20 type=text/css style=font-family: Arial, sans-serif; font-size: 18pt;> <tr> <td width=230 align=center> contents </td> <td width=200 align=center rowspan=2 type=text/css style=background-color: blue; color: white; font-weight: bolder;> contents </td> </tr> <tr> <td width=230 align=center> contents </td> 8

    smaranda.belciug@inf.ucv.ro </tr> </table> </body> </html>

    Curirea codului Scrierea eficient a markup=ului este uor de corecta i de meninut. Aa NU! <table border=1 width=630> <tr><td width=630 colspan=2> contents </td></tr> <tr><td width=400> contents </td> <td width=230> contents </td></tr></table> Aa DA! <table border=1 width=630> <tr> <td width=630 colspan=2> contents </td> </tr> <tr> <td width=400> contents </td> <td width=230> contents </td> </tr> </table> Tabel n tabel

    smaranda.belciug@inf.ucv.ro

    <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Nesting Tables</title> </head> <body> <table border=1 cellpadding=20 align=center> <tr align=center> <td> contents </td> <td> contents </td> </tr> <tr> <td> <table border=1> <tr> <td> contents </td> <td> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table> </td> <td> contents </td> </tr> </table> </body> </html>

    Eticheta DIV Pn acum am discutat despre cum putem s folosim tabelele pentru a realiza aezarea n pagin a site-ului nostru. Folosirea tabelelor este uoar i merge perfect pe moment, deoarece peste ase luni cnd suntei rugai s modificai site-ul va trebui s distrugei tabelul i s-l recreai din nou. Dac, n schimb, folosim eticheta <div> mpreun cu CSS vom crea o pagin care este uor de modificat mai trziu. Folosirea etichetei <div> permite definirea paginii n termeni de diviziuni logice ale paginii, nu doar locaii n design (care s-ar putea modifica n viitor). Avei grij s folosii nume corecte pentru a marca diviziunile. O pagin Web obinuit are una sau mai multe diviziuni precum:

    10

    smaranda.belciug@inf.ucv.ro header <h1>...</h1> navigare (de obicei este o list) <ul id="navigation">...</ul> left siderbar <div id="sidebar">...</div> right sidebar <div id="subtext">...</div> body <div id="body">...</div> footer <div id="footer">...</div> Odat definite elementele <div> din pagin, se poate folosi CSS pentru a le stiliza. Deoarece se folosete o aezare n pagin fr tabele, va trebui s folosim CSS pentru a poziiona div-urile acolo unde dorim. Dup ce am fcut design-ul cu CSS pentru div-uri, trebuie s testai pagin n diferite browsere, pentru a fi siguri c pagina arat la fel peste tot.

    <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Exemplu div</title>

    <body id="htmlsource"> <div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">Aici este coloana de navigare, se afla in partea stanga a paginii.</div> <div style="position: absolute; left: 120px; top: 90px; background-color: orange; width: 620px; padding: 15px;"> Aici e continutul principal. Pare sa fie ca un tabel, dar se observa ca se suprapune cu layer-ul din stanga Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla </div> <div style="z-index: 2; position: absolute; left: 610px; top: 155px; background-color: yellow; width: 100px; padding: 10px; border: red 2px dashed;">

    11

    smaranda.belciug@inf.ucv.ro Alt layer care se suprapune cu continutul principal. <p> Sper ca se observa cat de frumoasa este marginea :D</p></div> <div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;"> As putea sa continui, dar cred ca este evident cat de profi arata </div>

    <div style="position: absolute; left: 120px; bottom: 180px; background-color: green; width: 150px; padding: 5px; color: white; border: 10px black double;"> Intelegeti bine sursa documentului pentru a va putea descurca la proiect.</div> <div style="z-index: 1; position: absolute; right: 10px; bottom: 10px; backgroundcolor: #cc3300; width: 280px; padding: 10px; color: white; "> Acum, incercati sa modificati marimea ferestrei. Layer-urile se vor misca deoarece sunt pozitionate absolute fata de marginile paginii.. deci, evident se vor modifica odata cu marginile. </div> <p> Textul acesta este scris pe ultimele randuri ale codului, dar apare sus pe pagina, ca si cum nu ar fi nimic deasupra lui </p> </body> </html>

    12

    smaranda.belciug@inf.ucv.ro

    Tag-ul div are mai cteva atribute. Pentru a realiza un bloc de navigare ar trebui folosit un cod asemntor cu: div#navigation {width: 200px; background: gray; padding: 10px; } - ntr-un fiier extern css sau ntr-un bloc stil. <div id="navigation">...navigation links...</div> Floating elements Deorece div-urile sunt blocuri de elemente, ele se vor aeza una peste alta dac nu se poziioneaz corect. Cel mai simplu mod de a le poziiona este folosirea proprietii CSS float. #column1 {float: left; width: 200px; padding: 10px; } #column2 {float: left; width: 200px; padding: 20px; }

    CSS-poziionare Exist dou tipuri de poziionare: absolute i relative. Codul care trebuie folosit este: tag {position: choice; top: 0px; bottom: 0px; left: 0px; right: 0px; } Fixed Un element care are poziionarea setat fixed, nu se va mic de pe ecran, chiar dac se face scroll. p.pos_fixed { position:fixed; top:30px; right:5px; }

    Absolute Dac poziionai un element (o imagine, un tabel etc.) folosind absolute, el va aprea exact n dreptul pixelului pe care-l specificai. S presupunem c dorim ca o imagine s apar la 46 pixeli de marginea de sus i 80 pixeli de marginea din dreapta. Codul CSS care trebuie folosit este: 13

    smaranda.belciug@inf.ucv.ro

    img {position: absolute; top: 46px; right: 80px; } <img src="../bla/bla.gif" width="100" height="100" alt="Absolutely positioned image." border="1" style="position: absolute; top: 56px; right: 80px"> Trebuie s avei grij deoarece elementele pot s se suprapun. Poziionarea layerelor Pentru a crea layere cu eticheta <div>, codul trebuie s arate aa: <div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div> nti trebuie specificat poziia layer-ului, apoi dimensiunile (opional). Dac dorim s dm o anumit culoare background-ului layer-ului, trebuie s adugm: background-color: red; . Orice element dintr-o pagin obinuit poate fi poziionat cu div-uri. Ele se ncarc mult mai rapid dect un layout cu tabele. Tabelele nu sunt afiate pe ecran dect dup ce s-au ncrcat complet. Cu layere, toat informaia de care are nevoie un browser se afl n atributele de stil pe care le adugai. Deci, browserul le va afia pe msur ce acestea se ncarc. Pentru a face ca layerele s se suprapun, trebuie s folosii comand z-index. Adugai z-index: 1 la codul respectiv, iar acest element va aparea deasupra tuturor celorlalte elemente care nu conin aceast comand. Dac dorii ca un alt element s fie deasupra acestui layer, trebuie s adugai z-index: 2 i aa mai departe. Cu ct indexul este mai are cu att urca deasupra celorlalte elemente div-ul respectiv. Coninutul principal trebuie adugat primul n cod. Astfel se va ncarca rapid, iar utilizatorii vor putea s citeasc ceea ce este important, fr s atepte s se ncarce restul elementelor. Poziionarea relativ Elementul este pozitionat relativ fa de poziia normal. <span style="position: relative; top: 12px; left: 22px;">some words</span> Pentru a suprascrie o proprietate de poziie motenit i a transforma elementul ntr-o parte normal a paginii, setm: position: static.

    14

    smaranda.belciug@inf.ucv.ro Setarea marginilor border-width border-color border-style border-top border-left border-bottom border-right Exemplu: <div style="border: red 4px dashed; border-bottom: blue 4px solid; border-topstyle: ridge;">text</div>

    Atribute

    n afar de valorile: thin, medium i thick se mai pot folosi numere (3px).

    15

    smaranda.belciug@inf.ucv.ro

    Lucrul cu Formulare Web-ul conine milioane de formulare, dar fiecare dintre ele are ca baz acelai schelet. Formularele Web pot s fie scurte sau lungi, simple sau complexe i au o mulime de ntrebuinri. Toate ns se ncadreaz n urmtoarele dou categorii: Search forms formulare care le permit utilizatorilor s caute ntr-un site sau n ntreg Web-ul Data-collection forms formulare care strng informaii pentru shopping online, suport tehnic, preferinele site-ului i personalizare.

    16

    smaranda.belciug@inf.ucv.ro

    Crearea de formulare Tag-urile de markup HTML i atributele pot s: Defineasc structura formularului Fiecare formular are aceeai structur de baz S spun browser-ului Web cum s utilizeze datele din formular S creeze obiecte de input (cmpuri text i liste drop-down)

    Structur Toate elementele de input asociate cu un singur formular sunt:

    17

    smaranda.belciug@inf.ucv.ro Coninute ntre tag-ul <form> Procesate de acelai form handler. Un form handler este un program de pe serverul Web ( sau un simplu mailto URL) care are grija de datele pe care le trimite user-ul prin intermediul formularului. Un browser Web poate doar s strng informaii prin intermediul formularelor; el nu tie cum s proceseze informaia. Trebuie construit un alt mecanism care s tie s foloseasc datele colectate. Atribute ntotdeauna se folosesc urmtoarele dou atribute cheie n tag-ul <form>: action: URL-ul form handler-ului. method: cum vrei s fie trimise datele din formular form handler-ului. Form handler-ul dicteaz care dintre valorile de mai jos s fie folosit pentru method: get: trimite datele din formular form handler-ul cu adresa URL respectiv. post: trimite datele din formular n header-ul Hypertext Transfer Protocol (HTTP) Markup Markup-ul din listarea urmtoare creeaz un formular care folosete metoda post pentru a trimite informaiile introduse de utilizator unui form handler (guestbook.cgi) pentru a fi procesate de serverul Web. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Forms</title> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> </head> <body> <form action=cgi-bin/guestbook.cgi method=post> <!-- formularul--> </form> </body> </html>

    Input tags HTML folosete o varietate de diferite opiuni de input - de la cmpuri text pn la butoane de radio i de la fiiere la imagini. Fiecare control de input asociaz o valoare cu un nume: cnd creezi un control, i dai un nume.

    18

    smaranda.belciug@inf.ucv.ro Controlul trimite napoi valoarea calculat n funcie de ce face utilizatorul cu formularul. De exemplu, dac tu creezi un cmp text n care utilizatorul trebuie s-i completeze prenumele, numele cmpului va fi firstname (prenume).

    Cmpuri de input Se pot folosi o varietate de cmpuri de input n formular. Pentru elementele de input care cer utilizatorului s selecteze o opiune (cum ar fi check box sau radio button), deci nu un cmp n care s se scrie ceva, se definete att numele ct i valoarea. Cnd utilizatorul selecteaz un button sau un checkbox iar apoi apas butonul de Submit, formularul returneaz numele i valoarea asignat elementului. Text Cmpurile text sunt cmpuri de maxim o linie pe care utilizatorul le poate completa. Pentru a defini un cmp de input ca fiind un cmp text, se folosete elementul <input /> cu atributul type setat cu valoarea text. <input type=text /> Se seteaza numele cmpului: <input type=text name=firstname /> <form action=cgi-bin/guestbook.cgi action=post> <p>First Name: <input type=text name=firstname /></p> <p>Last Name: <input type=text name=lastname /></p> </form>

    Poi controla mrimea cmpului text cu urmtoarele atribute: size: numrul de caractere ale cmpului text maxlength: numrul maxim de caractere pe care utilizatorul le poate scrie

    <form action=cgi-bin/guestbook.cgi action=post> <p>First Name: <input type=text name=firstname size=30 maxlength=25 /></p> <p>Last Name: <input type=text name=lastname size=30 maxlength=25 /></p> </form>

    19

    smaranda.belciug@inf.ucv.ro

    Parole Un cmp pentru parol este care nu afieaz ceea ce utilizatorul scrie. <form action=cgi-bin/guestbook.cgi action=post> <p>First Name: <input type=text name=firstname size=30 maxlength=25 /></p> <p>Last Name: <input type=text name=lastname size=30 maxlength=25 /></p> <p>Password: <input type=password name=psswd size=30 maxlength=25 /></p> </form>

    Check boxes i radio buttons <form action=cgi-bin/guestbook.cgi action=post> <p>What are some of your favorite foods?</p> <p><input type=checkbox name=food value=pizza checked=checked />Pizza<br /> <input type=checkbox name=food value=icecream />Ice Cream<br /> <input type=checkbox name=food value=eggsham />Green Eggs and Ham<br /> </p> <p>What is your gender?</p> <p><input type=radio name=gender value=male />Male<br />

    20

    smaranda.belciug@inf.ucv.ro <input type=radio name=gender value=female checked=checked />Female</p> </form>

    Cmpuri ascunse Un cmp ascuns i ofer o metoda de a colecta numele i valoarea informaiei pe care utilizatorul nu o poate vedea. <form action=cgi-bin/guestbook.cgi action=post> <input type=hidden name=e-mail value=me@mysite.com /> <p>First Name: <input type=text name=firstname size=30 maxlength=25 /></p> <p>Last Name: <input type=text name=lastname size=30 maxlength=25 /></p> <p>Password: <input type=password name=psswd size=30 maxlength=25 /></p> </form> Ca regul general, folosirea adresei tale de e-mail ntr-un cmp ascuns este folosit doar ca adresa ta s fie preluat de spammeri. <form action=cgi-bin/guestbook.cgi action=post> <input type=hidden name=e-mail value=me@mysite.com /> <p>First Name: <input type=text name=firstname size=30 maxlength=25 /></p> <p>Last Name: <input type=text name=lastname size=30 maxlength=25 /></p> <p>Password: <input type=password name=psswd size=30 maxlength=25 /></p> </form>

    21

    smaranda.belciug@inf.ucv.ro Upload-ul de fiiere Printr-un formular se pot uploada diferite documente i alte fiiere cum ar fi imagini etc., de la utilizatori. Cnd utilizatorul apas butonul de Submit, browser-ul copiaz fiierul i l trimite mpreun cu celelalte date din formular.

    <form action=cgi-bin/guestbook.cgi action=post> <p>Please submit your resume in Microsoft Word or plain text format:<br /> <input type=file name=resume /> </p> </form>

    Liste drop-down Listele drop-down sunt o metod grozava pentru a da utilizatorilor mai multe opiuni fr a ocupa mult spaiu pe ecran. <form action=cgi-bin/guestbook.cgi action=post> <p>What is your favorite food?</p> <select name=food> <option value=pizza>Pizza</option> <option value=icecream>Ice Cream</option> <option value=eggsham>Green Eggs and Ham</option> </select> </form>

    22

    smaranda.belciug@inf.ucv.ro

    <form action=cgi-bin/guestbook.cgi action=post> <p>What are some of your favorite foods?</p> <select name=food size=2 multiple=multiple> <option value=pizza>Pizza</option> <option value=icecream>Ice Cream</option> <option value=eggsham selected=selected>Green Eggs and Ham</option> </select> </form>

    Multi-line text boxes Dac o singur linie de text nu ajunge utilizatorului pentru a rspunde, se creeaz un text box n locul unui text field: <form action=cgi-bin/guestbook.cgi action=post> <textarea rows=10 cols=40 name=comments> Please include any comments here. </textarea> </form>

    23

    smaranda.belciug@inf.ucv.ro

    Submit i Reset Butoanele Submit i Reset ajut utilizatorul s-i spun browser-ului ce s fac cu formularul. <form action=cgi-bin/guestbook.cgi action=post> <p>First Name: <input type=text name=firstname size=30 maxlength=25 /></p> <p>Last Name: <input type=text name=lastname size=30 maxlength=25 /></p> <p>Password: <input type=password name=psswd size=30 maxlength=25 /></p> <p>What are some of your favorite foods?</p> <p><input type=checkbox name=food value=pizza checked=checked />Pizza<br /> <input type=checkbox name=food value=icecream />Ice Cream<br /> <input type=checkbox name=food value=eggsham />Green Eggs and Ham<br /> </p> <p>What is your gender?</p> <p><input type=radio name=gender value=male />Male<br /> <input type=radio name=gender value=female checked=checked />Female</p> <p> <input type=submit value=Send /> <input type=reset value=Clear /> </p> </form>

    24

    smaranda.belciug@inf.ucv.ro

    Validarea Indiferent de ct de inteligeni sunt vizitatorii site-ului tu, exist ntotdeauna posibilitatea ca ei s introduc date la care tu nu te atepi. JavaScript vine n ajutor! Validarea formularelor nseamn verificarea datelor pe care le introduce utilizatorul nainte de a fi introduse n baza de date. Datele se verific n JavaScript nainte de a fi trimise la server. Aceasta nseamn ca vizitatorii nu ateapt ca serverul s verifice datele li se transmite repede (nainte de a apasa butonul Submit, dac doreti) dac exist vreo problem.

    25

    Você também pode gostar