Input tag
Az input tag különböző HTML űrlap
elemeket hoz létre: szöveges beviteli mezőt,
jelszó mezőt, jelölőnégyzetet (checkbox),
rádiógombokat (radio), gombot.
Az input tagnak a
form
tagon belül kell elhelyezkednie.
Ez nem kötelező, de szükséges az adatok
szerverre küldéséhez és azok PHP-n keresztüli
feldolgozásához.
Nem igényel záró tagot.
Attribútumok
| Attribútum | Leírás |
|---|---|
type |
Meghatározza a beviteli mező típusát. Lehetőségek lásd alább. |
value |
Az alapértelmezett érték a beviteli mezőben. Gomb esetén annak szövegét állítja be.
Részletesebben lásd: value attribútum.
|
placeholder |
Szöveges útmutató a beviteli mezőben, részletesebben lásd:
placeholder attribútum.
|
name |
A beviteli mező neve. Azért szükséges, hogy az űrlap adatait PHP-ban el lehessen érni. Az űrlap megfelelő működéséhez a beviteli mezők neveinek egyedinek kell lenniük (egy űrlapon belül). Ha megegyeznek - a PHP-ban az adatok attól a mezőtől érkeznek, amelyik az HTML kódban lentebb található. |
disabled |
Letiltja az űrlap elemet (nem csak az input-ot, hanem szinte bármelyiket),
részletesebben lásd: disabled attribútum.
|
A type attribútum értékei
| Érték | Leírás |
|---|---|
text |
Létrehoz egy sima szöveges beviteli mezőt. |
password |
Létrehoz egy szöveges beviteli mezőt jelszóhoz. Próbáljon meg beírni szöveget - csillagokként jelenik meg. |
checkbox |
Létrehoz egy jelölőnégyzetet.
Részletesebben lásd: checkbox.
|
radio |
Létrehoz egy rádiógombot.
Részletesebben lásd: radio.
|
hidden |
Létrehoz egy rejtett input-ot, amely nem látható a képernyőn, de elküldi a
value attribútumban található
adatokat a szerverre.
|
button |
Létrehoz egy gombot. Ennek a gombnak
a megnyomása nem fogja elküldeni az űrlapot a szerverre. Használható
link belsejében vagy JavaScript-en
keresztül. Alapértelmezetten a gombnak nincs szövege (példa szöveg nélküli gombra: ),
ezt a value attribútummal lehet beállítani.
Lásd még a button tagot,
amely szintén gombot készít.
|
submit |
Létrehoz egy gombot, amely elküldi az adatokat a szerverre.
A gomb szövege böngészőfüggő, megváltoztatható a
value attribútummal.
Lásd még a button tagot,
amely szintén gombot készít.
|
reset |
Létrehoz egy gombot, amely kitörli a kitöltött űrlapot.
A gomb szövege böngészőfüggő, megváltoztatható a
value attribútummal.
|
file |
Létrehoz egy fájlválasztó gombot. Ennek a gombnak a megjelenését
CSS segítségével nem szabad megváltoztatni (bár léteznek trükkös megoldások). Ha ilyen mezőre
van szüksége az űrlapban, akkor a
form tagnak rendelkeznie kell a
enctype attribútummal, melynek értéke multipart/form-data.
|
Új, HTML5-ben megjelent type attribútum értékek
Ezek az attribútum értékek újak, kizárólag az HTML5-ben jelentek meg, ezért egyes böngészőkben lehet, hogy nem működnek, vagy eltérően működnek különböző böngészőkben.
Abban az esetben, ha a böngésző nem értelmezi
a type attribútum tartalmát
(például ha nem támogatott, vagy hibásan van megadva),
akkor az elemet sima szöveges
inputnak fogja kezelni, mintha a type értéke
text lenne.
Nézze meg az alábbi példákat különböző
böngészőkben. Próbáljon meg szöveget beírni
a mezőkbe és megnyomni a küldés gombot.
Ha a szöveg helytelen vagy a mező üres -
a böngésző hibát jelez. Például, ha egy
email típusú mezőbe helytelen
email címet ír - a böngésző nem engedi
elküldeni az űrlapot és hibaüzenetet
jelenít meg (a hiba szövegét és kinézetét
html css segítségével nem lehet megváltoztatni).
Ha a mező üres - a böngésző szintén hibát jelez,
ezt a required attribútum
segítségével érhetjük el:
| Érték | Leírás |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
