Űrlapok - Űrlap elemek. Az <input> tag.

Az űrlap elemeinek többségét az <input> tag segítségével lehet létrehozni. Nincs záró tagja.

Legfontosabb attribútumai, amelyek minden elem-típushoz hozzárendelhetőek:

• type: Az űrlapelem típusát adja meg. A HTML 4.01 szabványban megengedett értékei: text, password, checkbox, radio, file, hidden, submit, reset, button, image. A HTML 5 szabványban jelentősen növelték az elemtípusok számát, de az új elemeket jelenleg (2013-ban) a böngészők még nem támogatják teljes mértékben.
• name: Az elem neve. Az űrlap adatait feldolgozó program ez alapján tudja azonosítani a felhasználó által bevitt adatokat.
• value: Az űrlapelem kezdeti értéke. Kötelező megadni, ha a type attribútum értéke radio vagy checkbox, egyébként használata opcionális.
• id, class, style: általános attribútumok

Egysoros szövegmező

Példa:

Felhasználó név:
<input type="text" name="username" size="35" maxlength ="50">

Ami így jelenik meg:

Felhasználó név:

A példában szereplő attribútumok jelentése:

• size: A szövegmező szélességét adja meg a látható karakterek számában. Ez többnyire csak egy becsült érték, mivel a legtöbb betűtípus esetén a különböző karaktereknek a szélessége is eltér egymástól. Például az m betű több helyet foglal el mint az i betű, kivéve ha monospace betű típust választunk.
• maxlength: A beírható karakterek maximális száma. Az alapérték a végtelen.

Ha a maxlength értéke nagyobb, mint a size attribútum értéke, akkor a felhasználónak lehetősége van arra, hogy több karaktert írjon a szövegmezőbe, mint ami abban egyszerre látszódhat. Ez általában nem okoz problémát, mert a kurzort a billentyűzeten lévő nyilakkal mozgatva a felhasználó el tudja érni a beírt szöveg minden részét.

Jelszó mező

Példa:

Jelszó:
<input type="password" name="userpassword" size="20"
    maxlength="15"> (maximum 15 karakter)

Ami így jelenik meg:

Jelszó: (maximum 15 karakter)

Az attribútumok használata megegyezik az egysoros szövegmezőnél leírtakkal.

A jelszó mezőben a beírt karakterek pont vagy csillag formájában jelennek meg, de a "titkosítás" csak a képernyőre vonatkozik. Az űrlap elküldésekor a jelszó is egyszerű szöveges adatként kerül továbbításra.

Jelölő négyzet

HTML űrlapokon jelölő négyzetek alkalmazásával érhetjük el azt, hogy a weblap látogatója az előre felkínált lehetőségek közül tetszőleges számú opciót kiválaszthasson.

Példa:

Nyelvtudás:
<input type="checkbox" name="lang1" value="hu"
    checked>magyar<br>
<input type="checkbox" name="lang2" value="en">angol<br>
<input type="checkbox" name="lang3" value="de">német<br>
<input type="checkbox" name="lang4" value="other">egyéb<br>

Ezt a kódot a böngészők így jelenítik meg:

Nyelvtudás:
magyar
angol
német
egyéb

Ha a checked attribútum meg van adva, akkor a böngészők a négyzetet kiválasztott állapotban jelenítik meg.

Rádió gombok

A rádió gombok is arra szolgálnak, hogy a weblap készítője által definiált lehetőségek közül a felhasználók választhassanak. Az azonos name attribútummal rendelkező rádió gombok alkotnak egy csoportot. Egy csoporton belül csak egyetlen egy gomb lehet bekapcsolt állapotban.

Példa:

Legmagasabb iskolai végzettség:
<input type="radio" name="education"
    value="elementary">alapfokú<br>
<input type="radio" name="education" value="secondary"
    checked>középfokú<br>
<input type="radio" name="education"
    value="higher">felsőfokú<br>

Ami a következőképpen jelenik meg:

Legmagasabb iskolai végzettség:
alapfokú
középfokú
felsőfokú

A különböző böngészők eltérő módon viselkednek akkor, ha egy csoporton belül egyik gomb sincs checked állapotban megadva a forráskódban. (Megjelenítéskor vagy az első gombot kapcsolják be vagy pedig egyiket sem.) Ezért a HTML szabvány ajánlása szerint a weblap fejlesztőjének gondoskodnia kell arról, hogy az egyik gomb alapértelmezés szerint bekapcsolt állapotban legyen.

Fájl csatolása

Példa:

Csatolt fájl:
<input type="file" name="attachment" size="40">

