CURS 4

Formulare
Formularele sunt cele mai frecvent utilizate pentru a colecta informații de la persoanele
care vizitează site-uri.
La activarea butonului de Submit dintr-un formular , informațiile sunt transmise server-ului Web
pentru a fi prelucrate, iar activarea butonului de Reset permite ștergerea tuturor informațiilor
completate.

Utilizarea formularelor
Atributele tag-ului de intrare <form> sunt:
a. Atributul action unde furnizăm URL-ul scriptului CGI care va prelucra datele din
formular.
<form action=”http://alpha.com/program.cgi”>

Există 2 metode de transmitere a datelor conținute în formular:

(1) Sub forma unui set de date
(2) Concatenate cu URL-ul scriptului CGI (Common Gateway Interface)

b.Atributul method precizează metoda de transmitere a datelor carea poate lua ca valoare
post pentru metoda (1) și get pentru metoda (2).
Exemplu:
<form action=http://alpha.com/program.cgi method=”post”> (trimiterea datelor catre
server)
<form action=http://alpha.com/program.cgi method=”get”> (pentru atasarea datelor la
sirul URL)

Un formular este delimitat de tagul form ,iar între aceste tag-uri sunt inserate controalele
formularului.
 Control Acțiunea Atribute Tag
utilizatorului suplimentare
text Introducerea unui disabled-folosit Input
text de volum redus pentru dezactivarea
câmpului de text

maxlength-numărul
maxim de caractere
ce pot fi introduse

readonly-nu se poate
efecuta modificarea
conținutului din
exterior

size-definește
lungimea câmpului
text

value-textul inițial dat

controlului
password Introducerea unui value-utilizarea este Input
text de volum redus, obligatorie
care apare pe ecran
mascat cu ,,*”
hidden Element special name,value-utilizarea Input
introdus în codul este obligatorie
paginii, dar nu este
afișat de browser.El
este folosit pentru
trecerea între pagini
Web și pentru a
adăuga un
identificator
formularului căruia îi
aparține
submit La activarea lui se disabled, name, input
transmit informațiile value
completate de
utilizator
reset La activarea lui se disabled,name, value input
restabilesc valorile
inițiale ale tuturor
controalelor
formularului
checkbox Acțiunea Atribute suplimentare Tag
utilizatorului
checkbox bifare name,value input
checked
radio bifare name,value Input
checked-pentru cazul
în care se dorește
selectată căsuța ca
stare inițială

button Activare (buton name,value Input

generic,fără un disabled
comportament
prestabilit)
image Activare (buton src-precizează adresa input
imagine)-pentru a URL a imaginii
transmite informațiile
completate de align-aliniază imaginea
utilzator relativ la alte elemente

disabled,name
file Încărcarea unui fișier name,value Input
text-area Introduce un text de disabled, text area
volum mare readonly,cols,rows

wrap-determonă cum
sunt tratate caracterele
CR/LF (întreruperi de
rând)

off-doar utilizatorul
poate insera
caracterele CR/LF

soft sau virtual-textul

este trecut vizual de pe
un rând pe altul, dar nu
sunt transmise decât
caracterele CR/LF
introduse de utilizator
har sau physical-textul
este trecut vizual de pe
un rând pe altul și sunt
inserate automat
secvențe CR/LF
 reset, submit Activare(pentru a disabled,name, value button
transmite informațiile ,tyoe
completate de
utilizator)
menu Alegerea unei opțiuni name,size,multiple,type select,option
dintr-un meniu

Controlul Button Image

nume_element.x=coordonata-x & nume_element.y=coordonata-y
Permite afișarea unui buton care nu are un comportament deja prestabilit.Pentru a utiliza astfel
de butoane,vom folosi Javascript ,iar în cazul sintaxei , nume_element reprezintă valoarea
atributului name atribuită elementului image.
Coordoanta x și y reprezintă coordonatele punctului de pe imagine unde utilizatorul a făcut click.
Butonul imagine este o imagine hartă pe partea de server,iar serverul trebuie să aibă o
aplicație care să o citească și cu care să prelucreze datele citite.
În exemplul de mai jos diferența dintre cele 2 butoane de transmitere este că la activarea
butonului imagine sunt transmise coordonatele punctului imaginii în care s-a efectuat click
relativ la colțul stânga sus al imaginii și numele imaginii,dar fără transmiterea datelor despre
butonul submit.
Dacă se dă click pe butonul Submit, vor fi transmise datele, dar fără date despre imagine.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
This is a text field:
 <input type=”text” name=”text” value=”valoare initiale”>
<input type=”submit” name=”submit” value=”Trimite”><p>
<input type=”image” src=”pb.jpg” name=”imagine”>
</form>
</body>
</html>

Controlul File
Tag-ul de input permite atașarea de fișiere din sistemul local pe care le
transmite,împreună cu datele din câmpurile formularului.
Acest proces se numește Încărcare de la client la server.Fișieul pe care îl folosim poate fi de
orice tip.
Folosind elementul de form putem face distincția între fișiere, adăugând următoarele valori
pentru parametri din form:
<form method=”post” enctype=”multiform/form-data” action=”URL”>

, unde adresa URL este adresa aplicației de server care va prelua și prelucra fișierele.

Exemplu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name=”f2” method=”post” action=http://../upload.asp
enctype=”multiform/form-data”>
 This is a text field.
<input type=”text” name=”text” value=”Valoare initiala”>
<input type=”file” name=”fisiert” value=”introduceti calea
fisierului”><p>
Click pentru a trimite valoarea <input type=”submit” name=”buton”
valoare=”Trimite”>
</form>
</body>
</html>

Controlul Textarea
Atributul name
<form>
<textarea name=”textarea1”>Text initial</textarea>
</form>

Atributele rows și cols

<form>
<textarea name=”textarea2” rows=”3” cols=”4”>Text initial</textarea>
</form>

Atributele rows și cols se referă la numărul de linii și de coloane pe care le are controlul

Controlul select (option)

Cu ajutorul acestuia se va crea o listă derulantă, din care utilizatorul poate alege unul sau mai
multe elemente.
Crearea controlului meniu se face folosind tag-ul select, care delimitează secvența cu care se
realizează controlul meniu, iar tag-ul option delimitează fiecare element din meniu.
<form>
<select name=”alege” size=”2”>….
</form>

,unde atributul name este folosit pentru fiecare control creat, iar atributul size este folosit atunci
cand utilizatorul doreste derularea listei .

Atributul multiple da utilizatorului posibilitatea sa isi aleaga mai multe optiuni din
lista.Selectarea se va face cu ajutorul tastei Ctrl pe toata durata selectarii.
<form>
<select name=”alege” size=”3” multiple>…
</select>
<form>

Atributul value este folosit pentru option si da posibilitatea scriptului sa primeasca un cod cu
ceea ce s-a selectat de catre utilizator

<form>
<select name=”alege” size=”2” multiple>
<option value=”1”>Primvara</option>
<option value=”2”>Vara</option>
<option value=”3”>Toamna</option>
<option value=”4”>Iarna </option>
</select>