TEHNOLOGII WEB
Universitatea “Constantin Brâncuşi” din Târgu-JiuDepartamentul pentru Pregătirea Personalului
Didactic
Lect.dr. Adrian Runceanu
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 3
Ce este un formular?
Formularele, denumite în limba engleză forms,reprezintă instrumente pentru colectarea informaţiilorde la vizitatorii unui site web.Formularele permit utilizatorilor: să trimită comentarii şi întrebări să ceară informaţii să se înscrie pentru a primi newsletter-e să completeze aplicaţii Online să introducă informaţii de plată pentru a cumpăra un
anumit produs
11.03.2015 Tehnologii Web 4
Ce este un formular?
Formulare – asigură crearea paginilor web interactive În general sunt folosite pentru preluarea datelor de la
utilizator (în vederea efectuării unei comenzi pentru diferite produse).
Un formular este constituit din elemente speciale numite controale (CONTROLS): butoane radio,butoane de validare, meniuri, casete de text, prin intermediul cărora utilizatorul transmite informaţii server-ului care găzduieşte pagina web.
11.03.2015 Tehnologii Web 5
• Probabil că cel mai cunoscut formular de pe web este cel de pe pagina de start al motorului de căutare Google:
• Acest formular este cunoscut tuturor și este foarte simplu. • Cu ajutorul acestui formular introducem textul (cuvintele de
căutare) într-un câmp textual input, iar apoi, cu ajutorulbutonului submit (marcat ca Google Search), transmitem datele.
11.03.2015 Tehnologii Web 6
Cum functioneaza un formular?
• Formularele în sine nu au nicio funcţionalitate, ci reprezintă doar un tip de şablon de colectare a informaţiilor.
• Când utilizatorul completează formularul prezentat pe site, datele colectate sunt transmise script-ului pe cealaltă pagină care va finaliza lucrul.
11.03.2015 Tehnologii Web 7
Cum functioneaza un formular?• Pagina contact.html conţine un formular în care utilizatorul își introduce
datele şi mesajul. • După validarea formularului, acesta apelează pagina contact_send.php,
pe care se află script-ul care procesează datele colectate şi le trimite prin email la adresa setată.
• Acesta este doar unul dintre exemple, script-ul poate trimite e-mail-uri,poate introduce/citi datele din baza de date sau poate face alte lucruri definite.
11.03.2015 Tehnologii Web 8
Tag-uri utilizate in formulare
tag rol atribute
<form>…</form> Încadrează un formular action, method
<input />Defineşte controale text,
password, checkbox,radio, submit, reset.
type, name, value, size
maxlength
<textarea>…</textarea>Defineşte un control
textareaname, cols, rows
<select>…</select> Defineşte un control menu name,size,multiple
<option>…</option>Defineşte un element din
menuvalue
11.03.2015 Tehnologii Web 9
8.1. Descriere atribute:
• Atributul action primeşte ca valoare adresa URL a scenariului CGI ce va primi datele furnizate de utilizator şi le va prelucra, generând un răspuns.
• Dacă atributul action lipseşte, datele vor fi trimise la adresa documentului curent.
• Este posibilă expedierea datelor furnizate de către utilizator la o adresă poştală, caz în care atributul action va primi ca valoare adresa de e-mail respectivă, însoţită de prefixul ”mailto:”
Tehnologii Web11.03.2015 10
• Atributul method specifică modul în care va fi trimisă informaţia către server.
• Atributul method poate primi două valori:• get• post
• Datele furnizate de utilizator în formular sunt adăugate la adresa URL a scriptului CGI, sub formă de perechi de tipul:
<câmp>=<valoare>
• În cazul valorii get a atributului method, aceste perechi de date sunt adăugate la sfârşitul adresei URL a scriptului, după semnul ‘?’, separate prin ‘&’.
• Atunci când trimit un formular către server, majoritatea browser-elor afişează acest şir.
Tehnologii Web11.03.2015 11
Exemplu: Tagul <form action =
“http://www.utgjiu.ro/registration” method=”get”>ce va conţine două câmpuri de tip text: • câmpul „nume”, în care utilizatorul a introdus
valoarea Costica Popescu• şi câmpul „email”, în care utilizatorul a introdus
valoarea [email protected] determina transmiterea catre server a cererii:
http://www.utgjiu.ro/registration ? nume = PopescuCostica & email = [email protected]
Tehnologii Web11.03.2015 12
• Dacă se doreşte evitarea afişării lui, va fi utilizată valoarea post a atributului method, caz în care şirul este transmis serverului printr-o secvenţă HTTP specială.
• Atributul name primeşte ca valoare numele formularului, în situaţia în care sunt mai multe formulare în document.
• Deasemenea, numele formularului este util şi atunci când scriptul este scris în JavaScript, pentru a putea fi referit.
• Atributul target primeşte ca valoare numele ferestrei în care se va face afişarea răspunsului emis de server.
• Dacă numele transmis ca parametru atributului target nu a fost definit anterior, atunci browserul va crea o fereastră nouă cu acest nume.
• Implicit, browser-ul va afişa răspunsul în pagina curentă.
Tehnologii Web11.03.2015 13
Există câteva cuvinte cheie ce pot fi transmise ca valoare atributului target:
• _self – răspunsul scriptului va fi afişat în fereastra ce conţine formularul
• _parent– răspunsul scriptului va fi afişat în fereastra părinte a ferestrei ce conţine formularul
• _top - răspunsul va fi afişat în fereastra din vârful ierarhiei de ferestre
• _blank - va fi creată o fereastră nouă în care va fi afişat răspunsul.
• Efectul este similar situaţiei în care atributul target a primit valoare un nume de fereastră ce nu a fost definit anterior.
• Atributul title oferă posibilitatea afişării unui text explicativ de îndată ce mouse-ul se opreşte deasupra formularului.
Tehnologii Web11.03.2015 14
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 15
8.2. Elemente de formular
• Între perechea de taguri <form> si </form>sunt definite o serie de elemente de formular, destinate recepţionării datelor furnizate de utilizator.
• Cea mai mare parte a acestora se definesc cu ajutorul tagului <input>.
Tehnologii Web11.03.2015 16
Sintaxa generală a tagului input este:
<input type=”text/password/hidden/radio/checkbox/submit/reset/button/file/image” name=”…“ value=”…“ checked size=”…” maxlenght=”…”>
Tehnologii Web11.03.2015 17
Descriere atribute:• type – defineşte tipul de element de
formular, care poate fi :• text - defineşte un câmp de editare
pentru un cuvânt sau o linie de text. • Câmpurile de editare acceptă parametrii:
value size maxlength
Tehnologii Web11.03.2015 18
• password – defineşte un câmp de editare a unei parole.
• Caracterele introduse de utilizator sunt ascunse, câmpul de editare afişând semnul ‘*’ în locul fiecărui caracter.
Atribute acceptate (ca şi câmpurile de editare):– value– size– maxlength
Tehnologii Web11.03.2015 19
• radio – butoanele radio permit selectarea unei opţiuni dintre mai multe existente.
• O opţiune este definită printr-un câmp radio.
• Într-un set de butoane radio, la un moment dat, o singură opţiune poate fi selectată.
• Pe un formular pot exista mai multe seturi de butoane radio, gruparea lor într-un anumit set realizându-se prin precizarea unui nume comun (numele este dat de valoarea atributului name).
Tehnologii Web11.03.2015 20
• Atribute acceptate: – name– value - precizează ce valoare va fi trimisă
către server, alături de valoarea atributului name, atunci când a fost selectată opţiunea respectivă. • Dacă însă nu aceasta este opţiunea aleasă
din setul respectiv, atunci informaţia oferită de buton nu este trimisă către server
– checked
Tehnologii Web11.03.2015 21
• checkbox – defineşte un câmp de validare. • Un asemenea câmp are două stări: selectat
sau neselectat.• Atribute acceptate:
name value – implicit are valoarea on
(câmp de validare selectat) checked
Tehnologii Web11.03.2015 22
• submit – defineşte un buton cu efect predefinit de expediere către server a informaţiei din formular.
• Atribute acceptate: name value – precizează textul afişat pe
suprafaţa butonului. Implicit, titlul butonului este Submit Query
Tehnologii Web11.03.2015 23
• reset - defineşte un buton cu efect predefinit de anulare a informaţiei din formular.
• Conţinutul tuturor câmpurilor vor fi resetate la valoarea implicită.
• Atribute acceptate: name value – precizează titlul butonului.
Implicit, acesta este Reset
Tehnologii Web11.03.2015 24
• button – defineşte un buton de comandă. Acţiunea 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 Web11.03.2015 25
• file – defineşte un element de tip casetă de fişiere, ce conţine un câmp de editare unde va fi afişată calea fişierului selectat şi un buton de comandă Browse.
• Atribute acceptate: name value – precizează URL-ul fişierului
selectat
Tehnologii Web11.03.2015 26
• hidden – defineşte un câmp ascuns (care nu este afişat în formular).
• Câmpurile ascunse sunt utilizate pentru a trimite către server informaţii suplimentare, ce nu pot fi modificate de utilizator.
• Atribute acceptate: name value
Tehnologii Web11.03.2015 27
• 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
Tehnologii Web11.03.2015 28
• name – defineşte numele câmpului creat. – Numele va fi trimis către server, alături de
valoarea sa, pentru a permite execuţia scriptului.
• value – precizează valoarea implicită a câmpului. – Această valoare va fi afişată la prima activare a
formularului. – Utilizatorul o poate modifica sau poate opta
pentru păstrarea ei pentru a fi trimisă serverului.
Tehnologii Web11.03.2015 29
• checked – atribut utilizat în cazul casetelor de validare sau a butoanelor radio. – Prezenţa lui determină selectarea câmpului în cauză.
• size – determină lungimea câmpului (exprimată în caractere). – Atribut utilizat de câmpurile de editare.
• maxlength – fixează numărul maxim de caractere ce vor fi acceptate de către câmpurile de editare. – Depăşirea acestui număr va fi semnalată printr-un
mesaj sonor. – Dacă valoarea atributului maxlength este mai mare
decât valoarea atributului size, textul introdus în câmpul de editare va defila către stânga.
Tehnologii Web11.03.2015 30
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 31
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>
11.03.2015 Tehnologii Web 32
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>
11.03.2015 Tehnologii Web 33
8.3. Câmpuri de editare multilinie
• Câmpuri de editare multilinie se realizează cu ajutorul tagului textarea.
• Ele permit introducerea şi afişarea unui text pe mai multe linii.
• Dacă lungimea textului depăşeşte lungimea câmpului, atunci se va ancora o bară de defilare orizontală.
• Dacă numărul de linii ale textului depăşesc înălţimea câmpului, atunci se va ancora o bară de defilare verticală.
• Textul introdus intre tag-urile textarea va fi afisat in fereastra corespunzatoare din browser.
Tehnologii Web11.03.2015 34
Atribute acceptate: – name – defineşte numele câmpului– readonly – atribut a cărui existenţă inhibă
utilizatorului dreptul de scriere în câmp– cols – primeşte ca valoare un număr întreg
pozitiv reprezentând numărul de caractere ce vor fi afişate pe linie
– rows - precizează numărul de linii ale câmpului multilinie
Tehnologii Web11.03.2015 35
– wrap – defineşte modalitatea de „spargere” a textului în linii în interiorul câmpului.
– Atributul poate lua valorile:– off – (valoarea implicită) Textul este afişat pe un
singur rând. Utilizatorul poate trece pe linia următoare apăsând tasta ENTER. Textul trimis serverului va conţine caracterele de sfârşit de linie
– hard – Textul se aşează automat pe rânduri, lungimea acestora fiind determinată de lungimea câmpului. Deasemenea, textul trimis serverului va conţine caracterele de sfârşit de linie
– soft – Textul se aşează automat pe rânduri, lungimea acestora fiind determinată de lungimea câmpului, însă textul trimis serverului nu va mai conţine caracterele de sfârşit de linie
Tehnologii Web11.03.2015 36
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 38
8.4. Liste de selecţie
• Listele de selecţie permit selectarea uneia sau a mai multe opţiuni dintr-o listă.
• Ele reprezintă o combinaţie între butoanele radio (selecţie singulară) şi câmpurile de validare (selecţie multiplă).
• Deosebirea este aceea că utilizarea listelor de selecţie nu necesită afişarea tuturor opţiunilor, ci numai a unora dintre ele, deplasarea printre alternative realizându-se cu ajutorul unei bare de defilare verticală.
Tehnologii Web11.03.2015 39
• Listele de selecţie sunt realizate cu ajutorul tag-ului <select>.
• Atribute acceptate: – name – defineşte numele câmpului de selecţie– size – stabileşte câte elemente ale listei sunt vizibile la un
moment dat, restul opţiunilor fiind accesibile prin utilizarea barei de defilare verticală• Implicit, valoarea atributului size este 1
– multiple – prezenţa atributului multiple permite selectarea mai multor elemente ale listei (echivalent câmpurilor de selecţie), altfel, în cazul selecţiei singulare, un singur element al listei poate fi selectat la un moment dat (echivalent butoanelor de opţiune). Atributul multiplenu are efectul dorit în cazul listelor de selecţie ce au valoarea size egală cu 1.
Tehnologii Web11.03.2015 40
Introducerea opţiunilor în listă se realizează cu tagul <option>, poziţionat în interiorul perechii <select> </select>.
Acesta acceptă atributele:– name – precizează numele opţiunii– selected – prezenţa atributului selected în interiorul tagului
<option> face ca opţiunea respectivă să fie selectată la încărcarea formularului• Dacă valoarea atributului size a tagului select este 1,
atunci, implicit va fi afişată prima opţiune a listei de selecţii (în cazul în care nici o opţiune 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 Web11.03.2015 41
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 45
8.5. Etichetele
• Etichetele reprezintă un element de formular care, ataşat butoanelor radio sau câmpurilor de validare, face ca selectarea/deselectarea unei opţiuni să se realizeze şi prin apăsarea etichetei opţiunii respective.
• Acest lucru se realizează plasând 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 Web11.03.2015 46
Exemple etichete formular<form method="post" action="mailto:[email protected]">
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>
11.03.2015 Tehnologii Web 47
Exemple etichete formular<form method="post" action="mailto:[email protected]">
<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>
11.03.2015 Tehnologii Web 48
Exemple etichete formular
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
HTML - formular de upload
11.03.2015 Tehnologii Web 49
Limbajul HTML (partea IV)
8. Formulare în HTML8.1. Descriere atribute8.2. Elemente de formular8.3. Câmpuri de editare multilinie8.4. Liste de selecţie8.5. Etichetele8.6. Exemple
Tehnologii Web11.03.2015 50
Exemplul 1:<html>
<head><title>Exemplu de formular</title>
</head><body>
<form method="POST" action=”mailto:[email protected]”><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>
Tehnologii Web11.03.2015 51
Exemplul 2:<html><head>
<title>Formular logare</title></head>
<body>
<form method="POST" action="mailto:[email protected]"><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>
Tehnologii Web11.03.2015 53
Exemplul 3:<html><head>
<title>Optiuni concediu</title></head>
<body><form method="POST" action="mailto:[email protected]">
<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 Web11.03.2015 55
Exemplul 4:<html><head>
<title>Cursuri WEB</title></head>
<body><form method="POST" action="mailto:[email protected]"><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>
Tehnologii Web11.03.2015 57
Exemplul 5:<html>
<head><title>Ataseaza Fisier</title>
</head>
<body><form method="POST" action="mailto:[email protected]">
<input type="file"> <input type="submit">
</form></body></html>
Tehnologii Web11.03.2015 59
Exemplul 6:
<html><head>
<title>Zodiac</title></head>
<body><form method="POST"
action="mailto:[email protected]"><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>
Tehnologii Web
<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>
11.03.2015 61
Exemplul 7:<html><head>
<title>Librarie informatica</title></head>
<body><form method="POST" action="mailto:[email protected]">
<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 Web11.03.2015 63
Exemplul 8:<html><head>
<title>Carte de oaspeti</title></head>
<body><form method="POST" action="mailto:[email protected]"><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 Web11.03.2015 65
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>
Tehnologii Web11.03.2015 67
<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>
Tehnologii Web11.03.2015 68
</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>
Tehnologii Web11.03.2015 69