Sunteți pe pagina 1din 65

Universitatea Constantin Brncui din Trgu-Jiu Facultatea de Inginerie Departamentul de Automatic, Energie i Mediu

Tehnologii Web

Lector univ. dr. Adrian Runceanu

Curs 4

Limbajul Html (partea IV)

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

3 Tehnologii WEB - curs

8.1. Descriere atribute:

Atributul action primete ca valoare adresa URL a scenariului CGI ce va primi datele furnizate de utilizator i le va prelucra, genernd un rspuns. Dac atributul action lipsete, datele vor fi trimise la adresa documentului curent. Este posibil expedierea datelor furnizate de ctre utilizator la o adres potal, caz n care atributul action va primi ca valoare adresa de e-mail respectiv, nsoit de prefixul mailto:

4 Tehnologii WEB - curs

Atributul method specific modul n care va fi trimis informaia ctre server. Atributul method poate primi dou valori:

get post

Datele furnizate de utilizator n formular sunt adugate la adresa URL a scriptului CGI, sub form de perechi de tipul: <cmp>=<valoare> n cazul valorii get a atributului method, aceste perechi de date sunt adugate la sfritul adresei URL a scriptului, dup semnul ?, separate prin &. Atunci cnd trimit un formular ctre server, majoritatea browser-elor afieaz acest ir.
Tehnologii WEB - curs

Exemplu: Tagul <form action = http://www.utgjiu.ro/registration method=get> ce va conine dou cmpuri de tip text: cmpul nume, n care utilizatorul a introdus valoarea Costica Popescu i cmpul email, n care utilizatorul a introdus valoarea costica@gmail.com va determina transmiterea catre server a cererii:
http://www.utgjiu.ro/registration ? nume = PopescuCostica & email = costica@gmail.com

6 Tehnologii WEB - curs

Dac se dorete evitarea afirii lui, va fi utilizat valoarea post a atributului method, caz n care irul este transmis serverului printr-o secven HTTP special. Atributul name primete ca valoare numele formularului, n situaia n care sunt mai multe formulare n document. Deasemenea, numele formularului este util i atunci cnd scriptul este scris n JavaScript, pentru a putea fi referit. Atributul target primete ca valoare numele ferestrei n care se va face afiarea rspunsului emis de server. Dac numele transmis ca parametru atributului target nu a fost definit anterior, atunci browserul va crea o ferestr nou cu acest nume. Implicit, browser-ul va afia rspunsul n pagina curent.
Tehnologii WEB - curs

Exist cteva cuvinte cheie ce pot fi transmise ca valoare atributului target: _self rspunsul scriptului va fi afiat n fereastra ce conine formularul _parent rspunsul scriptului va fi afiat n fereastra printe a ferestrei ce conine formularul _top - rspunsul va fi afiat n fereastra din vrful ierarhiei de ferestre _blank - va fi creat o fereastr nou n care va fi afiat rspunsul. Efectul este similar situaiei n care atributul target a primit valoare un nume de fereastr ce nu a fost definit anterior. Atributul title ofer posibilitatea afirii unui text explicativ de ndat ce mouse-ul se oprete deasupra formularului.
Tehnologii WEB - curs

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

9 Tehnologii WEB - curs

8.2. Elemente de formular

ntre perechea de taguri <form> si </form> sunt definite o serie de elemente de formular, destinate recepionrii datelor furnizate de utilizator. Cea mai mare parte a acestora se definesc cu ajutorul tagului <input>.

10 Tehnologii WEB - curs

Sintaxa general a tagului input este: <input type=text/password/hidden/radio/checkb ox/submit/reset/button/file/image name= value= checked size= maxlenght=>

11 Tehnologii WEB - curs

Descriere atribute: type definete tipul de element de formular, care poate fi : text - definete un cmp de editare pentru un cuvnt sau o linie de text. Cmpurile de editare accept parametrii: value size maxlength
12 Tehnologii WEB - curs

password definete un cmp de editare a unei parole. Caracterele introduse de utilizator sunt ascunse, cmpul de editare afind semnul * n locul fiecrui caracter. Atribute acceptate (ca i cmpurile de editare): value size maxlength

