Crearea formularelor HTML

Majoritatea paginilor web folosesc formulare HTML pentru a prelucra datele de la utilizator şi pentru a afişa rezultatele calculelor. În cadrul acestui articol, vă explic cum să creaţi formulare HTML care permit paginilor dumneavoastră să interacţioneze cu utilizatorul.


Proiectarea unui formular
- alegeţi controale care sunt adecvate pentru categoria de date pe care le adună şi pentru interacţiunile pe care le furnizează.
- Eticheţati cu claritate fiecare control, astfel încât utilizatorul să înteleagă funcţia acestuia.
- În măsura posibilităţilor, aliniaţi etichetele şi marginile din stânga ale controalelor. Structura unui formular bine proiectat este asemănătoare cu aceea a unei pagini de ziar, fiind compusă dintr-o serie de coloane în cadrul cărora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul său. Puteţi obţine acest tip de structură întrebuințând tabele HTML sau eticheta <BR>.
- Grupaţi controalele corelate şi separaţi fiecare asemenea grup de celelalte grupuri prin încorporarea de spaţii albe în structura dvs.
- Secvenţa de controale din formular trebuie să fie asemănătoare cu ordinea în care le va manipula utilizatorul. În caz contrar, utilizatorul va fi obligat să piardă timp navigând de la un control la altul.
Este important să reţineţi că astea sunt doar îndrumări, nu reguli. Nefiind reguli, puteţi opta pentru încălcarea lor, din când în când. Pentru a determina dacă o variantă de proiectare este superioară alteia, este util să cereţi părerea unui utilizator. Dacă nici utilizatorul nu vă poate fi de ajutor, obţineţi asistenţa unui alt programator. În cel mai rău caz, străduiţi-vă să vă puneţi dvs. înşivă în rolul unui utilizator al formularului. Întrebaţi pe utilizator sau pe inlocuitorul acestuia dacă formularul este clar, uşor de exploatat şi eficient. În caz afirmativ, este momentul să treceţi mai departe şi să creaţi efectiv formularul HTML.


Crearea unui formular HTML
Dacă procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura dvs. este mai direct. Mai întâi, creaţi schiţa HTML elementară, care va conţine controalele din formular. Apoi, încorporaţi controalele în structură; în particular, un formular HTML trebuie să includă un buton de expediere pe care utilizatorul execută clic pentru a trimite serverului datele din formular. Deoarece o singură pagină HTML poate conţine mai multe formulare, puteţi repeta de mai multe ori etapele intermediare ale acestui proces.


Crearea structurii HTML
Structura HTML pe care o folosiţi pentru a include un formular nu este deloc diferită, de fapt, de cea folosita pentru includerea unei pagini HTML obişnuite. De exemplu, iată o structură caracteristică paginilor HTML:




În interiorul corpului unei pagini HTML care conţine un formular puteţi folosi absolut orice etichetă HTML obişnuită. Pentru a descrie formularul în sine, folosiţi eticheta FORM, care are următoarea formă:

<FORM>

Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificaţi întotdeauna valoarea POST. Atributul ACTION specifică adresa URL a scriptului PHP care prelucrează datele adunate prin intermediul formularului. Adresa URL poate fi o adresă completă (de genul http://www.pagina_mea.ro/prelucrare_formular.php ), respectiv o adresă parţială, care specifică o locaţie relativă la locaţia paginii curente (de genul prelucrare_formular.php). Între eticheta <FORM> şi eticheta sa </FORM> corespunzătoare, plasaţi controalele formularului.
Ca începător, este mai bine să folosiţi în mod consecvent metoda POST, fiindcă alegerea între metodele GET şi POST este destul de complicată. Ca regulă empirică, mulţi programatori folosesc GET pentru formulare care execută o căutare sau o interogare, respectiv POST pentru formulare care actualizează o bază de date sau un fişier. Două dezavantaje ale metodei GET sunt acelea că impune o limită asupra cantitaţii de date care pot fi trimise scriptului de prelucrare şi că transferă datele prin ataşarea şirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de înspre utilizator. Un avantaj al metodei GET este acela că utilizatorii pot insera semne de carte în rezultatele unei interogari sau al unei căutari care foloseşte metoda GET, dar nu pot executa aceeaşi operaţie în cazul unei interogări sau al unei căutari care foloseste metoda POST.


Încorporarea controalelor
Această secţiune descrie două controale elementare pe care le veţi folosi frecvent: caseta cu text şi butonul de expediere. O casetă cu text îngăduie utilizatorului să tasteze informaţii care pot fi apoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obţine date precum numele utilizatorului, adresa sa poştală sau adresa de e-mail. Pentru a crea o casetă cu text, scrieţi o etichetă HTML care are următoarea formă elementară:

<INPUT>

Atributul NAME atribuie casetei cu text un nume, astfel încât conţinutul său să fie accesibil unui script PHP. Numele pe care îl atribuiţi unui control trebuie să fie unic în cadrul formularului şi trebuie să respecte anumite reguli. Cu alte cuvinte, numele trebuie să înceapă cu o literă şi nu trebuie să conţină alte caractere în afara literelor, a cifrelor şi a caracterelor de subliniere; în particular, numele nu trebuie să conţină spaţii. HTML nu are o eticheta </INPUT> deci nu încercaţi să combinaţi o etichetă <INPUT> cu o asemenea etichetă. Un buton de expediere permite utilizatorului să trimită serverului conţinutul unui formular. Fiecare formular HTML trebuie să aibă un buton de expediere. Pentru a crea un buton de expediere, scrieţi o etichetă HTML care are următoarea formă elementară:

<INPUT>

Atributul VALUE specifică textul care trebuie să apară pe suprafaţa butonului de expediere. În continuare este un exemplu de formular care include casete cu text ce preiau numele şi adresa de e-mail a utilizatorului:
[URL=http://img525.imageshack.us/my.php?image=sssjyo.png][/URL]
Observaţi folosirea etichetelor <BR> pentru alinierea etichetelor şi a controalelor, precum şi numele atribuite controalelor de tip casetă cu text. Când utilizatorul execută clic pe butonul de expediere, datele întroduse de utilizator sunt trimise scriptului prelucrare_formular.php (în acest caz este doar o demonstraţie şi apăsarea butonului va afişa această pagina).


Lucrul cu formulare multiple
În interiorul corpului unei pagini HTML se pot conține mai multe formulare. Dacă procedaţi astfel, nu uitaţi să inseraţi o etichetă </FORM> anterior etichetei <FORM> a următorului formular. Browserul utilizatorului va face indigestie dacă suprapuneţi formularele într-o pagină.
[URL=http://img100.imageshack.us/my.php?image=sssd.png][/URL]
Când utilizatorul execută clic pe butonul de expediere, datele incluse în câmpurile formularului care conţine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeşte fie un nume şi o adresă de e-mail, fie numerele de telefon şi fax, nu conţinutul tuturor celor patru câmpuri.


Crearea casetelor cu text personalizate
În secţiunea precedentă am prezentat sintaxa elementară pentru crearea unei casete cu text. Cu toate acestea, HTML furnizează numeroase semnale suplimentare care vă încuviințează să modificaţi aspectul şi comportamentul unei casete cu text. Iată sintaxa integrală pentru crearea unei casete cu text:

<INPUT>

Atributele TYPE şi NAME sunt obligatorii, celelalte atribute sunt opţionale. Atributul SIZE, care este dat sub forma unui număr de caractere, stabileşte dimensiunea vizibilă a casetei cu text, atributul MAXLENGTH specifică numărul mare de caractere pe care utilizatorul are permisiunea de a le tasta. Valoarea atributului MAXLENGTH o poate depăşi pe aceea a atributului SIZE, în care caz conţinutul controlului defilează spre dreapta atunci îndată ce utilizatorul a introdus SIZE caractere. Atributul VALUE constituie o valoare care este afişată iniţial în caseta cu text.


Crearea de suprafeţe cu text
Ca o casetă cu text, o suprafaţă cu text permite unui utilizator să introducă text. Cu toate acestea, o suprafaţă cu text poate permite utilizatorului să introducă mai multe linii de text, în timp ce o caseta cu text permite utilizatorului să introducă o singură linie. Iată sintaxa pentru crearea unei suprafeţe cu text:

<TEXTAREA>

Atributele NAME şi ROWS sunt obligatorii, atributele COLS şi WRAP sunt opţionale. Atributul ROWS specifică numărul liniilor de text vizibile în suprafaţa cu text; deoarece suprafaţa de text defilează pe urmă ce a fost umplută, utilizatorul poate introduce linii suplimentare. Atributul COLS specifică numărul coloanelor de text vizibile în suprafaţa cu text; căci suprafaţa cu text se derulează sau se înfăşoară după ce s-a umplut, utilizatorul poate introduce linii mai lungi. Atributul WRAP specifică maniera de înfăşurare a textului în interiorul suprafeţei cu text. Atributul WRAP poate avea următoarele valori:

- off - Înfăşurarea cuvintelor la sfârşitul liniei de text este dezactivată; utilizatorul poate introduce caractere de sfârşit de linie pentru a forţa înfăşurarea liniilor
- virtual - Liniile par înfaşurate, dar caracteristica de înfăşurare a liniilor nu este trimisă la server
- physical - Înfăşurarea cuvintelor la sfârşitul liniei este activată
- soft - Identic cu virtual
- hard - Identic cu physical

O etichetă <TEXTAREA> trebuie combinată cu o etichetă </TEXTAREA>. Indiferent ce text care apare între etichete va fi prezentat drept conţinut iniţial al controlului de tip suprafaţă cu text.


Crearea casetelor cu parolă
Dacă o aplicaţie impune unui utilizator să introducă o parolă, puteţi crea o casetă cu text în acest scop. Totuşi, când utilizatorul introduce parola, orice persoană aflată în apropiere poate vizualiza parola, situaţie care duce la o posibilă breşă de securitate. În loc de a se folosi o casetă cu text pentru introducerea de informaţii confidenţiale, trebuie să folosiţi o casetă cu parolă. Pentru a crea o casetă cu parolă, folosiţi aceeaşi sintaxă ca şi cea utilizată pentru crearea unei casete cu text, cu excepţia faptului că specificaţi PASSWORD (parola) în loc de TEXT ca valoare a atributului TYPE:

<INPUT>

Atributele unei casete cu parolă au aceeaşi semnificaţie ca şi acelea ale unei casete cu text.


Crearea casetelor de validare
Pentru date care pot avea numai una din două 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 să opteze pentru livrarea grabnică a unui colet. În cazul în care caseta de validare corespunzătoare este validă, coletul va fi livrat mai rapid; în caz contrar, coletul se va deplasa cu mijloacele obişnuite. Pentru a crea o casetă de validare, folosiţi următoarea sintaxă:

<INPUT>

Atributul TYPE este obligatoriu; atributele NAME, CHECKED şi VALUE sunt opţionale. Dacă atributul CHEKED apare, caseta de validare va fi selectată în mod prestabilit; în caz contrar, caseta de validare nu este selectată iniţial. Atributul VALUE specifică valoarea care este trimisă serverului în cazul în care caseta de validare este selectată; dacă atributul nu este specificat, se va trimite valoarea on (activat).


Crearea butoanelor radio
Ca şi casetele de validare, butoanele radio pot avea numai una din două valori. Cu toate acestea, butoanele radio sunt organizate în grupuri, iar la un ocazie dat poate fi activat un singur buton radio din cadrul unui grup; toate celelalte trebuie să fie dezactivate. (se aseamănă ca la un chestionar grilă cu mai multe răspunsuri, pe care trebuie să îl alegeti pe cel corect - acelaşi lucru se întâmplă şi cu un grup de butoane radio - la un moment dat nu poate fi activ decât unul). De exemplu, puteţi folosi un set de trei butoane radio pentru a permite utilizatorului să specifice tipul de ambalaj pentru cadou: fără ambalaj, cu ambalaj simplu sau sofisticat. Numai unul dintre cele trei butoane radio poate fi activat; la un loc, kitul de butoane radio acordă utilizatorului o triplă opţiune. Pentru a crea un buton radio, sintaxa este următoarea:

<INPUT>

Reţineţi că aceasta este aceeaşi sintaxă uzitată pentru crearea unei casete de validare, cu deosebirea că atributul TYPE are valoarea RADIO în locul valorii CHECKBOX. Atributele unui buton radio au aceeaşi semnificaţie ca şi acelea ale unei casete de validare. Totuşi, atributul NAME este obligatoriu pentru butoanele radio, chiar dacă este opţional pentru casetele de validare. Toţi membrii unui set de casete de validare posedă aceeaşi valoare a atributului NAME.


Crearea de selecţii
O selecţie este un meniu care defilează, de unde utilizatorul poate alege una sau mai multe opţiuni. De exemplu, într-o selecţie pot fi enumerate garniturile pentru pizza, astfel încât un utilizator să poată selecta orice combinaţie de garnituri pe care o doreşte. Pentru a crea o selecţie, folosiţi următoarea sintaxă:

<SELECT>etichetele OPTION se insereaza aici</SELECT>

Eticheta <SELECT> este uzată în combinaţie cu eticheta </SELECT>. Între cele două etichete este introdusă o înșiruire de etichete OPTION. Într-o etichetă SELECT, numai atributul NAME este obligatoriu. Atributul MULTIPLE arată că utilizatorul poate alege mai multe opţiuni menţinând apăsată tasta CTRL şi executând clic pe aceasta. În absenţa atributului MULTIPLE, utilizatorul poate selecta o singură opţiune. Dacă specificaţi atributul MULTIPLE, trebuie să specificaţi şi un atribut NAME, care atribuie un nume de tablou ca nume al controlului. De exemplu, un control de tip selecţie care permite utilizatorului să aleagă mai multe garnituri pentru desert trebuie denumit utilizând sintaxa garnitura[], nu garnitura. Comportarea unei selecţii care permite o singură opţiune este echivalentă cu aceea a unui set de butoane radio, dar profilul unei selecţii este diferit de acela al unui set de butoane radio. Atributul SIZE specifică numărul opţiunilor vizibile. Prin întrebuințarea unui buton de derulare în jos sau a unei bare de defilare, utilizatorul poate manipula selecţia pentru a obţine accesul la restul opţiunilor şi a alege dintre acestea. Aşa cum am spus, o selecţie este asociată cu una sau mai multe opţiuni. Pentru a crea o opţiune care urmează a fi utilizată în cadrul unei selecţii, folosiţi următoarea sintaxă:

<OPTION>continutul optiunii este inserat aici</OPTION>

Eticheta <OPTION> este combinată cu o etichetă </OPTION>. Textul dintre aceste etichete este știut sub numele de conţinut al opţiunii. Conţinutul opţiunii apare în controlul SELECT. Mulţi programatori HTML omit eticheta </OPTION>, caz în care textul opţiunii se extinde până la următoarea etichetă <OPTION> sau </SELECT>. Totuşi nu este recomandat din motive de compatibilitate între browsere. Ambele atribute ale etichetei OPTION sunt opţionale. Dacă apare atributul VALUE, valoarea sa este trimisă serverului atunci când este selectată opţiunea asociată; în caz contrar, conţinutul opţiunii este trimis la server. Atributul SELECTED arată că opţiunea corespunzătoare este selectată iniţial; în caz contrar, opţiunea respectivă nu este selectată iniţial.


Crearea câmpurilor ascunse
Uneori este utilă crearea aşa-numitelor câmpuri ascunse. Valorile câmpurilor ascunse sunt trimise la server alături de valorile altor controale; cu toate acestea, utilizatorul nu are probabilitatea de a vizualiza sau manipula valorile câmpurilor ascunse. Câmpurile ascunse se utilizează frecvent în cadrul unei serii de formulare. De exemplu, datele introduse de utilizator în întâiul formular din serie pot fi necesare în formularele ulterioare. În loc de a determina utilizatorul să introducă datele în fiecare formular, datele pot fi stocate într-un câmp ascuns, produs şi iniţializat de scriptul care prelucrează debutantul formular. Astfel, utilizatorul este scutit de o muncă suplimentară şi sunt preântâmpinate eventualele erori, care ar fi putut apărea dacă utilizatorul nu ar fi introdus aceleaşi date în formularele ulterioare. Sintaxa este:

<INPUT>

Numai atributele TYPE şi NAME sunt obligatorii; cu toate acestea, controlul este practic inutil în absenţa atributului VALUE, a cărui valoare este trimisă în mod automat la server în timpul expedierii formularului.


Trimiterea unui fişier către server prin intermediul unui formular
Puteţi permite utilizatorului să aleagă un fişier şi apoi să trimită serverului conţinutul fişierului creând un control de tip fişier, prin intermediul următoarei sintaxe:

<INPUT>

Atributul TYPE este singurul obligatoriu; cu toate acestea, în general, apare şi atributul NAME. Atributul VALUE specifică un nume de fişier prestabilit. Atributul ACCEPT specifică formatul conţinutului fişierului. Pot fi indicate mai multe formate, dar fiecare format trebuie separat de vecinii săi prin intermediul unei virgule. Formatul este specificat folosind un cod MIME (Multipurpose Internet Mail Extensions). Tabelul următor descrie formatele folosite cel mai frecvent:

1.TIP MIME 2.TIP DE DATE 3. EXTENSII DE FISIER
application/msexcel Microsoft Excel xls
application/msword Microsoft Word doc, dot
application/octet-stream Binara exe
application/pdf Adobe Acrobat pdf
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 rudimentar 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 să aibă POST ca valoare a atributului său METHOD. De asemenea, trebuie să includă un atribut ENCTYPE cu valoarea multipart/form-data. Iată sintaxa pe care trebuie să o folosiţi:

<FORM>

Este posibil ca serverul pe care aveţi pagina să nu fie configurat astfel încât să accepte fiecare tip MIME. În accest caz trebuie să vorbiţi cu administratorul serverului, pentru a putea încărca fişiere pe server.


Exemplu de formular
Am realizat mai jos un exemplu care conţine casetele descrise până acum (mai putin cele cu câmp ascuns şi cel de încărcare a unui fişier pe server), cu scopul de a înţelege mai bine fiecare funcţie în parte:




În continuare un cămp de tip textarea:




Cămpul pentru parole:





Apoi avem cămpurile ceckbox:




În continuare exemplu pentru butoanele radio şi radiogroup:



Care arată asa:



Şi ultimul exemplu conţine un list-meniu:




Înlocuirea unui buton cu o imagine
Aspectul unui buton de expediere este monoton şi obişnuit. Dacă aspectul paginii este important, puteţi folosi o poză în locul unui buton de expediere. O asemenea fotografie se numeşte buton imagine. Când un utilizator execută clic pe buton imagine, datele din formular sunt trimise serverului, ca şi cum utilizatorul ar fi executat clic pe un buton de expediere. Sintaxa pentru crearea unui buton imagine este:

<INPUT>

Atributele SRC si TYPE sunt obligatorii; celelalte atribute sunt opţionale. Atributul SRC determină adresa URL a fişierului care conţine imaginea ce va fi afişată. Atributul NAME atribuie un nume controlului de tip buton imagine. Atributul ALIGN poate lua oricare din valorile top (sus), middle (la mijloc) sau bottom (jos) şi specifică modul de aliniere a butonului imagine relativ la textul înconjurător.


Crearea unui buton de reiniţializare
Uneori, este folositor ca utilizatorul să poată executa clic pe un buton care să şteargă toate informaţiile incluse într-un formular. Un întocmai buton se numeşte buton de reiniţializare. Sintaxa este:

<INPUT>

Unicul atribut obligatoriu este TYPE. Atributul opţional VALUE specifică textul care va apărea pe suprafaţa butonului de reiniţializare; dacă atributul este omis, pe buton va scrie "Reset".


Utilizarea unei legaturi pentru a furniza date unui script
În afară de a expedia unui script datele dintr-un formular prin intermediul câmpurilor din formular, puteţi expedia date cu ajutorul adresei URL a scriptului, aşa cum se specifică în atributul ACTION al etichetei FORM. Pentru aceasta, ataşati la sfârşitul adresei URL un semn al întrebării (?) şi apoi includeţi o succesiune de perechi nume-valoare cu următoarea formă:

nume1=valoare1&nume2=valoare2&nume3=valoare3

Exemplul include numai trei perechi nume-valoare; cu toate acestea, puteţi include oricâte asemenea perechi doriţi, în funcţie de limita impusă de browserul utilizatorului. Adresa URL rezultată se numeşte şir de interogare şi nu poate conţine spaţii. Dacă doriţi să trimiteţi un spaţiu ca parte a unui şir de interogare, trimiteţi în locul spaţiului un semn plus (+). Iată un exemplu de şir de interogare care cere de pe server o anumită pagină:

http://www.tutoriale.far-php.ro/index.php?p=content

Adresa de mai sus trimite scriptului inclus în pagina index.php variabila cu numele "p" cu valoarea "content".
Dacă doriţi să trimiteţi unui script, prin intermediul adresei URL, caractere distincte ca de pildă un semn al întrebării, un semn egal sau un ampersand, pentru a nu se crea confuzie şi pentru a funcţiona corect, un şir trebuie codificat URL. Pentru a codifica URL un şir care conţine o interogare, caracterele aparte se înlocuiesc cu echivalentele lor hexazecimale, precedate de un simbol procent (%). Pentru detalii, consultaţi documentul Request for Comments (RFC) 1738, la dispoziție la adresa www.rfc.net. Unele dintre cele mai comune caractere speciale şi echivalentele lor codificate URL sunt prezentate mai jos. De exemplu, forma codificată URL a şirului "la multi ani!" este %22la multi ani%21%22.

Caracter excepțional Echivalent codificat URL


. %2e

? %3e

^ %5e

~ %7e

+ %2b

` %2c

/ %2f

: %3a

; %3b

<3c> %3e

[ %5b

\ %5c

] %5d

- %5f

{ %7b

| %7c

} %7d

Tab %09

Spatiu %20

! %21

" %22

# %23

$ %24

% %25

& %26

' %27

( %28

) %29

@ %40

, %60