# 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!