A HTML alapjai – utolsó módosítás: 2024.06.01.
Tartalom és forma:
A weboldalak strukturált tartalma HTML jelölőnyelvben, a formázás és elrendezés CSS stíluslapban történő kódolással állítható elő.
HTML = Hypertext Markup Language = hiperszöveg jelölőnyelv.
CSS = Cascading Style Sheets = „lépcsőzetes", „egymásba ágyazott" stíluslapok.
A HTML (strukturált tartalom) és CSS (formázás, elrendezés) használatával a tartalom és forma egymástól függetlenül változtatható, ugyanahhoz a tartalomhoz több megjelenítés társítható, külső stílusok alkalmazhatók.
HTML szintaxisa:
Jelölők (címke, tag):
A HTML jelölőnyelvben a megjelenítendő tartalomba jelölőket kell elhelyezni, melyek megszabják, hogy a böngészők hogyan értelmezzék a megjelölt tartalmi részeket. A jelölők megnevezése egyben kifejezi (angolul) a tartalmukat is.
A jelölő szó vagy rövidítés mindig < és > jelek között helyezkedik el, és csupa kisbetűvel célszerű írni.
A jelölők nagy többsége párban szerepel. A záró HTML jelölők szintén < és > jelek között szerepelnek, de a jelölőnév előtt egy perjelet kell tenni. A záró jelölő attribútumokat nem tartalmazhat.
A páros jelölők kezdő- és zárócímkéi által bezárt tartalmi részek az elemek.
Páratlanul csak néhány jelölő szerepelhet.
A páratlan jelölők üres elemet alkotnak. Ezek definiálhatnak meta-adatokat, linkeket, sortörést, vízszintes elválasztó vonalat, stb.
A jelölők egymásba ágyazhatók. Egyetlen szabályt kell betartani, hogy a zárás sorrendje ellentettje a nyitásnak, azaz az utoljára megnyitott jelölőt kell először bezárni.
Jellemzők és értékek:
Egy elemnek lehet egy vagy több jellemzője (attribute) és a jellemzőnek van értéke (value) - ezek az adott elemhez valamilyen járulékos információt adnak meg. A jellemző a nyitó jelölőben, a címkenév után egy szóközt kihagyva írható be, az érték pedig egy egyenlőségjel után idézőjelek között adandó meg.
Ha definiálunk valamilyen jellemzőt, akkor értéket is kell adni neki – kivétel az a néhány eset, amikor csak egyszerűen deklarálunk valamit (például: selected).
Egy elemhez több jellemző is definiálható, a jellemzők megadási sorrendje közömbös, a jellemző-érték párokat szóközzel kell elválasztani egymástól.
A jellemzők és értékek csak az adott konkrét jelölőre vonatkoznak, és páros címke esetén a zárócímkével, ill. páratlan címke esetén a záró >-jellel érvényüket vesztik.
A használható attribútumok és ezek értéktartománya az egyes HTML jelölők esetén különbözőek lehetnek.
Egy adott HTML jelölő esetén egyes attribútumokat kötelező használni, míg mások használata opcionális.
Ha olyan HTML kódot használunk, amelyet egy HTML megjelenítő program (vagy böngészőprogram) nem ismer, a jelölőt a megjelenítő program figyelmen kívül hagyja.
Megjegyzések:
Bármilyen megjegyzés elhelyezhető a HTML dokumentumban <!-- és --> jelek között. Ezeket a böngésző figyelmen kívül hagyja.
Megjelenítés:
A blokk szintű elemeket a böngészők az alapértelmezés szerint új sorban kezdik megjeleníteni és az elemet tartalmazó doboz a teljes szélességet elfoglalja.
Ilyen elemek például a címsor és a bekezdés is.
A soron belüli elemeket úgy jeleníti meg a böngésző, mint egy mondat szavait: akkor kerülnek új sorba, ha az előző sorban már nem fér el a következő elem.
Ilyen elemek lehetnek a linkek, vagy a képek is.
A HTML DOKUMENTUM RÉSZEI
DOCTYPE:
A DTD (Document Type Definition - dokumentum típus definíció) a HTML dokumentum első sora. A dokumentumtípus definíció mondja meg a böngészőnek, hogy a HTML-nek melyik verzióját fogjuk használni. Ez biztosítja, hogy a különböző böngészőkben egy weblap látványa minél inkább hasonló legyen.
A dokumentumtípus meghatározás adja meg a weboldal nyelvtanát a böngésző számára.
A megadás módja: <!DOCTYPE html>.
HTML:
A dokumentumtípus meghatározás után a html páros jelölők közötti rész alkotja a böngésző által értelmezett weblapot.
Javasolt a honlap fő nyelvének megadása is, mely magyar nyelvű weblapnál a kezdő html jelölőben a lang="hu" tulajdonság megadását jelenti.
HEAD:
A dokumentum fej tartalma nem jelenik meg a böngészőben. Technikai információkat és a dokumentummal kapcsolatos további információkat tartalmaz. Tehát ezeket az átlag felhasználó nem látja, de befolyásolják a tartalom megjelenítését.
Lehetőség van itt külső erőforrások illesztésére (pl. CSS, JavaScript, ...), a böngésző vagy a keresők számára szükséges információk (meta-adatok) megadására.
A karakterkészlet megadása:
A legfontosabb meta-elem a karakterkódolás. A karakterkészlet megadásának elmulasztása hibás megjelenítéshez vezethet. A HTML5 minden nyelven az UTF-8 alkalmazását javasolja.
Megadása: <meta charset="utf-8">.
A weblap címének megadása:
A fej részben kell megadni a title páros jelölők között, az ide írt szöveg lesz a weboldal címe, ez jelenik meg a böngészők címsorában és a keresők találati listáján.
Külső CSS stíluslap csatolása a HTML dokumentumhoz:
Megadása: <link rel="stylesheet" href="style.css">
A rel (relation=viszony) jellemző jelzi a böngészőnek, hogy a hivatkozott (CSS) dokumentum milyen viszonyban van a hivatkozó (HTML) dokumentummal. A megadott érték szerint stíluslap viszonyban van vele.
A href (hypertext reference=hiperszöveges hivatkozás) jellemző annak a CSS stíluslapnak a fájlnevét és helyét (elérési útját) adja meg, melyet a HTML dokumentumhoz akarunk kapcsolni.
A stíluslap fájlnévnek kisbetűsnek, ékezetek és szóköz nélkülinek kell lennie. A kiterjesztés kötelezően .css.
BODY:
A body páros jelölők közötti rész alkotja a böngésző által megjelenített weboldal tartalmát.
A dokumentumtörzs az, amit a böngésző megjelenít, a CSS stílussal való formázás is csak erre vonatkozik.
Címsorok:
A weblap fejezeteit címsorok (heading) közé kell helyezni.
A címsorok h1-h6 páros címkék között szerepelhetnek.
Legnagyobb betűnagyságú a h1 jelölő, így ezt szokás használni az oldal címének megadására.
Alapértelmezésben a címsorok balra igazítottak és félkövér betűvel íródnak.
Alapértelmezett címsor méretek:
"h1": 24 pont; "h2": 18 pont; "h3": 14 pont; "h4": 12 pont; "h5": 10 pont; "h6": 8 pont.
Bekezdés:
A szöveges tartalom bekezdésekre osztható. Egy adott bekezdés tartalmát a p (paragraph) páros jelölők közé kell tenni. A böngészőprogramok a bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak.
A bekezdések blokkszintű elemek. Új sorban kezdődnek. Az utánuk következő elem szintén új sorba kerül.
Alapértelmezettként a szöveg balra igazított.
Behúzott bekezdés:
Hosszabb idézetek esetén a
és
jelölőkkel húzhatjuk be a szöveg mindkét oldalát.
A blockquote a blokkszintű elemek csoportjába tartozik. Több blockquote egymásba ágyazásával elérhetjük azt a hatást, hogy beljebb kezdődjön a szövegünk. Ekkor nemcsak a bekezdés bal oldala, hanem a jobb oldala is ugyanakkora behúzást kap.
Szövegkiemelés:
A karakterformázáshoz használható elemek páros elemek, tehát mindig van záró tag-jük. Mivel jelezni kell, hogy a bekezdésen belül mettől-meddig érvényes a módosított karakterformázás.
Egy-egy karakter, szórészlet vagy szövegrész fizikai formázására alkalmas elemek:
A <b> elem félkövérré alakítják a karaktereket.
Az <i> elem dőltté alakítják a karaktereket.
A <span> elemet olyan szöveges tartalmak szétválasztására alkalmazzuk, amelyek között nincs más HTML elemmel leírható kapcsolat. Ilyenkor a span elemnek adunk egy azonosítót, amely azonosítóra külön formázást adunk meg.
Előformázott szöveg:
Előformázott szöveg a
és a
elemek közé írt szöveg, ahol minden soremelés, szóköz megjelenik.
Sortörés:
Az ENTER lenyomására nem keletkezik új sor a böngészőben, valódi sortöréshez a dokumentumban speciális vezérlő elemre van szükség.
Megadása: <br>
Nem törhető szóköz:
A HTML dokumentumban lévő, egymást követő szóközöket a böngésző egyetlen szóköznek fogja fel. Speciális karakterrel egy mesterséges szóközt szúrhatunk be, melyet már megjelenít a böngésző. Ahányszor beírjuk egymásután ezt a kódot, annyi szóköznyi helyet jelenít meg a böngésző:
Megadása:
Elválasztó vonal:
Vízszintes elválasztó vonalat a <hr> páratlan tag-gel lehet létrehozni.
Tárolók (Div):
A div (division - szakasz) páros jelölő általános tárolóelem, egy weblap logikailag összetartozó része. A benne elhelyezett tartalomra egységesen lehet hivatkozni.
Megadása: <div>...</div>.
Az általános tároló elemek formázását stíluslapok segítségével szokás megoldani. Ha több div (szakasz) is van egy oldalon, az egyes tárolóelemeket azonosítani kell, leggyakoribb az id (identifier - azonosító) megadása.
Az általános tárolóelemek egymásba ágyazhatók, és tartalmazhatnak a HTML oldalon megjeleníthető bármely elemet.
Listák:
A számozott, rendezett (ordered) listát az ol páros jelölők között kell megadni.
A számozatlan, nem rendezett (unordered) listát az ul páros jelölők között kell megadni.
A listákon belül az li (list item) páros jelölők definiálják a sorokat.
A számozott és a számozatlan listák egymásba ágyazhatók.
Példa:
<ol>
<li>Számozott lista - 1. elem.</li>
<ul>
<li>Felsorolás 1. elem.</li>
<li>Felsorolás 2. elem.</li>
</ul>
<li>Számozott lista - 2. elem.</li>
</ol>
A definíciós listák abban különböznek az előző lista típusoktól, hogy egy listaelem két részből áll, egy kifejezésből és annak definíciójából.
A definíciós lista a dl páros jelölők (definition list) között helyezkedik el.
A definiálandó kifejezést a dt páros jelölők (definition term) között lehet megadni.
A definíció pedig a dd páros jelölők (definition description) közötti szöveg.
Példa:
<dl>
<dt>1. kifejezés</dt>
<dd>1. kifejezés leírása.</dd>
<dt>2. kifejezés</dt>
<dt>3. kifejezés</dt>
<dd>3. kifejezés 1. leírása.</dd>
<dd>3. kifejezés 2. leírása.</dd>
<dd>3. kifejezés 3. leírása.</dd>
</dl>
Hivatkozások:
A hivatkozások (linkek) kötik össze a weblapokat. Lehetőséget teremtenek egy hosszabb oldalon található fejezet gyors elérésére is, egy másik weboldal megnyitására vagy akár e-mail küldésére is.
A linkeket az a (anchor) páros jelölők közötti rész alkotja.
1. Könyvjelzők:
Lehetőség van az oldalon belüli ugrásokra ún. könyvjelzők segítségével.
Könyvjelzőre nemcsak egy oldalon belül hivatkozhatunk, hanem megadhatunk egy másik oldal elnevezett könyvjelzőjét is.
Könyvjelzőnél meg kell adni azt a helyet, ahová a könyvjelzőnek mutatni kell.
Könyvjelző megadása:
<a id="ide_ugorj">Ide fog ugrani a kurzor.</a>:
Az id attribútumnál kell megadni a könyvjelző nevét.
Majd ahonnan a megjelölt helyre szeretnénk ugrani,
szintén az a nyitó jelölőben a href attribútumban meg kell adni a könyvjelző nevét,
a név elé egy #-jelet kell tenni.
Könyvjelzőre mutató hivatkozás megadása:
<a href="#ide_ugorj" title="Kattints rám!">Ugrás az adott helyre.</a>:
A href attribútumban meg kell adni a könyvjelző nevét, ahová ugrani szeretnénk.
Az a nyitó jelölő title paraméterével információt helyezhetünk el a linkkel kapcsolatban.
Ez a szöveg súgóként jelenik meg a böngészőprogramokban.
2. Belső hivatkozás:
Belső hivatkozások egy adott weblap oldalai közötti kapcsolatok.
Belső hivatkozáskor az a nyitó jelölő href paraméterében meg kell adni a weboldal elérési útját és nevét.
Pl.: <a href="masik.html">Másik oldal.</a>.
Belső hivatkozások elérési útja:
A hivatkozás elérési útja többféleképpen megadható, attól függően, hogy az aktuális és a keresett oldal a könyvtárszerkezetben hogyan helyezkedik el.
Hivatkozás az aktuális oldal könyvtárban lévő másik oldalra:
Pl.: <a href="masik.html">Másik oldal.</a>.
vagy:
<a href="alkonyvtar/masik.html">Alkönyvtárban lévő másik oldal.</a>.
Hivatkozás az aktuális oldal a könyvtárstruktúrában azonos szinten, de másik könyvtárban lévő oldalra.
(../ = egy szinttel feljebb lép):
Pl.: <a href="../azonosszintukonyvtar/masik.html">Azonos szintű könyvtárban lévő másik oldal.</a>.
Hivatkozás megadása a webszerver főkönyvtárából kiindulva, azaz teljes elérési úttal,
(/ = könyvtárstruktúra gyökere):
Pl.: <a href="/fokonyvtar/alkonyvtar/masik.html">Teljes elérési úttal megadott másik oldal.</a>.
3. Külső hivatkozások:
Külső hivatkozások a két különböző weblap oldalai közötti kapcsolatok.
A Külső hivatkozás többféleképpen megadható:
Hivatkozás egy domain címre.
(A domain név beírásakor a kezdőoldalnak megadott lap nyílik meg.):
Pl.: <a href="http://www.masik.hu/">Másik weblap index.html vagy index.php oldala.</a>.
Hivatkozás a domain címen belül egy megadott lapra:
pl.: <a href="http://www.masik.hu/egylap.html">Másik weblap megadott oldala.</a>.
Hivatkozás a domain címen belül egy megadott lapra, a lapon lévő könyvjelzőre:
Pl.: <a href="http://www.masik.hu/egylap.html#konyvjelzo">Másik weblap megadott oldalának a könyvjelzőre való ugrás.</a>.
Melyik ablakban nyíljon meg a hivatkozott tartalom:
Az a nyitó jelölő target paraméterében kell megadni, hogy melyik ablakban nyíljon meg a megadott oldal.
_self: az eredeti ablakban. (Ez az lapértelmezett.)
_blank: új ablakban (az alsó kötőjelet is be kell írni!).
4. E-mail hivatkozás:
E-mail hivatkozásnál, ha a felhasználó rákattint a linkre, akkor az alapértelmezett levelezőprogram nyílik meg (amennyiben van ilyen, ha nincs, nem történik semmi), és a címzett automatikusan a href jellemzőnél megadott e-mail cím lesz.
Pl.: <a href="mailto:nev@levelezo.hu">Írj nekem.</a>.
A hivatkozásban megadható a levél tárgya is.
Pl.: <a href="mailto:nev@levelezo.hu?subject=Tartalom">Írj nekem.</a>.
5. Hivatkozás fájlra:
Nemcsak másik weblapra, de bármilyen fájlra is hivatkozhatunk. Amennyiben a kliens gépén van a fájl megnyitásához szükséges program, akkor az megnyílik, és benne szintén megnyílik a hivatkozott fájl.
Például:
<a href="egykep.jpg">Ezt a képet megnézheted.</a>.
<a href="program.exe">Ezt a programot letöltheted.</a>.
<a href="faljnev.pdf">Ezt a pdf dokumentumot megnyithatod.</a>.
Képek:
Kép az img (image) páratlan jelölő segítségével helyezhető el az oldalon.
A kép inline elem, azaz a sorban előtte állót követi, a sor mögötte tovább folytatódik.
Az img jelölő kötelező jellemzője az src (source=forrás) tulajdonság, ami megadja a kép forrásának URL-jét. A saját könyvtárunkban lévő kép forrását megadhatjuk relatív (az aktuális könyvtárhoz viszonyítva), vagy abszolút módon (a gyökér könyvtárból indulva) is.
Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető vagy a böngésző nem tudja megjeleníteni. A látássérültek számára alapvetően fontos, hogy képek esetén legyen egy rövid szöveges leírás is.
A title jellemzővel információt helyezhetünk el a képpel kapcsolatban. Ez a szöveg általában buboréksúgóként jelenik meg a böngészőprogramokban, amennyiben az egérkurzort a kép fölé visszük.
Bár a formázást a CSS fájlban kell megadni, de képeknél megengedett a méretbeállítás a jelölőben.
A width tulajdonsággal a kép szélességét, a heigth tulajdonsággal a kép magasságát módosíthatjuk pixelben.
A mértékegységet nem kell megadni külön!
Ha csak az egyik értéket adjuk meg, akkor a másik érték arányosan változik.
Ha mindkét értéket megadjuk, de az nem arányos az eredeti mérettel, akkor a kép torzulni fog.
Pl.: <img src="egykep.png" alt="Ez egy kép" title="Ez egy kép" width="100">.
Táblázatok:
Egyszerű táblázat megadása a table páros jelölők használatával lehetséges. A table páros jelölőn belül a tr páros elemekkel kell megadni a táblázat sorait, a td páros jelölőkkel pedig a sorokon belüli cellákat.
Alapértelmezésben:
A táblázat minden sora azonos magasságú.
A cellák szélessége egy oszlopon belül a legszélesebb adat szélességéhez igazodik.
A cellák tartalma vízszintesen balra, függőlegesen középre igazított.
Nem tartalmaz szegélyt és térközt.
Táblázat tagolása:
1. Táblázat címe:
A táblázat címének megadása a nyitó table jelölő után, a caption páros jelölőkkel lehetséges. A táblázat címe a táblázat tetejére kerül, vízszintesen a táblázat közepére igazítva.
2. Táblázat fejléce:
A táblázat oszlopainak, de akár a sorainak is lehet fejlécet adni. A fejléc megadása a th páros jelölők használatával lehetséges.
A fejléc szövege alapértelmezésben vízszintesen középre igazított és félkövér stílusú.
3. Cellák összevonása:
Megengedett nemcsak a CSS fájlban megadni az összevonást.
Oszlopok összevonása:
A táblázat celláit vízszintesen a colspan paraméterrel vonhatjuk össze, ekkor meg kell adnunk egy számmal, hogy hány oszlopot szeretnénk egyesíteni.
Sorok összevonása:
A táblázat celláit függőlegesen a rowspan paraméterrel vonhatjuk össze, ekkor meg kell adnunk egy számmal, hogy hány sort szeretnénk egyesíteni.
Általában nagy méretű táblázat esetén kialakítható a táblázatnak - oldalanként ismétlődő - fejléc és lábléc. A táblázat adatai pedig a táblázat törzsbe kerülnek.
A thead, tfoot és tbody páros jelölők is a table jelölők között helyezkednek el.
Táblázat példa:
<table>
<caption>A táblázat címe</caption>
<thead>
<tr>
<th>üres cella</th>
<th colspan="2">1. és 2. oszlop fejléce</th>
<th>3. oszlop fejléce</th>
</tr>
</thead>
<tbody>
<tr>
<th>1. sor fejléce</th>
<td>1. sor - 1. cella</td>
<td>1. sor - 2. cella</td>
<td>1. sor - 3. cella</td>
</tr>
<tr>
<th rowspan="2">2. és 3. sor fejléce</th>
<td>2. sor - 1. cella</td>
<td>2. sor - 2. cella</td>
<td>2. sor - 3. cella</td>
</tr>
<tr>
<td>3. sor - 1. cella</td>
<td>3. sor - 2. cella</td>
<td>3. sor - 3. cella</td>
</tr>
</tbody>
</table>
Űrlapok:
Az űrlapok összes eleme a form páros jelölőn belül helyezkedik el, ahol az egyes űrlapelemeket más-más jelölőkkel kell definiálni.
1. Űrlapelemek csoportosítása:
A fieldset páros jelölővel az űrlap egyes elemei csoportba foglalhatók.
A csoporthoz a legend páros elemmel felirat (cím) is rendelhető.
Pl.: <fieldset><legend>Személyes adatok</legend>...</fieldset>.
2. Beviteli mezők:
Beviteli mező az <input> páratlan jelölőkben adhatók meg, mely általában egysoros adatbevitelt tesz lehetővé.
A label páros címke segítségével címke rendelhető egy-egy űrlapelemhez. A label nyitó jelölő for jellemzőben egy űrlap elem id jellemzőjének megadásával hozható létre a két elem közötti kapcsolatot.
Így a címkére kattintva is kiválasztható egy űrlapelem.
Szövegbevitel:
Az input jelölő type="text" tulajdonsággal egysoros adatbeviteli mező hozható létre.
Pl.: <input type="text" maxlength="20">.
A maxlength tulajdonsággal megadható, hogy maximálisan hány karakternyi adat írható a beviteli mezőbe.
A textarea páros jelölő többsoros adat bevitelére alkalmas.
Pl.: <textarea rows="4" cols="50">Sok a mondanivalód?...</textarea>.
A rows paraméterrel megadható hány sor magas, a cols paraméterrel megadható hány karakter széles legyen a beviteli mező.
A nyitó és záró jelölő között elhelyezett szöveg megjelenik a beviteli mezőben, a beviteli mezőben való írással törlődik, reset után ismét ez lesz a tartalma.
3. Jelölőnégyzet:
Az input jelölő type="checkbox" tulajdonság-érték megadásával hozható létre.
Egy jelölőnégyzet egy igen/nem választást tesz lehetővé.
Az összetartozó jelölőnégyzetek name jellemzője különböző kell legyen, és közülük általában több is kiválasztható.
Ha azt szeretnénk, hogy egy vagy több jelölőnégyzet alapértelmezetten be legyen jelölve, akkor a checked paramétert kell megadni.
A value érték jelenik meg a jelölőnégyzet mellett a weblapon.
Például:
<label for="checkbox1">1</label>: <input type="checkbox" name="box1" id="checkbox1" checked>Box1
<label for="checkbox2">2</label>: <input type="checkbox" name="box2" id="checkbox2">Box2
<label for="checkbox3">3</label>: <input type="checkbox" name="box3" id="checkbox3" checked>Box3
4. Választógomb:
Az input jelölő type="radio" tulajdonság-érték megadásával hozható létre.
Egy választógomb egy igen/nem választást tesz lehetővé.
Az űrlapon a választógombok csoportokban helyezkednek el. Egy csoporton belül valamennyi választógomb name jellemzője azonos kell legyen, és közülük csak egy lehet kiválasztott.
Ha azt szeretnénk, hogy egy választógomb alapértelmezetten be legyen jelölve, akkor a checked paramétert kell megadni.
A value érték jelenik meg a választógomb mellett a weblapon.
Például:
<label for="radio1">1</label>: <input type="radio" name="radiogomb" id="radio1">Rádiógomb1
<label for="radio2">2</label>: <input type="radio" name="radiogomb" id="radio2" checked>Rádiógomb2
<label for="radio3">3</label>: <input type="radio" name="radiogomb" id="radio3">Rádiógomb3
5. Lenyíló lista:
A select páros elemmel egy lenyíló lista hozható létre. A multiple tulajdonság megadásával több elem kiválasztása lehetséges. (Kijelölés a CTRL billentyű lenyomása mellett.) A size tulajdonság segítségével állítható be, hogy hány listaelem legyen megjelenítve.
Az option páros elem a lenyíló lista elemeinek megadására szolgál. A value tulajdonságnál megadott érték kerül továbbításra a szerver felé a kiválasztott elemek esetén. Itt nem javasolt ékezetes karakterek használata. A selected tulajdonsággal jelölt listaelem az alapértelmezetten kiválasztott, az oldal betöltésekor ki lesz választva.
Az option nyitó és záró jelölők között kell megadni azt a szöveget, amelyik a lenyíló listában meg fog jelenni.
Például:
<select multiple size="3">
<option value="alapism">Alapismeretek</option>
<option value="hardver">Hardver</option>
<option value="szoftver" selected>Szoftver</option>
<option value="oprendszer">Operációs rendszerek</option>
</select>
6. Gombok:
Nyomógomb:
Az input jelölő type="button" tulajdonság-érték megadásával hozható létre.
Pl.: <input type="button" value="Ez egy gomb">.
Submit gomb:
Az input jelölő type="submit" tulajdonság-érték megadásával hozható létre.
A submit típus az űrlapba bevitt adatokat elküldi az űrlap feldolgozását végző fájlnak.
Pl.: <input type="submit" value="Submit gomb">.
Reset gomb:
Az input jelölő type="reset" tulajdonság-érték megadásával hozható létre.
A reset típus az űrlapba bevitt adatok törlését teszi lehetővé. A beviteli mezőkbe a kezdeti állapotnak megfelelő értékeket írja vissza.
Pl.: <input type="reset" value="Reset gomb">.
Űrlap példa:
<form>
<fieldset><legend>Ez egy űrlap</legend>
<label for=nev>Egysoros beviteli mező</label>: <input type=text id=nev maxlength=20>
<textarea rows="4" cols="50">Többsoros beviteli mező</textarea>
Jelölőnégyzetek:<br>
<label for="checkbox1">1</label>: <input type="checkbox" name="box1" id="checkbox1" checked>Box1
<label for="checkbox2">2</label>: <input type="checkbox" name="box2" id="checkbox2">Box2
<label for="checkbox3">3</label>: <input type="checkbox" name="box3" id="checkbox3" checked>Box3
Választó gombok:<br>
<label for="radio1">1</label>: <input type="radio" name="radiogomb" id="radio1">Rádiógomb1
<label for="radio2">2</label>: <input type="radio" name="radiogomb" id="radio2" checked>Rádiógomb2
<label for="radio3">3</label>: <input type="radio" name="radiogomb" id="radio3">Rádiógomb3
Lenyíló lista:<br>
<select multiple size="3">
<option value="alapism">Alapismeretek</option>
<option value="hardver">Hardver</option>
<option value="szoftver" selected>Szoftver</option>
<option value="oprendszer">Operációs rendszerek</option>
</select>
<input type="reset" value="Reset gomb"> <input type="submit" value="Submit gomb">
</fieldset>
</form>
Vissza a feladatsorszámok kiválasztásához