IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Interactivitate: folosirea formularelor

Emanuel Baruch

Aproape orice sit are în structura sa şi o secţiune prin intermediul căreia li se dă posibilitatea vizitatorilor să ia legătura cu realizatorii, respectiv proprietarii acestuia. Iar atunci când este vorba de magazine virtuale sau forumuri de discuţii, asigurarea fluxului de informaţii vizitator-sit devine o problemă centrală. Tot ceea ce trebuie transmis dintr-o pagină web, indiferent dacă este o simplă opinie care va ajunge la webmaster sau o comandă online, va trebui introdus de vizitator într-un formular. Dacă realizarea acestuia cu ajutorul limbajului HTML nu reprezintă deloc o problemă delicată, ceea ce se întâmplă cu datele după transmiterea formularului poate complica lucrurile destul de mult. Înainte să detaliem aceste aspecte, să vedem însă cum se poate crea un formular de contact.

Expresia HTML necesară este următoarea:

<form name="formular1" method="post" action="trimitere.php" target="_self"> ... </form>

O pagină web poate conţine mai multe formulare de contact, însă nu poate fi trimis la un moment dat mai mult de unul singur.

Deşi nu este obligatoriu, este indicat ca oricărui formular să i se atribuie un nume (în exemplul de mai sus acesta a fost stabilit cu ajutorul atributului name="formular1").

Atributul method poate avea valoarea post sau get. Cea mai des întâlnită este post, aceasta asigurând transmiterea datelor din formular. Deşi get este valoarea implicită pentru formulare, folosirea acesteia nu este recomandată şi de aceea nu o vom mai analiza.

Action conţine URL-ul fişierului care va prelucra datele (action="trimitere.php"). Acest atribut poate fi şi o expresie de genul mailto:[email protected]. Aşadar, datele dintr-un formular de contact pot fi transmise direct din browser prin e-mail.

Această metodă nu este însă deloc avantajoasă. Iată şi de ce: în primul rând, utilizatorul va primi automat un mesaj de confirmare care îl avertizează că destinatarul va intra în posesia adresei sale de e-mail şi, pentru ca datele să poată fi trimise, este necesară existenţa unui client de e-mail (de exemplu Outlook Express) corect configurat. Apoi, mesajul primit prin e-mail de către destinatar este destul de greu de descifrat. Construiţi un formular şi introduceţi ca action adresa dvs. de e-mail, după care încercaţi să îl trimiteţi. Veţi vedea la ce mă refer... O alternativă este funcţia mail din PHP, pe care o vom discuta spre final.

Atributul opţional target vă este cu siguranţă cunoscut. El funcţionează la fel ca şi atunci când este folosit cu linkuri, şi se referă la modul în care va fi deschis fişierul care se va încărca după trimiterea formularului.

Câmpurile unui formular
O mare parte din acestea sunt definite cu ajutorul tag-ului input. Ele sunt acelea în care utilizatorul va introduce efectiv datele. Fiecare câmp - indiferent de forma sa - va fi identificat printr-un nume (atribuit cu ajutorul atributului name) iar atunci când formularul este transmis, datele vor fi trimise ca perechi nume-valoare.

<input type="text" name="caseta1" size="10" maxlength="20" value="valoare initiala">
ˇ type este atributul general care defineşte forma câmpului. Pentru text normal acesta va fi text iar pentru introducerea de parole vom avea type="password" (în acest caz literele fiind înlocuite pe ecran cu steluţe)
ˇ size (opţional) stabileşte lungimea casetei

ˇ maxlength (opţional) limitează la un anumit număr de caractere valoarea care poate fi introdusă de utilizator
ˇ value (opţional) precizează o valoare iniţială care va apărea în casetă atunci când formularul este încărcat
<input type="checkbox" name="caseta2" value="caseta bifata" checked>

