HTML-űrlap létrehozása (magyarázat példák)

Az űrlapokat arra használjuk, hogy adatokat gyűjtsenek a felhasználóktól, például kapcsolattartási adatokat, vagy lehetővé tegyék a felhasználók számára, hogy kapcsolatba lépjenek a weboldallal, például megjegyzéseket tegyenek közzé vagy kereséseket hajtsanak végre. Ebből a cikkből megtudjuk, hogyan hozhat létre alapvető űrlapot HTML használatával.

A HTML űrlap felépítése

A címke használatával HTML űrlap jön létre. Ezen a címkén belül számos különböző beviteli elem szerepelhet, például szövegmezők, gombok, jelölőnégyzetek, rádiógombok stb.

A bemeneti elemek ide kerülnek

Bemeneti elemek

Szövegmezők

A szövegmezők a címke használatával jönnek létre attribútummal típus ráfektetett szöveg. Például:

Név:




Telefon

Az elem telefonszám beviteli mezőkhöz használják.

Telefon:


Dátum

Az elem dátum kiválasztására szolgál.

Születési dátum:


Jelszó

Az elem jelszóbeviteli mezőkhöz használják. Az ebbe a mezőbe beírt szöveg pontok formájában jelenik meg a jelszó elrejtése érdekében.

Jelszó:


Archívum

Az elem segítségével a felhasználó kiválaszthat egy fájlt a helyi fájlrendszeréből.

Fájl feltöltés:


Jelölje be a négyzetet

Az elem olyan beviteli mezőkhöz használják, amelyek lehetővé teszik a felhasználó számára, hogy egyet, egyet vagy több lehetőséget válasszon.

Elfogadom a szerződési feltételeket

Rádió

Az elem olyan beviteli mezőkhöz használatos, amelyek lehetővé teszik a felhasználó számára, hogy válasszon egy lehetőséget a lehetőségek közül.

Nem:

Férfi

Nők

Szám

Az elem numerikus beviteli mezőkhöz használják.

Összeg:


Hatótávolság

Az elem olyan beviteli mezőkhöz használatos, amelyeknek tartalmazniuk kell egy értéktartományból származó értéket.

Hangerő:




Gombok

A gombok a címke használatával jönnek létre attribútummal típus ráfektetett Beküldés. Ezt a gombot megnyomva elküldi az űrlap adatait. Például:

Név:




Űrlapbevitel kezelése

Az elküldés gomb megnyomásával az űrlap adatai feldolgozásra kerülnek. Ez két módszer egyikével történik: GET vagy POST, amelyek az attribútum használatával vannak megadva módszer A címkében .

GET módszer

A GET metódus az űrlapadatokat az URL részeként küldi el. Hasznos lehet például kereséseknél, ahol az űrlapadatok nem érzékenyek. Ennek a módszernek azonban korlátai vannak az elküldhető adatok hosszát illetően.

A bemeneti elemek ide kerülnek

POST módszer

A POST metódus az űrlapadatokat az URL-től külön küldi el. Ez biztonságosabb, és sokkal nagyobb mennyiségű adatot tud kezelni, ezért olyan dolgokra használják, mint a kapcsolatfelvételi vagy bejelentkezési űrlapok beküldése.

A bemeneti elemek ide kerülnek

Mindkét esetben az attribútum akció Az űrlapadatokat feldolgozó szerveroldali szkript URL-címének megadására szolgál.

HTML űrlappélda minden elemmel 

Íme egy űrlap, amely felhasználja a cikkben áttekintett összes elemet:

Regisztrációs űrlap

Név:



Vezetéknév:



Email:



Telefon:



Születési dátum:



Jelszó:



Fájl feltöltés:



Elfogadom a szerződési feltételeket


Nem:

Férfi

Nők

Összeg:



Hangerő:




Ezen az űrlapon találhatók a keresztnév, vezetéknév, e-mail cím, telefonszám, születési dátum, jelszó mezők, valamint egy mező a feltöltéshez fájl, jelölőnégyzet a szerződési feltételekhez, rádiók a nem kiválasztásához, valamint szám- és tartománymezők a mennyiséghez és a mennyiséghez, illetőleg.

A végén található "Küldés" gomb az, amelyik felelős az űrlap elküldéséért az attribútumban megadott URL-re. akció A címkéről alak (ebben az esetben "/submit_form"). Ahhoz, hogy ez az űrlap egy valós webhelyen működjön, be kell állítania egy szervert, amely fogadja és feldolgozza az erről az űrlapról származó információkat a „/submit_form” útvonalon.