8. Űrlapok HTML-ben

2025. november 13. • 22 perc olvasás • HTML5 alapok

Az űrlapok lehetővé teszik a felhasználók számára, hogy adatokat küldjenek a weboldalnak. Ebben a cikkben megismered a HTML űrlapok felépítését, az összes fontos form elemet, az input típusokat, valamint az adatküldés működését GET és POST metódusokkal.

Érettségi információ

Ez a lecke BÓNUSZ anyag!

Az űrlapok (form, input elemek) NEM szerepelnek az érettségi követelményekben. Ez hasznos tudás a valódi webfejlesztéshez, de az érettségire nem kell megtanulni.

A <form> elem - Űrlap konténer BÓNUSZ

A <form> elem tartalmazza az összes űrlap mezőt és kezelésükhöz szükséges információkat.

HTML - Alapvető form

<form action="/submit" method="POST">
  <!-- Űrlap mezők ide kerülnek -->
</form>

Form attribútumok

Attribútum	Jelentés	Példa
`action`	Feldolgozó URL	`action="/contact.php"`
`method`	Küldési metódus	`method="GET"` vagy `method="POST"`
`enctype`	Kódolás típusa	`enctype="multipart/form-data"` (fájlokhoz)
`name`	Űrlap azonosító	`name="contactForm"`
`autocomplete`	Automatikus kitöltés	`autocomplete="on"` / `"off"`
`novalidate`	Validáció kikapcsolása	`novalidate`
`target`	Válasz megjelenítése	`target="_blank"`

Az <input> elem - Beviteli mezők BÓNUSZ

Az <input> elem a legsokoldalúbb űrlap elem. A type attribútum határozza meg a viselkedését.

Szöveges input típusok

HTML - Szöveges input mezők

<!-- Általános szöveg -->
<input type="text" name="username" placeholder="Felhasználónév">

<!-- Jelszó (rejtett karakterek) -->
<input type="password" name="password" placeholder="Jelszó">

<!-- Email cím (validációval) -->
<input type="email" name="email" placeholder="pelda@email.com">

<!-- Telefonszám -->
<input type="tel" name="phone" placeholder="+36 30 123 4567">

<!-- URL cím -->
<input type="url" name="website" placeholder="https://example.com">

<!-- Keresés (van törlés gomb) -->
<input type="search" name="query" placeholder="Keresés...">

Numerikus input típusok

HTML - Numerikus input mezők

<!-- Szám (fel/le gombok) -->
<input type="number" name="quantity" min="1" max="100" step="1" value="1">

<!-- Csúszka (range slider) -->
<input type="range" name="volume" min="0" max="100" value="50">

Dátum és idő input típusok

HTML - Dátum és idő input mezők

<!-- Teljes dátum -->
<input type="date" name="birthdate" min="1900-01-01" max="2025-12-31">

<!-- Dátum és idő -->
<input type="datetime-local" name="appointment">

<!-- Csak idő -->
<input type="time" name="alarm" step="1">

<!-- Hét kiválasztása -->
<input type="week" name="week">

<!-- Hónap kiválasztása -->
<input type="month" name="month">

Választó input típusok

HTML - Checkbox és radio mezők

<!-- Checkbox (többszörös választás) -->
<input type="checkbox" name="terms" id="terms" checked>
<label for="terms">Elfogadom az ÁSZF-et</label>

<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Feliratkozom a hírlevélre</label>

<!-- Radio buttons (egyszeri választás) -->
<input type="radio" name="gender" id="male" value="male">
<label for="male">Férfi</label>

<input type="radio" name="gender" id="female" value="female">
<label for="female">Nő</label>

<input type="radio" name="gender" id="other" value="other" checked>
<label for="other">Egyéb</label>

Checkbox vs Radio különbségek

Checkbox: Több opció kiválasztható egyszerre (pl. érdeklődési körök)
Radio: Csak egy opció választható a csoportból (pl. nem, fizetési mód)
Name attribútum: Radio gomboknál ugyanaz a name csoportosítja őket
Value attribútum: Ez kerül elküldésre, nem a label szövege

Fájl és szín input típusok

HTML - Fájl és szín input mezők

<!-- Fájl feltöltés -->
<input type="file" name="avatar" accept="image/*">

