Hogyan fogsz HTML űrlapot készíteni?

HTML űrlap létrehozásához a <form> elemet fogom használni. A belsejében kezelőelemek helyezkednek el, mint például szövegmezők (<input type="text">), jelszómezők (<input type="password">), jelölőnégyzetek (<input type="checkbox">), rádiógombok (<input type="radio">), legördülő listák (<select> és <option>), szövegterületek (<textarea>) és küldőgombok (<button type="submit"> vagy <input type="submit">).

Minden űrlapelem rendelkezik name attribútummal, hogy azonosítani tudjuk a szerver oldalon, és általában id attribútummal is, hogy összekapcsolható legyen a <label>-lel.

A <form> attribútumai:

• action: URL, ahová az űrlap adatai küldésre kerülnek.
• method: Az adatküldés HTTP-módszere (GET vagy POST).
• enctype: Az adatok kódolási típusa küldéskor (pl. multipart/form-data fájl feltöltéséhez).

Egyszerű űrlap példája:

<form action="/submit-form" method="post">
  <label for="username">Felhasználónév:</label><br>
  <input type="text" id="username" name="username"><br><br>

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

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Emlékezz rám</label><br><br>

  <label for="country">Ország:</label><br>
  <select id="country" name="country">
    <option value="ru">Oroszország</option>
    <option value="us">USA</option>
  </select><br><br>

  <label for="message">Üzenet:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Küldés</button>
</form>

Az űrlap validálása lehet kliensoldali (HTML5 validációs attribútumok, JavaScript használatával), illetve szerveroldali is.

HTML5 validációs attribútumok:

• required: Kötelező kitölteni.
• minlength, maxlength: A szövegmező minimális és maximális hossza.
• min, max: Számmezők minimális és maximális értéke.
• type különböző értékekkel (email, url, number, date stb.) a böngésző automatikus validálásához.
• pattern: Reguláris kifejezés a bemenet validálásához.

HTML5 validációs példával:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Kor (18-99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Irányítószám (5 szám):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Küldés</button>
</form>

A formázáshoz CSS-t használnak. Komplexebb logika vagy aszinkron adatküldés esetén JavaScript kerül alkalmazásra. A hozzáférhetőség növelése érdekében ARIA attribútumokat és helyes HTML-struktúrát alkalmaznak.