Webszerkesztés

1. Webszerkesztés Űrlapok a HTML-ben

2. Űrlap létrehozása • Űrlapunk tartalma a <form> … </form> elemek között fog helyetfoglalni • Egy lapon több űrlap is elhelyezhető • Több űrlap NEM ágyazható egymásba • Az action paraméterrel azt adhatjuk meg, hogy mi történjen a kitöltött űrlappal • A method paraméter azt adja meg, hogy hogyan kerüljenek az adatok a feldolgozó részhez • <form method=„POST” action=„mailto:kert@akarhol.hu”>

3. Jelölőnégyzet • Az <input> elem type paraméterének checkbox értéke eredményeképpen jön létre • A name paraméter lesz a jelölőnégyzet neve, megadása kötelező, ne tartalmazzon ékezetes betűket • A value paraméter a kezdőértéket határozza meg • A tabindex paraméter az űrlapunk tab billentyűvel való bejárása esetén az egyes elemek elérési sorrendjét jelenti • A checked paraméterrel beállíthatjuk, hogy a jelölőnégyzet már megjelenéskor kiválasztott legyen

4. Választógomb • Az <input> elem type paraméterének radio értéket adva hozhatjuk létre • A name paraméter azonosságával jelezzük, hogy gombjaink egy csoportba tartoznak • Közülük csak egy választható ki • A value paraméter értéke jelzi majd, hogy melyik elemet választotta ki oldalunk látogatója • A checked paraméter jelzi, hogy az adott gomb már az űrlap megjelenésekor alapértelmezés szerint kiválasztott

5. Szövegdoboz • Egysoros adatmegadásra alkalmas beviteli mező • Az <input> elem type paraméterének text értéket adva hozhatjuk létre • A name paraméter értéke a szövegdoboz neve, ezzel hivatkozhatunk rá • A size paraméter értéke a szövegdoboz mérete karakter egységben. Ennél hosszabb szöveg is beírható, de látszani csak ennyi fog • A maxlength paraméterrel a beírandó adatra vonatkozó karakterszámban meghatározott korlát definiálható • A value paraméter értéke a szövegdoboz alapértelmezett tartalmát határozza meg

6. Szövegterület • Több sorból álló, szövegbevitelre alkalmas mező • Méretét a rows (sorok) és a cols (oszlopok) paraméterek értékével adhatjuk meg karakterszám egységekben • A name paramétert itt is kötelező megadni • Az alapértelmezett szöveg itt nem paraméterértékként adható meg, hanem a <textarea> … </textarea> elemek között

7. Legördülő lista • Előre megadott választási lehetőségek felajánlására alkalmas • <select> … </select> elemek közé ágyazott <option> … </option> elemekkel hozhatjuk létre • A select elem size paraméterével az egyszerre látható sorainak számát adhatjuk meg • A name paraméter a lista nevét adja meg • Az érték nélküli multiple paraméter megadása esetén egyszerre több sor listaelem is kiválasztható • Az option elemekkel határozzuk meg a választási lehetőségeket • A selected paraméterrel állíthatjuk be, hogy melyik elem legyen alapértelmezésként kijelölve

8. Nyomógombok • Háromféle nyomógombot hozhatunk létre • Alaphelyzetbe állíthatjuk az űrlapon található elemeket (reset) • Kezdeményezhetjük az űrlap adatainak feldolgozását (submit) • Fontos, hogy nem a gomb határozza meg a feldolgozás mikéntjét • Ezt az űrlap létrehozásánál adjuk meg • Általános célokra használhatjuk (button) • A gomb fajtáját a type paraméter értéke adja meg • A value paraméter a gomb feliratát jelenti • A name paraméter a gomb nevét jelenti, aminek a segítségével hivatkozhatunk rá, ha szükséges