HTML5 és attribútumai az űrlapellenőrzéshez. Egyszerű kapcsolatfelvételi űrlap készítése Angularjs és php T 15 bejelentkezési névvel
A kötelező HTML logikai attribútum arra utasítja a böngészőt, hogy csak akkor küldje el az űrlapadatokat, ha a kötelező mezők ki vannak töltve. Ez azt jelenti, hogy egy mező nem maradhat üresen, és más attribútumoktól vagy mezőtípusoktól függően csak meghatározott értéktípusok fogadhatók el. Kicsit később fogunk beszélni arról, hogyan lehet megmondani a böngészőknek, hogy küldjenek bizonyos típusú adatokat.
Ha a kötelező mezőket üresen hagyjuk, az űrlapot nem küldjük el. Opera, Firefox, internet böngésző 10+ és a Chrome hibaüzenetet küld a felhasználónak. Például, " Töltse ki ezt a mezőt"vagy" Az üres mezőket ki kell tölteni».
A Javascript terminológiában a fókusz esemény akkor aktivál egy űrlapelemet, amikor a fókusz átvált rá, amikor a fókusz egy másik elemre kerül, vagy elveszíti a fókuszt.
A CSS-ben a :focus pszeudoosztályt használhatja az aktuálisan kijelölt elemek stílusozásához.
A kötelező attribútum bármilyen típusú beviteli elemre vonatkozik, kivéve a button , send , image , color és a rejtett elemet. Ezen elemek mindegyike rendelkezik alapértelmezett értékkel, így az extra attribútum redundáns lenne. Ennek az attribútumnak a szintaxisa egyszerűen kötelező, vagy kötelező = kötelező, ha XHTML-szintaxist használ.
Adjunk hozzá egy attribútumot HTML bevitel regisztrációs űrlap kitöltéséhez szükséges. Készítsünk név és cím mezőket Email, jelszó és előfizetés dátuma szükséges:
-
(legalább 6 karakter, szóközök nélkül)
Az alábbi képernyőképeken láthatja, mit csinál a szükséges HTML attribútum, amikor megpróbál elküldeni egy űrlapot:
Üzenet a kötelező mezőkről a Firefoxban
Ugyanez a helyzet az Operában...
és a Google Chrome-ban
Kötelező mezők stílusa az űrlapon
A kötelező mezőket a :required,:optional pszeudoosztályú vagy a negatív :not(:required)) pszeudoosztályú űrlapokon stílusozhatja. Az érvényes és nem érvényes mezőket stílusozhatja az :valid és :invalid pszeudoosztályokkal is. Használhatja ezeket a HTML bevitelhez szükséges pszeudoosztályokat, hogy megmutassa a felhasználóknak, hogy mely mezőket kell kitölteni:
bemenet ( háttér-pozíció: 0% 50%; háttér-ismétlés: nincs ismétlés; padding-left: 15px; ) input:required ( background-image: url("../images/required.png"); ) input :focus:invalid ( background-image: url(../images/invalid.png"); ) input:focus:valid ( background-image: url("../images/valid.png"); )
Ebben az esetben háttérképet (csillag) adunk a kötelező űrlapmezőkhöz. A bemeneti elemek nem tartalmazhatnak generált tartalmat. Ezért jobb lenne háttérképet használni. Ezenkívül az érvényes és nem érvényes mezőket különböző háttérképek különböztetik meg egymástól. A változtatások csak akkor lesznek láthatók, ha a felhasználó kiválasztotta a megfelelő űrlapelemet.
Figyelmeztetés: A Firefox érvénytelen elemeket stílusoz
Kérjük, vegye figyelembe, hogy Firefox böngésző saját stílusát alkalmazza a nem érvényes elemekre (piros árnyék), amint az az egyik fenti képen látható. A szükséges HTML effektus letiltásához használja a következő CSS-t:
:invalid ( box-shadow: nincs; )
Tipp: Célzott stílus a régi böngészőkhöz
Az olyan régebbi böngészők, mint az IE8 és az IE9, nem támogatják a :required pszeudoosztályt, de megadhat célzott stílusokat attribútumválasztóval:
input:required, input ( background-image: url(../images/required.png"); )
Ezt az attribútumot űrlap-ellenőrzési horogként is használhatja olyan böngészőkben, amelyek nem támogatják a HTML5-alapú érvényesítést. A Javascript kód ellenőrzi a kötelező attribútum üres beviteli elemeit, és nem küldi el az űrlapot, ha üres kötelező mezőket talál.
Hé srácok, reméljük, hogy a dolgok jól mennek, ma egy nagyon hasznos oktatóanyagot fogunk elmagyarázni veletek. A mai oktatóanyagban egy egyszerű kapcsolatfelvételi űrlapot készítünk angularJS és php használatával.
A kapcsolatfelvételi űrlap egy szabványos weboldal, amely minden webhelyen elérhető. Ez lehetővé teszi a webhely látogatóinak, hogy kapcsolatba léphessenek a webhely tulajdonosaival vagy szolgáltatóival, akik felelősek a webhely karbantartásáért. Ezért úgy gondoljuk, miért ne hozzunk létre egy egyszerű kapcsolatfelvételi űrlapot az Angularjs és a php használatával, hogy üzeneteket kapjunk webhelyektől, olvasóktól és/vagy felhasználóktól.
A kezelőfelülethez Angularjs-t, szerver oldalon pedig php-t használunk. Írunk egy php kódot, amely egy Angular űrlapból veszi az adatokat, és e-mailben elküldi a webhely rendszergazdájának. Hozzon létre egy „contact-form” nevű mappát az alkalmazás webkönyvtárában, és hozzon létre egy sablont HTML oldalak– index.html. Most másolja ki és illessze be az alábbi kódot az index.html fájlba.
Kapcsolatfelvételi űrlap angularjs-szal és PHP-vel
php kód az e-mail küldéshez
Hozzon létre egy contact.php oldalt, és másolja be az alábbi kódot. Az alábbiakban látható a php kód, amely lekéri az adatokat egy szögletes formáról, és elküldi e-mailben a megadott e-mail címre.
< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->név; echo "Email: " . $adat->e-mail; echo "Üzenet: " . $adat->üzenet; // e-mailt küldött $to = $data->email; $subject = "Tesztelési e-mail webhely teszteléshez angularjs kontaktus form"; $message = $data->message; $headers = "Feladó: " . $adat->név .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" .phpversion(); // PHP levelező funkció, amellyel e-mailt küldhet e-mail címre mail($to, $subject, $message, $headers); ?>
Miért telepítettem ezt az űrlapot?
Egy brute force támadás folyik jelenleg a webhelyén. A brute-force attack egy jelszókitaláló támadás. Ebben az esetben a jelszó a webhely adminisztrációs paneljéhez van kiválasztva.
A webhelye feltörésének megelőzése és biztonságának növelése érdekében további védelmet telepítettünk.
Hogyan férek hozzá most a webhely adminisztrációs paneljéhez?
Most, amikor eléri webhelye adminisztrációs paneljét (Joomla vagy WordPress rendszeren), egy további bejelentkezési és jelszóbeviteli ablak jelenik meg a „kérem, használja a vezérlőpult jelszavát” felirattal. Bejelentkezésként meg kell adnia a hosting szolgáltatás bejelentkezési adatait, úgy néz ki "u1234567". Jelszóként a tárhelyszolgáltatás jelenlegi jelszava.
Az alapvető HTTP-hitelesítés átadása után egy szabványos engedélyezési mező jelenik meg webhelye adminisztrációs panelén. Most meg kell adnia a webhely rendszergazdájának felhasználónevét és jelszavát.
Hogyan működik a HTTP alapszintű hitelesítés
A bejelentkezési jelszó megadásakor az alap hitelesítési ablakba a bejelentkezés értéke és jelszó hash alatti értékekkel lesz összehasonlítva speciális fájl ~/etc/users, elérhető a hosting vezérlőpulton. A fájl tartalma valahogy így néz ki: "u1234567:dm48bspxIO3rg". Ahol az „u1234567” a felhasználónév, a „dm48bspxIO3rg” pedig jelszó hash(Megjegyzés: csak a hash, magát a jelszót nem!). A jelszókivonat a jelszó egy adott algoritmus szerinti átalakításának eredménye.
Így amikor az alap hitelesítési ablakban megad egy felhasználónevet és jelszót, a rendszer a beírt jelszót veszi fel hashés összehasonlítjuk a fájl hash értékével ~/etc/users. Ha az értékek egyeznek, Ön hitelesítve van.
Nem tudom átadni az alapvető hitelesítést
Valószínűleg rossz jelszót ad meg. Telepítés új jelszó alap hitelesítéshez:
Ha átment az alapszintű hitelesítésen, de nem tud közvetlenül bejelentkezni a Joomla vagy a WordPress webhely adminisztrációs paneljére, használja a súgót:
Hogyan lehet növelni a webhely védelmét a brute-force támadásokkal szemben?
A webhely biztonságának javítása érdekében:
- módosítsa a szuperfelhasználói bejelentkezést valami egyedibbre. Ne használjon rövid neveket, jobb, ha az utónevet a vezetéknévvel együtt használja. Az interneten számos forrás található, ahol a legnépszerűbb bejelentkezési adatokat gyűjtik össze. Ismerkedjen meg velük, és soha ne használja őket;
- állítson be egy összetett webhely rendszergazdai jelszót. Az összetett jelszónak tartalmaznia kell kis- és nagybetűket, számokat és további karaktereket, például "* - _ # :" stb. A jelszó hosszának legalább 6 karakternek kell lennie. Lehetőleg 10 vagy több.
Hogyan lehet eltávolítani az alapvető HTTP hitelesítési űrlapot?
A HTTP alapvető hitelesítési űrlap eltávolítása:
Egy sor megjegyzéséhez tegyen egy font jelet ("#") a sor elejére, így.
A "bolondbiztos" olyan intézkedések összessége, amelyek megakadályozzák, hogy helytelen információkat adjanak meg az űrlapon. Például, ha egy 0-tól 10-ig terjedő pozitív számot szeretne beírni a mezőbe, akkor ellenőrizze, hogy a felhasználó nem ír be olyan szöveget vagy számot, amely nem a megadott tartományba esik, pl. A szám nem lehet kisebb nullánál és nem lehet nagyobb tíznél.
Miért van rossz információ adva meg? Ez elsősorban három okból történik.
- A felhasználó véletlenül hibázott, például figyelmetlenül elolvasta, amit meg kellett adnia.
- A weboldal félreérthető módon kér bevitelt, így a felhasználónak ki kell találnia, és feltételezéseket kell tennie arról, hogy valójában mit is akar tőle. Ebben az esetben a fejlesztő és a felhasználó véleménye nem mindig esik egybe.
- Sokan vannak, akik kihívásnak tekintik az utasításokat, és ennek az ellenkezőjét próbálják tenni. Az ilyen felhasználók valami ilyesmire gondolnak: „Igen, megkérnek, hogy adjak meg egy számot. És mi történik, ha megadom a betűket? Aztán egyértelműen helytelen információkat adnak meg, és látják, hová vezet.
Meg kell érteni, hogy a pontos és helyes megfogalmazások, bár csökkentik a hibák valószínűségét, nem mentik meg őket tőlük. Csak a szerver oldalon található technikai eszközök teszik lehetővé a kívánt eredmény elérését és a téves adatok bevitelének elkerülését. A revíziós vagy – ahogyan azt is nevezik – kliensoldali érvényesítéssel azonban gyorsan ellenőrizhetjük a felhasználó által megadott adatok helyességét anélkül, hogy az űrlapot elküldenék a szervernek. Ez időt takarít meg a felhasználónak, és csökkenti a szerver terhelését. A használhatóság szempontjából is vannak pluszok - a felhasználó azonnal üzenetet kap arról, hogy milyen információkat adott meg hibásan, és javíthatja a hibáját.
kötelező mező
Néhány űrlapmezőt ki kell tölteni, mielőtt elküldené őket a szervernek. Ez vonatkozik például a regisztrációs űrlapra, ahol meg kell adnia egy felhasználónevet és jelszót. A kötelező mezők megadása a kötelező attribútum használatával történik, az 1. példában látható módon.
1. példa: kötelező attribútum
HTML5 IE 10+ Cr Op Sa Fx
A kötelező mezőket az űrlap elküldése előtt ki kell tölteni, ellenkező esetben az űrlap nem kerül elküldésre a szerverre, és a böngésző figyelmeztetést ad erről. Az üzenet megjelenése a böngészőtől függ, például a Chrome elemleírást jelenít meg, amint az az ábrán látható. egy.
Rizs. 1. A kötelező mező nincs kitöltve
Az adatok helyessége
Kezdetben két mező van, amelyben a felhasználó által megadott adatok automatikusan érvényesítésre kerülnek. Ez egy webcím és egy e-mail cím. Chrome böngésző a naptár adatmezőjét is érvényesíti, de csak azért, mert nincs kattintható naptár felület. Ezeket az elemeket a következő szabályok jellemzik.
- Webcím ( ) tartalmaznia kell a protokollt (http://, https://, ftp://).
- Email cím ( ) betűket vagy számokat kell tartalmaznia a @ szimbólum előtt, utána, majd egy pontot és egy első szintű domaint.
A böngészők kissé eltérő házirendekkel rendelkeznek a felhasználói adatok ellenőrzésére. Például az Opera automatikusan helyettesíti a http:// protokollt a beírt szöveg előtt, míg más böngészők ezt várják a felhasználótól. A Chrome és az Opera ezt igényli postázási cím volt egy pont, Firefoxhoz nem kötelező.
A 2. példa egy űrlapot mutat be kötelező mezőkkel, ahol a böngésző két mezőt érvényesít.
2. példa Adatok helyessége
HTML5 IE 10+ Cr Op Sa Fx
Az Opera csak akkor érvényesíti az űrlapelemet, ha a name attribútum jelen van.
ábra mutatja, hogy mi történik az Operában, ha helytelen adatokat ad meg. 2.
Rizs. 2. Hibás adatokra vonatkozó figyelmeztetés
Beviteli sablon
Egyes adatok nem rendelhetők valamelyik űrlapelem-típushoz, ezért szövegmezőt kell használni hozzájuk. Ugyanakkor egy bizonyos szabvány szerint kerülnek be. Tehát az IP-cím négy, ponttal elválasztott számot tartalmaz (192.168.0.1), az orosz irányítószám hat számjegyre korlátozódik (124007), a telefon tartalmazza a körzetszámot és egy meghatározott számú számjegyet, gyakran kötőjellel elválasztva (391). 555-341-42), stb. A böngészőnek meg kell adnia egy beviteli sablont, hogy ennek megfelelően ellenőrizze a felhasználó bevitelét. Ehhez a minta attribútumot használjuk, értéke pedig egy reguláris kifejezés. Néhány jellemző érték a táblázatban található. egy.
A 3. példa hexadecimális színértéket kér (#ffcc00), és ha az nincs ebben a tartományban, a böngésző hibaüzenetet jelenít meg.
Példa 3. Beviteli sablon
HTML5 IE 10+ Cr Op Sa Fx
ábrán. A 3. ábra egy figyelmeztetést mutat be a Chrome böngészőben.
Rizs. 3. A megadott adatok nem egyeznek a sablonnal
Az érvényesítés megszakítása
Az érvényesítés nem mindig szükséges egy űrlaphoz, például előfordulhat, hogy a fejlesztő szeretné használni egyablakos megoldás JavaScriptben és a böngésző ismétlődő ellenőrzésében, már nincs rá szüksége. Ilyen esetekben ki kell kapcsolni a beépített érvényesítést. Ehhez használja a címke novalidate attribútuma.
Hasonló célból a formnovalidate attribútumot használják, amely hozzáadódik az űrlap elküldéséhez, jelen esetben a címkéhez. . Ebben az esetben a 4. példa űrlapja így fog kinézni.