Utilizatori online: 1
Articole in baza de date: 450

Intrebari si raspunsuri » Calculatoare-internet » Programare » Html-javascript » Formulare in HTML

Formulare in HTML

Versiune text Versiunea text |
Vazut de: 1234 ori | Cuvinte: 4911

Un formular este un ansamblu de zone active alcatuit din butoane, casete de selectie, campuri de editare, etc. Formularele asigura construirea unor pagini Web care sa permita 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. Exemplu:

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

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

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

2.1. "Get" (valoarea implicita). In acest caz, datele din formular sunt adaugate la adresa URL precizata de atributul "Action". Atentie insa:

- 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

2.2. "Post". In acest caz datele sunt expediate separat. Sunt permise cantitati mari de date (de 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.

Formulare 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:

1. Atributul "name" permite atasarea unui nume fiecarui element al formularului.
2. Atributul "value" 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 implicit "Submit Query" sau explicit valoarea atributului "value", daca aceasta valoare a fost stabilita. Exemplu:

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

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

1. Atributul "size" ce specifica latimea campului de editare. Daca textul introdus in camp de utilizator depaseste aceasta latime, atunci se executa automat o derulare a continutului acestui camp;
2. Atributul "maxlength" ce specifica numarul maxim de caractere pe care le poate primi un camp de editare; caracterele tastate peste numarul maxim sunt ignorate.

Butoane radio

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

<html>
<head><title>formex_4</title></head>
<body><H2>Un formular cu butoane radio</H2>
<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>

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 deselectarea 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".

Exemplu:

<html>
<head><title>formex_5</title></head>
<body><H2>Un formular cu casete checkbox</H2>
<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>

Formulare de selectie

Un formular 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:

1. Atributul "name", care ataseaza listei un nume (utilizat in perechile "name=value" expediate serverului);
2. 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:

1. Atributul "value" ce 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>;
2. Atributul "selected" (fara alte valori) ce permite selectarea prestabilita a unui element al listei.

Exemplu:

<html>
<head><title>formex_7</title></head>
<body><H2>Un formular cu o lista de selectie</H2>
<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>

Campuri de editare multilinie

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

1. Atributul "cols", care specifica numarul de caractere afisate intr-o linie;
2. Atributul "rows", care specifica numarul de linii afisate simultan;
3. Atributul "name", care permite atasarea unui nume campului de editare multilinie;
4. Atributul "wrap", (de la "word wrap"= trecerea cuvintelor pe randul urmator), care determina comportamentul campului de editare fata de sfarsitul de linie.

Acest atribut ("wrap") 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;

Exemplu:

<html>
<head><title>formex_9</title></head>
<body><H2>Un formular cu un camp de editare multilinie</H2> <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>

Raspunsuri date:

Niciun raspuns.

Trimite un raspuns:

Nu aveti permisiunea de a raspunde. Trebuie sa va logati aici pentru a scrie un raspuns.

Mai multe articole din aceeasi categorie:

Formulare in HTML
Fonturi in HTML
JavaScript - Generalitati
Introducere �n HTML