Webprogramozó tanfolyam

Űrlapok (form-ok)

Űrlapok a HTML-ben

Biztosan mindenki találkozott már vele– Űrlap példa

Felhasználási lehetőségei– Regisztráció, bejelentkezés, kérdőív stb.

De mi is van mögötte?

Űrlapok a HTML-ben

Az űrlap minden eleme a <form> ... </form> 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

Input?

Sok típusú mező tartozik ide:– Gomb, szövegmező, jelölőnégyzet stb.

<input> ... </input> közé kell kerülnie a paramétereknek

Szokásos:– Name, value, size (inkább style, css!)

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

Feladat

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

Az <input> 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

II. Feladat

Beléptető rendszer ver 0.2– Megjegyezzen-e?

Legördülő menü

<select> ... </select> 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...

Legördülő menü

<option> ... </option> 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...

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?

Menü, elemcsoportok

A válaszható elemeket tudjuk csoportosítani hasznos (vagy annak látszó, lásd példa) cimkék alatt.

<optgroup> ... </optgroup> Paramétere a ‘label’ itt adható meg hogy

milyen szöveget jelenítsen meg. Példa

Szövegterület (textarea)

<textarea> ... </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

Ennyit az űrlapokról

Van még néhány érdekesség, de azt majd később.