Prof.

Negrilescu Nicolae Colegiul National Vlaicu Voda 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"

10

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>

11

</body> </html>

12