1. HTML 2. Űrlapok http://www.w3.org/TR/REC-html40/interact/forms.html

2. Űrlapok elemei • Gombok  • Jelölőnégyzetek  • Választókapcsolók • Legördülő menűk • Beviteli mezők • Fájl-kiválasztók • Rejtett elemek • Objektum-vezérlők

3. FORM Űrlap mező Tulajdonságai: • action Kötelező mező – szerveroldali feldolgozás • method (GET|POST) GET – HTTP feldolgozási módszer • enctype kódolás • accept feltöltött fájl MIME-típusa • name az űrlap neve • onsubmit – a jóváhagyáskor végrehajtódó szkript neve • onreset – az alapbeállítást kieszközölő szkript neve • accept-charset – az elfogadott karakterkészletek listája

4. FORM - példa 1.Példa <FORM action="http://oldal.com/konyvtar" method="post"> ...az űrlap magja... </FORM> 2.Példa <FORM action= "mailto:f@f.ua" enctype= „text/plain" method="post"> ...az űrlap magja... </FORM>

5. INPUT 1. • Beviteli elem • Kulcsszava • Input • Több típusa van • Type értékei: • "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)„ • Pl. <Input Type="text" name=proba>

6. INPUT 2. Type típusai: • TEXT – szöveges bevitel • PASSWORD – jelszó megadása • CHECKBOX – jelölőnégyzetek • RADIO – választókapcsolók • SUBMIT – jóváhagyás • RESET – alapbeállítás • FILE – állományböngészés • HIDDEN – rejtett • IMAGE – kép • BUTTON - gomb

7. INPUT 3. INPUT főbb mezői: • type = text|password|checkbox|radio|submit|reset|file|hidden|image|button • name = név • value = checked/diasable/readonly érték (radio és checkbox-ok számára) • size = méret • maxlength = maximálisan hány karakter lehet a beviteli mezőben • scr = forrás a képmezők számára Pl. <Input Type="text" name=proba size=50 maxlength=30>

8. INPUT - példa <FORM action="http://oldal.com/konyvtar/sajat" method="post"> <P> Név: <INPUT type="text" name="nev"><BR> e-mail: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="nem" value="Férfi"> Férfi<BR> <INPUT type="radio" name= "nem" value="Nő"> Nő<BR> <INPUT type="submit" value="Elküld"> <INPUT type="reset"> <INPUT type="button" value="Ellenőriz" onclick="verify()"> </P> </FORM>

9. INPUT – jelszó példa <html> <body> <form action=""> Felhasználónév: <input type="text" name="felhasznalo"> Jelszó: <input type="password" name="jelszo"> </form> <p> Figyelem!A felhasználói név látszik, míg a jelszó rejtve marad! </p> </body> </html>

10. BUTTON Gomb Főbb tulajdonságai: • name = neve • value = értéke • type = submit|button|reset • submit – jóváhagy • button – egyszerű gomb • reset - alapbeállítás

11. BUTTON - példa <FORM action="http://oldal.com/konyvtar/sajat" method="post"> <P> Név: <INPUT type="text" name="nev"><BR> e-mail: <INPUT type="text" name="email"><BR> <BUTTON name="elkuld" value="submit" type="submit"> Elküld<IMG src= "huha.gif" alt="Húha"> </BUTTON> <BUTTON name="alaphelyzet" type="reset"> Alaphelyzet<IMG src= "hoppa.gif" alt="Hoppá"> </BUTTON> </P> </FORM>

12. SELECT Opciók kiválasztása • name = név • size = méret • multiple = többszörös kiválasztás

13. OPTION A kiválasztható elemek • selected = ki van választva • value = értéke • label = címkéje, megnevezése OPTGROUP Az Elemek csoportosítása

14. SELECT - példa <FORM action="http://oldal.com/konyvtar/sajat" method="post"> <P> <SELECT name="Jarmuvek"> <OPTION selected label="ures" value="uses">Járművek</OPTION> <OPTGROUP label="Autok"> <OPTION label="BMW" value="bmw">BMW</OPTION> <OPTION label="Audi" value="audi">Audi</OPTION> </OPTGROUP> <OPTGROUP label="Repülők"> <OPTION label="F-112" value="f-112">F-112</OPTION> <OPTION label="Mig-21" value="mig-21">MIG-21</OPTION> </OPTGROUP> </SELECT> </P> </FORM>

15. TEXTAREA Szövegdoboz Főbb tulajdonságai: • name = név • rows = sorok száma • cols = oszlopok száma

16. TEXTAREA – példa <FORM action="http://oldal.com/konyvtar/sajat" method="post"> <P> <TEXTAREA name= "szoveg" rows=5 cols=25> Ez már be van írva ide. Ez is, de új sorból! </TEXTAREA> <br> <INPUT type="submit" value = "Elküld"> <INPUT type="reset" value = "Alaphelyzet"> </P> </FORM>

