Sunteți pe pagina 1din 12

Curs Programare WEB

Curs 3
Formulare
Limbajul HTML ofer instrumente pentru a facilita interaciunea documentului web
cu utilizatorul. Aceast interaciune va fi efectuat printr-un schimb de informaii ntre
browser i server. Datele furnizate de utilizator n formular sunt transmise ctre server,
care recepioneaz cererea i lanseaz n execuie un scenariu CGI (Common Gateway
Interface-Interfa Comun pentru Pori de Acces). Aplicaiile CGI sunt scrise n
limbaje specifice: Perl, C, VBScript, JavaScript sau altele. Ele prelucreaz datele
primite, ntr-o anumit manier, dependent de aplicaie (interogheaz o baz de date,
efectueaz anumite calcule, eventual validri de date amd.). Apoi aplicaia CGI
furnizeaz un rspuns serverului, care l transmite mai departe calculatorului client
(operaie numit feedback).
ntr-un document web pot exista oricte formulare, dar nu imbricate (nu unul n
interiorul altuia). Formularele sunt definite cu ajutorul tagului <form>, care accept
atributele:

action
method
name
target
title (pentru Internet Explorer)

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:
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 browserelor afieaz acest ir.
Ex.: Tagul
<form action = http://www.contest.rolink.ro/registration method=get>
ce va conine dou cmpuri de tip text:

cmpul nume, n care utilizatorul a introdus valoarea MihneaIonut


i cmpul email, n care utilizatorul a introdus valoarea
imihnea@mail.com

va determina transmiterea catre server a cererii:


http://www.contest.rolink.ro/registration ? nume = MihneaIonut & email =
imihnea.mail.com
Dac se dorete evitarea afirii lui, va fi utilizat valoarea post a tributului 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 creea o ferestr nou cu acest nume. Implicit,
browserul va afia rspunsul n pagina curent. 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;
_blankva 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.
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>.
Sintaxa general a tagului input este:

<input type=text/password/hidden/radio/checkbox/submit/reset/button/file/image
name= value= checked size= maxlenght=>
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:


o value;
o size;
o maxlength.

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):
o value;
o size;
o maxlength.

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).
Atribute acceptate:
o name;
o 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;
o checked.

checkbox definete un cmp de validare. Un asemenea cmp are dou stri:


selectat sau neselectat.
Atribute acceptate:
o name;
o value implicit are valoarea on(cmp de validare selectat);
o checked.


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

reset - definete un buton cu efect predefinit de anulare a informaiei din


formular. Coninutul tuturor cmpurilor vor fi resetate la valoarea implicit.
Atribute acceptate:
o name;
o value precizeaz titlul butonului. Implicit, acesta este Reset.

button definete un buton de comand. Aciunea lui este descris printr-un


script (JavaScript, Java, VBScript amd.).
Atribute acceptate:
o name;
o 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>.

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:
o name;
o value precizeaz URL-ul fiierului selectat.

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:
o name;
o value.

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

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
- 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.
Aa cum am vzut mai devreme, tagul input permite crearea unui numr mare de
elemente de formular. ns, tagul input nu permite, de exemplu, crearea unui cmp de
editare cu mai multe linii. Acesta se realizeaz cu ajutorul tagului textarea.
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 .
Atribute acceptate:
o
name definete numele cmpului;
o
readonly atribut a crui existen inhib utilizatorului dreptul de scriere n
cmp;
o
cols primete ca valoare un numr ntreg pozitiv reprezentnd numrul de
caractere ce vor fi afiate pe linie;
o
rows - precizeaz numrul de linii ale cmpului multilinie;
o
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.

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). Deosibirea 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.
Listele de selecie sunt realizate cu ajutorul tagului <select>. Atribute acceptate:
o
name definete numele cmpului de selecie;
o
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.
o
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.
Introducerea opiunilor n list se realizeaz cu tagul <option>, poziionat n interiorul
perechii <select> </select>. Acesta accept atributele:
o
name precizeaz numele opiunii;
o
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).
o
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> .
Tag-il <ISINDEX>

