Ű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"
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:
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ó.
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:</body>
<select> <option>csavar</option> <option>szeg</option> <option>alma</option> <option>retek</option> </select> </form>
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:
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>
A fenti kódrészlet eredménye, a böngészőprogramban
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:
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: