Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

10. Crearea formularelor

10. 1. Ce sunt formularele

Formularele sunt zone din pagina web in care vizitatorii introduc anumite date, pentru prelucrare. Ele sunt echivalentul casetelor de dialog, aducand un plus de interactivitate in pagina web. Exemple: formularul pentru accesarea e-mail-ului, formularul de comanda a unui produs dintr-un magazin virtual, formularul unui motor de cautare (ex. Google) si multe altele.

Dupa completarea formularului si apasarea butonului de trimitere (numit de obicei "Submit", "Ok", "Trimite", "Voteaza", "Cauta", etc.), sunt doua posibilitati:

Varianta 1. Datele sunt prelucrate pe server (server-side) de catre: un script CGI (Common Gateway Interface), PHP, ASP, sau un program scris in C++, Perl, Python, sau alte limbaje de programare. Dupa prelucrare, serverul trimite vizitatorului o pagina de raspuns cu rezultatele prelucrarii.
Varianta 2. Datele sunt prelucrate de catre browser-ul vizitatorului (client-side). Prelucrarea este realizata de un script (de obicei JavaScript sau VBScript) inclus in pagina web vizitata, sau aflat intr-un fisier extern de script, la care este trimis browser-ul pentru a-l executa.

10. 2. Crearea unui formular

Un formular HTML incepe si se termina cu <FORM> ... </FORM>. Eticheta <FORM> contine atributele ACTION si METHOD, care precizeaza unde, respectiv cum se trimit datele. Forma generala a unui formular este:

unde:

"url" este adresa script-ului care prelucreaza datele. Exemplu: "http://proeco.lx.ro/mesaj.php" este adresa unui script numit mesaj.php care trimite un e-mail direct din pagina.
"metoda" este una din urmatoarele:
- POST - se realizeaza mai intai o conexiune cu url-ul specificat, apoi se trimit datele la acea adresa. Aceasta metoda este mai sigura, dar mai lenta.
- GET - datele din formular sunt adaugate la adresa url specificata (vezi figura de mai jos), de unde sunt citite de script-ul de prelucrare. In acest caz, transmiterea se face mai repede, dar cu riscuri de securitate: datele pot fi citite din url de catre persoane neautorizate.

10. 3. Continutul formularului

Un formular nu poate contine alte formulare. Dintre elementele HTML prezente de obicei intr-un formular, mentionam:

Butonul Submit

Butonul Submit este butonul de validare, echivalent cu OK-ul dintr-o caseta de dialog. Este unic in formular. Se creaza dupa modelul: <INPUT TYPE="submit" ...>. Atribute folosite:

TYPE="submit" - creaza un buton text, gen: , sau TYPE="image" SRC="fisier imagine" - foloseste o imagine in locul butonului, gen:
VALUE="textul de pe buton"
NAME="nume variabila" - numele variabilei asociate butonului, existenta in script-ul de prelucrare (in limbajele de programare, o variabila este un identificator care are asociat un nume si o valoare)

Exemple:

Pentru buton text: <html> <form method="get" action="http://www.google.com/search"> <input type="submit" value="cautare google" /> </form> </html>
Pentru buton imagine: <html> <form method="get" action="http://www.google.com/search"> <input type="image" src="buton_submit.jpg" /> </form> </html> (in acest caz trebuie creata imaginea "buton_submit.jpg" in acelasi director cu pagina).

Butonul Reset

Este butonul de anulare, echivalentul butonului "Cancel" din caseta de dialog. Prin apasarea lui se inlocuiesc toate datele introduse cu valorile implicite. Crearea se face dupa modelul: <INPUT TYPE="reset" VALUE="textul de pe buton">.

Caseta de text

Permite introducerea unui text pe un singur rand. Crearea se face dupa modelul <INPUT TYPE="textbox" ...>. Atribute:

TYPE="textbox", sau TYPE="text"
VALUE="valoarea implicita" - daca este folosita, stabileste textul aparut in caseta inainte ca utilizatorul sa introduca ceva.
SIZE="lungimea casetei de text, in caractere" (nu influenteaza lungimea textului introdus).
MAXLENGTH="lungimea maxima a textului, in caractere"
NAME="nume variabila" - numele variabilei asociate casetei text, continand textul introdus si trimisa script-ului de prelucrare.

Exemplu: formular cu caseta de text, buton submit de tip imagine si buton reset

<html>
<form method="get" action="http://www.google.com/search">
cautare google<br>
<input type="textbox" name="q" value="???">
<input type="image" src="buton_submit_imagine.gif" />
<input type="reset" value="anulare"
</form>
</html>

O varianta a casetei de text este caseta password, folosita pentru introducerea unei parole. Caracterele introduse sunt inlocuite imediat cu puncte sau stelute. Se creeaza cu <INPUT TYPE="password" ...>, restul atributelor fiind aceleasi.

Zona de text

Este asemanatoare casetei de text, dar permite scrierea pe mai multe randuri. Se creeaza cu eticheta <TEXTAREA>, dupa modelul:

TEXTAREA name="nume variabila" ROWS="numar de randuri" COLS="numar de coloane" WRAP>
continut implicit
</TEXTAREA>

Atributul optional Wrap determina incadrarea textului (liniile mai lungi se continua pe randul urmator). Exemplu (initial zona de text este goala):

<form method="get" action="adresa script-ului aici">
<b>scrieti-ne un banc:</b><br>
<textarea rows="5" cols="20" wrap></textarea>
<input type="submit" value="trimite">
</form>

Caseta de validare

Permite vizitatorului sa bifeze o anumita optiune din formular, indicand ca este de acord cu aceasta. Daca sunt mai multe casete de validare, se pot bifa toate, o parte din ele sau nici una. Se realizeaza cu <INPUT TYPE="checkbox"...>, atributele fiind:

TYPE="checkbox"
NAME="nume variabila"
VALUE="valoare" - valoarea transmisa script-ului de prelucrare, daca este bifata caseta respectiva
CHECKED - daca este prezent, atunci caseta de validare apare initial bifata (ca in exemplu).

Exemplu:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="cautare google" /><br>
<input type="checkbox" name="sitesearch" value="proeco.lx.ro" checked /> numai in proeco
</form>

Butonul radio

Butoanele radio se creeaza in grup de cel putin doua si permit selectarea unei singure optiuni din mai multe posibile. Selectarea altei optiuni determina deselectarea optiunii curente. Crearea se face cu ajutorul etichetelor <INPUT TYPE="radio"...>, cate una pentru fiecare buton. Atributele sunt:

TYPE="radio"
NAME="nume variabila". De retinut ca butoanele din acelasi grup trebuie sa aiba acelasi nume.
VALUE="valoare" - valoarea transmisa script-ului de prelucrare, daca este selectat butonul
CHECKED - folosit pentru butonul care apare initial selectat

Exemplu:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="cautare google" />
<input type="radio" name="sitesearch" value="" /> cautare pe web
<input type="radio" name="sitesearch" value="proeco.lx.ro" checked /> cautare in proeco<br />
</form>

Lista de selectare

Lista de selectare permite selectarea unei optiuni dintre cele afisate, fiind echivalentul unei casete derulante (combo box) sau unei liste deschise dintr-o caseta de dialog. Se creeaza dupa modelul:

<SELECT NAME="nume variabila" SIZE="numar de elemente afisate">
<OPTION>textul pentru prima optiune</OPTION>
.........
<OPTION>textul pentru ultima optiune</OPTION>
</SELECT>

Atributele sunt:

NAME="nume variabila"
SIZE (optional) - daca nu apare sau are valoarea 1, lista afiseaza initial un singur element (este o lista derulanta - combo box). Daca are valoarea cel putin 2, sunt afisate initial mai multe elemente (este o lista deschisa), aparand automat bare de derulare daca lista este mai lunga decat numarul de elemente din SIZE.
SELECTED (optional) - apare dupa OPTION (<OPTION SELECTED>) si precizeaza ca optiunea respectiva este selectata implicit
MULTIPLE (optional) - se foloseste in eticheta SELECT pentru a permite vizitatorului sa selecteze simultan mai multe optiuni.

Exemplu:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="cautare google" /> <br> cautare in
<select name="sitesearch">
<option selected>proeco.lx.ro</option>
<option>www.edu.ro</option>
<option>portal.edu.ro</option>
<option>tot internetul</option>
</select>
</form>

10. 4. Script-ul pentru formular

Pentru ca formularul web sa functioneze atunci cand vizitatorul apasa butonul Submit, trebuie sa existe un script care sa prelucreze datele din formular. Pentru aceasta, sunt doua posibilitati:

Scriem script-ul intr-un limbaj adecvat (JavaScript, PHP, ASP, etc.) si il upload-am pe un server (care poate sa execute si nu interzice script-ul - serviciile de gazduire gratuite interzic de obicei rularea anumitor script-uri). Aceasta metoda este accesibila numai programatorilor.
Descarcam script-ul din internet si il adaptam nevoilor noastre, apoi il upload-am pe server. Exista surse gratuite de script-uri: www.bravenet.com, www.scriptsearch.com, www.phpjunkyard.com/ si multe altele.

Incercati:

1. Ce se intampla daca schimbam valoarea "q" a atributului name din exemplele de mai sus:

a) apare un mesaj de eroare
b) se deschide pagina home de la google

2. Intr-un formular nu poate exista alt formular:

a) da
b) nu

3. Formularele din exemplele de mai sus functioneaza si cu metoda "POST":

a) da
b) nu

4. Intr-un formular de cautare apare initial textul "???". Daca stergem acest text si scriem "elevi", apoi apasam butonul Reset al formularului:

a) se incarca din nou pagina
b) se reseteaza calculatorul
c) in campul text apare din nou "???"
d) campul text ramane gol
e) nici una din acestea

5. In lista de selectare de tip combo box, atributul SIZE:

a) nu exista
b) are valoarea 1
c) are valoarea 2 sau mai mult
d) a sau b
e) a sau c