ˇ în acest caz, value este ceea ce va obţine destinatarul formularului atunci când această căsuţă este bifată.
ˇ atributul checked este opţional şi va determina ca iniţial căsuţa de validare să fie bifată. Desigur, vizitatorul o va putea debifa prin clic.
<input type="radio" name="buton1" value="valoarea butonului" checked >
ˇ Atributele value şi checked au aceeleaşi funcţii ca şi în cazul casetelor de validare. Acest tip de butoane sunt folosite în general ca perechi, utilizatorul neputând bifa mai multe simultan. Aşadar, ele sunt potrivite pentru cazurile când cel ce completează un formular trebuie să precizeze o opţiune (de exemplu, sexul: masculin sau feminin). Pentru a crea o pereche de 2 sau mai multe butoane cu opţiuni, numele acestora trebuie să fie acelaşi, ceea ce diferă în funcţie de opţiune fiind valoarea butoanelor:
<input type="radio" name="buton1" value="masculin">
<input type="radio" name="buton1" value="feminin">
<input type="radio" name="buton1" value="neprecizat">
<input type="file" name="casetafisier" size="20">
ˇ Acest câmp va fi format dintr-o casetă obişnuită de introducere a textului, urmată de un buton "Browse..." care va permite utilizatorului să deschidă o fereastră de navigare printre fişierele de pe calculatorul său, astfel încât să poată preciza cu uşurinţă fişierul dorit. Câmpul va conţine calea completă a acestuia (de exemplu, C:\ My Documents\fisier.doc). Textul afişat pe buton depinde de setările utilizatorului şi nu poate fi controlat din pagina web. Astfel, dacă sistemul este setat pe limba germană, de exemplu, butonul nu va fi intitulat "Browse..." ci "Durchsuchen...". Acest tip de casetă suportă şi atributul maxlength, însă limitarea numărului de caractere al căii fişierului respectiv nu este o idee prea bună.
<input type="submit" name="butontrimitere" value="Trimite datele">
ˇ Value defineşte în acest caz textul care va fi afişat pe buton. Atunci când este apăsat, datele introduse în formular vor fi trimise către destinatar. În majoritatea browserelor, ajunge apăsarea tastei Enter.

Butonul Reset
<input type="reset" name="butonresetare" value="Sterge continutul">
ˇ Acest buton va determina resetarea formularului, adică ştergerea definitivă a tuturor datelor introduse de utilizator şi aducerea formularului la forma sa iniţială. Desigur, utilitatea acestuia poate fi însemnată în anumite cazuri, însă atunci când avem un formular voluminos iar utilizatorul a depus un efort însemnat completându-l, poate ar fi mai bine să nu îi oferim posibilitatea de a anula toate datele introduse de el printr-un simplu clic. S-ar putea ca el să apese accidental acest buton, confundându-l cu cel de submit.

Butoane generale
<input type="button" name="buton" value="Apasa aici">
ˇ Acest tip de butoane nu au în această formă nici o funcţie. Pentru a genera o anumită acţiune atunci când sunt apăsate, este nevoie de un script JavaScript. Iată un exemplu: dorim ca atunci când se face clic pe acest buton, să deschidem o fereastră separată în browser cu un fişier HTML care să conţină câteva explicaţii (explicatie.html).
ˇ Scriptul care va fi introdus în antetul paginii va fi următorul:

<script language="JavaScript">
<!—-
function Deschide() { window.open('explicatie.html','fereastra1','width=300,height=350,status=yes,menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=20,left=20');
}
//—>>
</script>
Butonul nostru va fi generat astfel:
<input type="button" name="butonexplicatie" value="Explicatie" class="question" onClick="JavaScript:Deschide()">

Butoane de tip imagine
Mulţi designeri web nu sunt mulţumiţi de aspectul general al butoanelor generate de browsere. Din fericire, ele pot fi înlocuite cu imagini, astfel încât să nu afecteze designul unei pagini.

<input type="image" border="0" name="butonimagine" src="imagine.gif" width="10" height="10" alt="text alternativ" align="middle">

Observaţi că în acest caz tag-ul input suportă toate atributele caracteristice imaginilor (tag-ului img). De remarcat că va dispărea "efectul de clic" tipic butoanelor.