17. ISINDEX Egysoros beviteli mező Pl. <ISINDEX prompt="Enter your search phrase: "> Ugyan az, mint az INPUT-tal létrehozott beviteli mező Pl. <FORM action=„mailto:i@i.hu" method="post"> <P> Keresés: <INPUT type="text"> </P> </FORM>

18. LABEL Címkék, feliratok Főbb mezője • for = a vezérlőelem id mezőjében megadott név, amelyiknek a címkét szánjuk a vezérlőelemnél mek kell adni az id mezőt Pl. <FORM action="http://oldal.com/sajat" method="post"> <P> <LABEL for="vezeteknev">Vezetéknév: </LABEL> <INPUT type="text" id="vezeteknev"><BR> </P> </FORM>

19. FIELDSET Mezők csoportosítása • <FIELDSET> • … űrlapelemek… • </FIELDSET>

20. FIELDSET – példa <FORM action="http://oldal.com/sajat" method="post"> <P> <FIELDSET> <LEGEND>Adataim</LEGEND> Név: <INPUT name="adat_nev" type="text" tabindex="1"> Cim: <INPUT name="adat_cim" type="text" tabindex="2"> </FIELDSET> <FIELDSET> <LEGEND>Közérzet?</LEGEND> <INPUT name="kozerzet" type="radio" value="jó" tabindex="3"> Jó <INPUT name="kozerzet" type="radio" value="rossz" tabindex="4"> Rossz </FIELDSET> <FIELDSET> <LEGEND>Egyebek</LEGEND> Magamról: <br> <TEXTAREA name="magamrol" rows="3" cols="20" tabindex="5"> </TEXTAREA> </FIELDSET> </P> </FORM>

21. Szkriptek Az űrlapok adatait feldolgozó szkriptek: • JavaScript • VBScript • PHP • Tcl • stb.

22. Javascript <html> <body> <script type="text/javascript"> document.write("<h1>Hello Világ!</h1>") </script> </body> </html>

23. Javascript <html> <body> <p> A böngésző JavaScript lehetőségei: </p> <script type="text/javascript"> <!-- document.write("A bönbésző témogatja a JavaScriptet!") //--> </script> <noscript>Nincs JavaScript támogatás!</noscript> </body> </html>

24. Javascript – gomb <HEAD> </HEAD> <BODY> <script LANGUAGE="Javascript"> kep1="gomb0.gif"; kep2="gomb1.gif"; function egerbemozog() {  document.gomb.src=kep2; } function egerkimozog() { document.gomb.src=kep1; } </script> <p><a href="http://index.hu" onmouseover="egerbemozog()" onmouseout="egerkimozog()"> <img name="gomb" src="gomb0.gif" border="0"></a></p> </BODY>

25. Javascript <INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">

26. VBScript <INPUT name= "szoveg" size="50"> <SCRIPT type="text/vbscript"> Sub edit1_changed() If edit1.value = "abc" Then button1.enabled = True Else button1.enabled = False End If End Sub </SCRIPT>

27. PHP <?php  if (isset($muvelet)) {    switch ($muvelet) {      case "+":        $eredm=$a+$b;        break;      case "-":        $eredm=$a-$b;        break;      case "*":        $eredm=$a*$b;        break;      case "/":        $eredm=$a/$b;    }    echo "A számolás eredénye: <b>$a $muvelet $b = $eredm</b>";  } ?> </body> </html> <html>   <head>     <title>Számológép</title>   </head> <body> <form action="<?php echo $PHP_SELF?>"> <input type="hidden" name="meghivva"> a= <input type="text" name="a"><br> b= <input type="text" name="b"><p> Művelet:<br> <input type="radio" name="muvelet" value="+" default>a+b<br> <input type="radio" name="muvelet" value="-">a-b<br> <input type="radio" name="muvelet" value="*">a*b<br> <input type="radio" name="muvelet" value="/">a/b<br> <input type="submit" value="Számold ki"><p> </form> http://www.prog.hu/site/text/articles/lang/php4-src1.php

28. Tcl <INPUT name= "szoveg" size="50"> <SCRIPT type="text/tcl"> proc edit1_changed {} { if {[edit value] == abc} { button1 enable 1 } else { button1 enable 0 } } edit1 onChange szoveg_changed </SCRIPT>

29. CSS – stíluslapok <html> <head> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head> <body> <h1>This is header 1</h1> <h3>This is header 3</h3> </body> </html>

30. Linkek • http://www.w3schools.com/default.asp • http://www.bibl.u-szeged.hu/bibl/eforras/tananyag/informatika/paja/index.htm • http://www.prog.hu/cikkek/423/HTML+urlapok+hasznalata/oldal/2.html • http://www.intermedia.c3.hu/javascript/main.html • http://users.hszk.bme.hu/~hj130/