(Lectii php gratuite) - Categorii de campuri
Intr-un formular pot fi incluse urmatoarele categorii de campuri (numite si controale):- campuri cu scop multiplu, create prin intermediul elementului vid input;
- liste de optiuni, create folosind elementul select;
- caseta de text multilinie, creata prin intermediul elementului textarea;
- text (camp de editare de tip text): este tipul implicit si afiseaza o caseta cu o singura linie, utilizata pentru introducerea unui text;
- password (camp de editare de tip parola): permite afisarea unui camp text, in care datele introduse vor fi afisate prin caracterul "*" din motive legate de securitate;
- hidden (camp ascuns): ofera posibilitatea transmiterii unor informatii catre scriptul de prelucrare a continutului formularului, fara ca acestea sa fie vazute de utilizator;
- radio (buton radio): permite afisarea unui buton cu interblocare (butoanele radio cu aceeasi valoare a atributului name sunt grupate automat de browser, numai unul dintre acestea putand fi selectat la un moment dat);
- checkbox (caseta de validare): determina afisarea unei casete de validare (selectare); aceasta poate avea doua stari, bifat (selectat) si nebifat (neselectat);
- file (fisier): permite transmiterea unui fisier catre server (upload);
- button (buton): afiseaza un buton generic folosit - in special - pentru prelucrarea pe client a continutului formularului;
- submit (buton de expediere): afiseaza un buton care determina expedierea (transmiterea) continutului formularului catre resursa precizata ca valoare a atributului action al elementului form;
- image (buton imagine): are acelasi rol ca si submit, cu diferenta ca in locul butonului va fi afisata o imagine specificata prin intermediul src al elementului input;
- reset (buton de initializare): afiseaza un buton prin intermediul caruia este sters continutul tuturor campurilor incluse in formular, sau - in cazul unor browsere - acestea sunt setat la valorile initiale;
- alt: precizeaza un text alternativ pentru campurile de tip image (ex: alt="nume imagine");
- checked: stabileste, pentru campurile al caror atribut type are valoarea radio sau checkbox. daca acestea sunt selectate (in acest caz se utilizeaza checked="checked") sau nu;
- disabled: dezactiveaza campul pentru accesul utilizatorului (singura valoare posibila a atributului este disabled);
- maxlength: precizeaza, pentru campurile al caror atribut type are valoarea text sau password, numarul maxim de caractere pe care le poate introduce utilizatorul (ex: maxlength="30");
- name: stabileste un nume pentru un camp (ex: name = "prenume");
- onblur: reprezinta handlerul asociat evenimentului blur, declansat atunci cand un camp pierde focusul, avand ca valoare un script ruland pe client;
- onchange: este handlerul asociat evenimentului change, declansat atunci cand campul pierde focusul, iar valoarea sa se modifica inainte de a-l recastiga; are ca valoare numele unui script care ruleaza pe client;
- onfocus: reprezinta handlerul asociat evenimentului focus, declansat cand campul castiga focusul;
- onselect: este handlerul asociat evenimentului select, avand ca valoare un script ruland pe client;
- readonly: daca este prezent (readonly = "readonly"), acest atribut impiedica schimbarea valorii campului;
- size: stabileste latimea initiala a campului. Atributul este exprimat in pixeili, cu exceptia campurilor al caror atribut type este text si password, caz in care reprezinta un numar de caractere (ex: size="20");
- src: daca atributul type are valoarea image, specifica locatia imaginii care va fi utilizata de catre campul respectiv (ex: src="imagini/img.jpg");
- tabindex: avand ca valoare un numar, stabileste ordinea campurilor atunci cand sunt parcurse folosind tasta <TAB> (ex: tabindex="3");
- value: exprimat sub forma unui text, reprezinta o valoare asociata campului (ex: value="Trimite");
- name: are ca valoare un text care stabileste numele listei;
- size: valoarea sa este un numar care stabileste cate randuri ale listei vor fi afisate simultan;
- multiple: valoarea sa este "multiple". Daca este setat, atributul permite selectarea simultana a mai multor obtiuni;
- lista derulanta: are precizat, optional, numai atributul name;
- caseta de selectie: sunt prezente numai atributele name si size;
- lista derulanta cu selectari multiple: are precizate numai atributele name si multiple (sunt afisate toate optiunile listei);
- caseta de selectie cu selectari multiple: sunt prezente simultan toate cele trei atribute.
Elementul select trebuie sa contina cel putin un element optiongroup sau option. Primul este folosit pentru a grupa pe categorii optiunile incluse in lista. Eticheta (numele) grupului creat este stabilita ca valoare a atributului label al elementului. Este de remarcat ca utilizarea elementului optiongroup nu este obligatorie.
Un grup sau o lista de optiuni trebuie sa contina cel putin o optiune, creata folosind elementul option. Pe langa atributele comune elementelor XHTML, pentru acest element mai pot fi utilizate:
- selected: daca este folosit (select= "selected"), atributul precizeaza ca optiunea este preselectata;
- value: stabileste un text asociat optiunii;
- disabled: dezactiveaza pentru selectie optiunea respectiva, fiind utilizat sub forma (disabled= "disabled");
- label: stabileste o eticheta asociata optiunii.
<!DOCTYPE html> <html> <head> <title>Lista cu doua grupuri de optiuni</title> </head> <body> <form action="prelucrare_date.php" method="post"> <label for="intrebare">Care este orasul tau favorit ?</label> <select id="intrebare" name="oras"> <optgroup label="Europa"> <option value="1">Bucuresti</option> <option value="2">Londra</option> <option value="3">Roma</option> <option value="4">Paris</option> <option value="5">Berlin</option> </optgroup> <optgroup label="America de Nord"> <option value="6">Las Vegas</option> <option value="7">Washington</option> <option value="8">Vancouver</option> <option value="9">Los Angeles</option> <option value="10">New York</option> </optgroup> </select> </form> </body> </html>Salveaza codul de mai sus intr-un fisier html (ex: index.html) apoi, deschide-l in browser-ul tau. Browser-ul va afisa lista creata de tine ca in imaginea de mai jos.
Mai multe exemple despre campuri si categorii html in lectiile viitoare.
Urmăreşte pe @BlogulDespre
Salutare ! Daca ti-a placut acest articol click pe unul din butoanele de mai jos si da-i share in reteaua ta de socializare. De asemenea poti lasa si un comentariu cu privire la acest articol. Multumesc !
Abonați-vă la:
Postare comentarii
(
Atom
)
Niciun comentariu :
Trimiteți un comentariu