Câmpuri ascunse
<input type="hidden" name="campascuns" value="valoare ascunsa">

Aceste câmpuri permit trimiterea de informaţii invizibile pentru utilizator, cum ar fi un număr unic de identificare al unei comenzi.
<textarea name="textcaseta" cols="30" rows="10" wrap="off"></textarea>
ˇ cols şi rows stabilesc lungimea (pe coloane) şi înălţimea (pe rânduri) a casetei de text.
ˇ atributul wrap se referă la ceea ce se întâmplă atunci când textul introdus depăşeşte dimensiunile casetei. Valorile posibile sunt: off, şi hard. De asemenea, puteţi preciza doar wrap, fără nici o valoare. Mai există şi valorile physical şi virtual, însă acestea sunt interpretate doar de Internet Explorer; soft este recunoscută doar de Netscape. Atunci când wrap este setat pe off, caseta de text va activa bara de scroll orizontală odată ce lungimea textului a depăşit numărul de coloane, respectiv bara de scroll verticală, atunci când textul nu mai încape în spaţiul alocat între liniile acesteia. Dacă utilizatorul va apăsa tasta Enter, atunci cursorul se va întoarce la capătul din stânga al următoarei linii. Datele din această casetă vor păstra ruperile de linie introduse manual atunci când sunt trimise către destinatar. Valoarea hard va determina eliminarea barei de scroll orizontale şi va rupe automat liniile atunci când este cazul, ca şi cum utilizatorul ar fi apăsat de fiecare tasta Enter, datele fiind trimise în această formă. Dacă folosiţi doar wrap, efectul va fi acelaşi ca şi în cazul valorii hard, cu excepţia faptului ca datele expediate vor conţine doar ruperile de linie introduse de utilizator.
ˇ suportă şi atributul value pentru a preciza un text care va apărea iniţial în casetă.
<select name="listaoptiuni">
<option> opţiunea 1 </option>
<option> opţiunea 2 </option>
<option> opţiunea 3 </option>
<option> opţiunea 4 </option>
</select>

Acest cod va genera o listă derulantă cu patru opţiuni, dintre care utilizatorul va putea să aleagă una singură. Implicit va fi selectată prima opţiune. Dacă doriţi ca iniţial să fie selectată una dintre opţiuni, folosiţi atributul selected: <option selected> opţiunea 2 </option>. Practic, nu obţinem altceva decât o altă formă a unei perechi de butoane radio.

Pentru ca această listă derulantă să fie afişată pe mai multe rânduri, vom include atributul size în cadrul tag-ului select:
<select name="listaoptiuni" size="4">
<option> opţiunea 1 </option>
<option> opţiunea 2 </option>
<option> opţiunea 3 </option>
<option> opţiunea 4 </option>
</select>

În acest caz, utilizatorul va putea vedea mai multe opţiuni, însă nu va putea selecta mai multe simultan. Pentru a-i permite acest lucru, trebuie folosit atributul multiple în tag-ul select. Astfel, cu ajutorul cursorului mouse-ului şi al tastelor Alt şi/sau Ctrl pot fi selectate una sau mai multe opţiuni. Valorile care vor fi trimise către destinatar vor fi chiar denumirile variantelor înscrise în listă. Dacă dorim altele, vom proceda astfel:
<select name="listaoptiuni" size="4" multiple>
<option value="valoarea opţiunii 1"> opţiunea 1 </option>
<option value="valoarea opţiunii 1"> opţiunea 2 </option>
<option value="valoarea opţiunii 1"> opţiunea 3 </option>
<option value="valoarea opţiunii 1"> opţiunea 4 </option>
</select>

Navigarea prin formular cu ajutorul tastei TAB
Implicit, formularul va fi parcurs cu ajutorul acestei taste în ordinea în care apar elementele sale. Aşadar, apăsarea ei va determina cursorul browserului să sară la următorul element, SHIFT + TAB fiind reversul aceste comenzi. Totuşi, puteţi controla ordinea în care sunt accesate casetele formularului folosind atributul tabindex (pe tag-urile input, button, select şi textarea):
<input type="text" name="caseta1" tabindex="1">
<input type="text" name="caseta2" tabindex="2">

