Gombok létrehozása HTML beviteli címkék használatával az űrlapokban

click fraud protection

Hozzon létre testreszabható szöveggombokat a HTML használni a bemenet címke. A bemenet elemet használjuk a forma elem.

A tulajdonságtípus "gomb", egy egyszerű kattintható gomb generál. A gomb használatával meghatározhatja a gombon megjelenő szöveget, például a "Küldés" elemet érték tulajdonság. Például:


A bemenet tag nem küld HTML űrlapot; bele kell foglalnia JavaScript hogy kezelje az űrlap-adat benyújtást. JavaScript nélkül kattintásra esemény esetén a gomb kattinthatónak tűnik, de semmi sem fog történni, és csalódást okozol olvasóidnak.

A „gomb” címke alternatívája

Bár a bemenet A gomb létrehozásához a címke a céljának megfelelően működik, jobb lehetőség a gomb címkét a webhely HTML gombjainak létrehozásához. A gomb címke rugalmasabb, mert lehetővé teszi képek használatát a gombhoz (ami segít megőrizni a vizuális konzisztenciát, ha a a webhelynek van egy dizájn témája), és meghatározható a beküldés vagy a visszaállítás gombjaként, anélkül, hogy bármilyen extra szükséges lenne JavaScript.

instagram viewer

Adja meg a gombot típus attribútum bármelyikben gomb címkék. Három különböző típus létezik:

  • gomb: A gombnak nincs benne rejlő viselkedése, de az ügyféloldalon futó szkriptekkel együtt használható, amelyek csatolhatók a gombra és futtathatók, amikor rákattintanak.
  • Visszaállítás: Minden értéket visszaállít.
  • Beküldés: A gomb elküldi az űrlapadatokat a kiszolgálónak (ez az alapértelmezett érték, ha nincs megadva típus).

Egyéb attribútumok:

  • név: Megadja a gomb hivatkozási nevét.
  • érték: Megadja a gombhoz eredetileg rendelendő értéket.
  • letiltani: Kikapcsolja a gombot.

Tovább megy a gombokkal

A HTML5 további attribútumokat ad hozzá a gomb címkét, amely kiterjeszti a funkcionalitását.

  • autofókusz: Az oldal betöltésekor ez az opció határozza meg, hogy ez a gomb legyen a fókuszban. Csak egy autofókusz használható egy oldalon.
  • forma: A gombot egy adott űrlaphoz társítja ugyanabban a HTML dokumentumban, az űrlap azonosítóját használva értékként.
  • formálás: Csak type = "beküldés" értékként pedig egy URL-t határoz meg, hogy az űrlapadatokat hova küldjük. Gyakran a cél egy PHP szkript vagy valami hasonló,
  • formenctype: Csak type = "beküldés" tulajdonság. Meghatározza, hogy az űrlapadatokat hogyan kell kódolni, amikor elküldik a szervernek. A három érték az application / x-www-form-urlencoded (alapértelmezett), többrészes / űrlap-adatok, és szöveg / sima.
  • formamódszer: Csak type = "beküldés" tulajdonság. Ez is meghatározza, hogy melyik HTTP-módszert kell használni az űrlapadatok beküldéséhez kap vagy post.
  • formnovalidát: Csak type = "beküldés" tulajdonság. Az űrlap adatait a benyújtáskor nem ellenőrizzük.
  • formtarget: Csak type = "beküldés" tulajdonság. Ez jelzi, hogy hol kell megjeleníteni a webhely válaszát, amikor az űrlapadatokat elküldik, például egy új ablakban stb. Az értékopciók vagy_ blank, _self, _parent, _top, vagy egy adott keretnév.

További információ erről gombok készítése HTML-űrlapokban, és hogyan lehet webhelyét felhasználóbarátabbá tenni.

instagram story viewer