Tagul <ISINDEX> face parte conceptual tot din categoria elementelor de formular
datorita faptului ca trimite niste informatii catre server .
Utilizarea tagului duce la aparitia in pagina noastra a unui camp de cautare in care
putem introduce textul pe care dorim sa-l cautam . Acest text este apoi trimis catre un
program CGI care foloseste textul ca pe un argument generand o noua pagina ca
raspuns .
<ISINDEX> nu este folosit in cadrul tagului <FORM> ci in sectiunea HEAD ( intre
tagurile <HEAD> si </HEAD> .
Sintaxa tagului este :
<isindex prompt=text>
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.

<html>
<head>
<title>Formular</title>
</head>
<body>
<form method="POST"
action=mailto:procx@rolink.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>

<html>
<head>
<title>Formular logare</title>
</head>
<body>
<form method="POST"

action="mailto:procx@rolink.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>

<html>
<head>
<title>Optiuni concediu</title>
</head>
<body>
<form method="POST"
action="mailto:procx@rolink.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>

<html>
<head>
<title>Cursuri WEB </title>
</head>
<body>
<form method="POST" action="mailto:procx@rolink.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="submit" value="Expediaza"><input
type="reset" value="Anuleaza"></p>
</form>
</body>
</html>

<html>
<head>
<title>Cursuri WEB</title>
</head>
<body>
<form method="POST" action="mailto:procx@rolink.ro">
<h4>Ce cursuri doriti sa urmati?</h4>
<p><label for="htm"><input type="checkbox" name="Cursuri" value="html" checked
id="htm">HTML</label></p>
<p><label for="asp"><input type="checkbox" name="Cursuri" value="asp" checked
id="asp">ASP</label></p>
<p><label for="jvs"><input type="checkbox" name="Cursuri" value="javascript"
id="jvs">JAVA SCRIPT</label></p>
<p><label for="jav"><input type="checkbox" name="Cursuri" value="java"
id="jav">JAVA</label></p>
<p><input type="submit" value="Expediaza"><input type="reset" value="Anuleaza"></p>
</form>
</body>
</html>
<html>
<head>
<title>Ataseaza Fisier</title>
</head>
<body>
<form method="POST"
action="mailto:procx@rolink.ro">
<input type="file">
<input type="submit">
</form>

</body>
</html>

<html>
<head>
<title>Zodiac</title>
</head>
<body>
<form method="POST" action="mailto:procx@rolink.ro">
<p><b><i>Ce zodie sunteti ?</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>

<html>
<head>
<title>Librarie
informatica</title>
</head>
<body>
<form method="POST"
action="mailto:procx@rolink.ro">
<h4>Selectati cartile care va
intereseaza:</h4>
<p><select size="3"
name="Carti" multiple>
<option value="bg"
selected>Limbajul HTML, B.
Gabrea</option>
<option
value="hb">Introducere in
Internet, H. Badea</option>
<option
value="ns">Realizarea
scenariilor in Java Script, N.
Sorescu</option>
<option value="pi"
selected>HTML 4.0 - fundamente,
P. Ion</option>
</select></p>

<p><input type="submit"
value="Expediaza"><input
type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>

<html>
<head>
<title>Carte de oaspeti</title>
</head>
<body>
<form method="POST" action="mailto:procx@rolink.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>
<html>
<head>
<title>Mesaj</title>
</head>
<body>
<form method="POST"
action="mailto:procx@rolink.ro">
<p><input type="button" value="Apasati aici"
OnClick="alert('Ati apasat butonul cu text')"
name="ButText"></p>
</form>
</body>
</html>
<html>
<head>
<title>Mesaj</title>
</head>
<body>
<form method="POST"
action="mailto:procx@rolink.ro">
<button name="ButonImagine" OnClick="alert('Ati
apasat butonul imagine!')"><img
src="buton.jpg"></button>
</form>

</body>
</html>