Nu trebuie să folosiţi numere consecutive pentru valorile lui tabindex, ordinea lor crescătoare fiind suficientă. De altfel, nici nu este indicat acest lucru, deoarece s-ar putea să doriţi adăugarea ulterioară a unor câmpuri (probabil că unii dintre dumneavoastră îşi amintesc de această tehnică din timpul limbajului BASIC).

Alte tag-uri şi atribute
Următoarele elemente au fost incluse în această categorie deoarece au apărut relativ recent şi nu sunt pe deplin implementate, mai ales în browsere mai vechi (generaţia 3-4 de browsere).

Taste de accesare directă
Acestea sunt similare tastelor de acces folosite împreună cu tasta Alt pentru selectarea meniurilor din anumite programe (în acest caz ele fiind subliniate în denumirea meniului respectiv). In HTML, vom folosi atributul accesskey astfel:
<input type="checkbox" name="caseta2" value="caseta bifata" accesskey="Y">
Atunci când utilizatorul va apăsa combinaţia de taste Alt + Y va bifa această căsuţă. Atenţie însă la tastele pe care le definiţi pentru accesarea directă, deoarece pot apărea conflicte (de exemplu, tasta F este rezervată in Internet Explorer pentru accesarea meniului File.)

Etichete pentru elementele formularului

În mod normal, veţi folosi text înaintea căsuţelor pentru a le face cunoscută semnificaţia:

<form name="formular1" method="post" action="trimitere.php" target="_self">
Nume: <input type="text" name="nume"> <br>
Prenume: <input type="text" name="prenume"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" name="trimitere" value="Trimite">
</form>

Desigur, puteţi include elementele formularului într-un tabel (eventual cu marginile setate pe zero) pentru a obţine o aliniere exactă a acestora:
<table width="300" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Nume:</td>
<td><input type="text" name="nume"></td
</tr>
<td>Prenume: </td>
<td><input type="text" name="prenume"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="trimitere" value="Trimite"></td>
</tr>
</table>

Limbajul HTML (începând cu versiunea 4) ne pune însă la dispoziţie şi o variantă directă, şi anume cu ajutorul tag-ului label:
<label for="elementul1">Nume:</label>
<input type="text" id="elementul1" name="nume"> <br>
<label for="elementul2"> Prenume:</label>
<input type="text" id="elementul2" name="prenume"><br>
<label for="elementul3"> E-mail:</label>
<input type="text" id="elementul3" name="email"><br>
<input type="submit" name="trimitere" value="Trimite">

Eticheta va fi asociată cu ajutorul perechii for-id. Ţineţi cont de faptul că label trebuie să apară înaintea elementului căruia îi este asociat. Label poate fi folosit însă şi astfel (în acest caz nu se mai foloseşte perechea de valori for-id):
<label> Nume: <input type="text" name="nume"> </label>

Un avantaj al acestui element este faptul că un element se va activa atunci când se execută clic pe eticheta sa.

Gruparea elementelor în casete

Aceasta se poate realiza folosind tabele sau diverse efecte grafice (ca şi în cazul alinierii elementelor formularului) sau cu ajutorul tag-urilor fieldset şi legend:
<fieldset>
<legend>Date personale</legend>
Nume:<input type="text" id="elementul1" name="nume"> <br>
Prenume:<input type="text" id="elementul2" name="prenume"><br>
</fieldset>
<fieldset>
<legend align="center">Date de contact</legend>
E-mail:<input type="text" name="email"><br>
Telefon:<input type="text" name="telefon"><br></fieldset>
<input type="submit" name="trimitere" value="Trimite">
Rezultatul (pe Intenet Explorer 6) va arăta astfel:

Din păcate, nu putem controla direct lăţimea casetelor generate de tag-ul fieldset, decât prin includerea lui într-un tabel cu lăţime fixă sau variabilă.

