<!-- Generated by XStandard version 2.0.0.0 on 2008-06-18T16:29:38 -->

Összetettebb vagy speciális lehetőséget nyújtó formoknál nem mindig egyértelmű, hogy milyen értéket várunk a beviteli mezőbe. Ilyenkor ajánlott segítséget nyújtani a kitöltéshez. Az alábbiakban átnézzük ennek néhány lehetséges formáját élő példákon keresztül.

A digg.com regisztrálás oldalon azt a módszert alkalmazza, hogy ha a mezőre kerül a fókusz, akkor a mező alatt megjelenik egy kis help szöveg. A megoldás hátránya, hogy hosszabb súgó szöveg már nem jeleníthető meg esztétikusan.

A mommo.hu regisztrációs oldalán bizonyos beviteli mezők alatt állandóan megjelenik a kitöltést segítő szöveg illetve a form jobb oldalán a teljes regisztrációs folyamat előre le van írva. Így tudjuk mire vállalkozunk, amikor az űrlap kitöltésébe kezdünk.

A Yahoo! regisztrációs felületén alkalmazott módszer hasonlít a digg.com-nál használtra, amikor a mező megkapja a fókuszt, jobb oldalon megjelenik a kitöltést segítő információ.

A blinksale.com regisztrációs oldala jó példa az egyszerűen értelmezhető űrlapra, itt csak az egyes mezőcsoportok (fieldset) elején található segítség a mezők kitöltéséhez.

A Dibusoft kapcsolatfelvételi oldalán a mezk elején lévő kis ikonok segítik a mező funkciójának gyors - akár olvasás nélküli - átlátását. Jó megoldás, hogy amikor a mező megkapja a fókuszt a kerete szürkéről feketére változik.

Kitöltöttség ellenőrzése

Az űrlapon általában vannak kötelezően megadandó ill. kötött formátumú értékek (pl. e-mail cím). Ezek kitöltöttségének ill. helyességének ellerőzése fontos feladat, ellenkező esetben hibás vagy hiányos adatokkal érkezhet pl. egy regisztráció, amely lehetetlenné teheti a felhasználóval történő további interakciót.

A kitöltöttség ill. helyesség ellenőrzéséhez egy fontos alapelv, hogy nem elég csak a böngésző oldalán (javascript-el) ellenőrizni, mindenképp szükséges a feldolgozó (szerver) oldalon is elvégezni az ellenőrzést. A böngésző oldali ellenőrzés elsősorban a felhasználóbarátsága miatt hasznnos, így hosszas várakozás vagy akár a form kitöltésének újrakezdése nélkül tudja javítani, pótolni a megfelelő adatokat a látogató.

Hibajelzés

A hibás vagy hiányzó adat észlelése ill. a hiba jelzése több módon is történhet. Bizonyos adatoknál pl. felhasználónév szükség van arra, hogy a látogatót minél előbb tájékoztassuk arról, hogy az általa választott felhasználónév már foglalt. Erre egy jó példa a tickspot.com oldalon alkalmazott technika. A választott weboldal cím beírása után, amikor a fókusz lekerül a beitveli mezőről (blur esemény), ellenőrzésre kerül, hogy az adott aldomain név használatban van-e.

Legkésőbb a form elküldésekor (submit esemény) ellenőrzésre kerül a mezők kitöltöttsége ill. szintaktikája. Hiba esetén többféle módon tájékoztathatja az oldal a kitöltőt.

A digg.com regisztrációs oldalán a mezőkhöz tartozó súgó szövegek helyén jelennek meg a hibaüzenetek.

A tickspot.com regisztrációs oldalán a hibák a form felett megjelennek szöveges formában és a mezők amelyek kitöltése hibás sárga keretet kapnak.

A wufoo.com regisztrációs oldalán hiba esetén a mezők körül lévő div háttere rózsaszín lesz, a mező címkéje piros és a mező alatt megjelenik a hibaüzenet.

A mite regisztrációs oldalán hiba esetén a mező alatt fadeIn-el jelennek meg a hibaüzenetek.

A Mosso tárhelyszolgáltatónál kétféle módon történik a hibajelzés. Ha a mező tartalma megadott formátumú lehet pl. e-mail cím, akkor onBlur esemény hatására megtörténik az ellenőrzés. Hiba esetén egy piros x jelenik meg a mező mellett.

Az összes beviteli mező ellenőrzése a submit esemény után történik, ebben az esetben már jóval látványosabb módon jelzi a kitöltési hibát.

Form feldolgozás

Sok helyen látni azt a megoldást, hogy amíg a látogató a regisztráláskor nem jelölte be a felhasználói szerződés elfogadására szolgáló checkbox-ot, addig a form submit gombja nem aktív. A tickspot.com és a basecamphq.com oldalon is ezt a megoldást használják.

Egy másik nagyon hasznos módszer, hogy a form elküldésekor a submit gomb inaktívvá válik vagy egy indikátor animáció jelenik meg a helyén vagy az egész képernyő blokkolásra kerül. Ez utóbbira példa a vitalland.hu megrendelés oldala.

Megvalósítás

A fentiekban nem tértem ki a bemutatott módszerek pontos megvalósítására. A legtöbbjük egyszerűen megvalósítható. A böngésző oldali ellenőrzése mindenképp valamelyik Javascript könyvtárat javaslom. Személy szerint én a JQuery -t preferálom, ezzel néhány perc alatt megvalósítható egy form ellenőrzése. Kollégám Hosszú Kálmán blogjában egy remek cikket írt a JQuery-vel történő form ellenőrzés megvalósításáról.