Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Űrlapok /<input type="submit"> – Űrlap elküldése gomb

Űrlapok

<input type="submit"> – Űrlap elküldése gomb

Korábban már bemutattuk ezt a beviteli mezőt, most a paramétereit is részletesebben bemutatjuk.

Mire használjuk?

Az űrlap elküldésére szolgál. Ilyenkor a gomb szövege a böngésző egy alapértelmezett szövege (pl. Elküld, Submit) lesz. Ha a gombon megjelenő szöveget is be akarjuk állítani, akkor a value paramétert is használnunk kell. <input type="submit" value="Elküld">

A tag paraméterei:

Példa
Interaktív példa
Magyarázat

Az űrlapnál most két submit gombot is elhelyeztünk. A másodiknál felülbíráltuk az űrlapnál megadott action és method paramétereket a formaction és formmethod paraméterekkel.

<input type="reset"> –Űrlap alaphelyzetbe állítása

Mire használjuk?

Az űrlap kiinduló helyzetbe állítására szolgál. Megnyomásakor az összes űrlapelem felveszi az alapértelmezett értékét. Ha a gombon megjelenő szöveget is be akarjuk állítani, akkor a value paramétert is használnunk kell. <input type="reset" value="Alaphelyzet">

A tag paraméterei:

<input type="hidden"> – Rejtett mező

Mire használjuk?

Arra is van módunk, hogy olyan űrlapmezőt helyezzünk el, amely nem jelenik meg a képernyőn, de a benne lévő adatok továbbítódnak a szerver felé. Ezzel például paramétereket adhatunk át az űrlapot feldolgozó programnak, például, hogy milyen e-mail címre továbbítsa az adatokat.

A tag paraméterei:

Példa
Interaktív példa
Magyarázat

Ebben a példában nincs látható űrlapmező, csak egy rejtett űrlapmező. Ha elküldjük az űrlapot, láthatjuk a levél törzséből hogy milyen nevű és értékű volt a rejtett mezőnk.

<input type="button"> – Általános gomb létrehozása

Mire használjuk?

Ezzel a lehetőséggel általános célú nyomógombokat hozzunk létre.

A tag paraméterei: globális attribútumok

Példa
Forráskód
<input type="button" value="Vissza" name="vissza" onclick="javascript:history.back()">
Magyarázat

Egy általános nyomógombot hoztunk létre, amelyre ha rákattintunk, akkor a látogatott oldalak közül a legutolsóra kerülnénk, hála az onclick eseményben megadott JavaScript-függvénynek.

<meter> – Mérési eredmény kijelzése

Mire használjuk?

A <meter> tag valamilyen mérési eredmény kijelzésére szolgáló elem. Egy ismert tartományon belüli skalár érték megmutatására lehet alkalmas.

A tag paraméterei:

A következő szabályoknak teljesülniük kell:

Példa
Interaktív példa
Magyarázat

Három kijelzőt készítettünk, mindegyiknél 0 a minimum és 10 a maximum érték. Az alacsony (low) értéket háromban határoztuk meg, míg a magas értéket hétben. Mivel nem lehetne tudni, hogy ennél a tulajdonságnál a nagyobb érték az optimális, vagy a kisebb, az optimum paramétert is megadtuk. Az optimum érték most a 8-as értéktől kezdődik.

<progress> – Folyamat állapotának jelzésére

Mire használjuk?

A <progress> tag egy folyamat állapotának jelzésére alkalmas.

A tag paraméterei:

Példa
Interaktív példa
Magyarázat

Három <progress> mezőt helyeztünk el. Mindegyiknek 1 a maximális értéke. Az aktuális értéket 0,3-ra, 0,6-ra és 1-re állítottuk be.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.