| PROIECTARE SITE WEB > DOCUMENTATIE - HTML - Formulare
|
Proiectare Site si Web Design - Standardul HTML
Formulare in HTML
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>
|
Creare
si actualizare site