Ustvarjanje gumbov z uporabo vnosnih oznak HTML v obrazcih

Ustvarite prilagodljive besedilne gumbe v HTML uporabljati vhod oznaka. The vhod element se uporablja znotraj oblika element.

Z nastavitvijo atributtip do "gumb" ustvari preprost gumb, ki ga je mogoče klikniti. Besedilo, ki se bo pojavilo na gumbu, na primer "Pošlji", lahko določite s pomočjo vrednost atribut. Na primer:


The vhod tag ne bo poslal obrazca HTML; morate vključiti JavaScript za obdelavo podatkov o obrazcih. Brez JavaScript-a onclick V tem primeru bo gumb videti, da ga je mogoče klikniti, vendar se nič ne bo zgodilo in bralce boste razočarali.

Druga možnost oznake »gumb«

Čeprav uporabljam vhod Oznaka za ustvarjanje gumba deluje za svoj namen, zato je boljša možnost, da uporabite gumb za ustvarjanje gumbov HTML vašega spletnega mesta. The gumb tag je bolj prilagodljiv, ker vam omogoča uporabo slik za gumb (kar vam pomaga ohraniti vizualno doslednost, če vaš stran ima na primer oblikovalsko temo) in jo je mogoče definirati kot vrsto gumba za oddajo ali ponastavitev, ne da bi bilo treba dodatno JavaScript.

instagram viewer

Določite gumb tip atribut v katerem koli gumb oznake. Obstajajo tri različne vrste:

  • gumb: Gumb nima lastnega vedenja, vendar se uporablja skupaj s skripti, ki se izvajajo na strani odjemalca, ki jih je mogoče pritrditi na gumb in izvajati, ko ga kliknete.
  • ponastaviti: Ponastavi vse vrednosti.
  • oddajte: Gumb strežniku pošlje podatke obrazca (to je privzeta vrednost, če ni določena nobena vrsta).

Drugi atributi vključujejo:

  • ime: Gumbu daje referenčno ime.
  • vrednost: Določi vrednost, ki bo gumbu prvotno dodeljena.
  • onemogoči: Izklopi gumb.

Nadaljujte z gumbi

HTML5 doda dodatne atribute gumb oznaka, ki razširja njegovo funkcionalnost.

  • samodejno ostrenje: Ko se stran naloži, ta možnost določa, da je ta gumb fokus. Na strani je mogoče uporabiti samo eno samodejno ostrenje.
  • oblika: Gumb poveže z določenim obrazcem v istem dokumentu HTML z uporabo identifikatorja obrazca kot vrednosti.
  • formacija: Uporablja se samo z type = "submit" in URL kot vrednost določa, kam bodo poslani podatki obrazca. Pogosto je cilj PHP skript ali kaj podobnega,
  • formenctype: Uporablja se samo z type = "submit" atribut. Določa, kako naj se podatki obrazca kodirajo, ko se pošljejo strežniku. Tri vrednosti so application / x-www-form-urlencoded (privzeto), večdelni / obrazec-podatki, in besedilo / navaden.
  • formmethod: Uporablja se samo z type = "submit" atribut. To določa, katero metodo HTTP uporabiti pri pošiljanju podatkov obrazca dobili ali objava.
  • formnovalidate: Uporablja se samo z type = "submit" atribut. Podatki obrazca ob oddaji ne bodo potrjeni.
  • formtarget: Uporablja se samo z type = "submit" atribut. To označuje, kje naj bo prikazan odgovor spletnega mesta, ko se predložijo podatki obrazca, na primer v novem oknu itd. Možnosti vrednosti so bodisi_blank, _self, _parent, _top, ali določeno ime okvira.

Preberite več o izdelava gumbov v obrazcih HTML, in kako narediti spletno mesto uporabniku prijaznejše.