Űrlapok és keretek.

Az előadások a következő témára: "Űrlapok és keretek."— Előadás másolata:

1 Űrlapok és keretek

2 Űrlap (form) Speciális HTML tag adatok bevitelére
Az űrlapon elhelyezhetőek különböző elemek, amik segítségével az adatbevitel elvégezhető (pl.: beviteli mező, választógombok, nyomógombok) A bevitt adatokat továbbíthatjuk címre, vagy feldolgozhatjuk külön program segítségével (pl.: PHP-val)

3 Űrlap (folyt.) <FORM> </FORM> közé kerülnek az űrlapelemek
opciói: action="elérési út/fájlnév.kit" vagy "mailto: cím" – feldolgozást végző program neve vagy cím, ahová küldjük az adatokat method= "mód" – továbbítás módja a feldolgozó programhoz (lehet: GET – az adatokat URL-ben küldi, nem biztonságos, vagy POST – adatátvitel más számára nem látható enctype= "kódolás" – az elküldött adatok típusa (lehet TEXT/PLAIN szöveges adatoknál, vagy MULTIPART/FORM-DATA fájlküldésnél)

4 Űrlapelemek Beviteli mező (szövegdoboz)
<INPUT TYPE= "text" > - egysoros beviteli mező Opciói: name="szöveg" – a beviteli mező neve, a feldolgozó program számára fontos value="szöveg" – alapértelmezett érték megadása size="szám" – beviteli mező látható hosszúsága maxlength="szám" – a mezőben lévő szöveg maximális hossza

5 Űrlapelemek (folyt.) Beviteli mező speciális változatai
<INPUT TYPE= "password"> - egysoros szöveges mező, pontok jelennek meg a beírt szöveg helyett. Jelszónál használatos. <INPUT TYPE= "hidden"> - szöveges mező, ami nem látható a megjelenítésnél (feldolgozásnál lehet fontos)

6 Űrlapelemek (folyt.) Jelölőnégyzet (checkbox)
<INPUT TYPE="checkbox">választás1 – bepipálható négyzet készítése, a „választás1” szöveg kerül a négyzet mellé feliratnak Opciói: name="szöveg" – jelölőnégyzet elnevezése, az egymáshoz tartozó jelölőnégyzetek lehetőleg azonos nevűek legyenek value="érték" – az az érték, amit továbbítani szeretnénk a feldolgozáshoz selected – az oldal megjelenésekor be van jelölve

7 Űrlapelemek (folyt.) Választókapcsoló (rádiógomb)
<INPUT TYPE="radio">választás1 – bekapcsolható kör készítése, a „választás1” szöveg kerül a kör mellé feliratnak. Csak egy jelölhető be a megadottak közül. Opciói: name="szöveg" – rádiógomb elnevezése, az egymáshoz tartozó rádiógombok kötelezően azonos nevűek legyenek value="érték" – az az érték, amit továbbítani szeretnénk a feldolgozáshoz selected – az oldal megjelenésekor be van jelölve

8 Űrlapelemek (folyt.) Listák
<SELECT> </SELECT> - listaelemeket közrefogó HTML tag Opciói: name="szöveg" – lista elnevezése feldolgozáshoz size="szám" – lista mérete (hány elem jelenjen meg egyszerre, vagy hány elem legyen benne maximum) multiple – egyszerre több elem is kijelölhető Ha nem adjuk meg a SIZE és a MULTIPLE opciókat, akkor legördülő listát kapunk!

9 Űrlapelemek (folyt.) Listaelemek megadása:
A <SELECT> </SELECT> közé <OPTION>érték1</OPTION> megadásával adunk meg egy listaelemet. Az <OPTION> érték1 </OPTION> sorból annyit kell készíteni, amennyi listaelem szükséges Opciója: selected – melyik elem legyen alapértelmezettként kijelölve, legördülő listánál: melyik elem látszik alapból

10 Űrlapelem (folyt.) Szövegterület (textarea)
<TEXTAREA> </TEXTAREA> - többsoros beviteli mező, görgethető tartalommal Opciói: name="szöveg" – többsoros beviteli mező elnevezése rows="szám" – sorok száma cols="szám" – oszlopok száma

11 Űrlapelem (folyt.) Fájlfeltöltés
<INPUT TYPE="file"> - fájl csatolásához megjelenít egy szövegdobozt, és egy Tallózás gombot, amivel kikereshetjük a feltölteni kívánt fájlt a gépünkről Fájlküldésnél a <FORM> enctype opcióját be kell állítani a megfelelőre! Opciói: name="szöveg" – feldolgozó programban ezen a néven lehet a fájlra hivatkozni

12 Űrlapelem (folyt.) Mégse gomb Küldés gomb
<INPUT TYPE="reset"> - nyomógomb, amivel visszaállítható az oldal alaphelyzete Opciója: value="szöveg" – ez a szöveg jelenik meg a gombon Küldés gomb <INPUT TYPE="submit"> - elküldi a feldolgozó programnak vagy az adott címre az adatokat

13 Keret (Frame) Lehetővé teszi, hogy egyszerre több, független dokumentumot jelenítsünk meg külön ablakokban vagy ablakrészekben (azaz feloszthassuk a képernyőt) Annak a HTML fájlnak, ami leírja a képernyő felosztását, a hagyományostól eltér a szerkezete. a <BODY> előtt vagy helyett szerepel a felosztás megadása

14 Keret (folyt.) A képernyőt <FRAMESET> </FRAMESET> paranccsal lehet felosztani több ablakrészre Opciói: rows="hosszlista" – a vízszintes ablakrészek méreteit adja meg, vesszővel elválasztva, pixelben vagy %-ban. *-gal helyettesíthető az utolsó rész mérete. cols="hosszlista" – a függöleges ablakrészek méreteit adja meg, vesszővel elválasztva, pixelben vagy %-ban. *-gal helyettesíthető az utolsó rész mérete. border="szám" – a frame-ek közti keret vastagságának értéke (0=nincs keret köztük)

15 Keret (folyt.) Az ablakrészek tartalmának megadása: <FRAMESET> </FRAMESET> közé annyi <FRAME> parancs írása, amennyi részre osztottuk a teljes képernyőt. Opciói: src="elérési út/fájlnév.kit" – a tartalom forrását adja meg name="szöveg" – adott keret neve, hivatkozásnál fontos lehet noresize – a frame méretét a felhasználó nem méretezheti ár scrolling="görgetőmód" – a görgetősávot állítja be, lehet: yes – mindig van görgetősáv no – sosem jelenik meg görgetősáv auto – csak szükség esetén jelenik meg a görgetősáv

16 Keret (folyt.) A sorokra és oszlopokra osztást kombinálni is lehet.
Célframe megadása: A hivatkozásokban megadható, hogy melyik ablakrészben szeretnénk megnyitni azt A hivatkozás tag-jébe a target="framenév" opciót beírva megadhatjuk annak az ablakrésznek a nevét, ahol a hivatkozást meg szeretnénk jeleníteni (főleg menüknél alkalmazzák)

17 Ablak két oszlopra osztása
<HTML> <HEAD> </HEAD> <FRAMESET cols="20%,*" border=1> <FRAME SRC="1.html" name="bal"> <FRAME SRC="2.html" name="jobb"> </FRAMESET> </HTML>