Web Tervezés - 4. Fejezet
Űrlapok
Eddig főleg a megjelenítésről volt szó. Azonban egy weboldalnak tudnia kell felhasználió bemenetet is fogadnia.
Erre a célra szolgálnak az űrlap vezérlő elemek.
Ezeket css segítségével tetszés szerint testreszabhatjuk. (A böngészők sok tulajdonságnak adnak alapértelmezett értéket, ezért alaposnak kell lennünk, ha egy űrlapot szabunk testre.)
HTML5 számos új űrlap mező típust vezetett be, kliens oldali validálással.
- form
- action: a meghívandó url
- method: a http method (részletek később)
- enctype: kódolás típusa (application/xwww-form-urlencoded, text/plain, multipart/form-data)
- input
- type: űrlap elem típusát adja meg
- name: űrlap elem neve (ezzel a névvel kapja meg majd a php)
- value: űrlap elem értéke (ide megadhatunk egy alapértelmezet szöveget)
- placeholder: ha üres a mező, akkor ez jelenik meg benne
- type:radio - azonos nevű elemek egy csoportot alkotnak, egy csoportban 1 elem lehet kiválasztva
- További lehetőségek
- label: űrlap mezőhöz tartozó címkét jelent
- for: az ilyen id-jű űrlap mezőhöz tartozik
- ha közrefogja az űrlap elemet, akkor nem kell a for attribútum
- textarea: többsoros beviteli mező
- select: lenyíló lista
- option tag-eket tartalmaz, melyek a lista elemei
- lehet multiselect is
- tabindex="X": a mezők "feldolgozási sorrendje", vagyis a Tab hatására milyen sorrendben kéri be az elemeket
- <input type="hidden" name="valami" value="vmi" /> : szükség lehet rejtett adatokat küldeni (a szerver számára)
Feladatok
Feladat 1 - pozícionálás
Hozz létre 4 div elemet és adj nekik háttérszínt.
Az elsőt pozícionáld a dokumentum bal felső sarkához képest egy tetszőleges helyre, majd adj neki fix szélességet és magasságot.
A másodikat pozícionáld úgy, hogy egy görgetés során lebegő fejlécet alkosson, mely mindig a képernyő legtetejére van pozícionálva. Foglalja el a böngésző teljes szélességét, a magassága pedig legyen 50 px.
A harmadikat pozícionáld úgy, hogy az első div-hez képest add meg a helyzetét, méghozzá a div alatt jelenjen meg 10 pixellel.
A negyediket pozícionáld a második, lebegő fejléchez képest úgy, hogy annak a jobb felét teljesen kitakarja.
Feladat 2 - úsztatás
Egy sorban helyezz el 3 div elemet tetszőleges szöveges tartalommal.
Adj nekik fix szélességet úgy, hogy kiférjenek a képernyődön.
Ezután rakd őket egy 4. div-be (adj neki háttérszínt is), mely kapjon fix 300 px szélességet.
Módosítsd úgy a 3 div méretezését, hogy mindig elférjen egy sorban.
Hogyan tudod elérni, hogy a 4. div magassága felvegye a benne található elemek magasságát?
Feladat 3
Hozz létre egy regisztrációs űrlapot, mely egy társkereső oldalhoz szükséges adatokat kér be a felhasználótól.
(Minden mutatott űrlap elemet használj fel, legalább 10 mezővel rendelkezzen az űrlap.)
Feladat 3-b
Formázd meg az űrlap elemeket. (szélesség, magasság, betűméret, betűtípus, háttérszín, betűszín, keret, belső margó)