Internet technológiák

Átírás

1 Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović 1

2 XHTML űrlapok 2

3 XHTML űrlapok Minden űrlap jelölőelem a: form{action, enctype, method} Űrlaptartalom /form jelölőelem között kell, hogy elhelyezkedjen, amely a kitöltendő űrlap tartalmát jelöli ki. A tartalmat az action attribútumban megadott szkript program dolgozza fel: action= script.url ahol a script.url a szkript elérési útvonala. A form jelölőelem action paramétere arra a fájlra mutat, amely feldolgozza az űrlapon megadott adatokat. Ha az action attribútum csak a fájlnak a nevét adja meg, akkor az XHTML és a programot tartalmazó fájl egy könyvtárban van. 3

4 XHTML űrlapok Attribútum: method= attribútum meghatározza a kitöltött űrlap továbbítási módját a feldolgozó szkript program felé. Lehetséges értékei: get az URL-ben, (index.php?név1=érték&név2=érték) post adatcsomagban (biztonságosabb mód) továbbítja az adatokat. 4

5 XHTML űrlapok Get módszer -Az adatokat küldi az URL-ben következő formátumban oldal.php?név1=érték&név2=érték - Ez a módszer alkalmas adatok küldésére, ha a felhasználó szeretné beállítani az oldalt a kedvencekhez (bookmarks). - Korlátozzák az elküldött adatok összegét (függ a böngészőtől). Lehetséges, hogy nem lesz minden adat elküldve egy űrlapon keresztül. - Soha ne használja ezt a módszert, amikor fontos információkat (jelszavak, felhasználónevek,...) küld, mert ezek láthatóak lesznek az URL sorban a böngészőben. 5

6 XHTML űrlapok Post módszer - Az adatokat a HTTP-tranzakció formájában küldi csomagonként. - Az ezzel a módszerrel elküldött adatokat nem lehet beállítani a kedvencekhez (bookmarks). -Ez a módszer biztonságosabb a get módszernél, nincs méret korlátozás sem. 6

7 XHTML űrlapok Attribútum: enctype= A enctype attribútum meghatározza, hogyan kell az űrlapok adatait kódolni, mielőtt azt a szerverre küldjük (POST). Lehetséges értékei: application/x-www-form-urlencoded (alapértelmezett) multipart/form-data text/plain 7

8 XHTML űrlapok application/x-www-form-urlencoded Ez az alapértelmezett kódolás. Minden karakter kódolva van ( space átalakul "+" szimbólummá, és a speciális karaktereket átalakítja ASCII HEX értékekre). multipart/form-data Egyetlen karakter sincs kódolva. Ez az érték akkor szükséges, ha az űrlapon van egy fájl mező. text-/plain space átalakul "+" szimbólummá, de a nem speciális karakterek nem. 8

9 Adatbeviteli mezők input {align, alt, checked, disabled, maxlength, name, readonly, size, src, type, value} / A name attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt adatot. A type attribútum határozza meg a beviteli mező adattípusát: Nyomógomb: type= button Kapcsoló: type= checkbox A checkbox típusú mező esetében a: checked= checked attribútum alkalmazásával alapértelmezésként bekapcsoljuk a kapcsolót. Csatolandó fájl: type= file Rejtett adattípus (bevitelkor nem jelenik meg): type= hidden 9

10 Kép: type= image (alt,src) Adatbeviteli mezők Jelszó (bevitelkor nem jelenik meg): type= password Rádiókapcsoló (egyszerre csak egyet lehet kiválasztani): A radio típusú mező esetében a: checked= checked attribútum alkalmazásával alapértelmezésként bekapcsoljuk a rádiókapcsolót. Inicializáló gomb: type= reset A reset gomb lenyomása alapértékkel tölti fel az adatbeviteli mezőket. Adattovábbító gomb: type= submit A submit gomb lenyomásának hatására küldjük el az űrlapok adatait a feldolgozó szkript programnak. Szöveg: type= text 10

11 Adatbeviteli mezők <button type= >Push</button> type= button type = submit type = reset <button type="submit"><img src="images.jpg" alt= push" /></button> 11

12 Adatbeviteli mezők A text és password adattípusú beviteli mező esetén a beviteli ablak szélességét a: size= méret az ablakba bevihető maximális szöveghossz pedig a: maxlength= érték attribútumokkal határozzuk meg. value = érték egy mező értéke disabled= disabled egy beviteli mező használatának megtiltása readonly= readonly mező értéke csak olvasható disabled readonly 12

13 Adatbeviteli mezők A mezők a: label {for} felirat /label jelölőelemmel feliratozhatók. A textarea {cols,name,rows,readonly,disabled} szöveg /textarea jelölőelemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. A name attribútum értéke a mezőnév. A: rows= érték és cols= érték attribútumok a megnyíló beviteli ablak sorainak számát és szélességét adják meg. 13

