Kérdôívek a HTML dokumentumban
Egy weblapon kérdõíveket is közzé tehetünk, amelyek használata első pillantásra nem feltétlenül egyszerű!A <FORM METHOD="mód" ACTION="mit csináljak vele"> és a </FORM> közötti utasítások határozzák meg az ûrlapot.
- Az ACTION határozza meg a feldolgozást végzõ programot. Ez többnyire a kiszolgáló szerverén a /cgi-bin/ könyvtárban van, de lehet E-mailben is elküldeni. Ez utóbbi sokkal egyszerübb és nem kell hozzá semmilyen feldolgozó-program. Olvasása a legegyszerűbb szövegszerkesztövel (értsd: NotePad/Jegyzettömb) is lehetséges! Ha mindenáron egy feldolgozó-programot kell megcímezni, akkor kiterjesztése többnyire PHP vagy ASP szokott lenni. Vigyázat! Az ilyen programok írása nem feltétlenül egyszerű!
Minta levélküldésre: <ACTION METHOD="mailto:hivatalos@tferi.hu">
Minta feldolgozó-programra: <ACTION METHOD="feldolgoz.php"> - A METHOD a kitöltött ûrlap továbbítási módját határozza meg. Ez lehet GET (Hozzáfûzi az ûrlapot az url-hez - idõnként túl hosszúra nyúlhat az url!), illetve POST (adatcsomagban - biztonságos!)
- Érdemes használni POST adatküldés esetén az ENCTYPE="TEXT/PLAIN" paramétert, mert így tapasztalatom szerint minden levelezõprogram jól megérti a küldött adatokat, még az egyébként igen kényes www.freemail.hu is!
- Az <INPUT NAME="név" TYPE="típus" ALIGN="igazítás"> utasítással határozható meg egy kitöltendô ûrlapmezô.
- A NAME természetesen a mezônév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. Ez gyakorlatilag szabadon megválasztható, de javasolt a klasszikus DOS szabványait megtartani és nem túl sokat variálni a nevekkel. Tapasztalatom szerint nem minden E-mail-en elküldött ûrlap jön át tökéletesen, ha túl sok a magyar elnevezés.
- Az ALIGN természetesen igazítást jelent. Lehetséges értékei: left, right, center.
- Itt is használható a TITLE, mely itt is az egér hatására megjelenő szöveget jelenti. Tapasztalatom szerint bonyolultabb űrlapoknál sok mező rossz kitöltése elkerülhető pár TITLE tag-gel.
- A TYPE pedig az adattípus, melyet vár a beviteli mezô. Lehetséges típusok:
TEXT -szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN-rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - megsemmisítõ (inicializáló) gomb, BUTTON - egyéb nyomógomb.
Az <INPUT> utasításban további opciók is szerepelhetnek, a fô opciók értékeitôl függôen: - A VALUE kiegészítô opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mezô. Értékét nem kell megadni.
- TEXT típusú mezô esetén egy további opció, a SIZE="méret" opció határozza meg az ablak szélességét, a MAXLENGTH="érték" pedig a maximális hosszt. Lehetséges paraméter a READONLY, mley nevébõl adódóan csak olvashatóvá teszi a file-t.
- A CHECKBOX és a RADIO típusú mezôk további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként.
- A RANGE típusú mezô esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, a MAX="maximum" és a MIN="minimum" további opciókkal.
- A FILE típusú mezôben megadott fájl az ACCEPT kiegészítô opcióval megadott MIME módon csatolódik az elküldendô kérdôívhez. (Megjegyzés: Egy Browse nyomógombbal támogatott fájlkeresô-ablakból lehet a fájlt kiválasztani.)
- A SUBMIT és a RESET gombokhoz tartozó kiegészítô opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az ûrlapadatokat a kérdôív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezôket.
- A BUTTON gombot nem feltétlenül kell használni, mivel gyakorlatilag semmilyen szerepe nincsen!
- Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg"> és a </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit megadott szélességben és sorban. A VALUE az alapértelmezésként megjelenítendô szöveget adja meg.
- Egy kérdésre adandó válasz egyszerû - menübõl történô - kiválasztását teszi lehetôvé a kérdôíven a <SELECT NAME="név" SIZE="sor"> és a </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg. Az OPTION fontos paramétere a VALUE="érték", ami a szöveges/karakteres mezõknél igen hasznos lehet. Érdemes használni, de nem szabad egy kérdõíven túl sok választást megadni, mert akkor tapasztalatom szerint az internetes felhasználó nem hajlandó végigcsinálni a kérdõívet.
- A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a SELECT-ben választható menüpontok egy szkrollozható menüben. Hiánya esetén, hagyományos legördülô menübôl lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhetô egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást!
- Érdekes paraméterként lehet alkalmazni az ACCESSKEY=gomb-ot, amelynél a böngészõben lehet megadni az ûrlapra ugráshoz használt ALT+gomb kombinációt!
- Használható a DISABLED is, ami az éppen aktuális elem aktív használatát tiltja le.
- Érdemes elgondolkozni az AUTOCOMPLETE="ON", illetve "OFF" használatán egyes szöveges mezőknél, persze a jelszómezőket kivéve. Nevéből érthetően ez engedélyezi a mező automatikus kitöltését, ha már a felhasználó járt ott!
- Lehetőségként felmerülhet, hogy alkalomadtán el kell rejteni a fókuszt, magyarul azt a helyet, ahová először írni lehet. (A dolog értelme: a felhasználónak muszáj legalább egyet kattintania az űrlap kitöltése előtt!)
Ezt a HIDEFOCUS="true" értékkel tehetjük lehetővé. Alapértelmezésben a fókusz látható, azaz HIDEFOCUS="false". - Itt is felhasználható, igény szerint akár elemenként is a LANG="nyelvi_kód". A hazánkban használt legfontosabb nyelvi kódok:
hu = Hungarian/Magyar en = English/Általános angol en-us = English - United States /Amerikai angol de = German - Standard/Általános német de-at = German - Austria/Osztrák német ro = Romanian/Román ru = Russian/Orosz cz = Czeh/Cseh
A következõ példa egy nem kifejezetten egyszerû kérdõívet mutat be: (minta32.html)
| <html> <head> <meta http-equiv="Content-Language" content="hu"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Tamás Ferenc</title> </head> <body> <form method="post" action="MAILTO:ferenctamas@freemail.hu" enctype="text/plain"> <h1 align="center">Tamás Ferenc</h1> <h2 align="center">A számítástechnika alapjai CD-ROM megrendelõlapja</h2> <h3 align="center"><span style="background-color: #FF0000">EZ CSAK MINTA, NEM MEGRENDELÕLAP!</span></h3> <p align="center"> </p> <div align="center"> <center> <table border="1" width="75%"> <tr> <td width="60%"> <input type="checkbox" name="Konyv1" value="ON" checked disabled> Tamás Ferenc: A számítástechnika alapjai könyv</td> <td width="15%" align="right">4.777 KByte</td> </tr> <tr> <td width="60%"> <input type="checkbox" name="PPT" value="ON" checked disabled> Kiváló minõségû bemutató PowerPoint fájlok</td> <td width="15%" align="right">300.000 KByte</td> </tr> <tr> <td width="60%"> <input type="checkbox" name="Free" value="ON"> Ajánlott ingyenes programok</td> <td width="15%" align="right">150.000 KByte</td> </tr> <tr> <td width="75%" colspan="2"> <p align="center"><b> <input type="checkbox" name="Rendel" value="Rendel" checked> IGEN, megrendelem a fenti feltételekkel a CD-ROM-ot és vállalom a kifizetést az általam választott módon!</b></p> </td> </tr> <tr> <td width="60%">Megrendelõ neve</td> <td width="15%" align="right"> <input type="text" name="Név" size="40" value="Teljes név"></td> </tr> <tr> <td width="60%">Irányítószám</td> <td width="15%" align="right"> <input type="text" name="Irszam" size="20" value="8000"></td> </tr> <tr> <td width="60%">Város</td> <td width="15%" align="right"> <input type="text" name="Város" size="37" value="Város"></td> </tr> <tr> <td width="60%">Felhasználási terület(ek)</td> <td width="15%" align="right"><select size="2" name="MitCsinal" multiple> <option selected value="Önálló tanulás">Önálló tanulás</option> <option value="Kiscsoportos tanfolyam">Kiscsoportos tanfolyam</option> <option value="Általános iskola">Általános iskola</option> <option value="Középiskola">Középiskola</option> <option value="Felsõoktatás">Felsõoktatás</option> <option value="Egyéb">Egyéb</option> </select></td> </tr> <tr> <td width="60%">Fizetési mód</td> <td width="15%" align="right"> <input type="radio" value="posta" name="Hogyan" checked>Postai utánvétellel <p><input type="radio" value="bank" name="Hogyan">Banki átutalással</td> </tr> <tr> <td width="60%"> Megjegyzés</td> <td width="15%" align="right"> <textarea rows="2" name="S1" cols="20"></textarea></td> </tr> <tr> <td width="75%" colspan="2" align="center">A CD-ROM ára <b>2000 Ft + ÁFA</b>, valamint <b>300 Ft</b> csomagolási és postaköltség! <h3><input type="submit" value="Megrendelem!" name="Elõfizetés"> Mindösszesen: <b><span style="background-color: #FF0000">2800 Ft</span></b> <b> </b><input type="reset" value="Kilépés" name="Kilépés"></h3> </td> </tr> </table> </center> </div> </form> </body> </html> |
Még valami: ne ilyen szintű legyen az Ön első kérdőíve, kedves olvasó!
Csak lassacskán haladjon a pofonegyszerűtől a nehezebb felé!
11. feladat: Készítsen egy kérdőivet, mely egy E-mail címre postázza el a látogató megkérdezett nevét! Minta: fel11.html
12. feladat: Az előző kérdőívet bővítse úgy, hogy egy újabb 4 soros szövegmezőbe lehessen beírni a felhasználó teljes postacímét! Minta: fel12.html
13. feladat: Az előző kérdőívet bővítse úgy, hogy a felhasználótől kérje be a nemét is egy választómezővel (RADIO BUTTON)! Minta: fel13.html
14. feladat: A előző kérdőívet bővítse egy legördülő mezővel, melynek segítségével a felhasználó megadhatja életkorát évtizedekben! Minta: fel14.html
0 megjegyzés:
Megjegyzés küldése