9. fejezet: Keretek (frame-ek)

A HTML-oldalak egyik leghasznosabb része a keretek (angolul: FRAME-ek) használata. Ezt a szomszédos dokumentum is bizonyítja. (minta26.html) A felépítése gyakorlatilag igen egyszerû, mivel a két keret külön-külön is felhasználható és minden hivatkozhat mindenre. Amint ez a forráskódban is látható, a kereteket két tag: a <FRAMESET> és a <FRAME>. Természetesen a <FRAMESET>-ben százalékosan, illetve pixelesen is megadható a keretek aránya. Szükség esetén több keret is egymásba ágyazható. A vízszintes felosztáshoz a "rows" szócskát kell használni, míg a függõleges felosztáshoz a "cols" szükséges. <HTML>
<FRAMESET rows="50%,50%">

<FRAME SRC="fel1.html">

<FRAME SRC="fel2.html">

</FRAMESET>

</HTML>
  • Egyéb paraméterek is lehetségesek: A BORDER=n paraméter a keretek közötti helyet adja meg képpontban (=pixelben). Alapértelmezés: 1.
  • A keret színét a BORDERCOLOR="színkód" határozza meg, amint ezt előbbiekben is láthattuk.
  • Ha nem szeretnénk keretvonalat, akkor a FRAMEBORDER="no" paraméter kell. Vigyázat! Így a lapunk könnyen áttekinthetetlen lehet! (Ellentéte: FRAMEBORDER="yes")
  • Ha szeretnénk felkészülni régebbi böngészõkre is (Explorer 3-asig és Netscape 2-esig bezárólag), akkor érdemes használni a <NOFRAMES> taget is, melynek záróértéke természetesen a </NOFRAMES>, amint ez az alábbi példában is látható: (minta27.html). Tény, hogy a mai, modern böngészőkben erre már nem kell felkészülni!
<HTML>
<FRAMESET COLS="100,*">

<FRAME SRC="fel1.html">

<FRAME SRC="fel2.html">

<NOFRAMES>

<BODY>

Hát ez nem nyert!

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>
Ha valaki szeretne felkészülni ilyen igényekre is, akkor kénytelen elkészíteni a keretek nélküli verziót is - sajnos. 

Még valami: ha nem feltétlenül kell, akkor ne adjuk meg minden frame vastagságát - fõként pixeles értéknél tilos ezt tenni! Ilyenkor érdemes a bal oldali példa 2. sorában látható csillagot (*) használni, ami a jó öreg DOS-os hagyományok szerint a maradék részt jelenti, azaz a mindent.
  • Persze lehetõség van arra is, hogy az egyes keretekkel külön is trükközzünk. A legegyszerûbb a scrollozás. A paraméter lehetséges értékei: SCROLLING = NO, YES, illetve AUTO. (NO = tilos a scroll; YES = mindig megjelenik a gördítõcsík; AUTO = Csak akkor jelenik meg a csík, ha az szükséges - ez az alapérték.)
  • Az SRC után természetesen a forrásfile-t kell írni.
  • A NORESIZE (külön érték nélküli) paraméter megakadályozza, hogy a felhasználó átméretezhesse a weblap kereteit. Ellentéte a RESIZE.
  • Itt is van lehetõségünk a keret színének megadására a BORDERCOLOR="színkód" (vagy név) segítségével, de véleményem szerint szerencsésebb a FRAMESET tagben a szín megadása.
  • A MARGINHEIGHT=pixelszám segítségével az egyes keretek tetejétõl és aljától való távolságot lehet megadni.
  • Hasonlóan a keret bal és jobb oldalától való távolságot a MARGINWIDTH=pixelszám paraméterrel állíthatjuk.
  • A TITLE="kiírandó duma" paraméter hatására a beírt szöveg (jelenleg: kiírandó duma) meg fog jelenni a tippek sorban a böngészõ legalján, ha az egérrel föléje megyünk.
  • A legfontosabb paraméter még hátravan. Ez a NAME="ablak_neve". Sok értéke van, melyek azt határozzák meg, hogy hová kell megnyitnia az új file-t egy rákattintáskor. Figyelem! Ezt csak úgy tudjuk használni, hogy a megnyitásra használt <A HREF="fileneve.html"> tagbe bele kell illeszteni a TARGET="ablak neve" paramétert is! Az ablakokat tetszõlegesen el lehet nevezni és érdemes is ezzel élni, ha elég bonyolult a lap hivatkozása. Az ablakok lehetséges - beépített - nevei: "_self" = önmagába nyitja meg; "_blank" = egy tiszta, névtelen lapban nyitja meg; "_parent" =  a lapot a közvetlen szülõjében nyitja meg, ahonnan eredtek a linkek; "_top" = az ablak teljes méretében nyitja meg az új linket. A félreértések elkerülése végett szeretném kihangsúlyozni, hogy a beépített nevek elõtt egy alsó vízszintes vonás van! (Általában: jobb SHIFT és a mellette lévõ mínusz a billentyûzeten.)