<!-- Több fájl feltöltése -->
<input type="file" name="documents" accept=".pdf,.doc,.docx" multiple>

<!-- Szín választó -->
<input type="color" name="favcolor" value="#ff0000">

Gomb típusú input mezők

HTML - Input gombok

<!-- Submit gomb (űrlap elküldése) -->
<input type="submit" value="Küldés">

<!-- Reset gomb (mezők alaphelyzetbe) -->
<input type="reset" value="Törlés">

<!-- Általános gomb (JavaScript-hez) -->
<input type="button" value="Kattints ide!" onclick="alert('Hello!')">

<!-- Képes submit gomb -->
<input type="image" src="submit-button.png" alt="Küldés">

Rejtett input

HTML - Rejtett mező

<!-- Rejtett mező (nem látható a felhasználónak) -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="csrf_token" value="abc123xyz">

Összes input típus áttekintése

Type érték	Leírás	Példa használat
`text`	Általános szöveg	Név, cím, város
`password`	Jelszó (rejtett)	Jelszó mező
`email`	Email cím validációval	Email regisztráció
`tel`	Telefonszám	Kapcsolat űrlap
`url`	Weboldal cím	Weboldal URL
`number`	Számok (min/max/step)	Mennyiség, életkor
`range`	Csúszka	Hangerő, fényerő
`date`	Dátum választó	Születési dátum
`time`	Idő választó	Találkozó időpont
`datetime-local`	Dátum + idő	Esemény időpont
`month`	Hónap választó	Lejárati hónap
`week`	Hét választó	Munkahét kiválasztás
`checkbox`	Jelölőnégyzet	ÁSZF elfogadása
`radio`	Választógomb	Nem, fizetési mód
`file`	Fájl feltöltés	Profilkép, dokumentum
`color`	Szín választó	Kedvenc szín
`search`	Keresés mező	Keresődoboz
`hidden`	Rejtett mező	CSRF token, user ID
`submit`	Küldés gomb	Űrlap elküldése
`reset`	Törlés gomb	Mezők alaphelyzetbe
`button`	Általános gomb	JavaScript művelet
`image`	Képes submit	Grafikus küldés gomb

A <label> elem - Címkézés BÓNUSZ

A <label> elem címkét rendel egy input mezőhöz. Ez fontos az akadálymentesség és a használhatóság szempontjából.

HTML - Label használata

<!-- Módszer 1: for és id használata (ajánlott) -->
<label for="username">Felhasználónév:</label>
<input type="text" id="username" name="username">

<!-- Módszer 2: input a label-ben -->
<label>
  Email cím:
  <input type="email" name="email">
</label>

<!-- Checkbox-nál a label kattintható -->
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Feliratkozom a hírlevélre</label>

Label elem előnyei

Akadálymentesség: Képernyőolvasók felolvassák a címkét
Kattintható terület: A label-re kattintva is aktiválódik az input
Jobb UX: Különösen hasznos checkbox és radio gomboknál
For és id párosítás: Egyértelmű kapcsolat a címke és a mező között

A <select> elem - Legördülő lista BÓNUSZ

A <select> elem legördülő listát hoz létre, amelyből a felhasználó választhat.

HTML - Select elem

<label for="country">Ország:</label>
<select name="country" id="country">
  <option value="">-- Válassz országot --</option>
  <option value="hu">Magyarország</option>
  <option value="at">Ausztria</option>
  <option value="de" selected>Németország</option>
  <option value="sk">Szlovákia</option>
</select>

Select attribútumok

HTML - Select attribútumokkal

<!-- Multiple: több elem választható -->
<select name="hobbies" multiple size="5">
  <option value="sports">Sport</option>
  <option value="music">Zene</option>
  <option value="reading">Olvasás</option>
  <option value="gaming">Játék</option>
  <option value="travel">Utazás</option>
</select>

<!-- Required: kötelező választás -->
<select name="payment" required>
  <option value="">Válassz fizetési módot</option>
  <option value="card">Bankkártya</option>
  <option value="paypal">PayPal</option>
  <option value="transfer">Átutalás</option>
</select>

Option csoportosítás - optgroup

HTML - Optgroup elem

