Weblap Hová jutunk?

JavaScript űrlapok

Űrlapok az XHTML dokumentumban a párbeszédet teszik lehetővé. (szövegablakok, adat- és jelszóbeviteli mezők, gombok, választógomb csoportját tartalmazza.)
Feldolgozásukhoz külön programot kell használni (például PHP programokat).

Minden űrlap területének jelölőeleme a kezdő <form> és záró </form> elem.
Kezdő form elemben határozzuk meg, form nevét, hová és milyen formátumban küldjük el az űrlapot feldolgozásra.

Ha szerverre küldjük feldolgozásra az űrlap adatait, melyet CGI programok dolgoznak fel, például PHP:
     <form name="valami", action="url_cím", enctype="text/plain" vagy method="POST" vagy method="GET" >
               Ide jönnek az űrlapmezők,
               és a küldőgomb <inpu type="submit" value="Küldés">
     </form>

Ha csak, JavaScript - nek küldjük feldolgozásra az űrlap adatait, melyet a saját böngészőprogramunk fog feldolgozni, akkor ennyi is elég:
     <form name="valami">
              Ide jönnek az űrlapmezők,
              és a hívógomb <inpu type="button" value="Feldolgozás" onClick="function();">
     </form>

A name, egyedi tetszőleges elnevezése lehet, mely a form, azaz, űrlap azonosítója. (Ugyan-úgy, mint az id azonosítóknak.)

A tartalmat az action attribútumban megadott URL címen található szkript program dolgozza fel:
action="url"
ahol az url = a feldolgozó szkript elérési útvonala.
A form jelölőelem action paramétere arra a CGI fájlra, például PHP fájlra mutat, amely feldolgozza az űrlapon megadott adatokat.
Ha az action attribútum csak a fájlnak a nevét adja meg, akkor az XHTML és a PHP programot tartalmazó fájloknak egy könyvtárban kell lenniük.

method="post" vagy method="get"
Leggyakrabban használt módszerek kérés-válasz használatára a kliens és a szerver között: GET és POST.
Ezek az attribútumok határozzák meg, a kitöltött űrlap továbbítási módját a feldolgozó script program felé.
Lehetséges értékei:
GET - az URL-ben.
POST - adatcsomagban továbbítja az adatokat. (Biztonságosabb mód.)

Néhány megjegyzés a GET és POST kérésekhez:

Ha nem tartjuk célszerűnek, hogy az űrlap adatait egy szkript program dolgoza fel, akkor választhatjuk azt a megoldást, hogy a felhasználó által kitöltött adatokat elektronikus postával továbbítjuk.
Ekkor a küldendő szöveg formatálására felhasználjuk a következő attribútumot:
enctype="text/plain"
Az action attribútumban pedig megadjuk az e-mail címet ahová az adatokat továbbítjuk:
action="mailto:e-mail cím"

Adatbeviteli mezőket, a következő jelölőelemekkel hozhatjuk létre:
<input {accept, accesskey, align, alt, checked, disabled, ismap, maxlength, name, onblur, onchange, onfocus, onselect, readonly, size, scr, tabindex,
type,
type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="radio", type="reset", type="submit", type="text", usemap, value} > szöveg </input>

A name attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt adatot.
A type attribútum határozza meg a beviteli mező adattípusát.

Lehetséges input type adattípusok:
  1. Nyomógomb: (A JavaScript function meghívására.)
    type="button"

  2. Kapcsoló (több feltétel is kiválasztható egyszerre):
    type="checkbox"

    A checkbox típusú mező esetében a:
    checked="checked"
    attribútum alkalmazásával alapértelmezésként bekapcsoljuk a kapcsolót.

  3. Jelszó (adatbevitelkor, karakterek nem jelennek meg):
    type="password"

  4. Rádiókapcsoló (egyszerre csak egyet lehet kiválasztani. Igen vagy nem.):
    type="radio"

    A radio típusú mező esetében a:
    checked="checked"
    attribútum alkalmazásával alapértelmezésként bekapcsoljuk a rádiókapcsolót.

  5. Inicializáló gomb: (A reset gomb lenyomása alapértékkel tölti fel, az adatbeviteli mezőket.)
    type="reset"

  6. Adattovábító gomb:
    type="submit"

    A submit gomb lenyomásának hatására küldjük el az űrlapok adatait a feldolgozó script (PHP) programnak. A submit és a reset gombokhoz tartozó:
    value="felirat"
    attribútum alkalmazásával a gombok feliratát határozzuk meg .

  7. Szöveg:
    type="text"

    Ez a mező, karaktereket, számokat, vagy mindkettőt tartalmazhatja.

  8. Számok:
    type="number"

    Ez a mező, csak számokat tartalmazhat.
    Közvetlen beírhatunk számokat, vagy a jobboldali nyilakkal növeljük vagy csökkentjük a beírt értéket.

  9. Rejtett adattípus, űrlapon nem jelenik meg. (Felhasználó nem tudja módosítani, csak az űrlap készítője.(Feldolgozó programnak küld információt)
    type="hidden"

  10. Csatolandó fájl:
    type="file"

  11. Kép:
    type="image"


Megjegyzés:
A text, number és password adattípusú beviteli mező esetén a beviteli ablakoknál:
Széllességet: size="méret"
Maximális bevihető szöveghosszt: maxlenght="érték"
attribútumokkal határozzuk meg.


Példa kódrészlet, a jelszó megadására:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/XHTML" xml:lang="hu" lang="hu">
<head>
		<title>Jelszó megadás</title>
</head>
<body>

<form>
	Jelszó megadás:
	<input type="password" name="jelszo" id="jelszo" size="22" maxlenght="20"> 
</form>

</body>
</html>

Böngészőprogramban, a fenti példa eredménye, a következő lesz.

Jelszó megadás:


value="szöveg"
attribútum alkalmazásával a "szöveg" adatot veszi fel alapértelmezés-ként a szöveges beviteli mező.

<textarea {cols, name, rows}> szöveg </textarea>
jelölőelemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. A name attribútum értéke a mezőnév.

Megjelenése böngészőprogramban:

rows="érték" és cols="érték"
attribútumok a megnyíló beviteli ablak sorainak számát és szélességét adják meg.

value="szöveg"
attribútum alkalmazásával az alapértelmezésként megjelenítendő szöveg adható.

Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni akkor ezt a:
<select {multiple, name, size} > szöveg </select>
jelölőelem alkalmazásával tudjuk megtenni.
A <select> nyitó jelölőelem jelzi a lista kezdetét, alapbeállitásban egy legördülő menüt eredményez.

Megjelenése böngészőprogramban: Teszteléshez kattintsunk rá.

name="név"
attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt listakészlet nevét.

size="sorok"
attribútum meghatározza, hogy hány sorban jelenjenek meg a választható listajelölőelemek.
Megadásával szkrollozható menüt kapunk (alapértelmezés szerint legördülőt).

A <select> listába, az
<option> szöveg </option>
jelölőelem segítségével tudunk listajelölőelemeket elhelyezni.

Egyszerre több listajelölőelem kijelölésére a:
multiple="multiple"
attribútumot használjuk.

Példa kódrészlet, a legördülő menűre:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/XHTML" xml:lang="hu" lang="hu">
<head>
<title>Legördülő menü</title>
</head>
<body>

<form>
	Vegyesbolt:

<select> <option>csavar</option> <option>szeg</option> <option>alma</option> <option>retek</option> </select> </form>
</body>
</html>

Webböngészőbe, a következő eredményt kapjuk: (Teszteléshez kattintsunk rá)

Vegyesbolt:

Egyszerű gombot a:
<button {name, type, value} > Tetszőleges szöveg beírása </button>
jelölőelem segítségével tudunk létrehozni.
A gomb szélessége, a beírt szöveg hosszától függ.
A gombhoz szkripteket rendelhetünk, melyek gombnyomással aktiválódnak.
Webböngészőbe, a következő eredményt kapjuk:

Az információk csoportosítására a:
<fieldset> szövegblokk </fieldset>
jelölőelemet használjuk, mely jelölőelem közötti szövegblokkot a böngésző (a többi szövegtől elkülönítve) bekeretezve jeleníti meg.
Webböngészőbe, a következő eredményt kapjuk:

szövegblokk

A:
<legend{align}> címkeszöveg </legend>
jelölőelem alkalmazásával a keret bal felső szélén címkeszöveget is írhatunk.

A mezők, a:
<label {for}> felirat </label>
jelölőelemmel feliratozhatók.

Példa kódrészlet, Űrlapkitöltéshez:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/XHTML" xml:lang="hu" lang="hu">
<head>
<title>Űrlap kitöltés</title>
</head>
<body>

<form>
	<fieldset>
		<legend>Személyi adatok<br />
		<label>Vezetéknév</label>
		<input type="text" name="vezeteknev"></input><br /><br />
		<label>Keresztnev</label>
		<input type="text" name="keresztnev"></input><br /><br />
		<label>Születési dátum</label>
		<input type="text" name="szuletesidatum"></input>
	</fieldset> 
</form>
</body>
</html>

A fenti kódrészlet eredménye, a böngészőprogramban

Személyi adatok




Event (eset, esemény) teszt

Kettő, esemény gombot határozunk meg, melyek, kattintásra egy üzenetet jelenítenek meg.

Példa kódrészlet:
   <button onclick="alert ( ' You clicked the button.')">Kattints ide!</button>
   <button onclick="alert ( ' Kattints a gombra.')">Ide is kattints!</button>

Ha az előző részben, nem írjuk be a záró </button> címkét, akkor a következő sorok egy ablakban jelennek meg.

A fenti kódrészletek eredménye, a böngészőprogramban:

Előre és vissza ugró gombok létrehozása

Példa kódrészlet:
      <input type="button"  onClick"="history.back ( ) ; " value=" <-- Back" > 
      <input type="button" onClick="history.forward () ; " value="Forward --> " > 

A fenti kódrészlet eredménye, a böngészőprogramban:

Vissza a lap elejére