4. fejezet

A fejezet anyaga

HTML5 űrlapok létrehozása és formázása, néhány fontosabb űrlapelem megismerése.

Az űrlapok szerepe

Az eddigiek során főként a weboldalak megjelenésén volt a hangsúly: HTML-ben különféle elemeket helyeztünk el a weboldalon, majd CSS-ben formázásokkal láttuk el ezeket.

A HTML űrlapok lehetőséget biztosítanak arra, hogy a weboldalaink felhasználói bemenetet is tudjanak fogadni, amit később fel is tudunk dolgozni. Az űrlapok a modern weboldalak szerves részei, napi szinten találkozhatunk velük webes kalandozásaink során. Például ha be szeretnénk lépni a kedvenc közösségi oldalunkra, akkor egy - az alábbihoz hasonló - bejelentkezési űrlapon adjuk meg a belépéshez szükséges adatainkat.

Ennek a leckének a célja, hogy megtanuljunk HTML-ben űrlapokat készíteni. Természetesen a gyakorlatban fel is szoktuk dolgozni a felhasználó által az űrlapon megadott adatokat, viszont az űrlapok feldolgozásával majd csak a PHP témakörében fogunk foglalkozni.

Űrlapok létrehozása

HTML-ben a <form>...</form> tagpárral hozhatunk létre űrlapokat. Természetesen az űrlapok - mint minden megjelenítendő elem - a HTML dokumentum törzsrészébe (body) kerülnek.

A <form> tagnek adható fontosabb attribútumok:

• action: az űrlap elküldésekor végrehajtandó feladat (jellemzően egy PHP szkript)
• method: az űrlapadatok továbbításának módja
  • lehetséges értékei: GET (az űrlapadatok az URL-ben kerülnek továbbításra, alapértelmezett), POST (az űrlapadatok a háttérben továbbítódnak)
• enctype: az űrlapadatok kódolása
  • lehetséges értékei: application/x-www-form-urlencoded (alapértelmezett), multipart/form-data (fájlfeltöltést tartalmazó űrlapoknál ezt kell használnunk), text/plain (levélküldéskor)
• autocomplete: automatikus kitöltési javaslatok engedélyezése vagy letiltása
  • lehetséges értékei: on (kitöltési javaslatok engedélyezése, alapértelmezett), off (kitöltési javaslatok letiltása)
• novalidate: letiltja az űrlap elküldésekor végrehajtandó ellenőrzéseket.

Kiemelten fontos megjegyezni, hogy mivel a method="GET" attribútummal rendelkező űrlapok adatai az URL-ben lesznek továbbítva, ezért ez a módszer NEM alkalmas bizalmas adatok (pl. jelszavak) biztonságos továbbítására (vélhetően senki nem örülne annak, ha a jelszavát bárki láthatná az URL sávban)! Ha egy űrlapon bizalmas adatokat (pl. jelszavakat) szeretnénk továbbítani, akkor mindenképpen a method="POST" attribútumot használjuk!

Fontosabb űrlapelemek

Ebben a részben megismerkedünk a HTML űrlapokon elhelyezhető fontosabb vezérlőelemekkel.

Egysoros beviteli mező

A HTML űrlapokon leggyakrabban az <input/> páratlan taget használjuk. Ez számos különféle űrlapelem (pl. szöveges beviteli mező, választógomb, jelölőnégyzet, elküldés gomb stb.) létrehozására alkalmas.

Fontosabb attribútumok

Még mielőtt áttekintenénk a különféle beviteli mező típusokat, először ismerkedjünk meg az <input> tagnek adható fontosabb attribútumokkal:

• name: mezőnév, ami alapján le tudjuk kérni a beviteli mezőbe írt értéket
• size: a beviteli mező szélessége (karakterben)
  • tehát nem a beírható karakterek számát korlátozza, hanem csak a megjelenő űrlapmező szélességét (vesd össze: maxlength)