13 Tehnologii WEB - curs

radio butoanele radio permit selectarea unei opiuni dintre mai multe existente. O opiune este definit printr-un cmp radio.
ntr-un set de butoane radio, la un moment dat, o singur opiune poate fi selectat.

Pe un formular pot exista mai multe seturi de butoane radio, gruparea lor ntr-un anumit set realizndu-se prin precizarea unui nume comun (numele este dat de valoarea atributului name).
Tehnologii WEB - curs

14

Atribute acceptate: name value - precizeaz ce valoare va fi trimis ctre server, alturi de valoarea atributului name, atunci cnd a fost selectat opiunea respectiv. Dac ns nu aceasta este opiunea aleas din setul respectiv, atunci informaia oferit de buton nu este trimis ctre server checked
Tehnologii WEB - curs

15

checkbox definete un cmp de validare. Un asemenea cmp are dou stri: selectat sau neselectat. Atribute acceptate: name value implicit are valoarea on (cmp de validare selectat) checked

16 Tehnologii WEB - curs

submit definete un buton cu efect predefinit de expediere ctre server a informaiei din formular. Atribute acceptate: name value precizeaz textul afiat pe suprafaa butonului. Implicit, titlul butonului este Submit Query

17 Tehnologii WEB - curs

reset - definete un buton cu efect predefinit de anulare a informaiei din formular. Coninutul tuturor cmpurilor vor fi resetate la valoarea implicit. Atribute acceptate: name value precizeaz titlul butonului. Implicit, acesta este Reset

18 Tehnologii WEB - curs

button definete un buton de comand. Aciunea lui este descris printr-un script (JavaScript, Java, VBScript amd.). Atribute acceptate:

name value precizeaz titlul butonului

Cu ajutorul acestui element se pot defini butoane cu imagini, caz n care tagul img, ce defineste imaginea, va fi inclus n interiorul perechii <input type=button> </input>.
Tehnologii WEB - curs

19

file definete un element de tip caset de fiiere, ce conine un cmp de editare unde va fi afiat calea fiierului selectat i un buton de comand Browse. Atribute acceptate: name value precizeaz URL-ul fiierului selectat

20 Tehnologii WEB - curs

hidden definete un cmp ascuns (care nu este afiat n formular). Cmpurile ascunse sunt utilizate pentru a trimite ctre server informaii suplimentare, ce nu pot fi modificate de utilizator. Atribute acceptate: name value
Tehnologii WEB - curs

21

image plaseaza o imagine activa a carei adresa este introdusa printr-un atribut src. Apasand pe imagine formularul va fi trimis, inclusiv coordonatele pointerului de mouse. image poate primi atributele:

align ( pentru pozitionarea imaginii relativ la textul inconjurator ) name src

22 Tehnologii WEB - curs

name definete numele cmpului creat.

Numele va fi trimis ctre server, alturi de valoarea sa, pentru a permite execuia scriptului.

value precizeaz valoarea implicit a cmpului.


Aceast valoare va fi afiat la prima activare a formularului. Utilizatorul o poate modifica sau poate opta pentru pstrarea ei pentru a fi trimis serverului.
Tehnologii WEB - curs

23

checked atribut utilizat n cazul casetelor de validare sau a butoanelor radio. Prezena lui determin selectarea cmpului n cauz. size determin lungimea cmpului (exprimat n caractere). Atribut utilizat de cmpurile de editare. maxlength fixeaz numrul maxim de caractere ce vor fi acceptate de ctre cmpurile de editare. Depirea acestui numr va fi semnalat printr-un mesaj sonor. Dac valoarea atributului maxlength este mai mare dect valoarea atributului size, textul introdus n cmpul de editare va defila ctre stnga.

24 Tehnologii WEB - curs

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

25 Tehnologii WEB - curs

Exemplu: Formular cu 2 campuri, buton Trimite si buton Sterge


<form action="script.php" method="post"> Nume:<input type="text" name="nume"> Prenume:<input type="text" name="prenume"><br> <input type="submit" value="Trimite"><input type="reset" value="Sterge"> </form>

