Universitatea Constantin Brncui din Trgu-Jiu

TEHNOLOGII WEB
[Link]. Adrian Runceanu

copyright@[Link]

Curs 4
Limbajul HTML
(partea IV)

08.03.2016

Tehnologii Web

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

copyright@[Link]

Ce este un formular?
Formularele, denumite n limba englez forms,
reprezint instrumente pentru colectarea informaiilor
de la vizitatorii unui site web.
Formularele permit utilizatorilor:
s trimit comentarii i ntrebri
s cear informaii
s se nscrie pentru a primi newsletter-e
s completeze aplicaii Online
s introduc informaii de plat pentru a cumpra un
anumit produs
08.03.2016

Tehnologii Web

copyright@[Link]

Ce este un formular?
Formulare asigur crearea paginilor web interactive
n general sunt folosite pentru preluarea datelor de la
utilizator (n vederea efecturii 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 crora utilizatorul transmite informaii
server-ului care gzduiete pagina web.

08.03.2016

Tehnologii Web

copyright@[Link]

Probabil c cel mai cunoscut formular de pe web este

cel de pe pagina de start al motorului de cutare
Google:

Acest formular este cunoscut tuturor i este foarte simplu.

Cu ajutorul acestui formular introducem textul (cuvintele de
cutare) ntr-un cmp textual input, iar apoi, cu ajutorul
butonului submit (marcat ca Google Search), transmitem datele.
08.03.2016

Tehnologii Web

copyright@[Link]

Cum functioneaza un formular?

Formularele n sine nu au nicio funcionalitate,
ci reprezint doar un tip de ablon de colectare
a informaiilor.
Cnd utilizatorul completeaz formularul
prezentat pe site, datele colectate sunt
transmise script-ului pe cealalt pagin care va
finaliza lucrul.
08.03.2016

Tehnologii Web

copyright@[Link]

Cum functioneaza un formular?

Pagina [Link] conine 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.

08.03.2016

Tehnologii Web

copyright@[Link]

Tag-uri utilizate in formulare

tag

rol

atribute

<form></form>

ncadreaz un formular

action, method

<input />

Definete controale text,

password, checkbox,
radio, submit, reset.

type, name, value,

size
maxlength

<textarea></textarea>

Definete un control
textarea

name, cols, rows

<select></select>
<option></option>
08.03.2016

Definete un control menu name,size,multiple

Definete un element din
menu
Tehnologii Web

value
9

copyright@[Link]

8.1. Descriere atribute:

1. 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:
08.03.2016

Tehnologii Web

10

copyright@[Link]

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

08.03.2016

Tehnologii Web

11

copyright@[Link]

Exemplu:
Tagul <form action = [Link]
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@[Link]

va determina transmiterea catre server a cererii:

[Link]
&email=costica@[Link]
Dac se dorete evitarea afirii lui, va fi utilizat valoarea post a
atributului method, caz n care irul este transmis serverului
08.03.2016
Tehnologii Web
12
printr-o secven HTTP special.

copyright@[Link]

3. 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.
4. 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
fereastr nou cu acest nume.
Implicit, browser-ul va afia rspunsul n pagina
curent.
08.03.2016

Tehnologii Web

13

copyright@[Link]

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.
5. Atributul title ofer posibilitatea afirii unui text
explicativ de ndat ce mouse-ul se oprete deasupra
formularului.
08.03.2016

Tehnologii Web

14

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

15

copyright@[Link]

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

08.03.2016

Tehnologii Web

16

copyright@[Link]

Sintaxa general a tagului input este:

<input
type=text/password/hidden/radio/checkbox
/submit/reset/button/file/image name=
value= checked size=
maxlenght=>

08.03.2016

Tehnologii Web

17

copyright@[Link]

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

08.03.2016

Tehnologii Web

18

copyright@[Link]

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

08.03.2016

Tehnologii Web

19

copyright@[Link]

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

08.03.2016

Tehnologii Web

20

copyright@[Link]

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
08.03.2016

Tehnologii Web

21

copyright@[Link]

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

08.03.2016

Tehnologii Web

22

copyright@[Link]

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

08.03.2016

Tehnologii Web

23

copyright@[Link]

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

08.03.2016

Tehnologii Web

24

copyright@[Link]

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

08.03.2016

Tehnologii Web

25

copyright@[Link]

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

08.03.2016

Tehnologii Web

26

copyright@[Link]

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

08.03.2016

Tehnologii Web

27

copyright@[Link]

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

08.03.2016

Tehnologii Web

28

copyright@[Link]

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.

08.03.2016

Tehnologii Web

29

copyright@[Link]

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

Tehnologii Web

30

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

31

copyright@[Link]

Exemplu: Formular cu 2 campuri, buton Trimite si

buton Sterge
<form action="[Link]" 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>

08.03.2016

Tehnologii Web

32

copyright@[Link]

Exemplu: Daca se doreste se pot particulariza

butoanele din formular folosind
atributul type=image in cadrul etichetei input si
indicand fisierul imagine.
<form action="[Link]" method="post">
<input type="image" src="[Link]" alt="Trimite">
</form>

08.03.2016

Tehnologii Web

33

copyright@[Link]

8.3. Cmpuri de editare multilinie

Cmpuri de editare multilinie se realizeaz cu ajutorul
tag-ului 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 tag-urile textarea va fi afisat in
fereastra corespunzatoare
din browser.
08.03.2016
Tehnologii Web
34

copyright@[Link]

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

08.03.2016

Tehnologii Web

35

copyright@[Link]

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 aeaz automat pe rnduri,
lungimea acestora fiind determinat de lungimea
cmpului. Deasemenea, textul trimis serverului va
conine caracterele de sfrit de linie
soft Textul se aeaz automat pe rnduri, lungimea
acestora fiind determinat de lungimea cmpului,
ns textul trimis serverului nu va mai conine
caracterele de sfrit de linie
08.03.2016

Tehnologii Web

36

copyright@[Link]

Exemple campuri de editare multilinie

08.03.2016

Tehnologii Web

37

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

38

copyright@[Link]

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

Tehnologii Web

39

copyright@[Link]

Listele de selecie sunt realizate cu ajutorul tag-ului

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

Tehnologii Web

40

copyright@[Link]

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

Tehnologii Web

41

copyright@[Link]

Exemple liste de selectie

08.03.2016

Tehnologii Web

42

copyright@[Link]

Exemple liste de selectie

08.03.2016

Tehnologii Web

43

copyright@[Link]

Exemple liste de selectie

08.03.2016

Tehnologii Web

44

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

45

copyright@[Link]

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 tag-ul:
<input type = radio>, sau <input type=checkbox >
n interiorul perechii
<label for=identificator></label>, unde identificator va
fi definit n tagul input, ca valoare a atributului id.
08.03.2016

Tehnologii Web

46

copyright@[Link]

Exemple etichete formular

<form method="post" action="[Link]
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>

08.03.2016

Tehnologii Web

47

copyright@[Link]

Exemple etichete formular

<form method="post" action="[Link]
<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>

08.03.2016

Tehnologii Web

48

copyright@[Link]

Exemple etichete formular

HTML - formular de upload

<input type="hidden" name="MAX_FILE_SIZE"

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

08.03.2016

Tehnologii Web

49

copyright@[Link]

Limbajul HTML (partea IV)

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

08.03.2016

Tehnologii Web

50

copyright@[Link]

Exemplul 1:

<html>
<head>
<title>Exemplu de formular</title>
</head>
<body>

<form method="POST" action=[Link]

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

Tehnologii Web

51

copyright@[Link]

08.03.2016

Tehnologii Web

52

copyright@[Link]

Exemplul 2:

<html>
<head>
<title>Formular logare</title>
</head>
<body>

<form method="POST" action="[Link]

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

Tehnologii Web

53

copyright@[Link]

08.03.2016

Tehnologii Web

54

copyright@[Link]

Exemplul 3:

<html>
<head>
<title>Optiuni concediu</title>
</head>
<body>
<form method="POST" action="[Link]
<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>
08.03.2016
Tehnologii Web

55

copyright@[Link]

08.03.2016

Tehnologii Web

56

copyright@[Link]

Exemplul 4:

<html>
<head>
<title>Cursuri WEB</title>
</head>
<body>
<form method="POST" action="[Link]
<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>
08.03.2016

Tehnologii Web

57

copyright@[Link]

08.03.2016

Tehnologii Web

58

copyright@[Link]

Exemplul 5:

<html>
<head>
<title>Ataseaza Fisier</title>
</head>

<body>
<form method="POST" action="[Link]
<input type="file">
<input type="submit">
</form>
</body>
</html>

08.03.2016

Tehnologii Web

59

copyright@[Link]

08.03.2016

Tehnologii Web

60

copyright@[Link]

Exemplul 6:
<html>
<head>
<title>Zodiac</title>
</head>
<body>
<form method="POST"
action="[Link]
<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>

08.03.2016

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

Tehnologii Web

61

copyright@[Link]

08.03.2016

Tehnologii Web

62

copyright@[Link]

Exemplul 7:

<html>
<head>
<title>Librarie informatica</title>
</head>
<body>
<form method="POST" action="[Link]
<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>
08.03.2016

Tehnologii Web

63

copyright@[Link]

08.03.2016

Tehnologii Web

64

copyright@[Link]

Exemplul 8:

<html>
<head>
<title>Carte de oaspeti</title>
</head>
<body>
<form method="POST" action="[Link]
<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>
08.03.2016
Tehnologii Web

65

copyright@[Link]

08.03.2016

Tehnologii Web

66

copyright@[Link]

Un formular complex Rezervarea unei camere

de hotel
<html>
<head>
<title>Rezervare camere hotel</title>
</head>
<body>
<form method="POST" action="[Link]" >
<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>
08.03.2016

Tehnologii Web

67

copyright@[Link]

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

Tehnologii Web

68

copyright@[Link]

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

Tehnologii Web

69

copyright@[Link]

08.03.2016

Tehnologii Web

70

copyright@[Link]

Studiati:

Avocode - [Link]
Ember [Link]

ntrebri?
08.03.2016

Tehnologii Web

71