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ó,

Az előadások a következő témára: "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ó,"— Előadás másolata:

1 Webprogramozó tanfolyam Űrlapok (form-ok)

2 Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció, bejelentkezés, kérdőív stb. De mi is van mögötte?

3 Űrlapok a HTML-ben Az űrlap minden eleme a... tag-ek közé kell kerüljön Lehetséges paraméterei: – Method : milyen módon küldje az adatokat a server felé [get | post] – Action : hová küldje az adatokat? [ mailto | uri ] – Name : milyen néven hivatkozhatunk az űrlapunkra – Enctype : milyen módon kódolja az űrlap tartalmát Példa

4 Input? Sok típusú mező tartozik ide: – Gomb, szövegmező, jelölőnégyzet stb.... közé kell kerülnie a paramétereknek Szokásos: – Name, value, size (inkább style, css!)

5 Input típusai Button : magáért beszél Submit : gomb, mely az űrlapot elküldi (az aciton-ben megadott helyre) Password : szövegbeviteli mező, jelszó számára (csillagokat ír, nem lehet kivágni stb.) Checkbox : jelölőnégyzet Radio : választógomb (rádiógomb) Text : szövegbeviteli mező Reset : az űrlapot alaphelyzetbe állítja (a serverrel való kommunikáció nélkül ) Hidden : rejtett mező (lásd később) File : file kiválasztása (lásd később) Image : grafikus nyomógomb Példa

6 Feladat Beléptető rendszer továbbfejlesztése – Név – Jelszó – Belépés és törlés gomb

7 Az paraméterei Maxlength=‘szám’ : szöveg és jelszómező esetén a beírható karakterek maximális száma Checked : rádiógomb vagy jelölőnégyzet esetén megadhatjuk hogy kezdetben be legyen jelölve/ki legyen választva Src=‘URI’ : image típus esetén a használni kívánt kép címe

8 II. Feladat Beléptető rendszer ver 0.2 – Megjegyezzen-e?

9 Legördülő menü... közé kell kerüljön Paraméterei: – Name : milyen néven hivatkozhatunk rá – Size : Sorok száma (amennyi egyszerre látható) – Multiple: ha be van állítva, több elem is kijelölhető ( CTRL vagy SHIFT nyomvatartása melett) Példa Hát ez egyenlőre nem túl izgalmas...

10 Legördülő menü... közé kerülnek a választható elemek Paraméterei: – Value: milyen értéket küldünk a server felé – Selected: ez kezdetben már ki van választva – Label: tooltip (nem igazán szokott működni...) Példa Azért még mindíg nem az igazi...

11 Legördülő menü, harmadszor A size –ot 1-re kell állítani, akkor kapunk valódi legördülő menüt. Mint látható Mi van még?

12 Menü, elemcsoportok A válaszható elemeket tudjuk csoportosítani hasznos (vagy annak látszó, lásd példa) cimkék alatt.... Paramétere a ‘label’ itt adható meg hogy milyen szöveget jelenítsen meg. Példa

13 Szövegterület (textarea)... Paraméterei: – Name: milyen néven hivatkozhatunk rá – Rows: sorok száma – Cols: oszlopok száma – Readonly : csak olvasható lesz a mező értéke A nyitó és záró tag közé kerülő szöveg lesz az alapértelmezett tartalma. Példa

14 Ennyit az űrlapokról Van még néhány érdekesség, de azt majd később.