Академический Документы
Профессиональный Документы
Культура Документы
Iata-ne ajunsi si la ultima lectie a cursului "HTML pe intelesul tuturor" inainte de a trece la realizarea propriu-zisa a unui site.
campurile de editare butoanele radio casetele de validare casetele de fisiere listele de selectie
In continuare vom vedea cum se poate realiza fiecare element al unui formular HTML.
Campurile de editare
Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul TYPE, al tagului <INPUT>, valoarea text. Exemplu:
Camp de editare
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
SIZE, care reprezinta latimea campului de editare MAX LENGTH, specifica numarul maxim de caractere care pot fi introduse in campul de editare VALUE, valoarea initiala a campului de editare
De exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod: <INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20" MAXLENGTH="30"> Daca vrei sa introduci un camp de editare de tip "parola", atributul TYPE va avea valoarea "password". In acest caz, caracterele introduse in campul de editare, nu vor fi vizibile. Sa vedem un exemplu:
******
Scrie cateva caractere in campul de editare de mai sus, pentru a vedea diferenta fata de un camp de editare de tip "text". Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa poata fi introduse mai multe randuri, folosim campurile de editare de tip multilinie. Pentru a folosi un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un camp de editare multilinie: <TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA> Am folosit atributul COLS pentru a stabili numarul de caractere al fiecarui rand, atributul ROWS pentru numarul de randuri al campului de editare, iar atributul NAME pentru numele campului de editare. Iata rezultatul:
Butoanele radio
Daca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE, valoarea "radio". Sa luam un exemplu: In ce categorie de varsta te incadrezi? sub 15 ani 15-20 ani 20-25 ani 25-35 ani 35-45 ani peste 45 ani Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de raspuns, este urmatorul: In ce categorie de varsta te incadrezi? <INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED>sub 15 ani <INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani <INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani <INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani <INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani <INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani Cu ajutorul atributului CHECKED, fara alte valori, putem selecta un buton radio in mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.
Casetele de validare
Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu atributul TYPE avand valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni. Exemplu: Unde iti petreci concediul de obicei? La mare La munte In strainatate La tara Acasa Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de butoanele radio, pot fi selectate mai multe optiuni. Codul casetelor de validare de mai sus este urmatorul:
Unde iti petreci concediul de obicei? <INPUT TYPE="checkbox" NAME="optiunea1">La mare <INPUT TYPE="checkbox" NAME="optiunea2">La munte <INPUT TYPE="checkbox" NAME="optiunea3">In strainatate <INPUT TYPE="checkbox" NAME="optiunea4">La tara <INPUT TYPE="checkbox" NAME="optiunea5">Acasa
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-ului <INPUT>, valoarea "file". Sa vedem un exemplu:
Listele de selectie
O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una sau mai multe optiuni dintr-o lista. Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si </SELECT>. Atributele cele mai folosite pentru tag-ul <SELECT> sunt:
NAME, atribuie listei de selectie un nume SIZE, specifica numarul de elemente din cadrul listei de selectie VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perechi "name = value" SELECTED (fara alte valori), selecteaza in mod prestabilit un element al listei
Pentru a selecta in mod implicit valoarea Bucuresti, am folosit in dreptul acesteia atributul SELECTED. Codul listei de selectie de mai sus este urmatorul: Alege un judet din Romania: <SELECT><OPTION value=Alba>Alba</OPTION> <OPTION value=Arad>Arad</OPTION> <OPTION value=Arges>Arges</OPTION> <OPTION value=Bacau>Bacau</OPTION> <OPTION value=Bihor>Bihor</OPTION> <OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION> <OPTION value=Botosani>Botosani</OPTION> <OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Braila>Braila</OPTION> <OPTION value=Bucuresti selected>Bucuresti</OPTION> <OPTION value=Buzau>Buzau</OPTION> <OPTION value=Caras-Severin>Caras-Severin</OPTION> <OPTION value=Calarasi>Calarasi</OPTION> <OPTION value=Cluj>Cluj</OPTION> <OPTION value=Constanta>Constanta</OPTION> <OPTION value=Covasna>Covasna</OPTION> <OPTION value=Dambovita>Dambovita</OPTION> <OPTION value=Dolj>Dolj</OPTION> <OPTION value=Galati>Galati</OPTION> <OPTION value=Giurgiu>Giurgiu</OPTION> <OPTION value=Gorj>Gorj</OPTION> <OPTION value=Harghita>Harghita</OPTION> <OPTION value=Hunedoara>Hunedoara</OPTION> <OPTION value=Ialomita>Ialomita</OPTION> <OPTION value=Iasi>Iasi</OPTION> <OPTION value=Ilfov>Ilfov</OPTION> <OPTION value=Maramures>Maramures</OPTION> <OPTION value=Mehedinti>Mehedinti</OPTION> <OPTION value=Mures>Mures</OPTION> <OPTION value=Neamt>Neamt</OPTION> <OPTION value=Olt>Olt</OPTION> <OPTION value=Prahova>Prahova</OPTION> <OPTION value=Satu-Mare>Satu-Mare</OPTION> <OPTION value=Salaj>Salaj</OPTION> <OPTION value=Sibiu>Sibiu</OPTION> <OPTION value=Suceava>Suceava</OPTION> <OPTION value=Teleorman>Teleorman</OPTION> <OPTION value=Timis>Timis</OPTION> <OPTION value=Tulcea>Tulcea</OPTION> <OPTION value=Vaslui>Vaslui</OPTION> <OPTION value=Valcea>Valcea</OPTION> <OPTION value=Vrancea>Vrancea</OPTION></SELECT> Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim pentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.
buton toate elementele formularului vor reveni la valoarea lor prestabilita, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedeaza la fel ca si la butonul de tip Submit, singura deosebire fiind ca atributul TYPE va avea valoarea "reset". Sa vedem cum arata linia de cod care introduce in cadrul unui formular un buton de tip Reset: <INPUT TYPE="reset" VALUE="Sterge">