Agora
Media
Libraria Byblos



AgoraNews  





PC Magazine Ro  




NET Report   




Ginfo   




agora ON line   





PC Concrete   





Liste de discuții   




Cartea de oaspeți   




Mesaje   





Agora   








Clic aici
PC Report - ultimul numar aparut


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.


PC Magazine Ro | CD ROM | Redactia | Abonamente | CautareArhive

Copyright © 1999-2002 Agora Media.

[email protected]

LG - LifeŽs Good

deltafri

www.agora.ro

www.agora.ro

www.agora.ro