Crearea formularelor HTML
Majoritatea programelor PHP folosesc formulare HTML pentru a prelucra datele de la utilizator si pentru a afisa rezultatele calculelor. In cadrul acestui articol, va explic cum sa creati formulare HTML care permit paginilor dumneavoastra sa interactioneze cu utilizatorul.
Proiectarea unui formular
- alegeti controale care sunt adecvate pentru categoria de date pe care le aduna si pentru interactiunile pe care le furnizeaza.
- Etichetati cu claritate fiecare control, astfel incat utilizatorul sa inteleaga functia acestuia.
- In masura posibilitatilor, aliniati etichetele si marginile din stanga ale controalelor. Structura unui formular bine proiectat este asemanatoare cu aceea a unei pagini de ziar, fiind compusa dintr-o serie de coloane in cadrul carora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul sau. Puteti obtine acest tip de structura folosind tabele HTML sau eticheta <BR>.
- Grupati controalele corelate si separati fiecare asemenea grup de celelalte grupuri prin incorporarea de spatii albe in structura dvs.
- Secventa de controale din formular trebuie sa fie asemanatoare cu ordinea in care le va manipula utilizatorul. In caz contrar, utilizatorul va fi obligat sa piarda timp navigand de la un control la altul.
Este important sa retineti ca acestea sunt doar indrumari, nu reguli. Nefiind reguli, puteti opta pentru incalcarea lor, din cand in cand. Pentru a determina daca o varianta de proiectare este superioara alteia, este util sa cereti parerea unui utilizator. Daca nici utilizatorul nu va poate fi de ajutor, obtineti asistenta unui alt programator. In cel mai rau caz, straduiti-va sa va puneti dvs. insiva in rolul unui utilizator al formularului. Intrebati pe utilizator sau pe inlocuitorul acestuia daca formularul este clar, usor de utilizat si eficient. In caz afirmativ, este momentul sa treceti mai departe si sa creati efectiv formularul HTML.
Crearea unui formular HTML
Daca procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura dvs. este mai direct. Mai intai, creati schita HTML elementara, care va contine controalele din formular. Apoi, incorporati controalele in structura; in particular, un formular HTML trebuie sa includa un buton de expediere pe care utilizatorul executa clic pentru a trimite serverului datele din formular. Deoarece o singura pagina HTML poate contine mai multe formulare, puteti repeta de mai multe ori etapele intermediare ale acestui proces.
Crearea structurii HTML
Structura HTML pe care o folositi pentru a include un formular nu este deloc diferita, de fapt, de cea folosita pentru includerea unei pagini HTML obisnuite. De exemplu, iata o structura caracteristica paginilor HTML:
<HTML>
<HEAD>
<TITLE>Titlul paginii este introdus aici</TITLE>
</HEAD>
<BODY>
Continutul paginii sau al formularului este introdus aici
</BODY>
</HTML>
In interiorul corpului unei pagini HTML care contine un formular puteti folosi orice eticheta HTML obisnuita. Pentru a descrie formularul in sine, folositi eticheta FORM, care are urmatoarea forma:
<FORM METHOD="metoda" ACTION="url">
Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificati intotdeauna valoarea POST. Atributul ACTION specifica adresa URL a scriptului PHP care prelucreaza datele adunate prin intermediul formularului. Adresa URL poate fi o adresa completa (de genul http://www.pagina_mea.ro/prelucrare_formular.php), respectiv o adresa partiala, care specifica o locatie relativa la locatia paginii curente (de genul prelucrare_formular.php). Intre eticheta <FORM> si eticheta sa </FORM> corespunzatoare, plasati controalele formularului.
Ca incepator, este mai bine sa folositi in mod consecvent metoda POST, deoarece alegerea intre metodele GET si POST este destul de complicata. Ca regula empirica, multi programatori folosesc GET pentru formulare care executa o cautare sau o interogare, respectiv POST pentru formulare care actualizeaza o baze de date sau un fisier. Doua dezavantaje ale metodei GET sunt acelea ca impune o limita asupra cantitatii de date care pot fi trimise scriptului de prelucrare si ca transfera datele prin atasarea sirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de catre utilizator. Un avantaj al metodei GET este acela ca utilizatorii pot insera semne de carte in rezultatele unei interogari sau al unei cautari care foloseste metoda GET, dar nu pot executa aceeasi operatie in cazul unei interogari sau al unei cautari care foloseste metoda POST.
Incorporarea controalelor
Aceasta sectiune descrie doua controale elementare pe care le veti folosi frecvent: caseta cu text si butonul de expediere. O caseta cu text permite utilizatorului sa tasteze informatii care pot fi apoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obtine date precum numele utilizatorului, adresa sa postala sau adresa de e-mail. Pentru a crea o caseta cu text, scrieti o eticheta HTML care are urmatoarea forma elementara:
<INPUT TYPE="TEXT" NAME="text">
Atributul NAME atribuie casetei cu text un nume, astfel incat continutul sau sa fie accesibil unui script PHP. Numele pe care il atribuiti unui control trebuie sa fie unic in cadrul formularului si trebuie sa respecte regulile pentru denumirea variabilelor PHP, cu exceptia faptului ca numele nu trebuie sa inceapa cu simbolul $. Cu alte cuvinte, numele trebuie sa inceapa cu o litera si nu trebuie sa contina alte caractere in afara literelor, a cifrelor si a caracterelor de subliniere; in particular, numele nu trebuie sa contina spatii. HTML nu are o eticheta </INPUT> deci nu incercati sa combinati o eticheta <INPUT> cu o asemenea eticheta. Un buton de expediere permite utilizatorului sa trimita serverului continutul unui formular. Fiecare formular HTML trebuie sa aiba un buton de expediere. Pentru a crea un buton de expediere, scrieti o eticheta HTML care are urmatoarea forma elementara:
<INPUT TYPE="SUBMIT" VALUE="text">
Atributul VALUE specifica textul care trebuie sa apara pe suprafata butonului de expediere. In continuare este un exemplu de formular care include casete cu text ce preiau numele si adresa de e-mail a utilizatorului:
EXEMPLU | REZULTAT | |
| <HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML> |
Observati utilizarea etichetelor <BR> pentru alinierea etichetelor si a controalelor, precum si numele atribuite controalelor de tip caseta cu text. Cand utilizatorul executa clic pe butonul de expediere, datele introduse de utilizator sunt trimise scriptului prelucrare_formular.php (in acest caz este doar o demonstratie si apasarea butonului va afisa aceasta pagina).
Lucrul cu formulare multiple
In interiorul corpului unei pagini HTML se pot include mai multe formulare. Daca procedati astfel, nu uitati sa inserati o eticheta </FORM> anterior etichetei <FORM> a urmatorului formular. Browserul utilizatorului va face indigestie daca suprapuneti formularele intr-o pagina.
Exemplu | Rezultat | |
| <HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> <FORM METHOD="POST" ACTION="prelucrare_formular2.php"> <H3>Numerele de telefon si fax ale utilizatorului</H3> <BR>Numar de telefon: <BR><INPUT TYPE="TEXT" NAME="telefon"> <BR>FAX: <BR><INPUT TYPE="TEXT" NAME="fax"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML> |
Cand utilizatorul executa clic pe butonul de expediere, datele incluse in campurile formularului care contine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeste fie un nume si o adresa de e-mail, fie numerele de telefon si fax, nu continutul tuturor celor patru campuri.
Vizualizarea campurilor unui formular
Exemplu | Rezultat |
| <?php // afisarea datelor introduse in formularele anterioare phpinfo() ?> | . |
In cazul in care pe server este restrictionata aceasta comanda (ca si in cazul serverului acesta, din motive de securitate) mai jos aveti un alt script cu care puteti vedea variabilele introduse de catre utilizator:
Exemplu | Rezultat |
<?php | Pentru a se afisa ceva aici completati oricare formular de pe aceasta pagina . |
Crearea casetelor cu text personalizate
In sectiunea precedenta am prezentat sintaxa elementara pentru crearea unei casete cu text. Cu toate acestea, HTML furnizeaza numeroase atribute suplimentare care va permit sa modificati aspectul si comportamentul unei casete cu text. Iata sintaxa completa pentru crearea unei casete cu text:
<INPUT TYPE="TEXT" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text">
Atributele TYPE si NAME sunt obligatorii, celelalte atribute sunt optionale. Atributul SIZE, care este dat sub forma unui numar de caractere, stabileste dimensiunea vizibila a casetei cu text, atributul MAXLENGTH specifica numarul maxim de caractere pe care utilizatorul are permisiunea de a le tasta. Valoarea atributului MAXLENGTH o poate depasi pe aceea a atributului SIZE, in care caz continutul controlului defileaza spre dreapta atunci cand utilizatorul a introdus SIZE caractere. Atributul VALUE constituie o valoare care este afisata initial in caseta cu text.
Crearea de suprafete cu text
Ca o caseta cu text, o suprafata cu text permite unui utilizator sa introduca text. Cu toate acestea, o suprafata cu text poate permite utilizatorului sa introduca mai multe linii de text, in timp ce o caseta cu text permite utilizatorului sa introduca o singura linie. Iata sintaxa pentru crearea unei suprafete cu text:
<TEXTAREA NAME="text" ROWS="numar" COLS="numar" WRAP="wrap">
Atributele NAME si ROWS sunt obligatorii, atributele COLS si WRAP sunt optionale. Atributul ROWS specifica numarul liniilor de text vizibile in suprafata cu text; deoarece suprafata de text defileaza dupa ce a fost umpluta, utilizatorul poate introduce linii suplimentare. Atributul COLS specifica numarul coloanelor de text vizibile in suprafata cu text; deoarece suprafata cu text se deruleaza sau se infasoara dupa ce s-a umplut, utilizatorul poate introduce linii mai lungi. Atributul WRAP specifica maniera de infasurare a textului in interiorul suprafetei cu text. Atributul WRAP poate avea urmatoarele valori:
- off - Infasurarea cuvintelor la sfarsitul liniei de text este dezactivata; utilizatorul poate introduce caractere de sfarsit de linie pentru a forta infasurarea liniilor
- virtual - Liniile par infasurate, dar caracteristica de infasurare a liniilor nu este trimisa la server
- physical - Infasurarea cuvintelor la sfarsitul liniei este activata
- soft - Identic cu virtual
- hard - Identic cu physical
O eticheta <TEXTAREA> trebuie combinata cu o eticheta </TEXTAREA>. Orice text care apare intre etichete va fi prezentat drept continut initial al controlului de tip suprafata cu text.
Crearea casetelor cu parola
Daca o aplicatie impune unui utilizator sa introduca o parola, puteti crea o caseta cu text in acest scop. Totusi, cand utilizatorul introduce parola, orice persoana aflata in apropiere poate vizualiza parola, situatie care duce la o posibila bresa de securitate. In loc de a se folosi o caseta cu text pentru introducerea de informatii confidentiale, trebuie sa folositi o caseta cu parola. Pentru a crea o caseta cu parola, folositi aceeasi sintaxa ca si cea utilizata pentru crearea unei casete cu text, cu exceptia faptului ca specificati PASSWORD (parola) in loc de TEXT ca valoare a atributului TYPE:
<INPUT TYPE="PASSWORD" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text">
Atributele unei casete cu parola au aceeasi semnificatie ca si acelea ale unei casete cu text.
Crearea casetelor de validare
Pentru date care pot avea numai una din doua valori, cum ar fi "pornit" sau "oprit", caseta de validare este controlul ideal. De exemplu, caseta de validare este un control adecvat pentru a permite utilizatorului sa opteze pentru livrarea rapida a unui colet. In cazul in care caseta de validare corespunzatoare este valida, coletul va fi livrat mai rapid; in caz contrar, coletul se va deplasa cu mijloacele obisnuite. Pentru a crea o caseta de validare, folositi urmatoarea sintaxa:
<INPUT TYPE="CHECKBOX" NAME="text" CHECKED VALUE="text">
Atributul TYPE este obligatoriu; atributele NAME, CHECKED si VALUE sunt optionale. Daca atributul CHEKED apare, caseta de validare va fi selectata in mod prestabilit; in caz contrar, caseta de validare nu este selectata initial. Atributul VALUE specifica valoarea care este trimisa serverului in cazul in care caseta de validare este selectata; daca atributul nu este specificat, se va trimite valoarea on (activat).
Crearea butoanelor radio
Ca si casetele de validare, butoanele radio pot avea numai una din doua valori. Cu toate acestea, butoanele radio sunt organizate in grupuri, iar la un moment dat poate fi activat un singur buton radio din cadrul unui grup; toate celelalte trebuie sa fie dezactivate. (se aseamana ca la un chestionar grila cu mai multe raspunsuri, pe care trebuie sa il alegeti pe cel corect - acelasi lucru se intampla si cu un grup de butoane radio - la un moment dat nu poate fi activ decat unul). De exemplu, puteti folosi un set de trei butoane radio pentru a permite utilizatorului sa specifice tipul de ambalaj pentru cadou: fara ambalaj, cu ambalaj simplu sau sofisticat. Numai unul dintre cele trei butoane radio poate fi activat; la un loc, setul de butoane radio ofera utilizatorului o tripla optiune. Pentru a crea un buton radio, sintaxa este urmatoarea:
<INPUT TYPE="RADIO" NAME="text" CHECKED VALUE="text">
Retineti ca aceasta este aceeasi sintaxa folosita pentru crearea unei casete de validare, cu deosebirea ca atributul TYPE are valoarea RADIO in locul valorii CHECKBOX. Atributele unui buton radio au aceeasi semnificatie ca si acelea ale unei casete de validare. Totusi, atributul NAME este obligatoriu pentru butoanele radio, chiar daca este optional pentru casetele de validare. Toti membrii unui set de casete de validare prezinta aceeasi valoare a atributului NAME.
Crearea de selectii
O selectie este un meniu care defileaza, de unde utilizatorul poate alege una sau mai multe optiuni. De exemplu, intr-o selectie pot fi enumerate garniturile pentru pizza, astfel incat un utilizator sa poata selecta orice combinatie de garnituri pe care o doreste. Pentru a crea o selectie, folositi urmatoarea sintaxa:
<SELECT NAME="text" MULTIPLE SIZE="numar">etichetele OPTION se insereaza aici</SELECT>
Eticheta <SELECT> este folosita in combinatie cu eticheta </SELECT>. Intre cele doua etichete este introdusa o serie de etichete OPTION. Intr-o eticheta SELECT, numai atributul NAME este obligatoriu. Atributul MULTIPLE arata ca utilizatorul poate alege mai multe optiuni mentinand apasata tasta CTRL si executand clic pe aceasta. In absenta atributului MULTIPLE, utilizatorul poate selecta o singura optiune. Daca specificati atributul MULTIPLE, trebuie sa specificati si un atribut NAME, care atribuie un nume de tablou ca nume al controlului. De exemplu, un control de tip selectie care permite utilizatorului sa aleaga mai multe garnituri pentru desert trebuie denumit folosind sintaxa garnitura[], nu garnitura. Comportarea unei selectii care permite o singura optiune este echivalenta cu aceea a unui set de butoane radio, dar aspectul unei selectii este diferit de acela al unui set de butoane radio. Atributul SIZE specifica numarul optiunilor vizibile. Prin utilizarea unui buton de derulare in jos sau a unei bare de defilare, utilizatorul poate manipula selectia pentru a obtine accesul la restul optiunilor si a alege dintre acestea. Asa cum am spus, o selectie este asociata cu una sau mai multe optiuni. Pentru a crea o optiune care urmeaza a fi utilizata in cadrul unei selectii, folositi urmatoarea sintaxa:
<OPTION SELECTED VALUE="text">continutul optiunii este inserat aici</OPTION>
Eticheta <OPTION> este combinata cu o eticheta </OPTION>. Textul dintre aceste etichete este cunoscut sub numele de continut al optiunii. Continutul optiunii apare in controlul SELECT. Multi programatori HTML omit eticheta </OPTION>, caz in care textul optiunii se extinde pana la urmatoarea eticheta <OPTION> sau </SELECT>. Totusi nu este recomandat din motive de compatibilitate intre browsere. Ambele atribute ale etichetei OPTION sunt optionale. Daca apare atributul VALUE, valoarea sa este trimisa serverului atunci cand este selectata optiunea asociata; in caz contrar, continutul optiunii este trimis la server. Atributul SELECTED arata ca optiunea corespunzatoare este selectata initial; in caz contrar, optiunea respectiva nu este selectata initial.
Crearea campurilor ascunse
Uneori este utila crearea asa-numitelor campuri ascunse. Valorile campurilor ascunse sunt trimise la server alaturi de valorile altor controale; cu toate acestea, utilizatorul nu are posibilitatea de a vizualiza sau manipula valorile campurilor ascunse. Campurile ascunse se utilizeaza frecvent in cadrul unei serii de formulare. De exemplu, datele introduse de utilizator in primul formular din serie pot fi necesare in formularele ulterioare. In loc de a determina utilizatorul sa introduca datele in fiecare formular, datele pot fi stocate intr-un camp ascuns, creat si initializat de scriptul care prelucreaza primul formular. Astfel, utilizatorul este scutit de o munca suplimentara si sunt preintampinate eventualele erori, care ar fi putut aparea daca utilizatorul nu ar fi introdus aceleasi date in formularele ulterioare. Sintaxa este:
<INPUT TYPE="HIDDEN" NAME="text" VALUE="text">
Numai atributele TYPE si NAME sunt obligatorii; cu toate acestea, controlul este practic inutil in absenta atributului VALUE, a carui valoare este trimisa in mod automat la server in momentul expedierii formularului.
Trimiterea unui fisier catre server prin intermediul unui formular
Puteti permite utilizatorului sa aleaga un fisier si apoi sa trimita serverului continutul fisierului creand un control de tip fisier, prin intermediul urmatoarei sintaxe:
<INPUT TYPE="FILE" NAME="nume" ACCEPT="tip_mime" VALUE="text">
Atributul TYPE este singurul obligatoriu; cu toate acestea, in general, apare si atributul NAME. Atributul VALUE specifica un nume de fisier prestabilit. Atributul ACCEPT specifica formatul continutului fisierului. Pot fi indicate mai multe formate, dar fiecare format trebuie separat de vecinii sai prin intermediul unei virgule. Formatul este specificat folosind un cod MIME (Multipurpose Internet Mail Extensions). Tabelul urmator descrie formatele folosite cel mai frecvent:
TIP MIME | TIP DE DATE | EXTENSII DE FISIER |
| application/msexcel | Microsoft Excel | xls |
| application/msword | Microsoft Word | doc, dot |
| application/octet-stream | Binara | exe |
| application/pdf | Adobe Acrobat | |
| application/postscript | Postscript | ai, eps, ps |
| application/ppt | Microsoft PowerPoint | ppt |
| application/zip | Date comprimate in format ZIP | zip |
| audio/midi | Musical Instrument Digital Interface (MIDI) | mid, midi |
| audio/x-wav | Windows Audio Format (WAV) | wav |
| image/gif | Compuserve Graphics Interchange Format (GIF) | gif |
| image/jpeg | Joint Photographics Expert Group (JPEG) | jpeg, jpg, jpe |
| image/TIFF | Tagged Image Format (TIF) | tif, tiff |
| text/HTML | HTML | htm, html |
| text/plain | Text simplu | txt |
| text/richtext | Rich Text Format (RTF) | rtf |
| video/mpeg | Secventa video | mpg, mpv, mpe, mpeg |
| video/quicktime | Secventa video | qt, mov |
| video/x-msvideo | Secventa video | avi |
Eticheta FROM de delimitare trebuie sa aiba POST ca valoare a atributului sau METHOD. De asemenea, trebuie sa includa un atribut ENCTYPE cu valoarea multipart/form-data. Iata sintaxa pe care trebuie sa o folositi:
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="url">
Este posibil ca serverul pe care aveti pagina sa nu fie configurat astfel incat sa accepte fiecare tip MIME. In accest caz trebuie sa vorbiti cu administratorul serverului, pentru a putea incarca fisiere pe server.
Exemplu de formular
Am creat mai jos un exemplu care contine casetele descrise pana acum (mai putin cele cu camp ascuns si cel de incarcare a unui fisier pe server), cu scopul de a intelege mai bine fiecare functie in parte:
Exemplu | Rezultat |
| <form name="form1" method="post" action=""> <input type="text" name="textfield">Textfield<br> <br> <textarea name="textarea"></textarea>Textarea<br> <br> <input type="password" name="textfield2">Textfield pentru parole <br> <br> <input type="checkbox" name="checkbox" value="checkbox">Checkbox<br> <br> <input name="checkbox2" type="checkbox" value="checkbox" checked> Checkbox cu valoarea checked<br> <br> <input name="radiobutton" type="radio" value="radiobutton"> Radio buton<br> <br> <select name="select"> <option selected>optiunea 1</option> <option>optiunea 2</option> <option>alegerea 3</option> </select> List / Menu<br> <br> <p> <label> <input name="RadioGroup1" type="radio" value="radio" checked> Radio</label> Group1<br> <label> <input type="radio" name="RadioGroup1" value="radio"> Radio</label> Group1 </p> </form> |
Link-ul autorului:
www.tutoriale.far-php.ro