Alkalmazott Informatikai Tanszék

Az előadások a következő témára: "Alkalmazott Informatikai Tanszék"— Előadás másolata:

1 Alkalmazott Informatikai Tanszék
HTML űrlapok Dr. Nehéz Károly egyetemi adjunktus Miskolci Egyetem Alkalmazott Informatikai Tanszék

2 HTML űrlapok működése A dinamikus weblapok általában tartalmaznak űrlapokat. Az űrlapok szövegmezőket, gombokat, kiválasztó, jelölő vezérlő elemeket tartalmazhatnak. A html-ben az űrlapokat a <form> és </form> jelölők közé kell megadni. A <form> tarlmaz legalább egy ‘method’ vagy ‘action’ attribútumot. ‘method’ attributum lehet ‘post’ vagy ‘get’. A ‘post’ az ürlap adatait a html kérés adatrészében küldi el. A ‘get’ módszer pedig a html fejrészben küldi az űrlap információkat. A ‘get’ esetén a böngésző fejlécében látható az űrlap tartalma. ‘action’ paraméter tartalmazza a szerver oldali CGI (common gateway interface) program URL azonítóját. (megj: a ‘cgi’ az előadás anyagában megtalálható) További ‘form’ attribútumok is megadhatóak, amelyekkel a kódolási mód határozható meg.

3 Űrlapok feldolgozási lépései
Első lépésben a Web-böngésző program megjeleníti az űrlapot. Minden űrlap tartalmaz egy gombot, amely a kitöltött űrlap további feldolgozását indítja meg. A felhasználó a feldolgozást elindító nyomógombot megnyomja. A web-böngésző összeállít az űrlap tartalmából mezőnév/mezőérték párokat majd ezeket ‘&’ karakterrel elválasztja majd kódolja az űrlaphoz megadott kódolással. A böngésző elküldi az űrlap tartalma alapján a 2. pontban előállt szöveget az ‘action’ paraméterrel megadott címre. A web kiszolgáló előállítja a futtatandó program környezetét, amely a szabványos bemeneten keresztül megkapja HTTP kérés törzsének tartalmát. A CGI program feldolgozza a bemenetet. Műveleteket végez, majd a szabványos kimenetre elkészíti a válasz HTTP üzenetét. A web kiszolgáló a CGI program válaszát kiegészíti (HTTP fejléc információkkal) és visszaküldi a kliensnek.

4 Űrlap vezérlők Egyszerű űrlap két szövegmezővel: <form>
Keresztnév: <input type="text" name="firstname"> <br> Vezetéknév: <input type="text" name="lastname"> </form>

5 Űrlap vezérlők Rádió gombok: <form>
<input type="radio" name=”nem" value=”férfi"> Férfi <br> <input type="radio" name=”nem" value=”nő"> Nő </form> Alapértelmezetten bejelölt gomb a checked=”checked” attribútummal adható meg.

6 Űrlap vezérlők Checkboxok <form>
<input type="checkbox" name="bicikli"> Van egy biciklim <br> <input type="checkbox" name="auto"> van egy autom </form>

7 Űrlap vezérlők Legördülő menük <form> <select name="cars">
<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>

8 Űrlap vezérlők Szövegmező Díszített legördülő
<textarea rows="10" cols="30"> Ide egy hosszabb szöveg írható </textarea> <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </select>

9 küldés <form name="fel11" method="post" enctype="text/plain"> Kérem a nevét! <input type="text" name=”mintaUserNev"> <br> <input type="submit" value="Mehet!"> <br> <input type="reset" value="Mégsem"> </form>

10 Egyszerű HTTP kiszolgáló
Az oktatási segédlet honlapjáról egy egyszerű web kiszolgáló tölthető le. Eredeti cím:

11 Egyszerű cgi program A cgi-bin alkönyvtár tartalmaz egy egyszerű cgi bin programot, amely a környezeti változókat írja ki: @echo off echo Content-type: text/plain echo. echo SERVER_SOFTWARE = %SERVER_SOFTWARE% echo SERVER_NAME = %SERVER_NAME% echo GATEWAY_INTERFACE = %GATEWAY_INTERFACE% echo SERVER_PROTOCOL = %SERVER_PROTOCOL% echo SERVER_PORT = %SERVER_PORT% echo REQUEST_METHOD = %REQUEST_METHOD% echo HTTP_ACCEPT = %HTTP_ACCEPT% echo PATH_INFO = %PATH_INFO% echo PATH_TRANSLATED = %PATH_TRANSLATED% echo SCRIPT_NAME = %SCRIPT_NAME% echo QUERY_STRING = %QUERY_STRING% echo REMOTE_HOST = %REMOTE_HOST% echo REMOTE_ADDR = %REMOTE_ADDR% echo REMOTE_USER = %REMOTE_USER% echo AUTH_TYPE = %AUTH_TYPE% echo CONTENT_TYPE = %CONTENT_TYPE% echo CONTENT_LENGTH = %CONTENT_LENGTH%

12 A kliens oldali html <html> <body>
A html file tartalma: Eredmény a gomb megnyomása után: <html> <body> <form method="get" action="/cgi-bin/valami.bat"> <input type="hidden" name="hello” value="dhdhd"/> <input type="submit" value="gomb" /> </form> </body> </html>