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