15. fejezet: Kérdőív a HTML dokumentumokban
Hadd kezdjem ezúttal egy megjegyzéssel: a kérdőívek helyes összeállítása és megfogalmazása a gyakorlattal rendelkezőknek nem túl nehéz, csak időigényes feladat. Én magam is úgy szokta elkészíteni őket, hogy egy weblapszerkesztővel előbb előkészítem a kérdőívet, majd utána kezdem el egy kódszintű szerkesztővel a finomhangolást!
Még valami: a sima HTML-alapú kérdőívek felett elmúlt az idő. Helyette a gyakorlatban DHTML-t, vagy PHP-t vagy valami egyéb technológiát szoktak használni.
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:Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.">
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 itt is 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, amely 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="magassá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 folyamatosan gördíthető 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
További nyelvi kódok ebből az angol nyelvű táblázatból szedhetők ki: htmllang6.html.
Egy apró tanács a komolyabb kérdőívek kitöltése előtt: mindig többszörösen próbáljuk ki a kész kérdőívet. Lehetőleg ne csak a saját gépünkről, hanem minél több helyről. Ha lehetőségünk van rá, akkor érdemes több böngészőben és minél több operációs rendszerben is kipróbálni. A rendszerek közül ne maradjon ki a Linux, illetve az Android sem! Ha saját magunknak ez gondot okoz, akkor kérjük meg ismerőseinket az ellenőrzésre. "Éles" megrendelőívvel SOHA ne kísérletezgessünk, csak az összes próba után!
A következő példa egy nem kifejezetten egyszerű kérdőívet mutat be - a megrendelőlap már nem hatályos! (htmlpelda29.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: Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát." 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>
<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é!
25. feladat: Készítsen egy kérdőívet, mely egy E-mail címre postázza el a látogató megkérdezett nevét!
26. 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!
27. 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)!
28. 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!