• maxlength: a beírható karakterek maximális száma
• value: a mezőbe írt alapértelmezett érték
• placeholder: mintaérték a felhasználó számára (akkor jelenik meg, ha a mező üres)
• autocomplete: ugyanúgy működik, mint a <form>-nál (on/off értékek)
• required: a mezőt kötelező kitölteni
• readonly: a mező csak olvasható, nem módosítható
• disabled: a mező letiltása (halványan jelenik meg, nem lehet bele írni)
• type: az űrlapmező típusa.

Fontosabb beviteli mező típusok

Az <input> tag type attribútumával megadhatjuk a beviteli mező típusát. Néhány fontosabb mezőtípus, ami közül válogathatunk:

• <input type="text"/>: rövid szöveg
• <input type="password"/>: jelszó
  • a beírt karakterek helyett pontok vagy csillagok jelennek meg
  • felhasználói jelszavak bekérésére mindenképpen ezt a mezőtípust kell használni (nagy felelőtlenség lenne egyszerű szövegként megjeleníteni a begépelt jelszót)
  • a jelszavak szerverre való továbbításánál nem történik titkosítás
• <input type="number"/>: szám
• <input type="range"/>: intervallum
  • min attribútum: a legkisebb kiválasztható érték
  • max attribútum: a legnagyobb kiválasztható érték
  • step attribútum: lépésköz
• <input type="tel"/>: telefonszám
• <input type="email"/>: e-mail cím (ellenőrzi a formátumát)
• <input type="url"/>: URL (ellenőrzi a formátumát)
• <input type="color"/>: szín
• <input type="date"/>: dátum
  • a min és max attribútummal megadhatjuk a legkisebb és legnagyobb kiválasztható értéket
  • a dátumok megadása ÉÉÉÉ-HH-NN formátumban történik
• <input type="time"/>: időpont
• <input type="datetime"/>: dátum és időpont
• <input type="file"/>: fájlfeltöltés
• <input type="search"/>: keresendő szöveg
• <input type="radio"/>: választógomb
  • az egy csoportba tartozó választógombok közül legfeljebb 1 opció jelölhető meg
  • a választógombok csoportosítása a name attribútum alapján történik: az azonos name értékkel rendelkező választógombok alkotnak egy csoportot
  • checked attribútum: az adott opció alapból be van jelölve a lap betöltésekor
• <input type="checkbox"/>: jelölőnégyzet
  • egyszerre több opció is megjelölhető
  • checked attribútum: az adott opció alapból be van jelölve a lap betöltésekor
• <input type="button"/>: egyszerű nyomógomb
• <input type="submit"/>: elküldés gomb (ha rákattintunk, elküldi az űrlapot)
• <input type="reset"/>: visszaállítja az űrlapmezők eredeti értékeit (alapállapot gomb)
• <input type="hidden"/>: rejtett mező (technikai célokra használjuk).

Példa: Egy egyszerű bejelentkezési űrlap (formázás nélkül)

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/>
   </head>
   <body>
      <h1>Bejelentkezés</h1>
      <form method="POST">
        <input type="text" name="username" placeholder="Felhasználónév..." required/> <br/><br/>
        <input type="password" name="passwd" placeholder="Jelszó..." required/> <br/><br/>
        <input type="submit" value="Bejelentkezés"/>
      </form>
   </body>
</html>

Több soros beviteli mező

A <textarea>...</textarea> taggel több soros szöveg bevitelére alkalmas űrlapmezőt hozhatunk létre. Az ilyen beviteli mezőket gyakran használjuk például felhasználói visszajelzések, kommentek bekérésére.

Ennél a tagnél is használhatók a korábban tárgyalt name, placeholder, maxlength, required, readonly és disabled attribútumok. Ezek mellett a rows attribútummal megadhatjuk a megjelenő sorok számát, a cols attribútummal pedig az oszlopok számát.

