Gumbi v HTML

Oznaka <button> določa gumb, ki ga lahko uporabnik sproži z miško, tipkovnico, dotikom ali drugimi pomožnimi načini upravljanja. Gumbe pogosto uporabljamo v obrazcih, lahko pa tudi drugje na spletni strani za sprožanje različnih dejanj.

Za razliko od nekaterih drugih elementov lahko med začetno in končno oznako <button> zapišemo besedilo ali drugo dovoljeno vsebino. Tak zapis omogoča večjo prilagodljivost kot pri nekaterih vhodnih elementih.

Pomni: Če gumb uporabimo v obrazcu, je priporočljivo atribut type zapisati izrecno. Če atribut ni naveden ali je neveljaven, je gumb v običajnem primeru obravnavan kot gumb za pošiljanje obrazca.

Osnovna pravila

Oznaka <button> določa interaktivni gumb.
Gumb lahko sproži dejanje, pošlje obrazec ali obrazec ponastavi.
Z atributom type določimo vrsto gumba.
Gumb lahko vsebuje besedilo ali drugo dovoljeno vsebino.
Za videz gumba praviloma poskrbimo s CSS.

Pozor: V obrazcu je priporočljivo vedno jasno določiti atribut type. S tem se izognemo nejasnemu ali nepričakovanemu vedenju gumba pri pošiljanju obrazca.

Osnovna oblika oznake

Najpreprostejši primer gumba vsebuje začetno oznako <button>, besedilo gumba in končno oznako </button>. Besedilo med oznakama se prikaže na gumbu in uporabniku pove, kaj gumb naredi.

<button>Klikni me</button>

Pogosti atributi oznake `<button>`

type – določa vrsto gumba,
disabled – onemogoči uporabo gumba,
name – določa ime gumba,
value – določa vrednost gumba.

Najpogostejše vrednosti atributa type so:

button – navaden gumb brez privzetega dejanja,
submit – gumb za pošiljanje obrazca,
reset – gumb za ponastavitev obrazca.

Če je atribut disabled prisoten, gumb ni na voljo za običajno uporabo, ni fokusiran in ne sodeluje pri običajni interakciji uporabnika.

Primer navadnega gumba

<button type="button">Klikni me</button>

Primer gumba za pošiljanje obrazca

V obrazcih pogosto uporabljamo gumb vrste submit:

<form action="obdelava.php" method="post">
  <p>Ime: <input type="text" name="ime"></p>
  <button type="submit">Pošlji</button>
</form>

Primer gumba za ponastavitev obrazca

<form action="#" method="post">
  <p>Ime: <input type="text" name="ime" value="Ana"></p>
  <button type="reset">Ponastavi</button>
</form>

Primer onemogočenega gumba

<button type="button" disabled>Gumb ni aktiven</button>

Primer gumba z dodatno vsebino

Ker oznaka <button> ni prazna oznaka, lahko vanjo zapišemo tudi poudarjeno besedilo ali drugo dovoljeno vsebino:

<button type="button"><strong>Pomemben gumb</strong></button>

Razlika med `<button>` in `<input type="button">`

Oznaka <button> in element <input type="button"> lahko oba določata gumb, vendar med njima obstaja pomembna razlika. Oznaka <button> je samostojen element z začetno in končno oznako, zato lahko vsebuje besedilo ali drugo dovoljeno vsebino. Element <input type="button"> pa je prazna oznaka, zato njegove vsebine ne zapisujemo med oznaki, ampak napis določimo z atributom value.

Zaradi te razlike je oznaka <button> običajno bolj prilagodljiva. Znotraj nje lahko uporabimo na primer poudarjeno besedilo ali druge dovoljene elemente, medtem ko je pri elementu <input type="button"> vsebina omejena na vrednost atributa value.

Pri preprostih primerih lahko uporabimo oba zapisa, vendar se v sodobni praksi pogosto raje uporablja oznaka <button>, ker omogoča večjo prilagodljivost pri vsebini in oblikovanju.

<button type="button">Klikni me</button>
<input type="button" value="Klikni me">

Oznako <button> pogosto uporabljamo v obrazcih, vendar je uporabna tudi za druge gumbe na strani. Za videz gumba običajno poskrbimo s CSS. Privzeti videz je odvisen od uporabniškega okolja in ga lahko prilagodimo s slogi.

Priporočila

V obrazcih vedno jasno določi atribut type.
Za navadna dejanja brez pošiljanja uporabi type="button".
Za pošiljanje obrazca uporabi type="submit".
Za neaktivne gumbe po potrebi uporabi atribut disabled.
Za videz in postavitev gumba uporabljaj CSS.

Pogoste napake

V obrazcu atribut type ni določen, čeprav bi moral biti namen gumba jasen.
Za navadno dejanje je uporabljen gumb, ki obrazec pošlje.
Gumb je onemogočen, vendar uporabnik ne dobi jasnega razloga za to stanje.
Videz gumba se poskuša urejati samo z HTML, namesto s CSS.
Besedilo gumba ni dovolj jasno in ne pojasni njegovega namena.

Nazaj

Naprej