Home » Resurse Web Design » Formulare in HTML

 
 
 

Formulare in HTML

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 cautare din 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>…</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 server WWW care primeste datele formularului, efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns. Script-urile pot fi scrise in limbajele Perl, C, PHP.

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

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. Observatii:
– 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 „&”.

„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.

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.

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

<input type=”radio” name=”buton” value=”b”><br>

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”.

<input type=”checkbox” name=”numa” value=”Unu”>

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>…</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 element al listei.

<select name=”nume” size=”3″>
<option value=”val1″ selected>Optiunea 1
<option value=”val2″> Optiunea 2
<option value=”val3″> Optiunea 3
</select>

Eticheta:

Comentariile sunt inchise

Ne pare rau, dar nu poti lasa un comentariu pentru acest post.

Resurse web design