Ami a böngészőben ilyen beviteli mezőt eredményez:

Csatolt fájl:

A size attribútum itt is a beviteli mező szélességét adja meg a látható karakterek számában.

Ha az űrlap csatolt fájlt tartalmaz, akkor a form elem method attribútumának „post”, az enctype attribútumának pedig "multipart/form-data" értéket kell adni.

Rejtett űrlap mező

A rejtett űrlap mező lehetőséget ad arra, hogy az elküldött űrlap olyan adatot is tartalmazzon, amelyet a szerver generált. Az oldal látogatói ezeket az információkat nem látják és nem is tudják módosítani. A rejtett mezők egyik felhasználási területe a felhasználói aktivitás követése.

Példa:

<input type="hidden" name="user_id" value="456789">

Megjegyzés: A rejtett űrlap mező tartalma nem jelenik meg a képernyőn, de ettől az még nem számít titkosított adatnak. Az információ megszerzéséhez elég elolvasni a HTML kódot. (Jobb egérgomb kattintás az oldal fölött és a „Forrás megtekintése” menüpont kiválasztásával a böngésző megjeleníti a forráskódot.)

Űrlap elküldése

Általában egy weboldalon azért készítünk űrlapot, hogy a látogatók elküldhessék az általuk beírt információkat. Ehhez biztosítani kell számukra egy „Küldés” vagy más hasonló feliratú gombot, amire kattintva a böngésző továbbítja az adatokat a szerver felé.

Példa:

<input type="submit" value="Űrlap küldése">

Ez egy ilyen gombot eredményez a képernyőn:

Egy űrlap több küldés gombot is tartalmazhat.

Adatok törlése

Egy űrlapon belül „Reset” gomb is definiálható, ami törli a felhasználók által bevitt adatokat. A gombra kattintva az űrlap mezők visszaállnak az oldal HTML kódjában megadott alapértékekre. A szabvány nem ír elő kötelező viselkedésmódot arra az esetre, amikor egy mezőre nincs kezdőérték megadva. (Ilyenkor a böngésző programok törlik a mezőben lévő adatot, de az sem ellentétes a szabvánnyal, ha megmarad a felhasználó által utoljára beírt információ.)

Példa:

<input type="reset" value="Adatok törlése">

Ami a következőképpen jelenik meg:

Nyomógomb

Olyan nyomógomb is létrehozható az <input> tag segítségével, amelyhez a HTML szabvány közvetlenül nem rendel funkciót. Az ilyen gombokat általában JavaScript programok indítására használják.

Példa:

<input type="button" value="Számítás indítása"
    onclick="sum_calculator();">
2 + 2 = <span id="sum_result">?</span>

Ennek megjelenítése:

2 + 2 = ?

A gombra kattintva lefut a sum_calculator nevű JavaScript programocska, ami kiírja a gomb mellett látható nem túl bonyolult számítási feladat eredményét.

Küldés gomb fényképpel

Egy űrlap úgy is elkészíthető, hogy a weboldal látogatói a küldés gomb helyett egy képre kattintva továbbíthassák a beírt adatokat. Ilyen módon egyedi kinézetű küldés gombot készíthetünk, illetve térképszerű választási lehetőséget is biztosíthatunk a felhasználók számára.

Példa:

Válassza ki az Önhöz legközelebbi márkakereskedésünket:
<input type="image" name="hungary_map" src="hungary.gif"
alt="Magyarország térkép a viszonteladóinkkal">

Ez akár így is megjelenhet a böngészőben:

Válassza ki az Önhöz legközelebbi márkakereskedésünket:

Az src attribútum értéke adja meg a kép elérési útját az alt attribútum pedig az alternatív szöveget tartalmazza. (Ugyan úgy, mint amikor egy egyszerű képet illesztünk be az <img> taggal.)

A képre kattintva a böngésző elküldi az űrlap adatait, valamint azokat a pixelben számolt koordinátákat, ahova a felhasználó rákattintott. Az elküldött koordináta adatok formátuma a fenti példában így nézne ki:
hungary_map.x=318
hungary_map.y=23

A HTML szabvány kidolgozói lehetővé tették a térképszerű küldés gomb alkalmazását, de általában nem ajánlják a használatát. Számítógépen az egér mutatójával viszonylag pontosan rá lehet mutatni a fénykép kívánt pontjára, de már érintő képernyőn is könnyű „mellé nyúlni”, egy felolvasó szoftver segítségével böngésző látogató számára pedig használhatatlan ez a megoldás.

Többsoros szövegmező. A <textarea> tag. »