HTML input tag

HTML <input /> tag

A <input /> tag egy beviteli mezőt definiál egy űrlaphoz. A mező típusát a type attribútum határozza meg.

A többi űrlap mezőhöz hasonlóan a name attribútum adja meg annak a változónak a nevét amit majd az űrlap elküld a szervernek. A disable attribútummal a mező letiltható, a readonly attribútummal nem módosítható állapotot lehet létrehozni. A kettő közt az a különbség, hogy disabled esetén a mező értéke nem kerül elküldése, míg readonly esetén igen.

Szöveges mezők: Normál (type="text") vagy jelszó (type="password") típusú lehet. Mindkét esetben egysoros szövegbeviteli mezőt hoz létre. A különbség csak annyi, hogy a jelszó típusnál a beírt karakterek helyett maszkkarakterek (pl.: pöttyök) jelennek meg. A maxlength attribútummal lehet a beírható karaktereket maximalizálni. A size attribútum a látható karakterek számát adja meg, azaz a mező szélességét, ami proporcionális fontoknál értelemszerűen nem pontos. A value attribútum a kezdeti értéket adja meg.

Jelölő mezők: Jelölőnégyzet (type="checkbox") vagy rádiógomb (type="radio") típusú lehet. A jelölőknél a value attribútum értéke kerül elküldésre, ha nincs ilyen akkor a böngésző alapértelezése (pl.: on). Nem bejelölt jelölő mező nem kerül elküldésre! A jelölők alapértelmezése a nem jelölt állapot, ezt a checked attribútummal lehet megváltoztatni. Mindkét típus esetében van lehetőség csoport létrehozására. A böngésző akkor érzékel több jelölő típusú mezőt csoportnak, ha a name attribútumuk megegyezik. Természetesen a value attribútumuk különböző lehet és az aktuális bejelölt értéke(ke)t küldi a szervernek. A kettő közt az a különbség, hogy a checkbox típus önálló ki vagy be állapotot képvisel, míg a radio típust bekapcsolás után nem lehet kikapcsolni, csak egy másik csoporton belüli radiógomb bekacsolásával. Azaz csoporton belül csak egy elem lehet bejelölve, míg a checked típusnál bármennyi. Megjegyzendő, hogy a rádiógombnak önállóan nincs sok értelme, mert úgy egy kikapcsolhatatlan checkbox-ot kapunk. A jelölőnégyzetnek pedig csoportban csökken a funkcionalitása és nem is mendegyik szerver oldali környezet kezeli, mert ilyenkor ugyanolyan nevű változó kerül elküldésre többféle értékkel.

Nyomógomb mezők: A button, reset, submit és az image típusok tartoznak ide. Az első három esetében hagyományos feliratos nyomógomb jön létre, a feliratot a value attribútum határozza meg. Az image esetén egy kép képviseli a nyomógombot melyet az src és az alt attribútum határoz meg az <img /> taghoz hasonlóan. A button típus egy funkció nélküli gombot határoz meg, a reset visszaállítja az űrlap mezőit a kezdeti értékekre, a submit pedig elküldi az űrlap adatait a szervernek. Az image típusú mező funkcióját tekintve szintén egy submit gomb. Ha egy submit típusú mezőnek van name attribútuma akkor annak a value attribútumának az értéke is elküldésre kerül. Több submit gomb esetében mindig csak a megyomott gomb értéke kerül küldésre. Az image típusnak is lehet name és value attribútuma. Egérrel történő kattintás esetén két változó jön létre úgy, hogy a name attribútum értékét a böngésző kiegészíti egy "_x" és "_y" véggel. Ezeknek az értéke a képen történt kattintás kattintás relatív koordinátái lesznek. Ha billentyűzettel nyomjuk meg a gombot, akkor a value értéke kerül elküldésre. Némely böngészők (Crome, Opera) az egérrel való megnyomáskor is elküldik a value értéket is és így három változót küldenek a szervernek.

Rejtett mező: A hidden típus megadásakor a mező a böngészőben nem lesz látható és a felhasználói felületen szerkeszthető. A value értékét küldi a szervernek az űrlap.

Fájl feltöltés: A file típus fájl feltöltési lehetőséget hoz létre. A felhasználó a böngészőben ki tud tallózni egy fájlt, amit az űrlap elküld. Az accept attribútummal elvileg meg lehetne határozni milyen fájl típusokat fogadjon el a mező, de sajnos a böngészők nem támogatják.

Szintaktika:

<form action="/form-test" method="get" target="_blank">

	<b>Szöveg mezők</b>:<br />
	<input type="text" name="szoveg" value="kezdeti szöveg"/><br />
	<input type="password" name="jelszo" /><br />

	<b>Jelölő mezők</b>:<br />
	<input type="checkbox" name="jelolonyegyzet[]" /><br />
	<input type="checkbox" name="jelolonyegyzet[]" checked="checked"/><br />
	<input type="checkbox" name="jelolonyegyzet[]" /><br />
	<input type="radio" name="radiogomb" value="1_valasztas"/><br />
	<input type="radio" name="radiogomb" value="2_valasztas" checked="checked"/><br />
	<input type="radio" name="radiogomb" value="3_valasztas"/><br />

	<b>Fájl feltölés</b>:<br />
	<input type="file" name="fajl" /><br />

	<b>Rejtett mező</b>:<br />
	<input type="hidden" name="rejtett" value="titkos"/>

	<b>Nyomógombok</b>:<br />
	<input type="button" value="Nyomógomb"/><br />
	<input type="reset" value="Újra"/><br />
	<input type="submit" name="elkuld" value="Elküld"/><br />
	<input type="image" name="elkuld" value="kep" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="Logó"/>
</form>

Megjelenés a böngészőben:

Szöveg mezők:


Jelölő mezők:






Fájl feltölés:

Rejtett mező:
Nyomógombok:

Opcionális attribútumok

Attribútum	Érték	Leírás
accept	MIME típus	Meghatározza a feltöltendő fájl lehetséges típusait.
align	left right top middle bottom	Igazítás image típusnál. Elavult! CSS vertical-align és float formázás használható helyette.
alt	szöveg	Alternatív szöveg image típusnál, ha a kép nem megjeleníthető.
checked	checked	Ha létezik az attribútum, akkor a checkbox és radio típusú input mezők kezdő értéke bejelölt lesz.
disabled	disabled	Ha létezik az attribútum, akkor a mező letiltott lesz.
maxlength	szám	Meghatározza a szöveg típusú mezők maximális karakterszámát.
name	név	Mező nevének megadása.
size	szám	Meghatározza a szöveges típusú mező szélességét karakterben.
src	URL	Image típusnál a képre mutató URL.
type	button checkbox file hidden image password radio reset submit text	Meghatározza az input mező típusát.
value	érték	Meghatározza az input mező kezdeti értékét. Funkcionalitása típusonként eltérő.