Amikor űrlapot építesz, keretrendszereket vagy űrlapépítőket használsz. De a háttérben mind HTML űrlapokat használnak. Ha érted, hogyan működnek a HTML űrlapok, mindent megértesz. Nem függsz egyetlen eszköztől vagy keretrendszertől sem. Ismered az alapokat.
Ez a cikk bemutatja a HTML form elemet, a beviteli típusokat, a címkéket, az ellenőrzést és azt, hogyan küldődnek be valójában az űrlapok. Nincsenek keretrendszerek. Nincsenek könyvtárak. Csak a HTML és az alapelvek, amelyekre minden más épül.
A HTML form elem
Az űrlap olyan HTML elem, amely körbeveszi az űrlapmezőket, és az adataikat elküldi valahová. Az alapszerkezet:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Küldés</button>
</form>
Három attribútum számít. Az action attribútum megmondja az űrlapnak, hová küldje az adatokat. A „/submit” azt jelenti, hogy a szervereden a /submit végpontra küldi POST-tal. Ha az action üres, az űrlap az aktuális oldalra küldődik be. A method attribútum megmondja, hogyan utazzanak az adatok. A POST a kérés törzsében küldi az adatokat (biztonságos, nem látszik az URL-ben). A GET az URL-hez fűzi az adatokat (érzékeny adatoknál nem biztonságos, keresési lekérdezésekhez hasznos). Az enctype attribútumra csak fájlfeltöltésnél van szükség. Állítsd az enctype="multipart/form-data" értéket, ha az űrlapodban fájl beviteli mező van.
Minden, ami az űrlap címkéin belül van, a beküldés része. Amikor a felhasználó a beküldés gombra kattint, a böngésző összegyűjti az összes elnevezett mezőt, és a megadott módszerrel elküldi az action URL-re.
Beviteli típusok és hogy mit csinálnak
text
<input type="text" name="first_name">
Egysoros szövegmező. A böngésző egy egyszerű szövegdobozt mutat. Nincs ellenőrzés. Bármilyen karakter megengedett.
<input type="email" name="email">
E-mail-címek mezője. Asztali gépen szövegmezőnek néz ki. Mobilon a böngésző e-mail billentyűzetet mutat. Beküldéskor a böngésző ellenőrzi, hogy az érték e-mail-címnek tűnik-e (tartalmaz @ jelet). Csak alapvető ellenőrzés.
password
<input type="password" name="password">
Szöveg, amely gépelés közben pontokként vagy csillagokként rejtett. Az érték továbbra is egyszerű szövegként továbbítódik, ezért a jelszómezős űrlapokon mindig használj HTTPS-t.
number
<input type="number" name="age">
Asztali gépen olyan szövegmező, amely csak számokat fogad el. Mobilon a böngésző numerikus billentyűzetet mutat. A böngésző megakadályozza a nem numerikus bevitelt.
date
<input type="date" name="birth_date">
Dátumválasztó. A támogatott böngészőkben és eszközökön a mezőre kattintva naptár nyílik meg. Az érték ÉÉÉÉ-HH-NN formátumú.
checkbox
<input type="checkbox" name="agree" value="yes">
Egy négyzet, amely be- és kikapcsolható. Ha be van jelölve, a mező értéke elküldődik beküldéskor. Ha nincs bejelölve, a mező egyáltalán nem kerül elküldésre.
radio
<input type="radio" name="plan" value="starter"> Alap
<input type="radio" name="plan" value="pro"> Pro
Az azonos nevű több választógomb csoportként működik. Egyszerre csak egy jelölhető ki. A kijelölt értéke elküldődik beküldéskor.
select (legördülő lista)
<select name="country">
<option value="us">Egyesült Államok</option>
<option value="ca">Kanada</option>
</select>
Legördülő menü. A kiválasztott opció értéke elküldődik beküldéskor.
textarea
<textarea name="message"></textarea>
Többsoros szövegmező. A felhasználók bekezdéseket írhatnak bele. Az érték tartalmazza a sortöréseket.
file
<input type="file" name="resume">
Gomb, amely megnyitja az eszköz fájlválasztóját. A kiválasztott fájl a szerverre küldődik. Az enctype="multipart/form-data" beállítást igényli a form elemen.
hidden
<input type="hidden" name="user_id" value="12345">
Olyan mező, amely nem jelenik meg, de elküldődik beküldéskor. Hasznos olyan követési adatokhoz, amelyeket bele kell foglalni, de a felhasználónak nem szabad módosítania.
Címkék és akadálymentesség
A beviteli mezőket mindig párosítsd címkékkel.
<label for="email">E-mail-cím</label>
<input type="email" id="email" name="email">
A címke for attribútumának meg kell egyeznie a beviteli mező id értékével. Ha ezt helyesen csinálod:
A képernyőolvasók együtt olvassák fel a címkét és a mezőt, a címkére kattintva a beviteli mezőre kerül a fókusz, a mobilfelhasználók pedig nagyobb érintési felületet kapnak.
Soha ne hagyd ki a címkéket. Ha vizuálisan el kell rejtened egy címkét, CSS-sel rejtsd el, de tartsd meg a HTML-ben. Ezt hívják „vizuálisan rejtett” címkének.
Összetartozó mezők csoportosítása
Az összetartozó mezőkhöz használj fieldset és legend elemet.
<fieldset>
<legend>Szállítási cím</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
A legend elem felolvassa a csoportot a képernyőolvasóknak. A fieldsetek segítenek a választógombok és jelölőnégyzetek vizuális és szemantikai rendszerezésében.
Űrlap beküldése és HTTP-módszerek
Amikor a felhasználó a beküldés gombra kattint, a böngésző összegyűjti az összes elnevezett mezőt, kódolja az adatokat (alapértelmezetten application/x-www-form-urlencoded), HTTP-kérést küld az action URL-re a megadott módszerrel (POST vagy GET), és választ vár.
A szerver megkapja a kérést, és feldolgozhatja az adatokat. Az adatok kulcs-érték párokként érkeznek. Ha az űrlap módszere POST, az action pedig „/submit”, a kérés így néz ki. POST /submit HTTP/1.1, a Content-Type értéke application/x-www-form-urlencoded, majd az adatok így jelennek meg: email=user@example.com&name=John.
A szerver feldolgozza ezeket az adatokat, és válaszol. Ha a válasz egy oldal, a böngésző betölti. Ha a válasz átirányítás, a böngésző az új URL-re navigál.
Kliensoldali ellenőrzés
A HTML beépített ellenőrző attribútumokat tartalmaz. A böngésző ezeket ellenőrzi az űrlap elküldése előtt.
required
<input type="text" name="email" required>
A mezőnek értéket kell tartalmaznia. Ha üresen marad, az űrlap nem küldődik be, és a böngésző hibát mutat.
minlength és maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Az értéknek a megadott karakterszámok között kell lennie.
min és max
<input type="number" name="age" min="18" max="120">
Számmezőknél az értéknek a tartományon belül kell lennie.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Reguláris kifejezés, amelynek az értéknek meg kell felelnie. Az ötjegyű irányítószámra a [0-9]{5} illik.
A kliensoldali ellenőrzés kényelmi funkció a felhasználóknak. Megakadályozza, hogy érvénytelen adatot küldjenek be, és hibát kapjanak a szervertől. De biztonságra soha ne támaszkodj a kliensoldali ellenőrzésre. A szerveren is mindig ellenőrizz.
A type="submit" és a type="button" közötti különbség megértése
<button type="submit">Küldés</button>
<button type="button">Mentés</button>
A type="submit" gomb kattintásra beküldi az űrlapot. A type="button" gomb alapértelmezetten nem csinál semmit. Használd a type="button" értéket, ha JavaScript eseménykezelőket akarsz hozzáfűzni.
Sok fejlesztő a <button> elemet típus megadása nélkül használja. Ez alapértelmezetten type="submit", ami általában az, amit akarsz. De légy kifejezett, hogy elkerüld a meglepetéseket.
Miért kell értened a HTML űrlapokat
Ha Reactet, Vue-t vagy Angulart használsz, a HTML űrlapokra építesz. A keretrendszerek elvonatkoztatják a részleteket, de az alapelvek ugyanazok. Az űrlap még mindig egy végpontra küldődik be. Az ellenőrzésnek még mindig meg kell történnie. A szervernek még mindig kezelnie kell az adatokat.
Ha valami elromlik az űrlapkezelésedben, a HTML ismerete segít a hibakeresésben. Tudod, honnan jönnek az adatok, hogyan kódolódnak, és mit kell a szervernek kapnia. Ez az alap.
A legtöbb modern webalkalmazás már nem használ hagyományos űrlapbeküldést. JavaScripttel elfogják az űrlapot, ellenőrzik, és _blocked_ vagy axios segítségével küldik el az adatokat. De ha előbb ismered a HTML-es utat, ezek a minták érthetővé válnak.
Hogyan használja ezeket az elveket a WEMASY űrlapépítő
A háttérben a WEMASY űrlapépítője ugyanezekkel az elemekkel generál akadálymentes HTML űrlapokat. A címkék párosítva vannak a beviteli mezőkkel. Az ellenőrzés kliens- és szerveroldalon is megtörténik. Az űrlapadatok biztonságosan küldődnek be. Ha exportálsz vagy testre szabsz egy WEMASY űrlapot, ezekre az alapokra épülő HTML űrlapokkal dolgozol.
Az űrlapfunkciókról és a testreszabási lehetőségekről a WEMASY árak oldalán találsz részleteket.