HTML alapok - szövegmező létrehozása
Űrlapok - Bevezetés
A HTML űrlapok illetve űrlap elemek teszik lehetővé, hogy a felhasználó egy weboldalon adatokat írhasson be és küldjön el a szerverre.
Egy űrlap elkészítése semmivel sem nehezebb, mint bármilyen más HTML oldal létrehozása. Az adatok felhasználása viszont még egyszerűbb esetekben is komoly programozói munkát igényel.
Az alábbi részfeladatokra érdemes koncentrálni:
- A HTML űrlap elkészítése, ahol a felhasználó megadhatja az adatait.
- Célszerű készíteni egy JavaScript programot, ami az űrlap elküldése előtt ellenőrzi a felhasználó által beírt adatokat, például minden szükséges mező ki legyen töltve, formailag helyes e-mail cím, stb. (Így meg lehet akadályozni a szerver fölösleges terhelését. A felhasználó is gyorsabban megkapja a korrekciót kérő figyelmeztetést, mintha egy hibás vagy hiányos adatmegadás után a szerver válaszára kellene várnia.)
- El kell készíteni azt a programot, ami a szerveren feldolgozza az elküldött adatokat. A feldolgozást az adatok ellenőrzésével kell kezdeni, hiszen az előző pontban leírt ellenőrzés nem működik, ha a kliensoldali JavaScript ki van kapcsolva. Az ellenőrzött adatokat le kell menteni egy adatbázisba (esetleg egy szövegfájlba).
- Kisebb honlapok készítésekor általában nem érdemes egy ekkora munkát a nulláról elkezdve megcsinálni. Az internetről letölthető weblap sablonok illetve tartalomkezelő rendszerek között kész megoldásokat lehet találni. (Persze az ilyen weboldalak testre szabhatóságának vannak korlátai.)
Űrlapok - Űrlap elemek. Az "< i n p u t />" tag.
Az űrlap elemeinek többségét az "< i n p u t/>" tag segítségével lehet létrehozni. Nincs záró tagja.
Legfontosabb attribútumai, amelyek minden elem-típushoz hozzárendelhetőek:
- type: Az űrlapelem típusát adja meg. A HTML 4.01 szabványban megengedett értékei: text, password, checkbox, radio, file, hidden, submit, reset, button, image. A HTML 5 szabványban jelentősen növelték az elemtípusok számát, de az új elemeket jelenleg (2013-ban) a böngészők még nem támogatják teljes mértékben.
- name: Az elem neve. Az űrlap adatait feldolgozó program ez alapján tudja azonosítani a felhasználó által bevitt adatokat.
- value: Az űrlapelem kezdeti értéke. Kötelező megadni, ha a type attribútum értéke radio vagy checkbox, egyébként használata opcionális.
- id, class, style: általános attribútumok
Egysoros szövegmező
Példa:
Ami így jelenik meg:
A példában szereplő attribútumok jelentése:
- size: A szövegmező szélességét adja meg a látható karakterek számában. Ez többnyire csak egy becsült érték, mivel a legtöbb betűtípus esetén a különböző karaktereknek a szélessége is eltér egymástól. Például az m betű több helyet foglal el mint az i betű, kivéve ha monospace betű típust választunk.
- maxlength: A beírható karakterek maximális száma. Az alapérték a végtelen.
Ha a maxlength értéke nagyobb, mint a size attribútum értéke, akkor a felhasználónak lehetősége van arra, hogy több karaktert írjon a szövegmezőbe, mint ami abban egyszerre látszódhat. Ez általában nem okoz problémát, mert a kurzort a billentyűzeten lévő nyilakkal mozgatva a felhasználó el tudja érni a beírt szöveg minden részét.
folytatása következik