26

Exemplu: Daca se doreste se pot particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.
<form action="script.php" method="post"> <input type="image" src="trimite.gif" alt="Trimite"> </form>

27

8.3. Cmpuri de editare multilinie

Cmpuri de editare multilinie se realizeaz cu ajutorul tagului textarea. Ele permit introducerea i afiarea unui text pe mai multe linii. Dac lungimea textului depete lungimea cmpului, atunci se va ancora o bar de defilare orizontal. Dac numrul de linii ale textului depesc nlimea cmpului, atunci se va ancora o bar de defilare vertical. Textul introdus intre tagurile textarea va fi afisat in fereastra corespunzatoare din browser.

28 Tehnologii WEB - curs

Atribute acceptate: name definete numele cmpului readonly atribut a crui existen inhib utilizatorului dreptul de scriere n cmp cols primete ca valoare un numr ntreg pozitiv reprezentnd numrul de caractere ce vor fi afiate pe linie rows - precizeaz numrul de linii ale cmpului multilinie

29 Tehnologii WEB - curs

wrap definete modalitatea de spargere a textului n linii n interiorul cmpului. Atributul poate lua valorile: off (valoarea implicit) Textul este afiat pe un singur rnd. Utilizatorul poate trece pe linia urmtoare apsnd tasta ENTER. Textul trimis serverului va conine caracterele de sfrit de linie hard Textul se aaz automat pe rnduri, lungimea acestora fiind determinat de lungimea cmpului. Deasemenea, textul trimis serverului va conine caracterele de sfrit de linie soft Textul se aaz automat pe rnduri, lungimea acestora fiind determinat de lungimea cmpului, ns textul trimis serverului nu va mai conine caracterele de sfrit de linie

30 Tehnologii WEB - curs

Exemple campuri de editare multilinie

31

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

32 Tehnologii WEB - curs

8.4. Liste de selecie


Listele de selecie permit selectarea uneia sau a mai multe opiuni dintr-o list. Ele reprezint o combinaie ntre butoanele radio (selecie singular) i cmpurile de validare (selecie multipl). Deosebirea este aceea c utilizarea listelor de selecie nu necesit afiarea tuturor opiunilor, ci numai a unora dintre ele, deplasarea printre alternative realizndu-se cu ajutorul unei bare de defilare vertical.
Tehnologii WEB - curs

33

Listele de selecie sunt realizate cu ajutorul tagului <select>. Atribute acceptate:


name definete numele cmpului de selecie size stabilete cte elemente ale listei sunt vizibile la un moment dat, restul opiunilor fiind accesibile prin utilizarea barei de defilare vertical Implicit, valoarea atributului size este 1 multiple prezena atributului multiple permite selectarea mai multor elemente ale listei (echivalent cmpurilor de selecie), altfel, n cazul seleciei singulare, un singur element al listei poate fi selectat la un moment dat (echivalent butoanelor de opiune). Atributul multiple nu are efectul dorit n cazul listelor de selecie ce au valoarea size egal cu 1.
Tehnologii WEB - curs

34

Introducerea opiunilor n list se realizeaz cu tagul <option>, poziionat n interiorul perechii <select> </select>.

Acesta accept atributele: name precizeaz numele opiunii selected prezena atributului selected n interiorul tagului <option> face ca opiunea respectiv s fie selectat la ncrcarea formularului Dac valoarea atributului size a tagului select este 1, atunci, implicit va fi afiat prima opiune a listei de selecii (n cazul n care nici o opiune nu are prezent parametrul selected). value precizeaza valoarea trimisa catre server la activarea optiunii submit a formularului; in cazul in care atributul value lipseste catre server se va trimite ca valoare chiar textul care urmeaza tagului <option>
Tehnologii WEB - curs

35

Exemple liste de selectie

36

Exemple liste de selectie

37

Exemple liste de selectie

38

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

39 Tehnologii WEB - curs

8.5. Etichetele

