10. Formulare

10. Formulare

Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selectie,campuri de editare etc.
Formularele va asigura construirea unori pagini Web care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.Formularele pot varia de la o simpla caseta de text ,pentru introducerea unui sir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de cautaredin Web - pana la o structura complexa ,cu multiple sectiuni ,care ofera facilitati puternice de transmisie a datelor. O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape:

1. Utilizatorul completeaza formularul si il expedieaza unui server.
2. O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele intr-o baza de date.
3. Daca este necesar serverul expedieaza un raspuns utilizatorului.

Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.

Atribute esentiale ale elementului <form>

Exista doua atribute esentiale ale elementului <form>.

1. Atributul action precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la destinatie.De regula ,valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primeste datele formularului ,efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns.

<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

Script-urile pot fi scrise in limbajele Perl,C,PHP,Unix shell.

2. Atributul method precizeaza metoda utilizata de browser pentru expedierea datelor formularului.Sunt posibile urmatoarele valori:

get (valoarea implicita).In acest caz ,datele din formular sunt adaugate la adresa URL precizata de atributul action;
- nu sunt permise cantitati mari de date (maxim 1 Kb)
- intre adresa URL si date este inserat un "?".
Datele sunt adaugate conform sintaxei: nume_camp = valoare_camp. Intre diferite seturi de date este introdus un "&".
Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";
post In acest caz datele sunt expediate separat. Sunt permise cantitati mari de date (ordinul MB)

Pentru ca un formular sa fie functional, trebuie precizat ce se va intampla cu el dupa completarea si expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail).
Pentru aceasta se foloseste un atribut al etichetei <form> si anume action care primeste ca valoare " mailto: " concatenat cu o adresa valida de e-mail catre care se va expedia formularul completat.

Un formular cu un camp de editare si un buton de expediere

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se foloseste atributul type al etichetei <input>. Pentru un camp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un element <input> sunt:

atributul name ,permite atasarea unui nume fiecarui element al formularului.
atributul value ,care permite atribuirea unei valori initiale unui element al formularului.

Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, in care atributul type este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value ,daca aceasta valoare a fost stabilita.

<html> <head><title>FormEx_1 </title></head> <body><h1> Un formular cu un camp de editare si un buton de expediere</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele"><br> <input type="submit" value="expedieaza"> </form></body> </html>

vezi acest exemplu

Pentru elementul <input> de tipul camp de editare (type = "text") , alte doua atribute pot fi utile:

atributul size specifica latimea campului de editare depaseste aceasta latime ,atunci se executa automat o derulare acestui camp;
atributul maxlength specifica numarul maxim de caractere pe care le poate primi un camp de editare; caracterele tastate peste numarul maxim sunt ignorate.

Observatii:

: - daca atributul type lipseste intr-un element <input> , atunci campul respectiv este considerat in mod prestabilit ca fiind de tip "text".; - formularele cu un singur camp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea si apasarea tastei ENTER.

Butonul Reset

Daca un element de tip <input> are atributul type configurat la valoarea "reset" ,atunci in formular se introduce un buton pe care scrie "Reset". La apasarea acestui buton ,toate elementele dinn formular primesc valorile prestabilite (definita odata cu formularul ), chiar daca aceste valori au fost modificate de utilizator.
Un buton Reset poate primi un nume cu ajutorul atributului name si o valoare printr-un atribut value.
Un asemenea buton afiseaza textul "Reset" daca atributul value lipseste, respectiv valoarea acestui atribut in caz contar.

<html> <head><title>formex_2</title></head> <body><h1>Un formular cu un buton reset</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Introduceti numele:<input type="text" name="nume" value="Numele"><br>
Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br> <input type="reset" value="sterge"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Camp de editare de tip "password"

Daca se utilizeaza eticheta <input> avand atributul type configurat la valoarea "password" , atunci in formular se intyroduce un element asemanator cu un camp de editare obisnuit (introdus prin type="text").
Toate atributele unui camp de editare raman valabile.
Singura deosebire consta in faptul ca acest camp de editare nu afiseaza caracterele in clar,ci numai caractere *,care ascund de privirile altui utilizator aflat in apropiere valoarea introdusa intr-un asemenea camp.
La expedierea formularului insa, valoarea tastata intr-un camp de tip "password" se transmite in clar.