Összegezve:

A "_self" paraméter esetén a megfelelõ frame helyébe töltõdik az oldal.
A "_parent" paraméter esetén a megfelelõ frame fölé töltõdik az oldal.
A "_top" esetén legfölülre.
A "_blank" paraméter esetén egy vadonatúj böngészõ ablakába.
Az "ablakneve" paraméter használata esetén a megadott nevű keretben nyílik meg a hivatkozás.
A "_search" paraméternél a link a böngésző kereső-paneljába töltődik be. Minimum Explorer 5-nél használható.
A "_media" esetén a link a böngésző MediaBar nevű részébe (magyarul: multimédia panel) töltődik be. Minimum Explorer 6-nál használható.
7. feladat: Készítsen egy ilyen kétoldalon elhelyezkedő keretrendszert. Minta: fel7.html.

Ahogy haladott előre az élet (meg az egyre újabb böngésző-szabványok), úgy változik a HTML is. Ennek egyik áldozata lett a FRAME. Helyette bejött az iFRAME. Használata végtelen egyszerű, mivel egy virtuális keretet hoz létre a weblapon belül. Például a következő kódot kell beépíteni a weblapba:

<HTML>
...
<IFRAME SRC="http://www.tferi.hu/"></IFRAME>
...
</HTML>

 

Fontosabb paraméterek:

- ALIGN: (left/right/top/middle/button): rendezés a szokott helyre. Elavult. A DIV használata javasolt helyette.
- FRAMEBORDER: (1/0): legyen keret (1) vagy nem (0).
- HEIGHT: (pixel vagy %): A keret magassága képpontban vagy %-ban.
- LONGDESC: megadja azt az oldalt, ahol az iFRAME hosszabb leírása található.

- MARGINHEIGHT: margó magassága képpontokban.
- MARGINWIDTH: margó szélessége képpontokban.
- NAME: a keret neve. Ezzel lehet hivatkozni rá linkeléskor!
- SCROLLING: (yes/no/auto): a keret görgethetősége.
- SRC (URL): megadja az IFRAME keretbe beépített dokumentum címét.
- WIDTH: (pixel vagy %): a keret szélessége képpontban vagy %-ban.


10. fejezet: Egyéb formázások

Szövegek dekorálása

Természetesen egyéb formázási lehetõségeink is lehetnek. Az alábbi néhány sor csak pár lehetõséget mutat be:
<ADDRESS>

Postacímet jelöl ki.


</ADDRESS>
<BLINK> Ez itt villog, de csak Netscape-ben! </BLINK>
<BIG> Nagyobb karakterméret </BIG>
<BLOCKQUOTE>

Szövegblokk - érdemes kipróbálni!

</BLOCKQUOTE>
<CITE> Idézet - ritkán használható</CITE>
<CODE> Programkód - a más betűstílus miatt érdemes használni</CODE>
<COMMENT> Kommentálás - semmi hatással nincs a dokumentumra. Nem íródik ki </COMMENT>
<DFN>Definált szöveg </DFN>
<EM> Kiemelés - ritkán használt</EM>
<KBD> Billentyûzetrõl begépelhetõ input írógép stílussal </KBD>
<S> Keresztülhúzott szöveg</s>
<SAMP>

Irodalmi szövegrészlet, illetve mintakarakter

</SAMP>
<SMALL> Kisebb betûméret </SMALL>
<STRONG> Vastagított megjelenés </STRONG>
<SUB> Alsó index </SUB>
<SUP> Felsõ index </SUP>
<VAR> Változónevet jelöl ki </VAR>
<TT> Írógépkarakterek</TT>

Marquee

Érdekes, de sajnos csak az Explorerben megjelenõ lehetõség a szövegek feliratszerû mozgatása a <MARQUEE> és a </MARQUEE> között. Előfordulhat, hogy egyes alternatív böngészőkben is megjelenik a hatás kívánságunk szerint, de ez nem túl valószínű!
Általában akkor lehet látványos az effektus, ha az ablak nagyobb részében látható lesz a mozgás, mint a lenti példában: (minta28.html)