14 Adatbeviteli mezők Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni, akkor ezt a: select {multiple, name, size} szöveg /select jelölőelem alkalmazásával tudjuk megtenni. A select nyitó jelölőelem jelzi a lista kezdetét, alapbeállításban egy legördülő menüt eredményez. A: name= név attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt listakészlet nevét. A: size= sorok attribútum meghatározza, hogy hány sorban jelenjenek meg a választható listajelölőelemek. Megadásával szkrollozható menüt kapunk (alapértelmezés szerint legördülőt). A select listába az option szöveg /option jelölőelem segítségével tudunk listajelölőelemeket elhelyezni. A: multiple= multiple attribútum megadásával a felhasználónak lehetőséget adunk egyszerre több listajelölőelem kijelölésére. <optgroup label= név > </optgroup> option csoport 14

15 Adatbeviteli mezők <body> <form name="urlap" method="post" action="edit.php"> <label>felhasználó név:</label> <input type="text" name="fnev" maxlength="10" size="10" /> <br /><br /> <label>jelszó:</label> <input type="password" name="fjelszo" maxlength="8" size="8" /> <br /><br /> <input type="submit" name="gomb" value="küld" /> <input type="reset" name="gombr" value="mégsem" /> </form> </body> 15

16 Adatbeviteli mezők <body> <form id="urlap" name="urlap" method="post" action="edit.php"> Melyik Web programozási nyelvet használja? <br /> <br /> <input type="radio" name="pnyelv" checked="checked" value="php" id="php" /><label for="php" >PHP</label> <br /> <input type="radio" name="pnyelv" value="asp" id="asp" /><label for="asp" >ASP</label> <br /> <input type="radio" name="pnyelv" value="java" id="java" /><label for="java" >JAVA</label> <br /> <input type="radio" name="pnyelv" value="perl" id="perl" /><label for="perl" >PERL</label> <br /> <br /> <input type="image" name="gomb" src="panic.jpg" alt="gomb" /> </form> </body> 16

17 Adatbeviteli mezők 17

18 Adatbeviteli mezők <body> <form id="urlap" name="urlap" method="post" action="edit2.php"> Melyik a kedvenc Web keresője? <br /> <br /> <input type="checkbox" name="webk" value="google" checked="checked" /> <br /> <input type="checkbox" name="webk" value="yahoo" /> <br /> <input type="checkbox" name="webk" value="lycos" /> <br /> <input type="checkbox" name="webk" value="vizsla" /> <br /> <br /> <input type="submit" name="gomb" value="küld" /> <input type="reset" name="gombr" value="mégsem" /> </form> </body> 18

19 Adatbeviteli mezők 19

20 Adatbeviteli mezők <body> <form name="forma" method="post" action="kep.php" enctype="multipart/form-data"> Küld el a képedet! <br /> <br /> <label>kép: </label><input type="file" name="kep" /> <br /><br /> <input type="submit" name="sg" value="küld" /> <input type="reset" name="rg" value="mégsem" /> </form> </body> 20

21 Adatbeviteli mezők 21

22 Adatbeviteli mezők <body> <form name="forma" method="post" action="film.php" > Melyik filmet láttad?br /><br /> <select name="film" size="1"> <option value="matrix">matrix</option> <option value="terminator">terminator</option> <option value="starwars">starwars</option> </select> <br /><br /> <input type="submit" name="gomb" value="küld" /> <input type="reset" name="gombr" value="mégsem" /> </form> </body> 22

23 Adatbeviteli mezők <body> <form id="urlap" name="urlap" method="post" action="film.php" > Melyik filmet láttad? Többet is megjelölhetsz! <br /> <br /> <select id="film" name="film" multiple="multiple" size="3"> <optgroup label="sci-fi" > <option value="matrix">matrix</option> <option value="terminator">terminator</option> <option value="starwars">starwars</option> </optgroup> <optgroup label="haborus"> <option value="d-day">d-day</option> <option value="dirty dozen">dirty Dozen</option> <option value="black hawk down">black Hawk Down</option> </optgroup> </select> <br /> <br /> <input type="submit" name="gomb" value="küld" /> <input type="reset" name="gombr" value="mégsem" /> </form> </body> 23

24 Adatbeviteli mezők 24

25 Adatbeviteli mezők <body> <form id="urlap" name="urlap" method="post" action="iro.php"> Írj véleményt a oldalról!<br /><br /> <fieldset> <legend> <textarea name="megjegyzes" rows="10" cols="40" ></textarea> <br /><br /> <input type="submit" name="gomb" value="küld" /> <input type="reset" name="gombr" value="mégsem" /> <br /><br /> </fieldset> </form> </body> 25

