|
Myha
Moderator
Inregistrat: acum 18 ani
Postari: 5
|
|
Limbajul HTML oferă instrumente pentru a facilita interacţiunea documentului web cu utilizatorul. Această interacţiune va fi efectuată printr-un schimb de informaţii între browser şi server. Datele furnizate de utilizator în formular sunt transmise către server, care recepţionează cererea şi lansează în execuţie un scenariu CGI (Common Gateway Interface-Interfaţă Comună pentru Porţi de Acces). Aplicaţiile CGI sunt scrise în limbaje specifice: Perl, C, VBScript, JavaScript sau altele. Ele prelucrează datele primite, într-o anumită manieră, dependentă de aplicaţie (interoghează o bază de date, efectuează anumite calcule, eventual validări de date şamd.). Apoi aplicaţia CGI furnizează un răspuns serverului, care îl transmite mai departe calculatorului client (operaţie numită feedback).
Într-un document web pot exista oricâte 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 primeşte ca valoare adresa URL a scenariului CGI ce va primi datele furnizate de utilizator şi le va prelucra, generând un răspuns. Dacă atributul action lipseşte, datele vor fi trimise la adresa documentului curent. Este posibilă expedierea datelor furnizate de către utilizator la o adresă poştală, caz în care atributul action va primi ca valoare adresa de e-mail respectivă, însoţită de prefixul ”mailto:”
Atributul method specifică modul în care va fi trimisă informaţia către server. Atributul method poate primi două valori:
+ get
+ post
Datele furnizate de utilizator în formular sunt adăugate la adresa URL a scriptului CGI, sub formă de perechi de tipul:
<câmp>=<valoare>
În cazul valorii get a atributului method, aceste perechi de date sunt adăugate la sfârşitul adresei URL a scriptului, după semnul ‘?’, separate prin ‘&’. Atunci când trimit un formular către server, majoritatea browserelor afişează acest şir.
Ex.: Tagul
<form action = “http://www.contest.rolink.ro/registration” method=”get”>
ce va conţine două câmpuri de tip text:
* câmpul „nume”, în care utilizatorul a introdus valoarea MihneaIonut
* şi câmpul „email”, în care utilizatorul a introdus valoarea
va determina transmiterea catre server a cererii: ? nume = MihneaIonut & email = imihnea.mail.com
Dacă se doreşte evitarea afişării lui, va fi utilizată valoarea post a tributului method, caz în care şirul este transmis serverului printr-o secvenţă HTTP specială.
Atributul name primeşte ca valoare numele formularului, în situaţia în care sunt mai multe formulare în document. Deasemenea, numele formularului este util şi atunci când scriptul este scris în JavaScript, pentru a putea fi referit.
Atributul target primeşte ca valoare numele ferestrei în care se va face afişarea răspunsului 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 afişa răspunsul în pagina curentă. Există câteva cuvinte cheie ce pot fi transmise ca valoare atributului target:
* _self – răspunsul scriptului va fi afişat în fereastra ce conţine formularul;
* _parent– răspunsul scriptului va fi afişat în fereastra părinte a ferestrei ce conţine formularul;
* _top - răspunsul va fi afişat în fereastra din vârful ierarhiei de ferestre;
* _blank–va fi creată o fereastră nouă în care va fi afişat răspunsul. Efectul este similar situaţiei în care atributul target a primit valoare un nume de fereastră ce nu a fost definit anterior.
Atributul title oferă posibilitatea afişării unui text explicativ de îndată ce mouse-ul se opreşte deasupra formularului.
Elemente de formular
Între perechea de taguri <form> si </form> sunt definite o serie de elemente de formular, destinate recepţionării 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=”…” maxlength=”…”>
Descriere atribute:
* type – defineşte tipul de element de formular, care poate fi :
+ text - defineşte un câmp de editare pentru un cuvânt sau o linie de text.
Câmpurile de editare acceptă parametrii:
* value;
* size;
* maxlength.
+ password – defineşte un câmp de editare a unei parole. Caracterele introduse de utilizator sunt ascunse, câmpul de editare afişând semnul ‘*’ în locul fiecărui caracter.
Atribute acceptate (ca şi câmpurile de editare):
* value;
* size;
* maxlength.
+ radio – butoanele radio permit selectarea unei opţiuni dintre mai multe existente. O opţiune este definită printr-un câmp radio. Într-un set de butoane radio, la un moment dat, o singură opţiune poate fi selectată.
Pe un formular pot exista mai multe seturi de butoane radio, gruparea lor într-un anumit set realizându-se prin precizarea unui nume comun (numele este dat de valoarea atributului name). Atribute acceptate:
* name;
* value - precizează ce valoare va fi trimisă către server, alături de valoarea atributului name, atunci când a fost selectată opţiunea respectivă. Dacă însă nu aceasta este opţiunea aleasă din setul respectiv, atunci informaţia oferită de buton nu este trimisă către server;
* checked.
+ checkbox – defineşte un câmp de validare. Un asemenea câmp are două stări: selectat sau neselectat.
Atribute acceptate:
* name;
* value
* checked.
+ submit – defineşte un buton cu efect predefinit de expediere către server a informaţiei din formular.
Atribute acceptate:
* name;
* value – precizează textul afişat pe suprafaţa butonului. Implicit, titlul butonului este Submit.
+ reset - defineşte un buton cu efect predefinit de anulare a informaţiei din formular. Conţinutul tuturor câmpurilor vor fi resetate la valoarea implicită.
Atribute acceptate:
* name;
* value – precizează titlul butonului. Implicit, acesta este Reset.
+ button – defineşte un buton de comandă. Acţiunea lui este descrisă printr-un script (JavaScript, Java, VBScript e.t.c.).
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>.
+ file – defineşte un element de tip casetă de fişiere, ce conţine un câmp de editare unde va fi afişată calea fişierului selectat şi un buton de comandă Browse.
Atribute acceptate:
* name;
* value – precizează URL-ul fişierului selectat.
+ hidden – defineşte un câmp ascuns (care nu este afişat în formular). Câmpurile ascunse sunt utilizate pentru a trimite către server informaţii suplimentare, ce nu pot fi modificate de utilizator.
Atribute acceptate:
* name;
* 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 – defineşte numele câmpului creat. Numele va fi trimis către server, alături de valoarea sa, pentru a permite execuţia scriptului.
* value – precizează valoarea implicită a câmpului. Această valoare va fi afişată la prima activare a formularului. Utilizatorul o poate modifica sau poate opta pentru păstrarea ei pentru a fi trimisă serverului
* checked – atribut utilizat în cazul casetelor de validare sau a butoanelor radio. Prezenţa lui determină selectarea câmpului în cauză.
* size – determină lungimea câmpului (exprimată în caractere). Atribut utilizat de câmpurile de editare.
* maxlength – fixează numărul maxim de caractere ce vor fi acceptate de către câmpurile de editare. Depăşirea acestui număr va fi semnalată printr-un mesaj sonor. Dacă valoarea atributului maxlength este mai mare decât valoarea atributului size, textul introdus în câmpul de editare va defila către stânga.
Aşa cum am văzut mai devreme, tagul input permite crearea unui număr mare de elemente de formular. Însă, tagul input nu permite, de exemplu, crearea unui câmp de editare cu mai multe linii. Acesta se realizează cu ajutorul tagului textarea.
Câmpuri de editare multilinie
Câmpuri de editare multilinie se realizează cu ajutorul tagului textarea. Ele permit introducerea şi afişarea unui text pe mai multe linii. Dacă lungimea textului depăşeşte lungimea câmpului, atunci se va ancora o bară de defilare orizontală. Dacă numărul de linii ale textului depăşesc înălţimea câmpului, atunci se va ancora o bară de defilare verticală.
Textul introdus intre tagurile textarea va fi afisat in fereastra corespunzatoare din browser .
Atribute acceptate:
* name – defineşte numele câmpului;
* readonly – atribut a cărui existenţă inhibă utilizatorului dreptul de scriere în câmp;
* cols – primeşte ca valoare un număr întreg pozitiv reprezentând numărul de caractere ce vor fi afişate pe linie;
* rows - precizează numărul de linii ale câmpului multilinie;
* wrap – defineşte modalitatea de „spargere” a textului în linii în interiorul câmpului. Atributul poate lua valorile:
o off – (valoarea implicită Textul este afişat pe un singur rând. Utilizatorul poate trece pe linia următoare apăsând tasta ENTER. Textul trimis serverului va conţine caracterele de sfârşit de linie.
o hard – Textul se aşază automat pe rânduri, lungimea acestora fiind determinată de lungimea câmpului. Deasemenea, textul trimis serverului va conţine caracterele de sfârşit de linie.
o soft – Textul se aşază automat pe rânduri, lungimea acestora fiind determinată de lungimea câmpului, însă textul trimis serverului nu va mai conţine caracterele de sfârşit de linie.
Liste de selecţie
Listele de selecţie permit selectarea uneia sau a mai multor opţiuni dintr-o listă. Ele reprezintă o combinaţie între butoanele radio (selecţie singulară şi câmpurile de validare (selecţie multiplă. Deosebirea este aceea că utilizarea listelor de selecţie nu necesită afişarea tuturor opţiunilor, ci numai a unora dintre ele, deplasarea printre alternative realizându-se cu ajutorul unei bare de defilare verticală.
Listele de selecţie sunt realizate cu ajutorul tagului <select>. Atribute acceptate:
o name – defineşte numele câmpului de selecţie;
o size – stabileşte câte elemente ale listei sunt vizibile la un moment dat, restul opţiunilor fiind accesibile prin utilizarea barei de defilare verticală. Implicit, valoarea atributului size este 1.
o multiple – prezenţa atributului multiple permite selectarea mai multor elemente ale listei (echivalent câmpurilor de selecţie), altfel, în cazul selecţiei singulare, un singur element al listei poate fi selectat la un moment dat (echivalent butoanelor de opţiune). Atributul multiple nu are efectul dorit în cazul listelor de selecţie ce au valoarea size egală cu 1.
Introducerea opţiunilor în listă se realizează cu tagul <option>, poziţionat în interiorul perechii <select> </select>. Acesta acceptă atributele:
o name – precizează numele opţiunii;
o selected – prezenţa atributului selected în interiorul tagului <option> face ca opţiunea respectivă să fie selectată la încărcarea formularului. Dacă valoarea atributului size a tagului select este 1, atunci, implicit va fi afişată prima opţiune a listei de selecţii (în cazul în care nici o opţiune 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, ataşat butoanelor radio sau câmpurilor de validare, face ca selectarea/deselectarea unei opţiuni să se realizeze şi prin apăsarea etichetei opţiunii respective.
Acest lucru se realizează plasând 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: ”>
<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: ">
<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: ">
<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: ">
<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: ">
<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: ">
<input type="file">
<input type="submit">
</form>
</body>
</html>
<html>
<head>
<title>Zodiac</title>
</head>
<body>
<form method="POST" action="mailto: ">
<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: ">
<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: ">
<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: ">
<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: ">
<button name="ButonImagine" OnClick="alert('Ati apasat butonul imagine!')"><img src="buton.jpg"></button>
</form>
</body>
</html>
<html>
<head>
<title>Rezervare unei camere de hotel</title>
</head>
<body>
<form method="POST" action="rezervari.asp" >
<h3><u>Hotel Atlas - 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>
<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>
</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>
|
|