Példa: Felhasználói visszajelzés bekérése

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/>
   </head>
   <body>
      <form>
        <textarea name="feedback" rows="5" cols="50" maxlength="200"
        placeholder="Írd meg a véleményedet (max. 200 karakter)!"></textarea> <br/> <br/>
        <input type="submit"/>
      </form>
   </body>
</html>

Választólista

A <select>...</select> tagpárral egy lenyitható választólistát hozhatunk létre egy űrlapon belül, amelynek segítségével különböző opciók közül választhat a felhasználó. A korábban tárgyalt name, required és disabled attribútumokat erre az űrlapelemre is alkalmazhatjuk.

A választólistához tartozó opciókat az <option>...</option> taggel adhatjuk meg. A tag fontosabb attribútumai:

• value: az űrlap feldolgozásakor a szervernek elküldött érték
• selected: az opció alapból ki van választva a lap betöltésekor
• disabled: az opciót nem lehet kiválasztani.

Alapértelmezett módon egy választólistán belül mindig csak egy opció választható ki. Ha engedélyezni szeretnénk több opció kiválasztását is, akkor ezt a <select> tagnek adott multiple attribútummal tehetjük meg.

Példa: Egy egyszerű választólista

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/>
   </head>
   <body>
      <form>
        A kedvenc fagyi ízed:
        <select>
          <option value="vanilla">Vanília</option>
          <option value="chocolate" selected>Csokoládé</option>
          <option value="pistachio">Pisztácia</option>
          <option value="lemon">Citrom</option>
          <option value="raspberry">Egyéb</option>
        </select>
      </form>
   </body>
</html>

Elemfelirat

Az egyes űrlapelemekhez készíthetünk elemfeliratot is a <label>...</label> taggel. Ha a felhasználó egy elemfeliratra kattint, akkor automatikusan az elemfelirathoz tartozó űrlapelem kerül a fókuszba.

Egy űrlapelemhez kétféleképpen társíthatunk elemfeliratot:

• az űrlapelemet a <label> és </label> tagek közé helyezzük
• az űrlapelemnek adunk egy egyedi azonosítót (id), majd az elemhez tartozó <label> tag for attribútumának értékeként megadjuk ezt az azonosítót

Példa: Elemfeliratok társítása űrlapmezőkhöz

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/> 
      <style>
        input { margin-bottom: 10px; }
      </style>
   </head>
   <body>
      <h1>Bejelentkezés</h1>
      <form method="POST">
        <!-- Az egyik módszer: a <label> közrefogja az űrlapelemet -->
        <label>Felhasználónév: <input type="text" name="username" required/></label> <br/>

        <!-- A másik módszer: id érték alapján történő társítás -->
        <label for="my-passwd">Jelszó:</label>
        <input type="password" id="my-passwd" name="passwd" required/> <br/>

        <input type="submit" value="Bejelentkezés"/>
      </form>
   </body>
</html>

Mezőcsoportosítás

Űrlapok készítésekor érdemes lehet az űrlapelemeket strukturálni, az azonos témához tartozó űrlapmezőket csoportosítani. Az ilyen mezőcsoportosítások kialakítását a <fieldset>...</fieldset> tagpárral végezhetjük.

A <legend>...</legend> taggel megadhatjuk egy mezőcsoportosítás feliratát.

Példa: Mezőcsoportosítás használata

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/> 
   </head>
   <body>
      <form method="POST">
        <fieldset>
          <legend>Személyes adatok</legend>
          <label for="full-name">Teljes név:</label>
          <input type="text" id="full-name" name="full-name"/> <br/><br/>
          <label for="email">E-mail cím:</label>
          <input type="email" id="email" name="email"/> <br/><br/>
          <label for="passwd">Jelszó:</label>
          <input type="password" id="passwd" name="passwd"/> <br/><br/>
          <input type="submit"/>
        </fieldset>
      </form>
   </body>
</html>

Űrlapok formázása

Mint minden HTML elemet, az űrlapelemeket is lehetőségünk van CSS formázásokkal ellátni. A böngészők sok tulajdonságnak adnak alapértéket, ezért alaposnak kell lennünk, ha egy űrlap kinézetét szeretnénk testreszabni. Az űrlapok formázására használhatjuk a korábbi leckékben megismert valamennyi CSS tulajdonságot.

