Tehnologii Web: Lect - Dr. Adrian Runceanu

Universitatea Constantin Brncui din Trgu-Jiu
TEHNOLOGII WEB
Lect.dr. Adrian Runceanu
copyright@www.adrian.runceanu.ro
Curs 4
Limbajul HTML
(partea IV)
08.03.2016
Tehnologii Web
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
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
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
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
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
Cum functioneaza un formular?

Pagina contact.html 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
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
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
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
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
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.
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
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

8. Formulare n HTML
8.5. Etichetele
8.6. Exemple
08.03.2016
Tehnologii Web
15

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

8. Formulare n HTML
8.5. Etichetele
8.6. Exemple
08.03.2016
Tehnologii Web
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>
08.03.2016
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>
08.03.2016
Tehnologii Web
33

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
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
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
Exemple campuri de editare multilinie
08.03.2016
Tehnologii Web
37

8. Formulare n HTML
8.5. Etichetele
8.6. Exemple
08.03.2016
Tehnologii Web
38

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
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
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
Exemple liste de selectie
08.03.2016
Tehnologii Web
42
08.03.2016
Tehnologii Web
43
08.03.2016
Tehnologii Web
44

8. Formulare n HTML
8.5. Etichetele
8.6. Exemple
08.03.2016
Tehnologii Web
45
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
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>
08.03.2016
Tehnologii Web
47

<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>
08.03.2016
Tehnologii Web
48
HTML - formular de upload
<input type="hidden" name="MAX_FILE_SIZE"

value="100" /> <input name="file" type="file" />
08.03.2016
Tehnologii Web
49

8. Formulare n HTML
8.5. Etichetele
8.6. Exemple
08.03.2016
Tehnologii Web
50
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>
08.03.2016
Tehnologii Web
51
08.03.2016
Tehnologii Web
52
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>
08.03.2016
Tehnologii Web
53
08.03.2016
Tehnologii Web
54
Exemplul 3:
<html>
<head>
<title>Optiuni concediu</title>
</head>
<body>
<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
08.03.2016
Tehnologii Web
56
Exemplul 4:
<html>
<head>
<title>Cursuri WEB</title>
</head>
<body>
<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>
</form>
</body>
</html>
08.03.2016
Tehnologii Web
57
08.03.2016
Tehnologii Web
58
Exemplul 5:
<html>
<head>
<title>Ataseaza Fisier</title>
</head>
<body>
<input type="file">
<input type="submit">
</form>
</body>
</html>
08.03.2016
Tehnologii Web
59
08.03.2016
Tehnologii Web
60
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>
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"
</form>
</body>
</html>
Tehnologii Web
61
08.03.2016
Tehnologii Web
62
Exemplul 7:
<html>
<head>
<title>Librarie informatica</title>
</head>
<body>
<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>
</form>
</body>
</html>
08.03.2016
Tehnologii Web
63
08.03.2016
Tehnologii Web
64
Exemplul 8:
<html>
<head>
<title>Carte de oaspeti</title>
</head>
<body>
<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
08.03.2016
Tehnologii Web
66
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>
08.03.2016
Tehnologii Web
67
<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
</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"
</form>
</body>
</html>
08.03.2016
Tehnologii Web
69
08.03.2016
Tehnologii Web
70
Studiati:
Avocode - http://avocode.com/
Ember http://campus.codeschool.com/courses/tryember/contents
ntrebri?
08.03.2016
Tehnologii Web
71

Tehnologii Web: Lect - Dr. Adrian Runceanu

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tehnologii Web: Lect - Dr. Adrian Runceanu

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Constantin Brncui din Trgu-Jiu

Limbajul HTML (partea IV)

Probabil c cel mai cunoscut formular de pe web este

Acest formular este cunoscut tuturor i este foarte simplu.

Cum functioneaza un formular?

Cum functioneaza un formular?

Tag-uri utilizate in formulare

Definete controale text,

type, name, value,

name, cols, rows

Definete un control menu name,size,multiple

8.1. Descriere atribute:

2. Atributul method specific modul n care va fi

Datele furnizate de utilizator n formular sunt adugate la

n cazul valorii get a atributului method, aceste perechi de

va determina transmiterea catre server a cererii:

3. Atributul name primete ca valoare numele

Exist cteva cuvinte cheie ce pot fi transmise ca

Limbajul HTML (partea IV)

8.2. Elemente de formular

Sintaxa general a tagului input este:

password definete un cmp de editare a

radio butoanele radio permit selectarea unei

checkbox definete un cmp de validare.

submit definete un buton cu efect predefinit

reset - definete un buton cu efect

button definete un buton de comand.

Cu ajutorul acestui element se pot defini

file definete un element de tip caset de

hidden definete un cmp ascuns (care nu

image plaseaza o imagine activa a carei

name definete numele cmpului creat.

value precizeaz valoarea implicit a cmpului.

checked atribut utilizat n cazul casetelor de validare

Limbajul HTML (partea IV)

Exemplu: Formular cu 2 campuri, buton Trimite si

Exemplu: Daca se doreste se pot particulariza

8.3. Cmpuri de editare multilinie

wrap definete modalitatea de spargere a textului n

Exemple campuri de editare multilinie

Limbajul HTML (partea IV)

8.4. Liste de selecie

Listele de selecie sunt realizate cu ajutorul tag-ului

Introducerea opiunilor n list se realizeaz cu

Exemple liste de selectie

Exemple liste de selectie

Exemple liste de selectie

Limbajul HTML (partea IV)

Exemple etichete formular

Exemple etichete formular

Exemple etichete formular

HTML - formular de upload

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

Limbajul HTML (partea IV)

<form method="POST" action=mailto:costica@utgjiu.ro>

<form method="POST" action="mailto:costica@utgjiu.ro">

Un formular complex Rezervarea unei camere

S-ar putea să vă placă și