<HTML>
<Marquee behavior=alternate bgcolor="teal" dataformatas=text loop=3 width="75%" title="dumálás">

Ez a duma!

</marquee>

</HTML>

Pár paraméter:
BEHAVIOR =alternate/scroll/slide - mozgásirány = balra-jobbra/átlapozás (scroll) a direction által meghatározott irányba/a szöveg levágása az elõzõ mintájára
BGCOLOR = háttérszín kódja vagy neve
DATAFORMATAS = text/html - adatformátum - sima szöveg/html
DIR = ltr/rtl - szöveg olvasási irányának meghatározása; ltr=balról jobbra (alapértelmezés); rtl = jobbról balra
DIRECTION = left/right/up/down - scrollozás iránya - bal/jobb/fel/le; Alapértelmezés: left
HEIGHT = "n" - Hány %-ot, vagy képpontot foglalhat el a HTML-tag a képbõl.
HSPACE = "n" - Mekkora legyen a HTML-tag mellett a szabad hely vízszintesen?
VSPACE = "n" - Mekkora legyen a HTML-tag mellett a hely függõlegesen?
LOOP = "n" - Hány ismétlés után álljon le a mozgatás. (Végtelen = -1)
SCROLLAMOUNT = "n" - Hány pixel elcsúszással rajzoljon ismét a MARQUEE.
SCROLLDELAY = "n" - Hány millimásodperc után rajzolja újra a HTML-taget.
TITLE = "cím" - Mi jelenjen meg, ha az egeret fölé visszük?
WIDTH = "n" - Az ablak hány százalékában jelenjen meg a MARQUEE.
8. feladat: Készítsen egy jobbról balra 4-szer elhaladó pár szavas szöveget, amely az aktuális ablak 65%-át foglalja el, de az egész alakzat középre legyen igazítva és sárga háttere legyen. (Minta: fel8.html)

9. feladat: Ugyanezekkel a paraméterekkel készítsen egy újabb objektumot, melyben egy weblap linkje göndül tova. (Minta: fel9.html)

Basefont

Fontos karakterformázási lehetõséget tartalmaz a <BASEFONT> tag, mely egy dokumentum alapvetõ karakterkészletét tartalmazhatja, amelyhez képest a többi karakter hogyan nézzen ki. Lehetséges paraméterei - főleg az Explorerben: COLOR (szín) és FACE (karakterkészlet neve). A főbb böngészõk ismerik a SIZE (méret) paramétert. További segítséget jelenthet a következõ file (minta29.html):

<HTML>
<basefont color="blue" face="Arial, Courier" size="4">

Ez lesz az alapértelmezés!

</basefont>

</HTML>

BGSound

Csak az Explorer által használt lehetõség a <BGSOUND> (háttérhang). Itt hangkártyával rendelkezõ gép segítségével lejátszathatjuk az oldalhoz rendelt háttérhangot. Választható kiterjesztések: WAV, AU, MID és CD. Kötelezõ paraméter a forrás megjelölése (SRC). Lehetséges paraméter az ismétlések számát szabályozó LOOP=n, melyben n egy sorszám. Abban az esetben, ha n = -1, akkor végtelenszer ismétlõdik a háttérhang. Érdekes lehetõség a BALANCE=n paraméter, ahol n -10000 és +10000 közötti érték. Ez határozza meg a bal és jobb oldali hangszórók közti hangosság értékét. Alapértelmezés: 0. (Egyenlõ hangosság.) További hasonló paraméter a VOLUME=n, ami neve alapján sejthetõen a hangerõért felelõs. n értéke -10000 és 0 között lehet, ahol 0 a legnagyobb hangerõ.


11. fejezet: BODY és META

Az eddigi képnél kicsit bonyolultabb, árnyaltabb fogalmazás szükséges a teljes értékû HTML lapokhoz. Ezentúl a dokumentum sablonjához a következõt ajánlom: (minta30.html)

<HTML>
<HEAD>

<TITLE>Ez a cim</TITLE>

<META name="description" content="Lap leirása">

<META name="keywords" content="Kulcsszavak">

<META name="generator" content="Mivel lett csinálva">

<META name="author" content="Szerzõ neve">

<META name="robot" content="index,follow">

<META http-equiv="Expires" content="Mon, 27 Nov 2000 14:25:27 GMT">

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">

Na, és csak itt jön a lényeg!

</BODY>

