marți, 12 martie 2013

Buton HTML

Acest tutorial descrie folosirea butoanelor HTML intr-o pagina WEB.
Butoanele prezentate in acest articol sunt create in doua moduri.
Cu ajutorul tagului button. Acest tag este folosit explicit pentru creare de butoane. Butoanele create in acest fel pot contine imagini si text.
Cu ajutorul tagului input. In acest caz, valoarea atributul type trebuie sa fie button pentru a crea un buton, fiind posibila definirea mai multor tipuri de elemente cu acest tag (Ex: checkboxuri, casete text, selector de fisiere). Acest tip de buton accepta numai text.
Ambele tipuri au atributul type si pot avea valorile reset si submit. Un buton, care are una dintre aceste valori, este folosit in cadrul unui formular.

Definirea unui buton HTML cu ajutorul tagului button


Exemple:
  1. Exemplu de buton simplu cu un javascript care va afisa un mesajul: "Butonul a fost apasat" 
    • Rezultat:
    • Codul folosit:
  2. Exemplu de buton cu imagine (are aceeasi actiunea ca butonul precedent)
    • Rezultat:
    • Codul folosit:
Tagul button:
  • defineste un buton
  • in interiorul tagului se poate adauga continut (text, imagini)
  • Atributul type:
    • defineste tipul butonului
    • este recomandata definirea atributului pentru a evita un comportament inconsistent pe diferitele navigatoare WEB
    • accepta urmatoarele valori:
      • button - i se pot atribui actiuni particulare
      • submit - este folosit pentru a trimite continutul unui formular
      • reset - este folosit pentru a reseta continutul unui formular
  • Atributul value:
    • defineste valoarea butonului
    • a nu se confunda cu textul butonului
  • Atributul disable:
    • este folosit pentru a dezactiva butonul
    • in HTML este suficient sa adaugi atributul fara nici o valoare pentru a dezactiva butonul
    • in XHTML este necesara definirea atributului disabled="disabled" pentru a dezactiva butonul
  • Atributul name:
    • defineste un nume pentru button 

Definirea unui buton cu ajutorul tagului input


Acest buton este creat cu ajutorul tagului input folosind atributul type cu valoarea button.
  • Rezultat:
  • Codul folosit:
Explicatii:
Tagul input este folosit pentru a crea campuri folosite pentru inserarea datelor. Aceste campuri sunt folosite in interiorul unui formular form pentru a completa datele, care vor fi trimise pentru procesare pe un server. In cazul nostru se foloseste un input de tipul button, care este folosit pentru definirea unui buton. Butonul este folosit in mare parte pentru executarea unor actiuni javascript.

Niciun comentariu:

Trimiteți un comentariu