HTML 2. Űrlapok http://www.w3.org/TR/REC-html40/interact/forms.html
Ű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
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
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">
INPUT 1. Beviteli elem Kulcsszava Több típusa van Type értékei: "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)„ Pl. <Input Type="text" name=proba>
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
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>
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>
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>
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
BUTTON - példa </BUTTON> <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á"> </P> </FORM>
SELECT Opciók kiválasztása name = név size = méret multiple = többszörös kiválasztás
OPTION OPTGROUP A kiválasztható elemek selected = ki van választva value = értéke label = címkéje, megnevezése OPTGROUP Az Elemek csoportosítása
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> </SELECT> </P> </FORM>
TEXTAREA Szövegdoboz Főbb tulajdonságai: name = név rows = sorok száma cols = oszlopok száma
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>
ISINDEX Egysoros beviteli mező Pl. <ISINDEX prompt="Enter your search phrase: "> Ugyan az, mint az INPUT-tal létrehozott beviteli mező <FORM action=„mailto:i@i.hu" method="post"> <P> Keresés: <INPUT type="text"> </P> </FORM>
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>
FIELDSET Mezők csoportosítása <FIELDSET> … űrlapelemek…
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> <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 <LEGEND>Egyebek</LEGEND> Magamról: <br> <TEXTAREA name="magamrol" rows="3" cols="20" tabindex="5"> </TEXTAREA> </P> </FORM>
Szkriptek Az űrlapok adatait feldolgozó szkriptek: JavaScript VBScript PHP Tcl stb.
Javascript <html> <body> <script type="text/javascript"> document.write("<h1>Hello Világ!</h1>") </script> </body> </html>
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>
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>
Javascript <INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">
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>
PHP http://www.prog.hu/site/text/articles/lang/php4-src1.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
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>
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>
Linkek http://users.hszk.bme.hu/~hj130/ 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/