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

Slides:



Advertisements
Hasonló előadás
Zenetár a webszerverünkön, avagy XML használata PHP 5 alatt. Ercsey Balázs (laze) – netpeople.hu.
Advertisements

Bevezetés a jQuery használatába
Grafikus tervezőrendszerek programozása 10. előadás.
COMMERCEGATE Az új fizetési mód rövid bemutatója.
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
HTML űrlapok kezelése és feldolgozása PHP segítségével
JavaScript.
Beépített vezérlők és validáció
Fejlett programozási technikák II.
1 WEB TECHNOLÓGIÁK A JavaScript. 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis)
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
WEB Technológiák A HTML és a CGI ME Általános Informatikai Tsz. dr. Kovács László.
6. előadás: PHP-MySQL Barabás Péter
Kliensoldali Programozás
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
Webszerkesztés Stíluslapok (CSS).
Webszerkesztés Űrlapok a HTML-ben. Űrlap létrehozása Űrlapunk tartalma a … elemek között fog helyetfoglalni Egy lapon több űrlap is elhelyezhető Több.
SOAP alapismeretek A SOAP egy egyszerű XML alapú protokoll, ami lehetővé teszi, hogy az alkalmazások információt cseréljenek a HTTP-én keresztül. Forrás:
VFP Form programozás Form szerkesztő elemei vezérlő elemek
Microsoft Access Vezérlőelemek.
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
PHP III. Fájlok, űrlapok.
PHP VII Sütik, munkamenetek. Sütik Mi az a süti? A süti (cookie) állapotot tárol a felhasználó böngészőjében. Pl. ha egy oldalon beállítható, hogy milyen.
Buris Katalin V. földrajz - informatika
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
Formanyomtatványok létrehozása Dreamweaverrel E-business 6. előadás.
XHTML – a tanultak összefoglalása
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
Mobil informatika gyakorlat 2. óra: az NDEF formátum.
Űrlapok és keretek.
Űrlapok.
CSS A CSS bemutatása.
HTML nyelv.
Weboldalak tervezése (X)HTML.
Készítette: Lipp Marcell
Delphi Készítette: Rummel Szabolcs Elérhetőség:
Visual Basic 2008 Express Edition
Visual Basic 2008 Express Edition
1 Verseny 2000 gyakorlat ASP. 2 Gyakorlat Web létrehozása: Frontpage 2000 New Web:
Párizs, a fények városa Szakdolgozatom témájának azért választottam Párizst, mert világ életemben csodáltam magát a várost, mindig is nagy vágyam volt,
Web fejlesztés V. Illés Zoltán ELTE Informatikai Kar
Professzionális kliens oldali webfejlesztés jQuery alapokon
Illés Zoltán ELTE Informatikai Kar
Webprogramozó tanfolyam
Webprogramozó tanfolyam
Webprogramozó tanfolyam Űrlapok (form-ok). Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció,
Illés Zoltán ELTE Informatikai Kar
Violet nails Készítette: Csőke Vivien. Bevezetés Téma: Violet nails - műkörömkészítő weblapjának elkészítése A weboldal elérhető az alábbi címen: violetnails.atw.hu.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Így készült... a drupal6themes.com. 2 Miről lesz szó? Ötlet Célok Megoldások Problémák és hiányosságok További ötletek és tervek.
Webprogramozó tanfolyam
A Visual Basic és a programozás oktatása
Java web programozás 2..
A böngészőprogram használata. A böngészők értelmezik a html nyelvet, a javascript kódokat és a php kódokat is. Majd ezeket lefuttatja, és azok alapján.
Java web programozás 6..
Weboldalba ágyazott interaktív feladatok GeoGebra módra Papp-Varga Zsuzsanna ELTE IK Média- és Oktatásinformatika Tanszék
Az 5,6,7 laborok VBA anyagának összefoglalása
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
FCKeditor (Drupal rendszer). Tartalom Telepítés Beállítás Egyéb beállítások Eszköztárak.
A Google Drive használata. Mire jó? A Google Drive segítségével a fotókat, videókat, fájlokat és sok más tartalmat egy biztonságos felhőtárhelyen keresztül.
Informatikai rendszerek
Webprogramozó tanfolyam
HTML, XML szerkesztés Vezető: Majzik Zsuzsa
Alapok.
Alkalmazott Informatikai Tanszék
JavaScript a böngészőben
Alkalmazott Informatikai Tanszék
Előadás másolata:

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/