Hirdetés:
Amit a HTML-ről feltétlenül tudni kell!
tutorials, Írta: pepe, Hozzászólások száma: 0 2010.02.18.
A HTML a HyperText Markup Language (hiperszöveg leírónyelv) rövidítése. Az a nyelv, amelynek segítségével weboldalakat lehet létrehozni. Szabványosítását egy független szervezet, a World Wide Web Consortium (W3C) végzi. A W3C az interneten elérhető a http://www.w3c.org címen.
A nyelv jelenleg a 4.0 változatnál tart, amely 1997-ben jelent meg. Az oldal végső formája a böngészőben jelenik meg (alakul ki), mert az értelmezi ezeket a megjelenítést szabályozó elemeket. Egy HTML-oldal folyamatos ASCII-szöveget tartalmaz, amelyet az oldal tartalma és a megjelenítéséhez szükséges elemek vegyesen alkotnak.
Hirdetés:
Ezek az elemek a tag-ek (ejtsd: “tegek”). A tag-eket tulajdonságokkal lehet ellátni, ezek az attribútumok. Formailag a tag-eket az attribútumaikkal együtt hegyes zárójelek közé < > kell írni, pl. <HR>. A tag-ek többsége két részből áll: egy nyitótag-ből pl. <HTML> és egy zárótag-ből pl. </HTML>, amelyek között a formázandó, megjelenítendő stb. tartalmi rész van (az, amire a tag vonatkozik, ill. amit megjelenít). A tag-eket egymásba lehet ágyazni.
Helyesírás:
* kis- és nagybetű nem megkülönböztetett,
* szövegtagolás: a forráskódban található ismételt szóközöket és sortöréseket nem veszi figyelembe a böngésző. (Csak egy szóközt fog megjeleníteni, mindegy, hogy mennyi szerepel a forrásban).
Egy HTML oldal felépítése:
<HTML> .. </HTML> meghatározza a HTML dokumentumot. Az oldal teljes egésze e tag-ben van.
<HEAD> .. </HEAD> megadja a HTML dokumentum fejrészét. A fejrészben olyan ún. metainformációk találhatók (ld. később), amelyek az oldal készítőjére, formátumára, stb. vonatkoznak és nem fognak megjelenni a böngészőben. Egyetlen kivétel a <TITLE> .. </TITLE>, ami az oldal címét adja meg és a böngésző címsorában jelenik meg.
<BODY> .. </BODY> az oldal törzse. Az oldalon megjelenő alkotórészeket ide kell beágyazni.
Egy alap HTML oldal elkészítése
Pl.:
<html>
<head>
<title>Az oldal címe</title>
</head>
<body>
Ez az első oldalam!
</body>
</html>
Speciális elemek a fejrészben
DOCTYPE: pl. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> megadja az oldal formátumát, HTML verziószámát stb.
META: olyan oldalelemek, amelyek az oldal leírását, besorolását segítik, készítőjét azonosítják, stb. Nem jelennek meg a böngészőben (csak forráskód nézetben látszanak).
formátuma:
<META NAME="név" VALUE="érték" LANG="használt nyelv megadasa"
CONTENT="dok. tartalmara utal" HTTP-EQUIV="http valtozatra utal">
Példák:
Az oldal szerzője nevét és e-mail címét így adhatja meg:
<META NAME="AUTHOR" CONTENT="szerző neve">
<LINK
REV=”MADE” HREF=”mailto: nev@email.cím”>
Regisztrálás a keresőkben
Ha az oldalt regisztráljuk a keresőkben, a keresők az itt megadott kulcsszavak alapján fogják indexelni az oldalt (nem érdemes 25-nél több kulcsszót megadni). Ez elviekben azt jelenti, hogyha valaki a keresőbe beírja pl. a Dreamweaver szót (és ezt mi kulcsszóként megadtuk a frissen regisztrált oldalunkon), akkor a kereső találatainak listájában meg fog jelenni oldalunk a látogatónak. Pl.
<META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript,
webfejlesztés, webtervezés">
az előző helyett inkább angolul ugyanezt:
<META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript,
webdeveloping, webdesign">
vagy másképp:
<META name="keywords" lang="hu" content=" Dreamweaver, HTML, CSS,
JavaScript, webfejlesztés, webtervezés ">
<META
name="keywords" lang="en" content=" Dreamweaver, HTML, CSS, JavaScript,
webdeveloping, webdesign">
A keresés eredményének listájában a keresők a kulcsszó és az oldalak elérési útjai mellett azok rövid leírását is megjelenítik. Ehhez a description metaelemmel el kell helyeznünk oldalunk leírását (néhány mondatos ismertetését) a regisztrált oldal forrásában. Pl.
<META name="description" content="Dreamweaver leírás, HTML, CSS,
JavaScript segédletek, cikkek a webfejlesztés, webtervezés
témákban.">
Az oldal kódolási formátumának megadása
Erre a böngészőknek van szüksége, hogy a megfelelő kódtáblát használják az oldalak dekódolásakor, megjelenítésekor. Pl.
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-2">
Az iso8859-2 a magyar karakterkészlet beállítását jelenti.
Az iso8859-1 a latin1 karakterkészlet beállítását jelenti.
Az oldal tartalmának frissítése megadott idő lejárta után, illetve automatikus átirányítás létrehozása:
<META http-equiv="Refresh" content="5,
url=http://valahol.az.interneten.hu/">
(arra utasítja a böngészőt, hogy cserélje le 3 mp múlva a látott oldalt az általunk megadottra
<META http-equiv="Expires" content="Tue, 10 Apr 2001 12:00:00
GMT">
(megadhatjuk, hogy mikor veszti érvényét a dokumentum, ez most 2001 ápr. 12-ét déli 12 órát jelent, a greenwich-i idő szerint, vagyis Magyarországon 13 órát).
Az oldal legfontosabb tulajdonságai
Az oldal megjelenítendő tartalma a <BODY> és a </BODY> tag-ek között szerepel. Az oldal tulajdonságai, mint pl. háttérkép vagy háttérszín, hivatkozások, bet színe, margótávolságok stb. a <BODY> attribútumai.
Margók, háttérszín, háttérkép, linkek színének megadása:
<BODY TOPMARGIN=”felső margótávolság, csak Netscape-ben” LEFTMARGIN=”bal margótávolság, csak Netscape-ben”MARGINWIDTH=”margószélesség, csak Internet Explorerben” MARGINHEIGHT=”margómagasság, csak Internet Explorerben” BACKGROUND="háttérképfájl elérési útja és neve" BGCOLOR=”háttérszín” TEXT="betűszínkód" LINK="hivatkozások színe”ALINK="aktív linkek színe" VLINK=”látogatott linkek színe”>
pl. <body bgcolor="black" text="#CCCCCC" link="#33FF00" vlink="#33CC66" alink="#FFFFFF">
A színek megadás történhet angol nevükkel (pl. black), vagy RGB-értékükkel (pl. #000000, ami szintén a feketét jelenti). A hexadecimális értékeket megtalálhatjuk bármelyik jobb rajzolóprogramban (pl. Adobe Photoshop, Macromedia Fireworks stb.).
Szövegek formázása és tagolása
Bekezdések létrehozása: a kívánt bekezdést az oldal törzsrészében, vagyis a <BODY> után és a </BODY> előtt írjuk a <P> és </P> tag-ek közé! Pl. <P> Ez itt egy egész bekezdés.</P>
Ha függőlegesen igazítani szeretnénk a bekezdést, használjuk az ALIGN attribútumot. Pl.
<P ALIGN=”left”> Ez itt egy egész bekezdés balra
igazítva.</P>
<P ALIGN=”right”> Ez itt egy egész bekezdés jobbra
igazítva.</P>
<P ALIGN=”center”> Ez itt egy egész bekezdés középre
igazítva.</P>
<P ALIGN=”justify”> Ez itt egy egész bekezdés sorkizárt formában.
Ez itt egy egész bekezdés sorkizárt formában. Ez itt egy egész bekezdés
sorkizárt formában. Ez itt egy egész bekezdés sorkizárt formában. Ez itt
egy egész bekezdés sorkizárt formában.</P>
Ez utóbbi csak a 4-es HTML-ben jelent meg, ezért a meglehetősen régi böngészőkben nem fog működni. Az alapértezett a balra igazítás, vagyis ha nem adjuk meg az ALIGN attribútumot, a böngésző a szöveget balra fogja rendezni.
Sortörések: mivel a HTML forráskódban a begépelt szóközök és végejelek (vagyis ha az Entert leütjük) figyelmen kívül maradnak, egy sortörést a <BR> tag segítségével helyezhetünk el az oldalon. Pl.
Ez itt egy
<BR>
sortörés.
Ha azt szeretnénk, hogy a begépelt szöveg változatlan formában, vagyis a szóközökkel Enterekkel együtt jelenjen meg, helyezzük el a <pre> és a </pre> tag-ek (jelentése: preformatted, vagyis előformázott) között. Pl.
<Pre>Ez itten egy előformázott szövegrész lesz. Csak rövid szövegrészeknél használjuk.</pre>
Ha sordobás nélküli formázást szeretnénk, pl. hosszabb szövegekre, használjuk a <DIV> tag-et (az ALIGN attribútummal együtt is):
<DIV ALIGN=”center”> Ezt is középre igazítottuk, de nem követi
sordobás. </DIV>
Betűjellemzők megadása
A <FONT> tag segítségével megadhatjuk a betűcsaládot (egy konkrét betűtípus használata nem szerencsés, mert nem biztos, hogy a látogató gépén is telepítve van az adott fontkészlet), betűméretet, betűszínt. Formátuma:
<FONT FACE="név" COLOR="színkód" SIZE="szám">szöveg</FONT>
<font face="Verdana, Arial, Helvetica, sans-serif" font color="green"
size=”4”>Egy kicsit nagyobb betűs szöveg, ami Verdana (vagy Arial,
vagy Helvetica, vagy egyéb talnélküli) betűtípussal jelenik meg, ha az
telepítve van, zöld színben.</font>
A betűméret egy –7 és +7 közötti skálán állítható be. A böngészők által megjelenített alapértelmezett betűméret a 3-as, a nagyobb, vagy pozítív előjeles szám ennél nagyobb, a kisebb vagy negatív előjeles szám pedig kisebb méretet eredményez.
Karakterformázások: ezek is mindig a nyitó és zárótag-ek közötti részekre vonatkoznak.
<B>Félkövér betűformátumot eredményez</B>
<I>Dőltbetűs formátumot eredményez</I>
<U>Aláhúzott formátumot eredményez. Vigyázat! Megtévesztő lehet a gyakori használata, hiszen általában a hivatkozásokat szokták aláhúzni.</U>
<S>Áthúzott (strikethrough)formátumot eredményez</S>
<TT>Fixpontos betűket eredményez. Ilyen pl. a Courier betűcsalád, vagy az írógépek betűi.</TT>
<EM>Kiemeli a szöveget, megfelelel a dőltbetűs írásmódnak.</EM>
<CITE>Idézetekre használható.</CITE>
<VAR>Változónevet jelölhetünk vele.</VAR>
<STRONG>Ez is egy kiemelési lehetőség, megfelel a félkövér betűs írásnak.</STRONG>
<CODE>Forráskódok írásánál használjuk.</CODE>
<KBD>Billentyűfelirat jelzése</KBD>
<BQ>Idézet megjelenítése</BQ>
<BIG>Nagyméretű betűformátumot eredményez</BIG>
<SMALL>Kisméretű betűformátumot eredményez</SMALL>
<SUB>Alsóindexet eredményez, pl. kémiai képleteknél használható.</SUB>
<SUP>Felsőindexet eredményez, pl. négyzetszámok, egyenletek írásánál lehet használni.</SUP>
<BLINK>Villogó szöveget eredményez. Vigyázat! Ez idegesítő lehet hosszú távon! Csak Netscape alatt működik.</BLINK>
Dokumentumszintek (címsor stílusok)
<H1>Legfelső szintű címsor</H1>
<H2>Második szinű alcímsor</H2>
<H3>Harmadik szintű alcímsor</H3>
<H4>Negyedik szintű alcímsor</H4>
<H5>Ötödik szintű alcímsor</H5>
<H6>Hatodik szintű alcímsor</H6>
<HR> vízszintes elválasztóvonal az oldalon
Használata:<HR align="left|right|center" noshade size="szám"
[=>vonalvastagság pixelben] width="szám" [=>szélesség pixelben vagy százalékosan]>
Pl. <hr align="center">
<HR><IMG SRC="1.gif" width="100%" height="2">
<HR><IMG SRC="2.gif" width="2" height="100%">
Listák: (tetszőleges mélységig egymásba ágyazhatók)
Számozatlan(rendezetlen) lista (unordered list):
<UL>
<LI>1. Listaelem
<LI>2. Listaelem
</UL>
Pl.: Szomszédos országok:
* Ausztria
* Szlovákia
* Ukrajna
* Románia
Számozott (rendezett) lista (ordered list):
<OL start="2"[=>kezdősorszám] title="lista" type="A[=>nagybetűk]|a[=>kisbetűk]|I[=>nagy rómaiszámok]|i[=>kis római számok]|1[=>arab számok]">
<LI>1. Listaelem
<LI>2. Listaelem
</OL>
Pl.:
1. helyezett
2. helyezett
3. helyezett
Hasonlóképp:
<MENU> … </MENU>
<DIR> … </DIR>
[=>bennük <li> elemek]
pl.:
Könyvtárlista:
<DIR>
<LI>Első tag
<LI>Második tag
<LI>Harmadik tag
<LI>Negyedik tag
</DIR>
Menülista:
<MENU>
<LI>Első menü
<LI>Második menü
</MENU>
Leíró lista (a leírás tördelése automatikusan történik)
<DL compact[=>tömör formához!]>
<LH>Ez a leíró
lista fejléce</LH>
<DT>Első sor, pl. egy fogalom
neve
<DD>Az első sorhoz tartozó leírás, lehet hosszabb
szöveg is, a fogalom magyarázata.
<DT>Második sor, pl. a
következő megmagyarázandó fogalom neve
<DD>A második sorhoz
tartozó leírás
</DL>
Pl.:
Gyakori rövidítések
JPEG
Tömör, de információvesztéssel járó grafikus formátum, árnyalatos képek, fényképek weboldalba helyezéséhez használhatjuk.
GIF
Grafikus elemek tárolására használt elterjedt formátum, amit eredetileg a Compuserve hálózatán használtak, elsősorban rajzos, kevés színt tartalmazó képekhez és ábrákhoz..
Hivatkozások
Hivatkozások, linkek: az oldalakon belüli, illetve az oldalak közötti kapcsolatok létrehozására használhatók.
<A HREF=http://www.valahol.hu/index.html>ez egy távoli
hivatkozásra ugrik</A>
<A HREF=http://www.valahol.hu/index.html#horgony>ez egy távoli
hivatkozás konkrét részére ugrik</A>
<A NAME="horgony">ideugrott</A>
E-mail link:
A leírással kapcsolatos véleményed <A HREF="mailto:nev@email.cim.hu">írd</A> meg!
A hivatkozásokban használható protokollok:
Protokoll://számítógép:port/elérési-út/konkrét-dokumentum
(http, ftp, mailto, file, gopher, news, telnet)
pl: http://www.macromedia.com
A hivatkozások célpontja:
A hivatkozások célját a TARGET attribútummal lehet megadni.
Lehetséges értékei:
_blank: új böngészőablakba tölti be a hivatkozott fájlt.
_self: az aktuális ablakba tölti be a hivatkozott fájlt, ez az alapértelmezett.
_top: a legfelső ablakba tölti be a hivatkozott fájlt (ennek pl. a kereteknél van értelme, ld. később)
_parent: a szülőablakba tölti be a hivatkozott fájlt (ez is keretes oldalaknál használható értelmesen, ld. ott)
Képek elhelyezése az oldalon
<IMG ALT="a képet helyettesítő szöveg" SRC="a képfájl elérési útja">
Fontosabb képtulajdonságok
<IMG ALIGN="függőleges igazítás" SRC="elérési_út/fájlnév.kit"
HSPACE="vízsz.távolság a szövegtől" VSPACE="függ. távolság a szövegtől
"WIDTH="szélessége pixelben" HEIGHT="magassága pixelben"
ALT="helyettesítő, ismertető szöveg">
pl.:
<img src="logo.jpg" width="200" height="40" alt="LOGO"
align="right">
Kép használata hivatkozásként:
Kattints ide:
<A HREF="ujlap.html"><IMG SRC="kep.gif" ALT="kepneve"
ALIGN="left|right|center" BORDER="0"></A>
Pl.:
<a href="index2.html"><img src="belepes.jpg" width="200"
height="300" align="middle" border="0" alt="Belépés"></a>
A képformátumokról általánosan:
* Gif Graphic Interchange Format, 256 szín, fizetős töm. algoritmust használ, veszteségesen tömörít; főleg kisebb és kevés színű, vonalas ábrákhoz haszn., transzparens, interlaced és animált gifek
* Jpeg Joint Photographic Experts Group, 16m szín, veszteséges töm. alkalmas színátmenetes képek, fényképek tárolására, a tömörítés mértékének növelésével a fileméret csökken, de a minőség romlik, a progresszív jpg az interlaced gifhez hasonlóan töltődik le
* Png Poretable Networks Graphic, a gifhez hasonló, ám ingyenes formátum, képes színátmenetes képek tárolására is, kifejezetten a webes szempontokat vették figyelembe létrehozásakor, egyre jobban terjed
Minigrafikák:
1x1 pixeles képek, melyekkel tetszőleges nagyságú üres helyeket hagyhatunk az oldalon (pl. egyes szavak vagy nagyobb képek között), a kép attribútumainak változtatásával.
Táblázatok
<TABLE> … </TABLE>
<CAPTION ALIGN="left|right|center">A táblázat címe [a táblázat felett jelenik meg]</CAPTION>
<TH> oszlopfejléc
<TR> a táblázat egy sora, amely a következő <tr>-ig ill. a táblázat végéig tart.
<TD> a táblázat egy cellája, amely a következő <td>-ig ill. a táblázat végéig tart.
</TH>, </TR>, </TD> zárótag-ek.
<TABLE BORDER="szám"[a keret szélessége] ALIGN="hely" [tábla igazítása jobbra, balra, középre]
NOWRAP [a cellák szövegének tördelését tiltja le] CELLPADDING="szám" [cella adatai és falai közötti távolság pixelben] CELLSPACING="szám" [cellák közötti távolság pixelben] BGCOLOR="színkód" [a táblázat háttérszínét határozza meg]>
A táblázat oszlopfejlécei nem csak a legfelső oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is).
Mind az oszlopfejekben, mind a cellákban használhatók a következő formázási opciók:
COLSPAN="szám": Egyesít több egymással szomszédos cellát - vízszintesen.
ROWSPAN="szám": Egyesít több egymás alatti cellát - függőlegesen.
ALIGN="hely": Igazítja a cellák tartalmát - vízszintesen. Lehetséges értékei: left, center, right, justify, decimal.
VALIGN="hely": Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline.
Pl.
<table width="98%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td height="39" background="kep.jpg"><img src="logo.jpg"
width="200" height="40" alt="LOGO" align="right"></td>
</tr>
<tr bgcolor="#000000">
<td height="30">
Ide kerül ez menü egyszer majd.
</td>
</tr>
</table>
Táblázatok egymásba ágyazása
A táblázatok tetszőleges mértékig egymásba ágyazhatók. Pl.:
<table>
<th>…</th>
<tr>
<td>
<table>…</table>
<td>
</tr>
</table>
Keretek
Egyetlen böngészőablakban több HTML dokumentum is megjeleníthető a keretcsoportok, vagyis a <FRAMESET> és </FRAMESET> valamint a szorosan kapcsolódó keret, vagyis <FRAME> tag használatával. A <FRAMESET ROWS="oszlopszélességek"> tag-gel osztható fel a képernyő függőlegesen, a <FRAMESET COLS="sormagasságok"> segítségével pedig vízszintesen. Az oszlop- és sorértékek megadhatók képpontban ill. százalékosan (egymástól vesszővel elválasztva), a maradék képernyőterületre pedig a * helyettesítő karakter használatával lehet hivatkozni. Mivel egyszerre csak vízszintesen, vagy csak függőlegesen osztható fel a képernyő, ezért ha mindkét irányban osztott böngészőablak létrehozásához a <FRAMESET> elemeket egymásba kell ágyazni! Tehát például egy függőleges felosztáson belül kell vízszintesen elválasztott részekre tagolni egy oszlopot. A fenti módon definiált területekre a <FRAME SRC="forrás"> tölti be a megadott teljes HTML fájlt, vagy annak egy maghatározott részét.
A keretek tulajdonságainak részletesebb megadása: <FRAME NAME="egyedinév" SRC="forrás" TARGET=”ide-tölti-be-a tartalmat” SCROLLING="érték" MARGINWIDTH="szám" MARGINHEIGHT="szám"> és jelentésük:
* Az adott keretnek egyedi nevet a NAME segítségével adhatunk. Ha készítünk egy hivatkozást az egyik keretben, és szeretnénk, hogy a másik keretben jelenjen meg a hivatkozott dokumentum, a keret egyedi nevével hivatkozhatunk rá, pl. az <A HREF=”forras.htm” TARGET=”_masik_keret”> segítségével.
* A TARGET értéke megadja, hogy a link hová mutasson: pl. a keret nevének megadásával a célfájl az adott nevű keretben fog megjelenni. Értéke természetesen lehet _top is, de ez feloldja a keretes struktúrát (!). A TARGET=_parent a “szülőkeretbe” fogja betölteni a hivatkozott oldalt. A TARGET=_blank segítségével az oldal tartalma új böngészőablakban jeleníthető meg. A TARGET=_self is működik a keretek esetében, ez az aktuális keretbe tölti az új oldalt.
* SCROLLING: a yes, no és az auto értékeket veheti fel. A keretek jobboldalán és alján a gördítősávok akkor jelennek meg automatikusan, de csak ha syükség van rájuk, ha a tartalom nem fér el a keretben, és a SCROLLING=auto-t állítottuk be. A yes értékkel a böngészők mindig megjelenítik a gördítősávokat, akkor is, ha egyébként nem lenne rájuk szükség. A no beállításával a gördítősávok sosem jelennek, meg, ez bizonyos esetekben a tartalomvesztéssel járhat.
* MARGINWIDTH és MARGINHEIGHT: a kereten belüli margók szélességét szabályozza képpontban.
A <FRAMESET>..<FRAMESET> tag-nek meg kell előznie a <BODY> tag-gel kijelölt dokumentumtörzset! A<NOFRAMES> tag segítségével lehet jelezni a dokumentum azon részének kezdetét, amelyet akkor kell a böngészőnek megjelenítenie csak, ha nem ismeri a kereteket. Ez a <NOFRAMES>-szel kezdődő rész tartalmazhatja a <BODY> és a </BODY> tag-eket, a keretcsoport dokumentumában.
Pl.
<html>
<head>
</head>
<frameset cols="75,*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" noresize src="bal.html">
<frameset rows="85,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="felso.html" >
<frame name="mainFrame" src="kezdolap.html">
</frameset>
</frameset>
<noframes>
<body>
Ide kerül az a tartalom, ami a kereteket nem ismerő böngészőkben fog megjelenni, mint kezdőoldal.
</body>
</noframes>
</html>
Űrlapok
A HTML dokumentumban kérdőíveket, vagyis űrlapokat is elhelyezhetünk, melyek feldolgozásához, ellenőrzéséhez külön programot kell írni. Az űrlapok segítségével látogatóink hírlevelet vagy terméket rendelhetnek meg, szavazhatnak, stb.
Az űrlap létrehozása
A <FORM METHOD="mód" ACTION="elérési_út/fájlnév.kit"> és a </FORM> tag adja meg a kitöltendő űrlapot.
Az attribútumokat célszerű mindig megadni, mert az ACTION határozza meg a feldolgozást végző program elérési útját, a METHOD pedig a kitöltött űrlap továbbítási módját. A METHOD lehetséges értékei: GET - az URL-ben, POST – külön adatcsomagban küldi el a kitöltöttt űrlapadatokat. Az alapértelmezés a GET, ami bizonyos veszélyeket rejt magában, mivel túl hosszúra nyúlhat az URL és megjelennek benne a begépelt adatok. A POST a biztonságosabb mód.
Űrlapelemek az oldalon
Az <INPUT NAME="név" TYPE="típus" ALIGN="hely"> segítségével meghatározható egy kitöltendő űrlapmező.
A NAME természetesen a mezőnév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. A TYPE pedig az adattípus, melyet vár a beviteli mező az ALIGN pedig az igazítás mértékét adja meg.
Szövegmező:
<input type="text" name="nev1" size="5" maxlength="10" value="Kezdőérték">
A SIZE meghatározza a beviteli mező szélességét, a MAXLENGTH="érték" pedig a bevihető maximális szöveghosszt. A Value-nek megadott szöveg megjelenik a szövegmezőben az űrlap letöltődésekor.
Jelszómező:
<input type="text" name="nev2" size="5" maxlength="10">
A jelszómező is szövegmező, de a begépelt karakterek nem jelennek meg bevitelkor, csak a helyettesítő csillagok.
Szövegdoboz (hosszabb szövegeknek)
Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság sorokban" COLS="szélesség karakterben" VALUE="szöveg">… </TEXTAREA>, amely egy beviteli ablakot nyit a COLS-ban megadott szélességben és a ROWS-ban megadott sorban. A VALUE az alapértelmezésként megjelenítendő szöveget adja meg.
Rejtett mező:
<input type="hidden" name="nev3">
A rejtett mező nem jelenik meg az oldalon, ezt használják pl. az internetes áruházakban a bevásárlókosár aktuális állapotának nyilvántartására.
Jelölőnégyzet
<input type="checkbox" name="nev4" value="checkbox" checked>
A jelölőnégyzetek a többszörös választást valósítják meg (több is kiválasztható egyszerre), a VALUE alatti értéket veszi fel, ha bekapcsolt állapotú. A checked paraméter megadásával alapértelmezetten bekapcsolt állapotú jelölőnégyzetek jelennek meg az űrlap letöltődésekor.
Rádiógombok
<input type="radio" name="nev5" value="radiobutton" checked>
A rádiógombokkal az egyszeres választást lehet megvalósítani (egyszerre csak egyet lehet kiválasztani). Az összetartozó rádiógombok nevük azonos, és a value értékükben térnek el egymástól. A checked paraméter megadásával alapértelmezetten bekapcsolt állapotú rádiógomb jelenik meg az űrlap letöltődésekor.
Gomb
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset">
<input type="button" name="Button" value="Button">
SUBMIT – adattovábbító, küldés gomb, RESET – inicializáló, a begépelt adatokat kitörlő gomb, BUTTON - egyéb nyomógomb. A Value agombok feliratát adja meg. 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.
Fájlmező
<input type="file" name="file">
A látogató fájlt küldhet, amelyet a megjelenő tallózás (Browse) gomb segítségével kereshet meg.
Menü
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">…</SELECT> által létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> tag-gel adhatjuk meg. A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a választható menüpontok. Megadásával gördíthető menüt kapunk, elhagyása esetén, ún. legördülő menüből lehet választani. A MULTIPLE megadása esetén több menüpont is kijelölhető egyszerre. Az <OPTION SELECTED> formájú tag adja meg az alapértelmezett választást!
Pl.
Kérjük adja meg az adatait:A leírást készítette Fodor Orsolya.
<FORM METHOD="post" ACTION="program.pl">
<P>
Vezetékneve:
<INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30">
Keresztneve:
<INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50">
Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED>
Nő: <INPUT NAME="neme" TYPE="radio">
Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60">
<P>
Ezt az operációs rendszert használja:
Windows95/98: <INPUT NAME="erdek" TYPE="checkbox" CHECKED>
WindowsNT/2000: <INPUT NAME="erdek" TYPE="checkbox">
LINUX: <INPUT NAME="erdek" TYPE="checkbox">
OS/2: <INPUT NAME="erdek" TYPE="checkbox">
<P>
<TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Irja ide véleményét a használt rendszerről:</TEXTAREA>
<P>
Foglakozása:
<SELECT NAME="foglakozas">
<OPTION>diák
<OPTION>tanár
<OPTION SELECTED>nyugdíjas
<OPTION>egyik sem
</SELECT>
<P>
Csatolandó fájl(ok):
<BR>
<INPUT NAME="fajl" TYPE="file">
<P>
<input type="reset" value="Alapértelmezés" name="reset">
<INPUT TYPE="submit" VALUE="Elküldés">
</FORM>
Hozzászólások:
Hirdetés:
