Ebben a útmutatóban megtanulod, hogyan hozz létre az első egyszerű űrlapot HTML-ben. Az űrlapok az webalkalmazások alapvető részét képezik, lehetővé téve a felhasználók számára, hogy információkat adjanak meg és elküldjék egy szervernek. Ebben a lépésről-lépésre vezetőben meg fogod tanulni az HTML űrlap alapvető szerkezetét és megérted, hogyan működnek együtt az egyes elemek az adatok átviteléhez.
Legfontosabb megállapítások
- Egy HTML űrlapot a <form>-tag határozza meg.
- Az action és method attribútumok meghatározzák, hogy hova kerülnek az adatok és milyen módszerrel kerülnek elküldésre.
- Az űrlapelemeket általában az <input>, <label> és <button> tagok határozzák meg.
- Az adatokat lehet GET vagy POST módon elküldeni a szervernek.
Lépésről-lépésre útmutató
1. HTML alapstruktúra létrehozása
Először is szükséged lesz egy egyszerű HTML dokumentumra alapstruktúraként. Győződj meg róla, hogy az HTML dokumentum alapstruktúráját rendelkezésedre áll:
2. Formulár-tag hozzáadása
A következő lépésben meg kell határoznod az űrlapot. Hozzáadsz egy -tage-t és szükséged lesz az action és method attribútumokra. Itt egy egyszerű példa, ahol az action adja meg az URL-t, ahová az adatokat küldik, a method pedig GET-re van beállítva az adatok URL-n keresztüli átviteléhez.
3. Címke és Input mező létrehozása
Az űrlapon szeretnél egy megcímkézett beviteli mezőt létrehozni. Ehhez a -tagot használod a címkehez és az -tagot magához a beviteli mezőhöz. Ügyelj arra, hogy a címke for attribútuma megegyezzen az input mező id attribútumával.
4. Elküldés gomb hozzáadása
Az űrlap adatainak elküldéséhez szükséged van egy gombra. Ezt a -tag határozza meg és a típusnak submit-nek kell lennie, hogy az űrlap elküldésre kerüljön a gombra kattintáskor.
5. Űrlap tesztelése
Az űrlap létrehozása után eljött az idő, hogy teszteld a böngészőben. Írj be egy példát a beviteli mezőbe, majd kattints az Elküldés gombra. Látnod kell, hogy az űrlap elküldésekor az adatok a megadott action-re vonatkozó URL-n keresztül kerülnek elküldésre.
6. Változtatások az input attribútumokon
Hogy lássuk, hogyan változnak az input mezők, módosíthatod a -tage attribútumait. Például módosíthatod a name attribútumot, hogy megkülönböztesd az átküldött adatokat. Például megváltoztathatod a beviteli mező nevét name-ről first name-re.
7. Adatátvitel és Kérés típusa
Mielőtt további teszteket végeznél, fontos tudnod, hogy a GET módszer az adatokat az URL-n keresztül küldi, míg a POST adatait a HTTP kérés törzsében küldi. Megváltoztathatod a Kérés típusát azáltal, hogy módosítod a method attribútumot a -tage-ban.
8. Szerverreakció szimulálása
Mivel valószínűleg nem rendelkezel valódi szerverrel az űrlapod tesztelésekor, módosíthatod az action-URL-t, hogy más HTML oldalt szimulálj, amelyre a felhasználókat az űrlap elküldése után továbbítják. Hozz létre egy új HTML fájlt, amely például egy köszönőoldalt tartalmaz.
9. Hibaelhárítás és Debuggolás
Ha hibák jelentkeznek az űrlap elküldésekor, ellenőrizd a böngésző Network-Tools-ait. Itt láthatod, hogy az űrlap sikeresen elküldésre került-e, valamint milyen adatokat külding a szervernek. Ügyelj a lehetséges 404-es hibákra is, amelyek azt mutatják, hogy a cél-URL nem található meg.
10. Befejezés és Kilátások
Jelenleg alapvető megértésed van az HTML űrlapok létrehozásához. Ezt a technikát bővítheted annak érdekében, hogy összetettebb űrlapokat hozz létre, amelyek különböző bemeneti típusokat és validációkat tartalmaznak. A következő útmutatóban megtanulod, hogyan reagálj a űrlapbeviteli mezőkre JavaScript segítségével, és végzel aszinkron adatküldéseket.
Összefoglalás
Ebben az útmutatóban megismerted az első HTML űrlapod szerkezetét és működését. Most már tudod, hogyan hozz létre bemeneti mezőket, címkéket és gombokat, valamint hogy hogyan kerülnek átadásra az adatok az URL-en vagy a POST kérések testében.