A formázandó űrlapelemek kijelölésekor gyakran előkerül a múlt órán tanult attribútum alapján történő kijelölés. Például ha ki szeretnénk jelölni az összes <input type="text"/> típusú űrlapelemet, akkor ezt az input[type="text"] CSS szelektorral tudjuk megtenni.

Egy-egy űrlapelem csoport kijelölésére használhatunk különböző pseudo-class-okat is:

• :required: kijelöli a required attribútummal rendelkező elemeket
• :optional: kijelöli a required attribútummal nem rendelkező elemeket
• :focus: kijelöli a fókuszban lévő elemet
• :checked: kijelöli a bejelölt radio, checkbox és option elemeket
• :disabled: kijelöli a disabled attribútummal rendelkező (letiltott) űrlapelemeket
• :enabled: kijelöli a disabled attribútummal nem rendelkező (engedélyezett) űrlapelemeket.

Egy teljes példa

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>HTML űrlapok</title>
      <meta charset="UTF-8"/>
      <style>
        input, select, textarea, fieldset { margin-bottom: 10px; }

        input[type="reset"], input[type="submit"] {
            background-color: #4CAF50;
            color: #FFF;
            border: none;
            outline: none;
            font-size: 16px;
            width: 150px;
            height: 40px;
        }

        input:focus { background-color: #BFFFC3; }
      </style>
   </head>
   <body>
      <form action="feldolgoz.php" method="POST" enctype="multipart/form-data">
        <fieldset>
          <legend>Regisztrációs adatok</legend>
          <label>Teljes név: <input type="text" name="full-name" size="25"/></label> <br/>
          <label>Felhasználónév: <input type="text" name="username" required/></label> <br/>
          <label>Jelszó: <input type="password" name="passwd" required/></label> <br/>
          <label>Jelszó ismét: <input type="password" name="passwd-check" required/></label> <br/>
          <label>Születési dátum: <input type="date" name="date-of-birth" min="1920-01-01"/></label> <br/>
          <label>E-mail: <input type="email" name="email" required/></label> <br/>
          <label>Felhasználói azonosító: <input type="number" name="user-id" value="12345" disabled/></label> <br/>
        </fieldset>

        <label for="education">Legmagasabb iskolai végzettség:</label>
        <select id="education">
          <option value="elementary">8 általános</option>
          <option value="highschool">Érettségi</option>
          <option value="university">Felsőfokú végzettség</option>
          <option value="other" selected>Egyéb</option>
        </select> <br/>

        Nem:
        <label for="op1">Férfi:</label>
        <input type="radio" id="op1" name="sex" value="m"/>
        <label for="op2">Nő:</label>
        <input type="radio" id="op2" name="sex" value="f"/>
        <label for="op3">Egyéb:</label>
        <input type="radio" id="op3" name="sex" value="other" checked/> <br/>

        Hobbik:
        <label for="hobby-1">Fotózás:</label>
        <input type="checkbox" id="hobby-1" name="hobby-1" value="photo"/>
        <label for="hobby-2">Főzés:</label>
        <input type="checkbox" id="hobby-2" name="hobby-2" value="cooking"/>
        <label for="hobby-3">Sorozatnézés:</label>
        <input type="checkbox" id="hobby-3" name="hobby-3" value="series"/> <br/>

        <label>Profilkép: <input type="file" name="profile-pic"/></label> <br/>
        <label for="introduction">Bemutatkozás (max. 200 karakter):</label> <br/>
        <textarea id="introduction" name="intro" maxlength="200"></textarea> <br/>

        <input type="reset" name="reset-btn" value="Adatok törlése"/>
        <input type="submit" name="submit-btn" value="Adatok elküldése"/>
      </form>
   </body>
</html>

---

Utolsó frissítés: 2024-02-10 17:23:02