Un blog despre chestii...

Salut si bine ai venit pe blogul despre chestii ! Pe acest blog gasesti tutoriale php/mysql, tutoriale html/css, articole despre blog, template-uri html gratuite create de mine, template-uri psd, icons, diverse tutoriale pentru platforma blogger.com, scripturi php gratuite, diverse din ramura web.

(Lectii php gratuite) - Categorii de campuri

Niciun comentariu
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;
Tipul unui camp creat folosind elementul input este stabilit utilizand atributul type al acestuia, care poate avea urmatoarele zece valori (intre paranteze este trecuta denumirea campului obtinut, iar in continuare este mentionat scopul in care acesta poate fi utilizat):

  • 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;
Pe langa atributele specifice elementelor XHTML, pentru input mai pot fi precizate si altele, cateva dintre acestea fiind urmatoarele:

  • 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");
Pe langa atributele comune elementelor XHTML, pentru select mai pot fi precizate disabled, onblur, onchange, onfocus, tabindex (avand semnificatii similare cu cele ale atributelor elementului input, prezentate anterior), precum si :

  • 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;
O lista creata folosind elementul select se poate incadra intr-una dintre urmatoarele categorii:

  • 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.
IMPORTANT !
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.
In continuare este prezentat un document care contine un formular avand o lista derulanta cu doua grupuri de optiuni (orase preferate). In primul grup sunt incluse cinci orase din Europa, iar in cel de-al doilea tot atatea, dar din America de Nord. Utilizatorul poate selecta o singura optiune.


<!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.

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 !

Niciun comentariu :

Trimiteți un comentariu