</HTML>
Látható, hogy maga a <HTML>-tartomány két részre oszlik. Van egyrészt egy fejléc<HEAD> és </HEAD> között, valamint egy szövegtörzs a <BODY> és a </BODY> között. Eddig csak ez utóbbi került sorra. A fejléc megléte nem kötelezõ, de sokat tud segíteni a következõ elemekkel:
<TITLE> A Dokumentum címe </TITLE>

<META> kezdetû elemeknek nincsen zárórésze és nem is jelennek meg, de annál hasznosabbak! Használata kizárólag a fejlécben engedélyezett. Fõbb paraméterei már a bal oldali kódban is láthatóak. Szokások:
- Description: pár szavas leirás - õszintén!
- Keywords: A lapra jellemző kulcsszavak a keresõrobotoknak.
- Generator: Milyen programmal lett a lap elkészítve. (Pl. Jegyzettömb)
- Author: A szerzõ neve, esetleg E-mail címe!
- Robots: Parancsok a keresőrobotok számára. Lehetséges értékek: "index/noindex" indexelhető vagy nem; "follow/nofollow" követhetők a hivatkozások vagy nem. Mivel úgyis mindkettőt használni kell, ezért célszerű helyettük írni a "deny" szót (tilos mindkettőt), illetve az "all" szót, amely mindkét tevékenységet engedi.
- Expires: Lejárat ideje. Ha pl. csak minden hónap elsején frissíti a lapját, akkor érdemes a mindig következő frissítési dátumot beírni. Így közvetlenül a Proxy-kből is le tud töltődni a lap. Ha mindig a legfrissebb tartalmat akarja láttatni, akkor időpont helyett egyszerűen a "NOW" (=most) szót kell beírnia.
Valamennyi <META name=...> kezdetû tagben használható a lang="en", vagy a lang="hu" paraméter, ami a nyelvet jelöli. Indexelni például nem bûn angolul akkor is, ha a lap kizárólag magyar!

