1 / 30

HTML 2.

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:

walden
Download Presentation

HTML 2.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

More Related