Etichetele reprezint un element de formular care, ataat butoanelor radio sau cmpurilor de validare, face ca selectarea/deselectarea unei opiuni s se realizeze i prin apsarea etichetei opiunii respective. Acest lucru se realizeaz plasnd tagul <input type = radio>, respectiv <input type=checkbox > n interiorul perechii <label for=identificator></label>, unde identificator va fi definit n tagul input, ca valoare a atributului id.
Tehnologii WEB - curs

40

Exemple etichete formular


<form method="post" action="mailto:youremail@email.com"> Ce tip de pantofi porti ? <br /> Culoare: <input type="radio" name="culoare" value="inchis">Inchis <input type="radio" name="culoare" value="deschis">Deschis <br /> Marime: <input type="radio" name="marime" value="mica">Mica <input type="radio" name="marime" value="medie">Medie <input type="radio" name="marime" value="mare">Mare <br /> <input type="submit" value="Email Myself"> </form>

41

Exemple etichete formular


<form method="post" action="mailto:youremail@email.com"> <p>Ce culoare de pantofi preferi ? </p> <p> <input type="checkbox" name="pantofi" value="negru">Negru simplu <br/> <input type="checkbox" name="pantofi" value="alb">Alb simplu <br/> <input type="checkbox" name="pantofi" value="gri">Nuante de gri <br/> <input type="checkbox" name="pantofi" value="alb negru ">Alb cu negru <br/> <input type="submit" value="Email Myself"></p> </form>

42

Exemple etichete formular


HTML - formular de upload

<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />

43

Tehnologii Web

8. Formulare n HTML
8.1. Descriere atribute 8.2. Elemente de formular 8.3. Cmpuri de editare multilinie 8.4. Liste de selecie 8.5. Etichetele 8.6. Exemple

44 Tehnologii WEB - curs

Exemplul 1:
<html> <head> <title>Exemplu de formular</title> </head> <body> <form method="POST" action=mailto:costica@utgjiu.ro> <p><b>Introduceti numele dvs. --></b> <input type="text" name="nume" size="30"></p> <p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> </html>
45 Tehnologii WEB - curs

46 Tehnologii WEB - curs

Exemplul 2:
<html> <head> <title>Formular logare</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <table border="0"> <tr> <td><b>Introduceti numele dvs. de identificare --></b> </td> <td> <input type="text" name="nume" size="30"></td> </tr> <tr> <td><b>Introduceti parola dvs.?</b></td> <td><input type="password" name="parola" size="30"></td> </tr> </table> <p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> </html>
47 Tehnologii WEB - curs

48 Tehnologii WEB - curs

Exemplul 3:
<html> <head> <title>Optiuni concediu</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <h4>Unde doriti sa va petreceti concediul?</h4> <p><input type="radio" value="munte" checked name="Loc">la munte</p> <p><input type="radio" name="Loc" value="mare">la mare</p> <p><input type="radio" name="Loc" value="acasa">acasa</p> <hr> <h4>Daca plecati in concediu, unde ati dori sa va cazati?</h4> <p><input type="radio" name="Cazare" value="hotel" checked>la hotel</p> <p><input type="radio" name="Cazare" value="vila">vila</p> <p><input type="radio" name="Cazare" value="pensiune">pensiune agroturistica</p> <p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> </html>
Tehnologii WEB - curs

49

50 Tehnologii WEB - curs

Exemplul 4:
<html> <head> <title>Cursuri WEB</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <h4>Ce cursuri doriti sa urmati?</h4> <p><input type="checkbox" name="Cursuri" value="html" checked>HTML</p> <p><input type="checkbox" name="Cursuri" value="asp" checked>ASP</p> <p><input type="checkbox" name="Cursuri" value="jvscript">JAVA SCRIPT</p> <p><input type="checkbox" name="Cursuri" value="java">JAVA</p> <p><input type="checkbox" name="Cursuri" value="php">PHP</p> <p><input type="checkbox" name="Cursuri" value="asp">ASP</p> <p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> </html>
51 Tehnologii WEB - curs

52 Tehnologii WEB - curs

Exemplul 5:
<html> <head> <title>Ataseaza Fisier</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <input type="file"> <input type="submit"> </form> </body> </html>

53 Tehnologii WEB - curs

