Ebben a útmutatóban meg fogod tanulni az e-mail címek és URL-ek beviteli mezőinek összes fontos aspektusát az HTML űrlapokban. Célunk, hogy megmutassuk, hogyan valósíthatod meg hatékonyan ezeknek a beviteleknek az ellenőrzését, és hogyan állíthatod be a különböző bevitelellátottságok stílusát. Ez nemcsak a felhasználói élményt fogja javítani, hanem az általad rögzített adatok minőségét is.
Legfontosabb megállapítások
- Az e-mail és URL alapú validáció lényege és felépítése történik HTML segítségével.
- Megismerkedhetsz a CSS használatával a felhasználói vizuális visszajelzés biztosításához, ha az adatok érvénytelenek.
- Az E-mail címek és URL-ek további validálásáról szóló Patterns használata kerül bemutatásra.
Lépésről lépésre útmutató
1. Alap e-mail beviteli mező létrehozása
Kezd el az alap e-mail beviteli mező létrehozásával. Ebben az esetben állítsd be a típust "email"-re, hogy a böngésző automatikusan ellenőrizze a beviteleket.
Az input mezőt mostantól az HTML úgy kezeli, mintha egy e-mail címet várna, és ha hibás a bevitel, vizuális visszajelzést kapunk. Amint a felhasználó elkezdi a beviteleket, a háttér rózsaszínre vált, arra figyelmeztetve, hogy valami nincs rendben.
2. E-mail cím validálása
Az e-mail cím validálása egyszerű szabályok szerint történik. Legalább egy "@" jelenléte szükséges, amit legalább egy további karakter követ. Ez egy alapvető NLP-validálás. Azonban ez a validálási szabály nem elegendő ahhoz, hogy garantáljuk az e-mail cím tényleges létezését.
Egy példa az érvénytelen e-mail címre: „bla@“. Ilyen esetben a űrlap beküldése blokkolva lesz, és a felhasználó hibajelzést kap.
3. Patterns használata az e-mail cím pontossabb validálásához
Az pontosabb validálás érdekében használhatod a "pattern" attribútumot. Egy reguláris kifejezéssel (Regex) meghatározhatod, hogy az e-mail címnek meg kell felelnie bizonyos követelményeknek, például egy specifikus domainnek.
Ezzel a további validálással biztosítod, hogy csak érvényes e-mail címek legyenek elfogadva, például csak Gmail vagy GMX címek.
4. Kötelező bevitel és stílus
Az e-mail mező kitöltésének biztosításához add hozzá a "kötelező" attribútumot. Ha a felhasználó megpróbálja elküldeni az űrlapot beírás nélkül, azonnal vizuális visszajelzést kap.
Az érvénytelen bevitel stílusának megadásához a CSS-ben az ":érvénytelen" selector-t használhatod. Ez által a mező háttérszíne piros lesz, hogy figyelmeztesse a felhasználót a helytelen bevitelre.
5. URL beviteli mező létrehozása
Hasonlóan az e-mailhez, fontos az URL-hez is megfelelő Input elem létrehozása. Állítsd be a típust "url"-re, hogy a böngésző itt is ellenőrizze a beviteleket.
6. URL validálása
Az érvényes URL alapvető követelményei magukban foglalják, hogy az "http://" vagy "https://" -al kezdődjön, és legalább egy következő karaktert tartalmazzon. Ha a felhasználó csak „https”-t ír be, az nem elegendő.
Ez ugyanaz elváltás vonatkozik más protokollokra, mint az „ftp“. Ha a bevétel nem felel meg a feltételeknek, a böngésző visszajelzést ad, és nem engedi elküldeni az űrlapot.
7. Patterns alkalmazása az URL-ek precízebb validálásához
A validálás pontosításához az adott mintára, mint például „https://www.example.com“, szintén használhatod a "pattern" attribútumot, hogy segíts a felhasználóknak helyes URL-t beírni.
8. Felhasználóbarát módszer mobil eszközökön
Egy nagy előnye az "e-mail" és "url" típusok használatának az űrlapokban, hogy javítja a felhasználóbarát módszert mobil eszközökön. A billentyűzet optimálisan van beállítva annak érdekében, hogy megkönnyítse a felhasználóknak az e-mail címek és URL-ek begépelését.
Összefoglalás
Ebben a tutorialban áttekintettük a legfontosabb szempontokat az e-mail címek és URL-ek ellenőrzésére az web-űrlapokban. Megtanultad, hogyan végezhetsz egyszerű és összetett ellenőrzéseket, és hogyan állíthatod be a felhasználói visszajelzést CSS segítségével annak érdekében, hogy jobb felhasználói élményt nyújts.
Gyakran Ismételt Kérdések
Mi történik, ha az egyik beírt e-mail cím érvénytelen?Ha az e-mail cím érvénytelen, akkor az űrlam nem kerül elküldésre, és a felhasználó egy hibaüzenetet lát.
Hogyan lehet biztosítani, hogy az URL megfelelően legyen beírva?Használhatod a "pattern" attribútumot, hogy specifikus követelményeket adj az URL-nek, például hogy „http://” vagy „https://”-al kezdődjön.
Lehet több e-mail címet megadni egy mezőben?Igen, használhatod a "multiple" attribútumot, hogy megengedd a felhasználóknak több e-mail címet beírni, amelyek vesszővel vannak elválasztva.
