ebben a cikkben megtanuljuk, hogyan készítsünk reagáló regisztrációs űrlapot HTML és CSS formátumban. Azt is látni fogjuk, hogyan lehet egyszerű jelszó-érvényesítést hozzáadni a javascript használatával.
bármilyen típusú weboldalhoz elengedhetetlen a regisztrációs űrlap. Az ügyfeleknek egyszerű módja lesz arra, hogy többet megtudjanak a szervezetéről, ha van regisztrációs űrlapja a webhelyén. Ennél is fontosabb, hogy lehetővé teszi vállalkozásának, hogy hozzáférjen a megfelelő típusú előfizetőkhöz és adataikhoz (természetesen az engedélyükkel).
a regisztrációs űrlapsablon kódja egyszerű és könnyen érthető. A kényelem érdekében a stílus és a javascript kódot a fő HTML fájlba helyeztük. a HTML űrlapot arra használtuk, hogy alapvető struktúrát adjunk a regisztrációs űrlapnak. Megpróbáltunk egy neumorf dizájnt létrehozni ehhez a formához.
a jelszó érvényesítéséhez Regex mintaillesztést használtunk javascript használatával. Ha többet szeretne megtudni róla, látogasson el-reguláris kifejezések. Ehhez a kialakításhoz úgy állítottuk be a jelszómintát, hogy alfanumerikus legyen, 8-15 karakterrel. Ha a felhasználó által megadott jelszó nem követi a mintát, akkor a jelszó beviteli mező szegélye pirosra változik, ha egyezik, akkor zöldre vált. Hasonló a Jelszó megerősítése is. Ezenkívül az űrlap azt is ellenőrzi, hogy a Jelszó megerősítése beviteli mezőben megadott jelszó megegyezik-e a korábban megadott jelszóval.
a következő a HTML regisztrációs űrlap forráskódja. Javasoljuk, hogy nézze meg az alább beágyazott videót a kóddal együtt.
kód:
a regisztrációs űrlap HTML kódját letöltheti erről a linkről.
is olvasható:
- Hogyan készítsünk érzékeny átlátszó bejelentkezési oldalt HTML-ben és CSS-ben ?
- Hogyan készítsünk egy érzékeny kapcsolatfelvételi oldalsablont HTML és CSS használatával?
- hogyan készítsünk egy alapvető bejelentkezési űrlapot és regisztrációs űrlapot HTML és CSS használatával?
- Hogyan készítsünk Responsive 404 oldal nem található HTML és CSS?