54 Tehnologii WEB - curs

Exemplul 6:
<html> <head> <title>Zodiac</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <p><b><i>Zodia dumneavoastra este: </i></b> <select name="Zodie" size="1"> <option value="Var">Varsator</option> <option value="Pes">Pesti</option> <option value="Ber">Berbec</option> <option value="Tau">Taur</option> <option value="Gem">Gemeni</option> <option value="Rac">Rac</option> <option value="Leu">Leu</option> <option value="Fec">Fecioara</option> <option value="Bal">Balanta</option> <option value="Sco">Scorpion</option> <option value="Sag">Sagetator</option> <option value="Cap">Capricorn</option> </select> </p> <p><input type="submit" value="Expediaza"></p> <p><input type="reset" value="Anuleaza"></p> </form> </body> </html>

55 Tehnologii WEB - curs

56 Tehnologii WEB - curs

Exemplul 7:
<html> <head> <title>Librarie informatica</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <h4>Selectati cartile care va intereseaza:</h4> <p><select size="3" name="Carti" multiple> <option value="sg" selected>Sabin Buraga - Aplicatii Web la cheie. Studii de caz implementate n PHP</option> <option value="ta">Traian Anghel - Tehnologii Web</option> <option value="lw">Luke Welling, Laura Thomson - Dezvoltarea aplicatiilor Web cu PHP si MySQL</option> <option value="lu" selected>Larry Ullman - PHP si MySQL pentru site-uri dinamice</option> </select></p> <p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p> </form> </body> </html>
Tehnologii WEB - curs

57

58 Tehnologii WEB - curs

Exemplul 8:
<html> <head> <title>Carte de oaspeti</title> </head> <body> <form method="POST" action="mailto:costica@utgjiu.ro"> <h4>Parerea dvs.:</h4> <p><textarea name="Comentarii" rows="5" cols="19"> Introduceti aici parerea dvs. </textarea></p> <p><input type="submit" value="Expediaza"> <input type="reset" value="Anuleaza"></p> </form> </body> </html>
Tehnologii WEB - curs

59

60 Tehnologii WEB - curs

Un formular complex Rezervarea unei camere de hotel


<html> <head> <title>Rezervare camere hotel</title> </head> <body> <form method="POST" action="rezervari.asp" > <h3><u>Hotel Costica - Formular de rezervare</u></h3> <p><u>1. Informatii Generale</u></p> <table border="0"> <tr> <td><b>Ce fel de camere doriti ?</b></td> <td><select size="1" name="Camera"> <option>Single</option> <option>Double</option> <option>Apartament</option> </select></font> </td> </tr>
61 Tehnologii WEB - curs

<tr> <td><b>Optiuni camera:</b></td> <td><input type="checkbox" name="Televizor" value="ON" checked>Televizor <br> <input type="checkbox" name="VederePlaja" value="ON" checked>Vedere catre plaja </td> </tr> <tr> <td><b>Ce modalitate de plata alegeti ?</b></td> <td><input type="radio" name="ModalitatePlata" value="Numerar" checked>Numerar<br> <input type="radio" name="ModalitatePlata" value="CarteCredit">Carte credit<br> <input type="radio" name="ModalitatePlata" value="TransferBancar">Transfer bancar </td> </tr> <tr> <td><b>Alte observatii</b></td> </tr> <tr> <td> <p align="center"><textarea name="Observatii" rows="5" cols="39">Introduceti aici optiunile dvs. daca nu este disponibila nici o camera conform cererii exprimate !</textarea></p> <hr align="center"> </td>
62 Tehnologii WEB - curs

</tr> </table> <p><u>2. Informatii Contact</u></p> <table border="0"> <tr> <td><b>Nume si prenume :</b></td> <input type="text" size="35" maxlength="256" name="Nume"> </tr> <tr> <td><b>Telefon :</b></td> <input type="text" size="35" name="Tel"> </tr> </table> <p><input type="submit" value="Rezerva"> <input type="reset" value="Anuleaza"></p> </form> </body> </html>
63 Tehnologii WEB - curs

64 Tehnologii WEB - curs

ntrebri?

65