- A HTTP-EQUIV egy már lehetõséget rejt. Ugyanis itt megadhatjuk a böngészõnek, hogy az adott dokumentum mikor veszti érvényét. Így ha a böngészõ újabb parancsot kap a dokumentum letöltésére, akkor ha a cache-ben eltárolt határidõ elõtt van még a weblap, akkor nem bajmolódik a letöltéssel, hanem beolvassa magából a gépbõl és már készen is van. Célszerû egy weblapnál nem túl távoli idõpontot megadni!
- A másik sor (<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">) pedig a magyar karakterkészlet használtára keszíti elõ a gépet.
- Lehetõség nyílik arra is, hogy egy dokumentumot állandóan frissítsünk. A <META HTTP-EQUIV="REFRESH" CONTENT=2> használata például 2 másodpercenként frissít egy weblapot! (Tõzsdei árfolyamoknál még jól jöhet.)
- Több értelme lehet egy másik webhely automatikus betöltésének. A <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://poszter.ini.hu/"> tag például az URL-ben megadott webhelyet hozza be 5 másodperc elteltével!
- Szintén érdemes használni a <META HTTP-EQUIV="Reply-to" content="Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát."> taget is, ami a lehetséges válaszcímet adja meg.
Egy másik fontos elem a <BODY> és a </BODY> közé ékelt szövegtörzs nyitóeleme. Rengeteg lehetõséget tartalmaz és igen sokféleképpen lehet alkalmazni. Lehetséges paraméterei közül csak a lényegesebbek kerülnek itt felsorolásra:
- BGCOLOR="színkód" - background color; A háttérszín neve vagy kódja.
- ALINK="színkód" - active link; Az éppen aktív link(ek) színkódja vagy neve.
- VLINK="színkód" - visited link; A már meglátogatott linkek színkódja vagy neve.
- LINK= "színkód" - link's color. A még meg nem látogatott linkek színkódja vagy neve.
- TEXT="színkód" - text color; A sima (linkek nélküli) szöveg színkódja vagy neve.
- BACKGROUND="url" - Háttérkép neve (esetleges útvonallal).
- BGPROPERTIES=FIXED - Vízjel megadása. Ez így nem gördíthető!
- TITLE="szöveg" - Ez a szöveg lesz kiírva az egérmutató fölé (mintegy segítségként), ha az ablak fölé ér.
- NOWRAP="TRUE" - Szöveg nem törhető meg automatikusan. Alapértelmezés: NOWRAP="FALSE".
- SCROLL="NO" - Eltünteti az oldalsó scrollozó-csíkot. Alapértelmezés: SCROLL="YES". Lehetséges érték még: "AUTO" (automatikus).
- BOTTOMMARGIN=n - Alsó margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- TOPMARGIN=n - Felsõ margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- LEFTMARGIN=n - Bal oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
- RIGHTMARGIN=n - Jobb oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
További elemek is lehetnek a weblap fejlécében:

  • <ISINDEX> : Nem tartalmaz semmi szöveget és nincsen záróeleme sem. A böngészõ számára jelzi, hogy kereshetõ (indexelhetõ) dokumentumról van szó. Javasolt helyette a "robots" META-tag használata.
  • <LINK> : Jelzi a dokumentum kapcsolatát más dokumentumokkal, stíluslappal címszalaggal, stb. Kell záróelem. Paraméterei: DISABLED - megtiltja az elem használatát; HREF="url" - élõkapocs létrehozása; MEDIA="SCREEN" vagy MEDIA="PRINT" vagy MEDIA="ALL" - meghatározza a dokumentum kimenetét, lehetõségek: képernyõ,nyomtató, minden (alapértelmezés)

12. fejezet: Térképek

Ha egy bonyolultabb képünk van rengeteg utalással és felirattal és/vagy rajzzal, akkor célszerû egy olyan rendszert kialakítani, amelynél egyes részekre kattintva nyitódhat meg egy újabb kapcsolat. Mintaképpen nézzük meg a következõ képet és file-t: (minta31.html)

map.gif <HTML>
<IMG src="/map.gif" usemap="minta31.html#terkep1">

<MAP name="terkep1">

<area shape="rect" coords="25,12,114,32" href="/minta1.html">

<area shape="rect" coords="25,33,114,47" href="/minta2.html">

<area shape="rect" coords="25,48,119,70" href="/minta3.html">

<area shape="rect" coords="25,71,119,88" href="/minta4.html">

<area shape="circle" coords="200,212,50" href="/minta5.html">

<area shape="poly" coords="20,200,20,250,80,250,140,200,20,200" href="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.">

</MAP>

</HTML>

(Megjegyzés: a fenti kép a PhotoShop 5.0 és a CorelDraw 9 programokkal készült!)
A dolog lényege, hogy a térképnek és a feldolgozott utalásoknak nem kell azonos file-ban lennie, de lassabb kapcsolatú gépek miatt célszerû azonos file-ba tenni a két anyagot. Az elsõ fontos utasítás az IMG SRC-ben lévõ USEMAP paraméter. Itt meg kell adni a térképfeldolgozó file, valamint a térkép helyét.
A térkép feldolgozásához kell a <MAP name="térképneve"> tag. A konkrét élõkapcsokat az <area> tag szabályozza. Paraméterei:
- shape = rect (téglalap), circle (kör), poly(polygon), default (mindenhol máshol - egyéb helyen)
- coords = koordináták. Téglalap esetén két átellenes saroké, kör esetén a középpont és a sugár, poligon esetén sorban a sarkok (az utolsó legyen azonos az elsõvel!).
- href = élõkapocs. Teljes utalás is lehet, nem csak egyszerû file.
- alt = alternatív szöveg.
- target = Megnyitandó file helye (pl.) megosztás esetén.
- title = az egérmutató hatására kiírandó szöveg.
- nohref = ennek a területnek nincsen élõkapcsa.
Minták: Kapcsolatok (4. fejezet).

10. feladat: Nem feltétlenül könnyû egy ilyen térkép (elsõ) elõkészítése, de némi próbálkozás után a fenti minta alapján sikerülhet!


13. fejezet: Kérdôívek a HTML dokumentumban

Hadd kezdjem ezúttal egy megjegyzéssel: a kérdőívek helyes összeállítása és megfogalmazása a gyakorlattal rendekelzőknek nem túl nehéz, csak időigényes feladat. Én magam is úgy szokta elkészíteni őket, hogy a egy weblapszerkesztővel előbb előkészítem a terepet (bocsánat, a kérdőívet), majd utána kezdem el egy kódszintű szerkesztővel a finomhangolást!

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 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

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õsleg ne csak a saját gépünkörõl, hanem minél több helyrõl. Ha lehetõségünk van rá, akkor érdemes több verziójú Explorerben, Netscape-ben és minél több operációs rendszerben is kipróbálni. A rendszerek közül ne maradjon ki a Linux 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: (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: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">&nbsp;</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&nbsp; utánvétellel

<p><input type="radio" value="bank" name="Hogyan">Banki átutalással</td>

</tr>

<tr>

<td width="60%">&nbsp;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">&nbsp;

Mindösszesen: <b><span style="background-color: #FF0000">2800 Ft</span></b>

<b>&nbsp;</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