HTML Űrlapok (Forms)

Eddig csak olyan HTML elemeket tanultunk, amik információt közölnek a látogatóval (szövegek, képek, listák). De mi van akkor, ha a látogatótól szeretnénk információt kérni? Legyen az egy bejelentkezés, egy hírlevél feliratkozás, vagy egy kapcsolatfelvételi űrlap, a megoldás mindig a HTML <form>.

A <form> tag: A nagy konténer

Minden űrlap a <form> nyitó és záró tagek között helyezkedik el. Ez a tag önmagában nem látható a képernyőn, de ez mondja meg a böngészőnek, hogy az itt lévő beviteli mezők egyetlen logikai egységet alkotnak, amiket egyszerre kell elküldeni a szervernek.

<form action="/feldolgozo.php" method="POST">
    <!-- Ide jönnek a beviteli mezők és a gombok -->
</form>

A <form> tag két legfontosabb attribútuma:

• action: Megadja annak a fájlnak az elérési útját (pl. egy PHP fájlét), ami fel fogja dolgozni az elküldött adatokat a szerveren.
• method: Meghatároza az adatküldés módját. A GET metódus az URL-be teszi az adatokat (pl. keresőmezőknél jó), a POST metódus pedig rejtve, a háttérben küldi el őket (jelszavaknál és hosszú üzeneteknél kötelező).

A beviteli mezők: Az <input> tag

Az <input> tag a leggyakrabban használt űrlap elem. Ez is egy üres elem (nincs záró párja). A zsenialitása abban rejlik, hogy a type attribútum megváltoztatásával teljesen más funkciót kap.

<!-- Sima egysoros szövegmező (pl. keresztnév) -->
<input type="text" name="keresztnev" placeholder="Írd be a neved">

<!-- Jelszó mező (a karakterek csillagként jelennek meg) -->
<input type="password" name="jelszo">

<!-- Email mező (mobilon automatikusan előhozza a @ betűt a billentyűzeten) -->
<input type="email" name="email_cim">

<!-- Jelölőnégyzet (Checkbox) -->
<input type="checkbox" name="hirlevel" value="igen"> Kérek hírlevelet!

A name attribútum kritikus fontosságú! Amikor az űrlapot elküldik, a szerver ez alapján a név alapján fogja tudni azonosítani, hogy melyik adat melyik mezőből jött.

A <label> tag: Az akadálymentesítés kulcsa

Soha ne tegyél be egy <input> mezőt anélkül, hogy megmondanád a felhasználónak, mit kell beleírnia. Erre való a <label> (címke) tag.

A profi fejlesztők összekötik a címkét a beviteli mezővel. Ezt úgy teheted meg, hogy a mezőnek adsz egy id-t, a címkének pedig egy for attribútumot, amibe beírod a mező id-jét.

<label for="email-mezo">Email címed:</label>
<input type="email" id="email-mezo" name="email">

Miért jó ez? Ha a felhasználó rákattint a "Email címed:" szövegre, a böngésző automatikusan belekattint a beviteli mezőbe. Ez mobilon és a képernyőolvasóknál hatalmas segítség (UX és A11y szempontból kötelező).

A beküldés: A <button> tag

Végül szükségünk van egy gombra, amivel a felhasználó elindíthatja az adatküldést. Erre a <button type="submit"> taget használjuk.

<form action="/kuld.php" method="POST">
    <label for="nev">Neved:</label>
    <input type="text" id="nev" name="nev" required>
    
    <button type="submit">Üzenet elküldése</button>
</form>

Tipp: A fenti kódban láthatsz egy required attribútumot az input mezőben. Ez egy beépített HTML5 validáció: a böngésző nem engedi elküldeni az űrlapot, amíg ezt a mezőt ki nem töltik.