Aceste elemente noi aduse de limbajul HTML 4.0 vor crea mari probleme celor ce folosesc browsere mai vechi şi de aceea nu vă recomand deocamdată utilizarea lor. Diferenţe de la un browser la altul veţi observa însă pe toate elementele formularelor, mai ales atunci când veţi folosi foi de stil (de acestea ne vom ocupa într-un număr viitor). Dar, chiar şi cele mai simple elemente pot genera multă bătaie de cap atunci când veţi dori alinierea lor precisă. Iată cum arată o căsuţă de text de lungime 30 (size="30") pe Internet Explorer şi pe Netscape:

Dacă intenţionaţi să folosiţi elemente ale formularelor în scop demonstrativ sau pentru alte efecte, nu veţi mai avea în mod normal nevoie de tag-ul form. Totuşi, includeţi-l neapărat, altfel Netscape nu le va afişa.

Aceasta este cam tot ceea ce trebuie să ştiţi pentru a construi formulare în paginile web. Ce facem însă cu datele introduse de utilizator? După cum am mai spus, folosirea lui mailto ca action nu este deloc avantajoasă. În general, există un program (de exemplu CGI - Common Gateway Interface) care va rula pe serverul căruia îi este destinat formularul, prelucrând şi eventual trimiţând mai departe datele. Se poate utiliza însă şi o metodă foarte facilă şi accesibilă, astfel încât datele să fie recepţionate prin e-mail, existând şi posibilitatea trimiterii unei confirmări automate. Singurul lucru necesar este un server cu suport PHP (majoritatea serverelor oferă deja acest suport, excepţie făcând cele gratuite). Iată cum vom proceda. În primul rând vom crea un formular (ca exemplu îl voi folosi pe cel prezentat la descrierea etichetelor). Observaţi atributul action="trimitere.php". Apoi vom crea un fişier PHP (trimitere.php). Acesta nu se deosebeşte de un fişier HTML decât prin extensia sa şi prin faptul că, alături de limbajul HTML putem folosi şi comenzi PHP. Mai precis, vom integra aceste comenzi în HTML.

<html><head><title>Confirmare</title></head>
<body>
mail("[email protected]", "Subiectul mesajului", "
Nume: $nume
Prenume: $prenume
E-mail: $email
" ,"From: [email protected] \nReply-To: [email protected] \nX-Mailer: PHP/");
?>
</body>
</html>

Prima adresa de e-mail este cea la care serverul va trimite mesajul, a doua este adresa care va apărea în câmpul "From" atunci când destinatarul va primi mesajul, iar a treia este adresa la care vor fi trimise răspunsurile acestuia, atunci când va folosi "Reply". Desigur, aceste adrese pot fi identice. De asemenea, ca destinatar pot fi precizate mai multe adrese de email, separate prin virgulă.

Valorile $nume, $prenume şi $email vor conţine ceea ce utilizatorul a introdus în câmpurile identificate prin name="nume", name="prenume" şi name="email" (în general vor conţine valorile introduse în casetele de text sau cele indicate în atributul value la listele de opţiuni, casetele de validare şi butoanele radio).

Atenţie, nu folosiţi alte ghilimele în scriptul PHP deoarece nu va mai funcţiona. Atunci când doriţi să o faceţi folosiţi în loc de ghilimele (") combinaţia backslash/ghilimele (\").

Pentru a crea un mesaj de confirmare care va fi trimis automat la adresa de e-mail introdusă de utilizator în câmpul "E-mail", prima linie a scriptului va arăta astfel:
mail("$email", "Subiectul mesajului", "

Iată cum, folosind numai câteva linii de script, puteţi crea un formular perfect pentru a colecta informaţii de la vizitatorii sitului dvs. În numerele viitoare vom analiza posibilităţile oferite de tehnologia CSS (Cascading Style Sheets) pentru controlul riguros al aspectului formularelor. De asemenea, vom analiza numeroase scripturi JavaScript care ne vor permite, pe lângă altele, controlarea datelor introduse de utilizator.