Kihagyás

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.

Egy bejelentkezési űrlap

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), 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
    • a jelszavak szerverre való továbbításánál nincs 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)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!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>

A kód kimenete

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!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>

A kód kimenete

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

A kód kimenete

Ű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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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>

A kód kimenete


Utolsó frissítés: 2021-03-17 09:52:04