HTML - Input nyomógombok

Az input elemmel megvalósítható nyomógombok típusai:

Típus	Leírás	Böngészők
submit	Az űrlapba bevitt adatokat elküldi az űrlap feldolgozását végző fájlnak.
reset	Az űrlapba bevitt adatok törlését teszi lehetővé. (A beviteli mezőkbe a kezdeti állapotnak megfelelő értékeket írja.)
button	Általános célú nyomógomb.
image	Képes elküldőgomb. Az űrlapba bevitt adatokat elküldi az űrlap feldolgozását végző fájlnak.

Az input elemmel megvalósítható nyomógombok jellemzői:

Név	Érték	Leírás
disabled	disabled	Segítségével az elem kikapcsolható. (Nem lehet szerkeszteni. Értéke nem kerül elküldésre.)
name	szöveg	Az elem neve. Az adatok feldolgozását végző scriptek, az elem azonosítására használják.
value	szöveg	Meghatározza az input mező kezdeti értékét. Az űrlap elküldésekor, tartalma az elem nevével együtt érkezik az adatok feldolgozását végző scripthez,

A name jellemző megadása kötelező.
A value jellemzőnél megadott szöveg lesz a gombfelírat.
A id jellemző megadása <label> elem használata esetén kötelező. (A elem for jellemzőjének. és a beviteli mező id jellemzőjének meg kell egyeznie. Így jön létre a kapcsolat a két elem között)
A disabled jellemzővel a tílthatjuk a nyomógombot.

Az image típusú nyomógomb speciális jellemzői:

Az img elemhez hasonló módon meg kell (!) adni a helyettesítő szöveget (alt), valamint megadható a kép mérete is a width és height.

1. példa:

Forráskód


<form action="html5_input_gombok.php"  method="post">
Név: <br>
<input type="text" name="text1" value="Hogy hívnak?"><br><br>
<input type="reset" name="reset1" value="Törlés"> 
<input type="button" name="button1" onclick="msg()" value="Hahó Öcsi!">
<input type="submit" name="submit1" value="Küldés">
<input type="button" name="button2" value="Tíltott" disabled>
<input type="image" name="submit3" src="webdev_ok_48x48.png" alt="Elküld">
</form>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.