26 Adatbeviteli mezők 26

27 Adatbeviteli mezők 27

28 Meta jelölőelemek A <meta> tag biztosítja a metaadatokat a HTML dokumentumban. A metaadatok nem lesznek láthatóak az oldalon. Ez az adat nem jelenik meg a böngészőablakban, de ez az információ áll majd rendelkezésre a többi kliensnek (böngészők és különböző internetes szolgáltatások). A kliens csak azokat fogadja, amelyiket megérti. Metaadatokat a <head> jelölőelembe írjuk. 28

29 Meta jelölőelemek <meta name= érték content= érték /> author: meghatározza a dokumentum szerzőjét copyright: meghatározza a szerzői jogi információkat description: a dokumentum leírása distribution: a dokumentum elosztásának szintje generator: a dokumentum létrehozására használt program neve keywords: kulcsszavak progid: program ID-je rating: meghatározza a weboldal értékelését resource-type: meghatározza a webes forrás típusát revisit-after: a webes források várható frissítése robots: meghatározza a szabályokat a robotoknak (keresőrobotok, keresőmotorok) others: mások 29

30 Meta jelölőelemek <meta name= érték content= érték /> A kötelező attribútum a content, meghatározza a meta információk tartalmát. A tartalom a name attribútum értékétől függ. <meta name="keywords" content= xhtml,css,php" /> <meta name= author" content= VTS Subotica" /> 30

31 Meta jelölőelemek <meta http-equiv= érték content= érték /> A http-equiv attribútum értéke a content attribútum értékétől függ. Ha a name attribútum be van állítva, a http-equiv attribútum nem állítható be. Allow: meghatározza a kiszolgáló által támogatott módszereket Content-Encoding: meghatározza a kiegészítő tartalom kódolását Content-Length: meghatározza a dokumentum méretét (byte-ban) Content-Type: meghatározza a dokumentum MIME-típusát Date: meghatározza, mikor lett a dokumentum létrehozva Expires: meghatározza, mikor lesz a dokumentum elavult Last-Modified: meghatározza a dokumentum utolsó módosítását Location: meghatározza a dokumentum abszolút URL címét Refresh: meghatározza a dokumentum frissítési időintervallumát Set-Cookie: meghatározza a cookie értékét WWW-Authenticate: meghatározza a hitelesítési szabályokat 31

32 Meta jelölőelemek <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv= Content-language" content="hu" /> <meta http-equiv= Expires" content="0" /> 32

33 A Google és a meta jelölőelemek A Google a következő meta jelölőelemeket érti: <meta name="description" content="a description of the page" /> <title>the Title of the Page</title> <meta name="robots" content="...,..." /> <meta name="googlebot" content="...,..." /> <meta name="google" content="notranslate" /> <meta name="google-site-verification" content="..." /> <meta http-equiv="content-type" content="...; charset=..." /> <meta http-equiv="refresh" content="...;url=..." /> 33

34 A Google és a meta jelölőelemek <meta name="description" content="a description of the page" /> Az oldal rövid leírása. <title>the Title of the Page</title> Ez nem egy meta tag, de a google gyakran együtt használja a leírással. <meta name="robots" content="...,..." /> <meta name="googlebot" content="...,..." /> Ellenőrzi a böngészők és a webes robotok viselkedését. Az alapértelmezett: <meta name="robots" content= index, follow" /> Index,follow ugyanaz, mint az all 34

35 A Google és a meta jelölőelemek <meta name="robots" content="...,..." /> <meta name="googlebot" content="...,..." /> noindex nofollow nosnippet noodp ( noarchive noimageindex 35

36 A Google és a meta jelölőelemek <meta name="google" content="notranslate" /> <meta name="google-site-verification" content="..." /> Webmaster Tools <meta http-equiv="content-type" content="...; charset=..." /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="...;url=..." /> <meta http-equiv="refresh" content= 5;url=2.html" /> 36

37 Meta jelölőelemek <head> <title>vts</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content= en" /> <meta http-equiv="expires" content="0" /> <meta name="author" content= VTS" /> <meta name="keywords" content="student,it,web" /> <meta name="description" content="web site of vts" /> <meta name="robots" content="index, follow" /> <meta name="revisit-after" content="1 days" /> </head> 37

38 Facebook Open Graph Meta Tags <meta property="og:{tagname}" content="{tagvalue}"/> <meta property="og:image" content=" /> (minimum 50x50) <meta property="og:type" content="website"/> <meta property="og:title" content="visoka tehnička škola strukovnih studija SUBOTICA"/> <meta property="og:url" content=" <meta property="og:site_name" content="vts Subotica"/> <meta property="og:description" content="text..."/> 38

39 Facebook Open Graph Meta Tags

40 40

41 41