Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "HTML 2. Űrlapok http://www.w3.org/TR/REC-html40/interact/forms.html."— Előadás másolata:

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="http://oldal.com/konyvtar" 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="http://oldal.com/konyvtar/sajat" 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="http://oldal.com/konyvtar/sajat" 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="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>

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ő <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="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…

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> <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> ", "width": "800" }

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> ", "width": "800" }

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>

", "width": "800" }

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> ", "width": "800" }

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> ", "width": "800" }

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/


Letölteni ppt "HTML 2. Űrlapok http://www.w3.org/TR/REC-html40/interact/forms.html."

Hasonló előadás


Google Hirdetések