<html> <head><title>formex_3</title></head> <body><h1>Un formular cu un buton reset</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Nume:<input type="text" name="nume" value="Numele"><br>
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
Password:<input type="password" name="parola" ><br> <input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body> </html>

vezi acest exemplu

Butoane radio

Butoanele radio permit alegerea ,la un moment dat , aunei singure variante din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avand valoarea "radio".

<html> <head><title>formex_4</title></head> <body><h1>Un formular cu butoane radio</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br> <input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f",in functie de alegerea facuta de utilizator.

Casete de validare

O caseta de validare (checkbox)permite selectarea sau deselctarea unei optiuni.
Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea "checkbox".
Observatii:

: - fiecare caseta poate avea un nume definit prin atributul name.
fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul checked.

<html> <head><title>formex_5</title></head> <body><h1>Un formular cu casete checkbox</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Alegeti meniul:<br>
Pizza<input type="checkbox" name="pizza" value="o portie">Nectar<input type="checkbox" name="nectar" value="un pahar">
Bere<input type="checkbox" name="bere" value="o sticla">
Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
<input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Casete de fisiere

Intr-o pereche "name = value" a unui formular se poate folosi intregul continut al unui fisier pe post de valoare.
Pentru aceasta se insereaza un element <input> intr-un formular , cu atributul type avand valoarea "file" (fisier).
Atributele pentru un element de tip caseta de fisiere:

atributul name permite atasarea unui nume
atributul value primeste ca valoare adresa URL a fisierului care va fi expediat o data cu formularul. Aceasta valoare poate fi atribuita direct atributului value, se poate fi tastata intr-un camp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File Upload sau Choose File care apare la apasarea butonului Browse... din formular;
atributul enctype precizeaza metoda utilizata la criptarea fisierului de expediat.Valoarea acestui atribut este "multipart/form-data".

<html> <head><title>formex_6</title></head> <body><h1>Un formular cu caseta de fisiere</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Alegeti fisierul:<input type="file" name="fisier" enctype="multipart/form-data"><br> <input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Liste de selectie

O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita. Lista de selectie este inclusa in formular cu ajutorul etichetelor corespondente <select>si </select>.
O lista de selectie poate avea urmatoarele atribute:

atributul name, care ataseaza listei un nume (utilizat in perechile "name=value" expediat serverului);
atributul size, care precizeaza (printr-un numar intreg pozitiv , valoarea prestabilita fiind 1) cate elemente din lista sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin actionarea barei de derulare atasate automat listei).

Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option>.

Doua atribute ale etichetei option se dovedesc utile:

atributul value primeste ca valore un text care va fi expediat server-ului in perechea "name=value"; daca acest atribut lipseste ,atunci catre server va fi expediat textul ce urmeaza dupa <option>;
atributul selected (fara alte valori) permite selectarea prestabilita a unui elem,ent al listei.

<html> <head><title>formex_7</title></head> <body><h1>Un formular cu o lista de selectie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Universitatea absolvita:<br><br> <select name="universitate" size="3"> <option value="B">Universitatea din Cluj<option value="UNBM" selected>Universitatea de Nord Baia Mare<option value="UTT">Universitatea Technica din Timisoara<option value="UTB">Universitatea Technica din Brasov</select><br><br> <input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Daca atributul size este egal cu 1 atunci lista de selectie arata asa.

Lista de selectie cu selectii multiple

O lista de selectie ce permite selectii multiple se creeaza intocmai ca o lista de selectie obisnuita. In plus , eticheta <select> are un atribut multiple (fara alte valori). Cand formularul este expediat catre server pentru fiecare element selectat al listei care este se insereaza cate o pereche "name=value" unde name este numele listei.

<html> <head><title>formex_8</title></head> <body><h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
Limbi straine cunoscute:<br><br> <select name="limbi straine" size="5"> <option value="e">Engleza<option value="f" selected>Franceza<option value="s">Spaniola<option value="i">Italiana<option value="r">Rusa<option value="g">Germana</select><br><br> <input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Campuri de editare multilinie

