Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
HTML 2. Űrlapok
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=" method="post"> ...az űrlap magja... </FORM> 2.Példa <FORM action= enctype= „text/plain" method="post">
5
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>
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=" method="post"> <P> Név: <INPUT type="text" name="nev"><BR> <INPUT type="text" name=" "><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 </BUTTON>
<FORM action=" method="post"> <P> Név: <INPUT type="text" name="nev"><BR> <INPUT type="text" name=" "><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>
12
SELECT Opciók kiválasztása name = név size = méret
multiple = többszörös kiválasztás
13
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
14
SELECT - példa <FORM action=" 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>
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=" 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ő <FORM 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=" 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…
20
FIELDSET – példa <FORM action=" 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>
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=" 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 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>
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://users.hszk.bme.hu/~hj130/
Hasonló előadás