<select name="hardware">
  <optgroup label="Processzor">
    <option value="intel-i9">Intel Core i9</option>
    <option value="intel-i7">Intel Core i7</option>
    <option value="amd-ryzen9">AMD Ryzen 9</option>
    <option value="amd-ryzen7">AMD Ryzen 7</option>
  </optgroup>

  <optgroup label="Videokártya">
    <option value="rtx4090">RTX 4090</option>
    <option value="rtx4080">RTX 4080</option>
    <option value="rx7900xt">RX 7900 XT</option>
  </optgroup>
</select>

A <textarea> elem - Többsoros szöveg BÓNUSZ

A <textarea> elem többsoros szövegbevitelre szolgál.

HTML - Textarea elem

<label for="message">Üzenet:</label>
<textarea name="message"
          id="message"
          rows="5"
          cols="50"
          placeholder="Írd ide az üzenetedet..."
          maxlength="500"
          required></textarea>

Attribútum	Jelentés	Példa
`rows`	Sorok száma	`rows="10"`
`cols`	Oszlopok száma	`cols="50"`
`maxlength`	Max karakterszám	`maxlength="1000"`
`placeholder`	Helyőrző szöveg	`placeholder="Szöveg..."`
`wrap`	Sortörés kezelése	`wrap="soft"` / `"hard"`

A <button> elem - Gombok BÓNUSZ

A <button> elem rugalmasabb és ajánlottabb, mint az <input type="submit">.

HTML - Button elem

<!-- Submit gomb -->
<button type="submit">Küldés</button>

<!-- Reset gomb -->
<button type="reset">Törlés</button>

<!-- Általános gomb -->
<button type="button" onclick="myFunction()">Kattints ide</button>

<!-- Gomb ikonnal -->
<button type="submit">
  <img src="send-icon.png" alt="">
  Küldés
</button>

Button vs Input különbségek

Button: HTML tartalmat is tartalmazhat (képek, ikonok, formázott szöveg)
Input: Csak egyszerű szöveget tartalmazhat a value attribútumban
Alapértelmezett type: Button type="submit", Input type="text"
Ajánlás: Használj button elemet a jobb testreszabhatóság miatt

További form elemek BÓNUSZ

<fieldset> és <legend> - Mezők csoportosítása

HTML - Fieldset és legend

<form>
  <fieldset>
    <legend>Személyes adatok</legend>

    <label for="firstname">Keresztnév:</label>
    <input type="text" id="firstname" name="firstname">

    <label for="lastname">Vezetéknév:</label>
    <input type="text" id="lastname" name="lastname">
  </fieldset>

  <fieldset>
    <legend>Elérhetőség</legend>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="phone">Telefon:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

<datalist> - Javasolt értékek

HTML - Datalist elem

<label for="browser">Válassz böngészőt:</label>
<input type="text" id="browser" name="browser" list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<output> - Számítás eredménye

HTML - Output elem

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

Input attribútumok - Validáció és korlátozások BÓNUSZ

Kötelező mezők és validáció

HTML - Validációs attribútumok

<!-- Kötelező mező -->
<input type="text" name="username" required>

<!-- Min és max hossz -->
<input type="text" name="password" minlength="8" maxlength="20" required>

<!-- Regex pattern -->
<input type="text" name="zipcode" pattern="[0-9]{4}" title="4 számjegy">

<!-- Min és max érték (number) -->
<input type="number" name="age" min="18" max="120">

<!-- Step érték -->
<input type="number" name="price" step="0.01" min="0">

További hasznos attribútumok

HTML - Egyéb input attribútumok

<!-- Placeholder (helyőrző szöveg) -->
<input type="text" name="search" placeholder="Keresés...">

<!-- Readonly (csak olvasható) -->
<input type="text" name="username" value="admin" readonly>

<!-- Disabled (inaktív, nem kerül elküldésre) -->
<input type="text" name="field" value="data" disabled>

<!-- Autocomplete -->
<input type="email" name="email" autocomplete="email">

<!-- Autofocus (automatikus fókusz) -->
<input type="text" name="search" autofocus>

<!-- Multiple (több érték, pl. email-nél) -->
<input type="email" name="emails" multiple>

Attribútum	Jelentés	Példa
`required`	Kötelező mező	`required`
`minlength`	Minimális hossz	`minlength="8"`
`maxlength`	Maximális hossz	`maxlength="50"`
`min`	Minimális érték	`min="18"`
`max`	Maximális érték	`max="100"`
`pattern`	Regex minta	`pattern="[A-Z]{3}"`
`placeholder`	Helyőrző szöveg	`placeholder="Név..."`
`readonly`	Csak olvasható	`readonly`
`disabled`	Inaktív	`disabled`
`autofocus`	Auto fókusz	`autofocus`
`autocomplete`	Auto kitöltés	`autocomplete="on"`

GET vs POST - Adatküldési metódusok BÓNUSZ

A form method attribútum határozza meg, hogy az adatok hogyan kerülnek elküldésre a szervernek.

GET metódus

HTML - GET metódus

<form action="/search" method="GET">
  <label for="query">Keresés:</label>
  <input type="text" id="query" name="q">
  <button type="submit">Keresés</button>
</form>

<!-- Az URL így néz ki elküldés után: -->
<!-- https://example.com/search?q=laptop -->

GET metódus jellemzői

URL-ben látható: Az adatok az URL query string részében jelennek meg
Könyvjelzőzhető: Az URL-t el lehet menteni és megosztani
Nem biztonságos: Ne használd jelszavakhoz, érzékeny adatokhoz
Hossz korlátozás: ~2000 karakter limit (böngészőfüggő)
Idempotens: Többszöri meghívás ugyanazt az eredményt adja
Használat: Keresések, szűrések, oldalazás, nyilvános lekérdezések

POST metódus

HTML - POST metódus

<form action="/register" method="POST">
  <label for="username">Felhasználónév:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Jelszó:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Regisztráció</button>
</form>

<!-- Az adatok a HTTP body-ban kerülnek elküldésre, nem láthatók az URL-ben -->

POST metódus jellemzői

URL-ben nem látható: Az adatok a HTTP kérés törzsében (body) kerülnek elküldésre
Biztonságosabb: Nem jelenik meg a böngésző history-ban, cache-ben
Nincs hossz korlátozás: Nagy mennyiségű adat küldhető
Nem könyvjelzőzhető: Az URL nem tartalmazza az adatokat
Nem idempotens: Többszöri küldés több műveletet hajthat végre
Használat: Regisztráció, bejelentkezés, fájlfeltöltés, adatok módosítása

GET vs POST összehasonlítás

Tulajdonság	GET	POST
Láthatóság	URL-ben látható	HTTP body-ban (rejtett)
Biztonság	Nem biztonságos	Biztonságosabb
Hossz limit	~2000 karakter	Nincs limit
Könyvjelzőzhető	Igen	Nem
Cache-elhető	Igen	Nem (általában)
History	Megmarad a böngésző history-ban	Nem marad meg
Használat	Keresés, szűrés, lekérdezés	Bejelentkezés, regisztráció, módosítás
Idempotencia	Idempotens	Nem idempotens

Mikor melyiket használd?

✅ Használj GET-et: Keresések, szűrők, publikus lekérdezések, oldalazás
✅ Használj POST-ot: Bejelentkezés, regisztráció, adatmódosítás, fájlfeltöltés
❌ NE használj GET-et: Jelszavakhoz, érzékeny adatokhoz, nagy mennyiségű adathoz
⚠️ HTTPS kötelező: POST sem biztonságos HTTPS nélkül!

Enctype attribútum - Fájlfeltöltéshez

HTML - Fájlfeltöltő űrlap

<form action="/upload" method="POST" enctype="multipart/form-data">
  <label for="file">Válassz fájlt:</label>
  <input type="file" id="file" name="file" required>

  <label for="description">Leírás:</label>
  <textarea id="description" name="description"></textarea>

  <button type="submit">Feltöltés</button>
</form>

Enctype érték	Jelentés	Használat
`application/x-www-form-urlencoded`	Alapértelmezett	Normál űrlapok (szöveg adatok)
`multipart/form-data`	Több részből álló adat	Fájlfeltöltés (file input használatakor kötelező)
`text/plain`	Egyszerű szöveg	Ritkán használt, debug célra

Teljes példa: Komplex űrlap BÓNUSZ

HTML - Komplett regisztrációs űrlap

<form action="/register" method="POST" autocomplete="on">
  <fieldset>
    <legend>Regisztráció</legend>

    <!-- Felhasználónév -->
    <label for="username">Felhasználónév:</label>
    <input type="text"
           id="username"
           name="username"
           minlength="3"
           maxlength="20"
           required
           autofocus>

    <!-- Email -->
    <label for="email">Email cím:</label>
    <input type="email"
           id="email"
           name="email"
           required
           autocomplete="email">

    <!-- Jelszó -->
    <label for="password">Jelszó:</label>
    <input type="password"
           id="password"
           name="password"
           minlength="8"
           required
           autocomplete="new-password">

    <!-- Jelszó megerősítés -->
    <label for="password2">Jelszó újra:</label>
    <input type="password"
           id="password2"
           name="password2"
           minlength="8"
           required
           autocomplete="new-password">

    <!-- Születési dátum -->
    <label for="birthdate">Születési dátum:</label>
    <input type="date"
           id="birthdate"
           name="birthdate"
           min="1900-01-01"
           max="2025-12-31"
           required>

    <!-- Nem -->
    <fieldset>
      <legend>Nem:</legend>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Férfi</label>

      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Nő</label>

      <input type="radio" id="other" name="gender" value="other" checked>
      <label for="other">Egyéb</label>
    </fieldset>

    <!-- Érdeklődési körök -->
    <fieldset>
      <legend>Érdeklődési körök:</legend>
      <input type="checkbox" id="gaming" name="interests" value="gaming">
      <label for="gaming">Gaming</label>

      <input type="checkbox" id="hardware" name="interests" value="hardware">
      <label for="hardware">Hardver</label>

      <input type="checkbox" id="programming" name="interests" value="programming">
      <label for="programming">Programozás</label>
    </fieldset>

    <!-- Ország -->
    <label for="country">Ország:</label>
    <select id="country" name="country" required>
      <option value="">-- Válassz országot --</option>
      <option value="hu" selected>Magyarország</option>
      <option value="at">Ausztria</option>
      <option value="de">Németország</option>
      <option value="sk">Szlovákia</option>
    </select>

    <!-- Bemutatkozás -->
    <label for="bio">Bemutatkozás:</label>
    <textarea id="bio"
              name="bio"
              rows="5"
              cols="50"
              maxlength="500"
              placeholder="Írj magadról..."></textarea>

    <!-- Feltételek elfogadása -->
    <input type="checkbox" id="terms" name="terms" required>
    <label for="terms">
      Elfogadom az <a href="/terms">Általános Szerződési Feltételeket</a>
    </label>

    <!-- Gombok -->
    <button type="submit">Regisztráció</button>
    <button type="reset">Törlés</button>
  </fieldset>
</form>

Összefoglalás

Ebben a cikkben átfogó képet kaptál a HTML űrlapokról:

Form elem: Űrlap konténer action, method, enctype attribútumokkal
Input típusok: 22 különböző input típus (text, email, password, number, date, checkbox, radio, file, color, stb.)
Label elem: Címkézés akadálymentességhez és jobb UX-hez
Select elem: Legördülő listák optgroup csoportosítással
Textarea elem: Többsoros szövegbevitel
Button elem: Gombok submit, reset, button típusokkal
Validációs attribútumok: required, pattern, min, max, minlength, maxlength
Fieldset és legend: Mezők szemantikus csoportosítása
GET vs POST: Adatküldési metódusok különbségei és helyes használata
Enctype: multipart/form-data fájlfeltöltéshez

Példák a weboldalunkon

Nézd meg, hogyan használjuk az űrlapokat a gyakorlatban:

Kapcsolat oldal - Részletes kapcsolati űrlap több input típussal és validációval
Alkatrészek oldal - Kereső űrlap GET metódussal a szűréshez
Főoldal - Hírlevél feliratkozás egyszerű email input mezővel

Következő lépések

Gyakorold az itt tanultakat: készíts egy kapcsolati űrlapot GET metódussal, egy regisztrációs űrlapot POST-tal, és egy fájlfeltöltő űrlapot a megfelelő enctype-pal. Használd a különböző input típusokat és validációs attribútumokat!

Következő cikk: Szemantikus HTML - Részletes útmutató a header, nav, section, article, aside, footer elemekről. Tanuld meg, miért kulcsfontosak a SEO és akadálymentesség szempontjából!