Formulare interactive

Formulare interactive

In marea majoritate a documentelor, interactivitatea consta in faptul ca utilizatorul decide ce legatura hypertext sa urmareasca. Specificatiile HTML includ formulare care permit integrarea in document a campurilor text, butoane radio, casute de selectie, liste de selectie si campuri de editare. Interactivatea se bazeaza pe faptul ca pot fi utilizate pentru strangerea de informatie necesara unei alte aplicatii aflate in spatele documentului: o selectie dintr-o baza de date, rezultatul sondajului la care a participat, un document cu acces restrans.

In crearea unui formular HTML exista mai multe etape:

design-ul si scrierea formularului de intrare, care va fi explorat si completat de utilizator

scrierea aplicatiei care interpreteaza datele completate de utilizator

design-ul si scrierea documentului generat de program ca raspuns la cererea utilizatorului.

Scrierea formularului incepe cu tag-ul <FORM> si se termina cu perechea sa </FORM>. Atributele acestui tag sunt action (actiune) si method (metoda). Valorile lui action specifica natura actiunii, care va avea loc printr-un program executat de serverul gazda pentru document. Aceaste valori pot fi search (specifica un script pentru a realiza o cautare), url (specifica URL-ul programului care va fi executat), mailto:adresa@domeniu (se expediaza continutul formularului). Valoarea lui method specifica metoda utilizata de server pentru a trimite datele programului specificat in action.

Formularele pot prelua tipuri diferite de date prin:

casute de selectie

butoane radio

liste

campuri text pe unul sau mai multe randuri

Elementul <INPUT> creaza mai multe tipuri de controale. Acestea includ doua tipuri de butoane pe care utilizatorul le poate seta inchis sau deschis si campuri in care poate fi introdus text. Parametrul cel mai important este type. Acesta specifica ce fel de INPUT se asteapta de la utilizator si poate avea valorile: check box, radio button, text, password, reset, submit. Daca nu se specifica atributul type al elementului INPUT, atunci valoarea sa implicita se considera type=text.

De asemenea un alt parametru utilizat pentru elementele INPUT, exceptie facand SUBMIT si RESET, este name. Acest parametru creaza un nume generic care va fi asociat cu raspunsul utilizatorului si permite serverului sa interpreteze formularul pentru a determina corelatia dintre fiecare raspuns al utilizatorului si elementele formularului.

NAME="adresa"

NAME="profesii"

Tipul check box permite crearea unui buton pe care utilizatorul il poate selecta deschis/inchis. Intr-un formular se pot include mai multe casute de selectie, fiecare va fi independenta de celalalte. La trimiterea formularului, se vor trimite serverului numai casutele selectate. Elemetele check box pot contine de asemenea un parametru VALUE, parametru care va permite setarea sirului de caractere care va fi remis serverului la selectarea casutei. Daca VALUE nu apare, valoarea implicita asignata este ON. Se pot selecta una sau mai multe casute.

<FORM>

<INPUT TYPE="CHECKBOX" NAME="caini" VALUE="Cocker">Cocker<P>

<INPUT TYPE="CHECKBOX" NAME="caini" VALUE="Setter">Setter<P>

</FORM>

Elementele radio functioneaza asemanator casutelor de selectie. Diferenta consta in faptul ca in grupul de butoane, numai unul dintre butoane poate fi selectat la un moment dat. Selectarea unuia duce automat la deselectarea celui selectat anterior. Butoanele radio pot avea nume generice, aceleasi pentru toate butoanele unui anumit grup. Intr-un grup poate fi activat un singur buton la un moment dat. Butonul implicit este marcat cu CHECKED.

<FORM>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="3 luni">3 luni<P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="6 luni">6 luni<P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="12 luni">12 luni<P>

</FORM>

