Formulare HTML

formular = elemente de control prin

intermediul carora cel care vizualizeaza
pagina Web poate transmite informatii
catre serverul ce gazduieste pagina
respectiva.
Utilizand formulare -> pagini Web
interactive
<FORM> </FORM>

Atribute:
action
URL-ul unui script ce va procesa informatia trimisa.
Acesta poate fi un program de tip CGI
<form action=http://www.edu.ro/cgi-bin/nume_script.cgi>
o adresa de mail <from action=mailto:viochis@yahoo.com>
method - perechi de forma nume=valoare, numarul perechilor
fiind egal cu numarul datelor din formular trimise spre procesare.
Valorile posibile: "get" si "post".
get - la sfarsitul URL-ului de destinatie, despartite de acesta
prin caracterul "?". Intre diferite seturi de date este introdus un
&
(http://www.edu.ro/cgi-
in/nume_script?nume1=val1&nume2=val2)
post datele sunt expediate separat (cantitati mari de date).

Tipuri de butoane
Butoane
SUBMIT (buton de transmitere) - declansaza operatiunea de
trimitere a datelor catre server
RESET (buton de resetare) - readuce controalele din formular
la valorile lor initiale
BUTTON (buton fara actiune predefinita) - folosit de catre
designer pentru a declansa operatiuni controlate de catre
acesta, de obicei cu ajutorul scripturilor
Campuri de introducere a textului
TEXT - caseta ce permite introducerea textului pe o linie
PASSWORD - similara controlului TEXT, (diferente - datele
introduse de utilizator vor fi afisate printr-un caracter "masca")
TEXTAREA - este caseta de introducere a textului pe linii
multiple
Casute de validare - se confirma sau se infirma o optiune
prezentata utilizatorului
Butoane radio - grupate in mod logic cu ajutorul numelui.
Toate butoanele radio avand acelasi nume apartin unui
aceluiasi grup,
Meniuri derulante - liste de valori din care utilizatorul poate
selecta una sau mai multe valori, in functie de tipul meniului
Selectoare de fisiere - dau posibilitatea utilizatorului sa
selecteze un fisier care urmeaza a fi trimis serverului
Controale ascunse - posibilitatea de a transmite serverului
date utile, fara ca utilizatorul sa le vada pe ecran
Imagini folosite ca alternativa mai atragatoare din punct de
vedere estetic pentru butonul de tip "SUBMIT".

Elementul INPUT

name - numele controlului respectiv (butoanele radio - fiecare
buton al unui grup trebuie sa aiba aceeasi valoare pentru acest
atribut).
value - valoarea initiala a controlului respectiv; este optional,
exceptie facand butoanele radio si casutele de validare. In cazul
butoanelor ea reprezinta eticheta butonului respectiv.
Valoarea finala a controalelor este valoarea pe care acestea o
au in momentul in care s-a actionat butonul de tip "SUBMIT".
type - specifica tipul controlului folosit. Valori posibile:
text - permite introducerea unei linii de text
<p> Numele si prenumele:
<INPUT TYPE=TEXT Name=Nume>
Efect
Numele si prenumele:
password
<P><I>User Name </I> &nbsp
<INPUT TYPE=TEXT NAME=user>
<P><I>Password </I> &nbsp&nbsp
<INPUT TYPE=PASSWORD NAME=parola>
Efect
User Name
Password

radio
<h3><font color="yellow">Forma de invatamant:</font></h3>
<P align=left><input type="radio" value="Liceu-zi" checked>Liceu zi</p>
<P align=left><input type="radio" value="Scoala prof">Scoala profesionala<br>

Efect
Forma de invatamant
Liceu zi
Scoala profesionala
checkbox
<H3><font color="Yellow"> Care din urmatoarele valori sunt
valide pentru atributul "method" al elementului
"FORM"?</font> </H3><br>
<input type=checkbox value="a" >get<br>
<input type=checkbox value="a" >set<br>
<input type=checkbox value="a" >post<br>
Efect
Care din urmatoarele valori sunt valide pentru atributul
"method" al elementului "FORM"?
get

set

post


submit
reset
button
<input type=submit value=ok> &nbsp&nbsp
<input type=reset value=Renunt> &nbsp&nbsp
<input type=button value=Da-mi o indicatie!>
Efect
ok

Renunt

Da-mi o indicatie!


image dorim sa specificam o alta imagine pentru
blocul submit
<h4>Gata! </h4>
<input type=image value=OK src=fisier.gif >
Efect
Gata!
hidden - inserarea unui camp ascuns
<input type=fidden name=secret
value=1000$>
file permite utilizatorului sa specifice un
fisier ce va fi transmis prin intermediul
formularului
<p><input type=file value=fisier
size=40>
Browse...
size - dimensiunea initiala a elementului de control
maxlength - nr maxim de caractere pe care
utilizatorul le poate introduce (pt text si password)
checked (buton radio sau casuta de validare)
src =URL ul fisierului ce contine imaginea ce
reprezinta butonul utilizat drept element de control
tabindex - determina nr de ordine al unui control in
parcurgerea controalelor formularului cu ajutorul
tastei "tab"
Elementul BUTTON
<BUTTON > </BUTTON> ofera posibilitati
de afisare intr-o maniera ceva mai pretentioasa
Atribute principale: name; value; type (SUBMIT,
RESET, BUTTON); tabindex

<p>Introduceti numele cautat
<input type="Text" size= "40">
<button name="Cauta" value="cauta"
type="submit"><img src="Search.gif"
border="0"></button>
Efect:
Introduceti numele cautat
<tr><td valign = "top">Judetul</td>
<td>
<select name="JudetSelect" size=3>
<option>Alba
<option selected>Arad
<option>Arges
<option>Bacau
<option>Bihor
<option>Bistrita-Nasaud
<option>Brasov
<option>Braila
<option>Altele...
</select></td></tr>

Efect
Judetul:


Alba
Arad
Arges

Elementul SELECT
Atribute
name sau id - numele sau identificatorul meniului
size - specifica nr de linii vizibile in acelasi timp din cadrul listei
multiple- posibilitatea selectiei multiple in cadrul listei
disabled - afisarea controlului in forma dezactivata

Fiecare optiune a meniului respectiv se marcheaza cu ajutorul
elementului OPTION.
Pt un numar mare de optiuni, acestea se pot grupa cu ajutorul
elementului OPTGROUP.
Atribute ale elementului OPTION sunt:
selected indica faptul ca optiunea respectiva este selectata
value - valoarea initiala a elementului. Daca nu apare, valoare
initiala se considera a fi continutul elementului OPTION
label - textul ce va fi folosit pentru scrierea elementului in
cadrul listei in locul continutului elementului

Elementul TEXTAREA
<TEXTAREA> </TEXTAREA> permite inserarea unui camp
text format din mai multe linii
Atribute:
name sau id - specifica numele sau identificatorul elementului
rows specifica nr de linii vizibile din textul respectiv
cols - specifica numarul de caractere pe linie.
wrap - determina modul de trecere la linie noua in caseta de
text. Valorile posibile sunt:
on - trecerea pe linia urmatoare atunci cand textul atinge marginea
din dreapta a casetei de text
off - trecerea pe linie noua nu se face decat atunci cand utilizatorul
apasa tasta "CR".
In cazul in care latimea liniei o depaseste pe cea a casutei de
text aceasta din urma va avea o bara de defilare pe orizontala
<tr>
<td valign = "top">Mesajul:</td>
<td rowspan = "3">
<TEXTAREA name=TextMesaj rows=7 cols=21>
</TEXTAREA></td></tr>

Efect

Mesajul: