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:

GET kéréseket el lehet tárolni(gyorsítótárazhatók)
GET kérelmek továbbra is a böngészési előzményekben, azaz, a böngészőtörténetben maradnak.
GET kérelmek megjelölhetők, könyvjelzővel.
GET kéréseket soha nem szabad használni, ha foglalkozik az érzékeny (bizalmas) adatok kezelésével.
GET kérések hosszkorlátozást tartalmaznak. (Maximum URL hossza 2048 karakter.)
GET kéréseket bizonyos esetekben, csak az adatok lekérésére lehet felhasználni.(Például: jQery Ajax alkalmazásnál.)

POST-kérelmek soha nem tárolódnak el.
POST-kérelmek nem maradnak a böngésző előzményei között.
POST-kérelmeket nem lehet könyvjelzőként megjelölni.
POST kéréseknek nincsenek korlátozásuk az adatok hosszával kapcsolatban.

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:

Nyomógomb: (A JavaScript function meghívására.)
type="button"

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.

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

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.

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

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 .

Szöveg:
type="text"

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

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.

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"

Csatolandó fájl:
type="file"

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.

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:

szöveg

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á)

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

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