Campul text se utilizeaza frecvent ca si forma de intrare a datelor pentru culegerea de informatii cum ar fi nume, adresa de e-mail, comentarii scurte sau altceva care poate fi tastat intr-un rand. Ca majoritatea elementelor INPUT, un rand text are un parametru NAME. La trimiterea datelor din formular la server, numelui ii va fi asociata valoarea tastata. Parametrul VALUE este optional si campul text in acest caz va avea valoarea implicita data de acest parametru. In cazul in care lipseste, textul initial nu va contine nimic. Parametrul SIZE permite setarea lungimii randului in numar de caractere. Daca numarul de caractere este mai mare (pana la valoarea maxima admisa prin MAXLENGTH), randul va derula. Daca acesta lipseste valoarea lungimii implicit este de 20 caractere.

<FORM>

<P>Introduceti numele dvs.

<INPUT TYPE="TEXT" NAME="nume" SIZE=40 MAXLENGTH=60>

<P>Introduceti adresa de e-mail

<INPUT TYPE="TEXT" NAME="adresa" SIZE=30 MAXLENGTH=40>

</FORM>

Butonul RESET se defineste pentru resetarea tuturor campurilor din interiorul unui formular. Resetarea aduce toti parametrii la valorile lor implicite. Acest buton nu are nume deoarece starea lui nu este transmisa serverului, actionarea sa afectand numai browserul calculatorului gazda. Singurul parametru pentru acest buton este VALUE, a carui valoare este inscrisa pe buton.

<INPUT TYPE="RESET" VALUE="Resetare">

Butonul SUBMIT este utilizat pentru a trimite formularul serverului. La actionarea sa, formularul si continutul lui sunt trimise serverului specificat de ACTION in linia <FORM>, utilizand procedeul specificat cu METHOD. Singurul sau parametru este VALUE, a carui valoare va fi inscrisa pe buton. Campurile necompletate si butoanele neselectate nu vor fi transmise.

<INPUT TYPE="SUBMIT" VALUE="Send">

Elementul TEXTAREA ofera posibilitatea de a accepta de la utilizator un bloc de text. Acesta are ca si parametrii ROWS si COLS care specifica dimensiunile ferestrei afisate utilizatorului, exprimate in numar de caractere pe orizontala, respectiv verticala. Aceasta nu inseamna o limitare a utilizatorului in privinta volumului de informatie care poate fi tastat deoarece umplerea ferestrei determina aparitia barelor de derulare. Acest element nu este vid, necesitand un tag pereche </TEXTAREA>.

<TEXTAREA NAME="nume" ROWS=5 COLS=20>Text implicit</TEXTAREA>

HTML permite crearea de liste de selectie, formate din unul sau mai multe elemente care pot fi selectate sau individual sau multiplu. Listele pot fi afisate in interiorul unei ferestre sau in forma pop-up. Ferestrele inserate permit accesarea elementelor continute cu ajutorul unor bare de defilare. Intre tag-urile <SELECT> si </SELECT> sunt permise doar doua elemente: textul simplu sau tag-ul <OPTION>. Parametrul NAME va fi trimis serverului impreuna cu elementul selectat din lista. Parametrul SIZE este optional. Daca acesta lipseste, valoarea sa implicita se considera 1, si in acest caz lista va fi de tip pop-up si din lista se poate selecta doar un singur element. Utilizarea acestor tip de liste este similara cu cea a butoanelor radio. Daca parametrul este mai mare de 1, lista este prezentata intr-o fereastra, valoarea lui SIZE indicand cate elemente pot fi vizualizate simultan. Daca lista este mai lunga, celelalte elemente pot fi vazute cu ajutorul barei de defilare care va aparea.

Un alt parametru optional pentru <SELECT> este MULTIPLE. Parametrul nu are o valoare numerica asociata si prezenta lui asigura doar posibilitatea selectiei mai multor elemente ale listei simultan (cu ajutorul tastei CTRL). Elementul <OPTION> este utilizat pentru definirea fiecarui element al listei. <OPTION> are un singur parametru SELECTED, care indica care element al listei este selectat implicit.

<FORM>

<P>Selectati culorile favorite din lista urmatoare:

<SELECT NAME="culori SIZE=4 MULTIPLE>

<OPTION SELECTED>Rosu

<OPTION>Verde

<OPTION>Albastru

<OPTION>Turcoaz

<OPTION>Magenta

</SELECT>

</FORM>