Intr-un formular campuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are urmatoarele atribute:

atributul cols, care specifica numarul de caractere afisate intr-o linie;
atributul rows, care specifica numarul de linii afisate simultan;
atributul name, care permite atasarea unui nume campului de editare multilinie;
atributul wrap, (de la "word wrap"=trecerea cuvintelor pe randul urmator0, care determina determina comportamentul campului de editare fata de sfarsitul de linie.
Acest atribut poate primi urmatoarele valori:

a) " off "; in acest caz:
- intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul;
- caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
b) " hard "; in acest caz:
- se produce intreruperea cuvintelor la marginea dreapta a editorului ;
- caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
c) " soft "; in acest caz:
- se produce intreruperea cuvintelor la marginea dreapta a editorului ;
- nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul;

<html> <head><title>formex_9</title></head> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea> <input type="reset"> <input type="submit"> </form></body> </html>

vezi acest exemplu

Un formular complex

In exemplul urmator este prezentat un formular continand elemente prezentate anterior. Campurile formularului sunt incluse in celule unui tabel pentru a obtine o aliniere dorita.

<html> <head><title>formex_10</title></head> <body><h1>Un formular complex</h1> <hr> <center><table bgcolor="orange"> <form action="mailto:xxxxx@xxx.com" method="post"> <caption align="top">MENIU</caption> <tr align=left><th>Numele:
<td><input type="text" name="numele"> <tr align=left><th>Preumele:
<td><input type="text" name="prenumele"> <tr align=left><th>Telefonul:
<td><input type="text" name="telefonul"> <tr align=left><th>Alegeti pizza:
<td><input type="checkbox" name="ciuperci">cu ciuperci
<input type="checkbox" name="mexicana">mexicana<input type="checkbox" name="europeana">europeana
<tr align=left><th>Alegeti plata:<td> <ul style="background-color:lightblue;"> <li><input type="radio" name="plata">cash<li><input type="radio" name="plata">card</ul> <tr align=left><th>Comentarii:
<td> <textarea name="comentarii" cols="30" rows="5" wrap="off">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea> <tr align=left valign=top><td> <input type="reset" value="sterge"><td> <input type="submit" value="expedieaza"> </form></table></body> </html>

vezi acest exemplu

Butoane

Intr-un formular pot fi afisate butoane.Cand utilizatorul apasa un buton, se lanseaza in executie o functie de tratare a acestui eveniment.
limbajul HTML nu permite scrierea unor astfel de functii (acest lucru este posibil daca se utilizeaza limbajele Javascript sau Java).
Pentru a insera un buton intr-un formular , se utilizeaza eticheta <input> avand atributul type configurat la valoarea "button".
Alte doua atribute ale elementului "button" sunt:

atributul name, care permite atasarea unui nume butonului
atributul value, care primeste ca valoare textul ce va fi afisat pe buton.

Un buton pentru lansarea in executie a unei actiuni poate fi introdus intr-un formular prin elementul <input> avand atributul type configurat la valoarea "button", asa cum s-a vazut mai inainte.
Exista o a doua modalitate de a introduce intr-o pagina Web un buton de apasat, si anume prin intermediul blocului <button>...</button>.
Un astfel de buton poate fi inserat intr-un formular, in acest caz declansand actiuni legate de acel formular, sau poate fi introdus oriunde in pagina pentru initierea unor actiuni independente de formulare.
Atributele posibile ale elementului "button" sunt:

name acorda elementului un nume;
value precizeaza textul care va fi afisat pe buton;
type precizeaza actiunea ce se va executa la apasarea butonului daca acesta este inclus intr-un formular.Valorile posibile pentru acest atribut sunt: -"button" , -"submit" ,-"reset".

In corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.

Observatii finale:

: - elementul <form> poate avea un atribut target, care primeste ca valoare numele unei ferestre a browserului in care va fi incarcat raspunsul trimis serverului WWW la expedierea unui formular.; - toate elementele cuprinse intr-un formular pot avea un atribut disabled care permite dezactivarea respectivului element.; - toate elementele de tip text cuprinse intr-un formular pot avea un atribut readonly care interzice modificarea continutului acestor elemente.