< WebKészítés /> interaktív webszerkesztő tananyagok

Űrlapok és elemeik

A honlapok gyakran nem csak adatokat közlő, hanem fogadó felületek is. Adódik a probléma: hogyan kaphatunk visszajelzéseket a felhasználóktól? Űrlapok (angolul form-ok) bevezetésével biztosíthatunk a felhasználónak különböző beviteli mezőket, miket tovább küldhetünk egy feldolgozó programnak. A lényeg ennyi, lássuk a megvalósítást!

A <form> </form> blokk egység tartalma lesz elküldve, a rajta kívül eső rész nem. Lássuk hogyan! Kötelező attribútum az action, mely egy külső kiértékelő programra mutat. Ez általában egy PHP, ASP vagy Perl kód. Róluk a későbbiekben olvashatunk. Fontos még a method is, mely a küldési technika módját rögzíti. Értéke lehet a GET és a POST. Ha nincs kitéve, akkor alapértelmezés szerint a GET lesz. A két eset annyiban különbözik egymástól, hogy a GET-tel az URL-ben (pl: index.php?nev=ertek) látható módon közli az adatokat a szerverrel és korlátozott karakterszámban, a POST pedig elrejtve, a dokumentum fejlécében küldi tetszőleges karakterszámban. (Fájl feltöltés esetén csak ez utóbbi használható, és ki kell még egészíteni <form>-unkat az enctype="multipart/form-data" sorral.)

Érdemes a beviteli mezőket a <fieldset> </fieldset> közé elhelyezni, ezzel csoportosítani őket. A csoportoknak nevet is adhatunk a <legend> </legend> közt, hasonlóan a tábláknál megismert caption-hoz, viszont ne keverjük őket össze!

Az űrlapon belül több beviteli mezőt (inputot) helyezhetünk el. (Az inputok mindegyike sorbeli elem, tehát egy <p></p> bekezdésben kell elhelyezni őket, ha eddig nem nyitottunk volna.) A legfontosabb az űrlap elküldését indító <input type="submit" value="GOMB FELIRAT" /> gomb. A másik ilyen speciális gomb a teljes űrlapr alapállapotba állítását (törlését) végzi el: <input type="reset" value="GOMB FELIRAT" />. Ha pedig egyéb, magunk által definiált funkcióval rendelkező gombot szeretnénk létrehozni, akkor az <input type="button" value="GOMB FELIRAT" />-t használhatjuk. Ugyanezek megvalósíthatók a <button type="submit/reset/button" value="GOMB FELIRAT" />-tal. Különbség nincs köztük. Természetesen őket is el lehet nevezni a name-mel, de legtöbbször a kiértékeléskor nincs szerepük. A további elemek esetén viszont kötelező az egymástól különböző elnevezés!

Lássuk a szöveg beviteli mezőket! Az <input type="text" name="NÉV" value="SZÖVEG" /> egysoros beviteli mezőt (szövegmezőt) hoz létre (pl: felhasználónévnek). Ugyanezzel a módszerrel, csak a type-nak "password" értéket adva jelszó mezőt hozhatunk létre. E kettőnél még a maxlength (maximális bevihető karakterszám) illetve a size (mező hossza karakterben) jöhet szóba. Egyezniük nem szükséges, hiszen ha túlnyúlik a tartalom a mezőn, automatikusan tovább gördül, majd a kurzormozgatókkal visszatérhetünk az elejére. Nagyobb mennyiségű szöveg beviteléhez a szövegdoboz, a <textarea name="NÉV" cols="OSZLOPOK SZÁMA" rows="SOROK SZÁMA"> </textarea> ajánlott. Neki nincs type, value és size attribútuma sem, mert a típusa adott, méretét a sorok és oszlopok számával adjuk és az alapértelmezett tartalmát pedig a nyitó és záró elem közé kell írnunk. maxlength-je viszont lehet.

Jelölőnégyzet hozható létre a <input type="checkbox" name="NÉV" value="SZÖVEG" />-gel. Ebből többet is bepipálhatunk, a Rádió gombból viszont mindig csak az utolsó marad bekapcsolva. <input type="radio" name="NÉV" value="SZÖVEG" /> Itt a többivel ellentétben a name-nek muszáj egyeznie és a value-nek különbözni. Ha valamelyiket előre szeretnénk bejelölni, akkor a checked="checked" tehető ki.

Nincs mindíg elegendő hely a rádiógomboknak, ha sok lehetőség közül kell választanunk. (pl: országnevek) Ekkor jön a képbe a <select name="NÉV"> </select>. E közé jönnek sorban az <option value="ÉRTÉK">SZÖVEG</option> címkék. Itt is különböznie kell a value-knek! Így létre jött egy legördülő menü. Ha választó menüt szeretnénk (legalább két opció), akkor a size itt megadja hány látszódjon görgetés nélkül. Kisebb csoportosítás az opciók közt itt is végezhető, ha egy-egy <optgroup label="CSOPORT NÉV"> </optgroup>-be gyűjtjük a hasonlókat. Ha engedélyezni kívánjuk egyszerre több kijelölését (Ctrl + katt), akkor a multiple="multiple" fog kelleni még a <select>-be.

Megoldható még, hogy egy képet helyezzünk el inputtal: <input type="image" alt="HELYETTESÍTŐ SZÖVEG" src="KÉP HELYE" /> Ez teljesen úgy működik, mint az <img /> címke. Még a usemap is használható. Viszont kattintásra elküldi az űrlapot, akár a submit gomb.

Fájlok feltöltéséhez az <input type="file" name="NÉV" /> használható.

Tárolhatunk olyan információkat is az <input type="hidden" name="NÉV" value="ADAT" />-tal, amik rejtve maradnak a felhasználó elől. (Pl. sorszám, aktuális dáum...)

Ritkán, de szükség lehet a fent említett szöveg beviteli mezők kijelölésének letiltására illetve módosításának tiltására. Előbbit a disabled="disabled", utóbbit a readonly="readonly" produkálja. Érdekességként említeném még, hogy itt is használható a hivatkozásoknál már tanult tabindex és accesskey, továbbá lehetőség van még hogy csak bizonyos típust fogadjon el az adott input a accept-tel. Pl.: csak szám, stb.

KódTesztelő a gyakorláshoz

A fent említett beviteli elemekhez kapcsolhatunk egy magyarázószöveget a <label for="AZONOSÍTÓ">...</label> címkével. Az azonosítónak egyeznie kell a beviteli mező id azonosítójával. Így helytől függetlenül összefűzhető a kettő. (A szövegre kattintva a kijelölés a bevitelre ugrik.) Vagy a for-t elhagyjuk és a Tag-ek közé, a szöveg mellé tesszük a beviteli mezőt is.

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás