Stvaranje gumba pomoću HTML ulaznih oznaka u obrascima

Stvorite prilagodljive gumbe za tekst u HTML koristiti ulazni označiti. The ulazni element se koristi unutar a oblik element.

Postavljanjem atributtip za "gumb" generira jednostavan gumb koji se može kliknuti. Tekst koji će se pojaviti na gumbu, poput "Pošalji", možete definirati pomoću gumba vrijednost atribut. Na primjer:


The ulazni tag neće poslati HTML obrazac; morate uključiti JavaScript za obradu podataka o obrascu. Bez JavaScript-a na klik U slučaju da se gumb može kliknuti, ali ništa se neće dogoditi, a vi ćete frustrirati svoje čitatelje.

Alternativa oznake 'gumb'

Iako se koristi ulazni Oznaka za stvaranje gumba radi u svoju svrhu, bolja je opcija koristiti dugme oznaka za stvaranje HTML gumba vaše web stranice. The dugme Oznaka je fleksibilnija jer vam omogućuje upotrebu slika za gumb (što vam pomaže u očuvanju vizualne dosljednosti ako vaš web stranica ima temu dizajna), na primjer, i može se definirati kao tip za slanje ili resetiranje bez potrebe za dodatnim JavaScript.

instagram viewer

Odredite gumb tip atribut u bilo kojem dugme oznake. Postoje tri različite vrste:

  • dugme: Gumb nema svojstveno ponašanje, ali koristi se zajedno sa skriptama koje se izvode na klijentskoj strani i koje se mogu pričvrstiti na gumb i izvršiti kad se na njih klikne.
  • resetirati: Resetira sve vrijednosti.
  • podnijeti: Gumb poslužitelju dostavlja podatke obrasca (ovo je zadana vrijednost ako nije definirana vrsta).

Ostali atributi uključuju:

  • Ime: Daje gumbu referentni naziv.
  • vrijednost: Određuje vrijednost koja će se početno dodijeliti gumbu.
  • onemogućiti: Isključuje gumb.

Dalje s gumbima

HTML5 dodaje dodatne atribute dugme oznaka koja proširuje njegovu funkcionalnost.

  • autofokus: Kada se stranica učita, ova opcija određuje da je ovaj gumb fokus. Na stranici se može koristiti samo jedan autofokus.
  • oblik: Povezuje gumb s određenim obrascem u istom HTML dokumentu, koristeći identifikator obrasca kao vrijednost.
  • formacija: Koristi se samo sa type = "submit" i URL kao vrijednost, on određuje gdje će se podaci obrasca slati. Često je odredište PHP skripta ili nešto slično,
  • formenktype: Koristi se samo sa type = "submit" atribut. Definira kako se podaci obrasca kodiraju kada se predaju poslužitelju. Tri su vrijednosti application / x-www-form-urlencoded (zadano), podaci s više dijelova / obrazaca,tekst / običan.
  • metoda oblika: Koristi se samo sa type = "submit" atribut. Ovo određuje koju HTTP metodu koristiti prilikom slanja podataka obrasca dobiti ili post.
  • formnovalidate: Koristi se samo sa type = "submit" atribut. Podaci obrasca neće se provjeriti kad se pošalju.
  • formtarget: Koristi se samo sa type = "submit" atribut. To ukazuje na to gdje bi trebao biti prikazan odgovor web mjesta kada se predaju podaci obrasca, na primjer u novom prozoru itd. Opcije vrijednosti su ili_prazno, _se, _vidno, _vrh, ili određeno ime okvira.

Pročitajte više o izrada gumba u HTML obrascima, i kako učiniti vašu web stranicu jednostavnijom za upotrebu.

instagram story viewer