Az űrlap HTML elem, mert ez teszi lehetővé az adatok bevitelét, és ezért az weben és annak adatbázisában való interakciót is, tehát biztonsági szempontból ellenőrzéseket igényel, mivel egy űrlapból fájlokat küldhet a kiszolgálóra, a megbízás vagy a fizetés feldolgozására, különféle elemek és vezérlőelemek kiválasztásával, amelyeket egy javascript esemény vagy egy másik webes programozási nyelv dolgoz fel.
A fejlesztőknek sokszor különféle könyvtárakat kell használniuk az űrlapokkal kapcsolatos feladatok elvégzéséhez az események vezérlésére, és bizonyos esetekben az adatok küldésére, a bevitt adatok ellenőrzésére, a kódinjekciók vagy az XSS támadások elkerülésére néhány nemkívánatos módszerre kell fordítanunk a kódot.
Ha ezeket a vezérlőket és eseményeket szeretnénk végrehajtani, nagyon sok javascript fájlt találhatunk, amelyek jelentősen növelik a web súlyát kb-ban és lelassítják az oldalt. Az is bizonytalan, mert ha valaki letiltja a Javascript használatát, az összes vezérlő nem működik.
Az űrlapok és attribútumok elemei a HTML5- ben nagyobb mértékű ellenőrzést és szemantikai jelölést biztosítanak, mint az előző verzió, attribútumok és tulajdonságok kerültek hozzáadásra, amelyek lehetővé teszik a külső vezérlők szükségességének megszüntetését szkriptek használatával. A HTML5 űrlapfunkciói jobb irányítást biztosítanak, és ez nem függ attól, hogy a Javascript engedélyezve vagy le van-e tiltva a böngészőben.
HTML5 űrlap attribútumok - Helyőrző
A helyőrzőtulajdonon keresztül példát mutathatunk a regisztrálandó adatok típusáról, ez lehetővé teszi számunkra, hogy információt szolgáltassunk a felhasználó számára útmutatóként. Ez a szöveg, amelyet a vezérlőben jelölünk, eltűnik, miután a felhasználó beírt karaktert.
A helyőrző-attribútum csak szövegdobozokban vagy szövegtagokban használható.
Minta szabályos kifejezésekkel az űrlapokon
A pattern attribútum lehetővé teszi számunkra, hogy meghatározzuk a szabályainkat az adatok érvényesítéséhez, amelyeket a felhasználó szokásos kifejezésekkel ad meg. A szabályos kifejezés olyan karakter sorozat, amely meghatározza az adatmintát, például az [az] ábra azt jelzi, hogy a felhasználó csak kisbetûket írhat be, vagy a [0-9] minta azt jelzi, hogy csak számokat lehet beírni.
A HTML5 lehetővé teszi minták használatát, tehát ha a beírt karakterek nem egyeznek meg az automatikusan definiált mintával, akkor hibát generál.
Meghatározunk néhány szabályt mintákkal és stíluslapokkal, hogy megváltoztassuk a szegély színét, ha érvénytelen esemény fordul elő, azaz az, amit a felhasználó beírt, nem felel meg egy adott mintában meghatározottaknak.
Készítünk egy Példa01.html fájlt, és beírjuk a következő kódot:
bemenet: érvénytelen {szegély: 1 képpont folytonos piros; } bemenet: érvényes {szegély: 1 képpont folytonos zöld; } span {szélesség: 100px; margó: 5 képpont; kijelző: inline-block; }Minta szabályos kifejezésekkel
használó
kulcs:
E-mail:
dátum
ár
Ha elküldjük az űrlapot, akkor az minden mezőt érvényesíti a meghatározott mintához viszonyítva, és ha nem teljesül, akkor megjelenik a címcímkében definiált üzenet, a szabályban meghatározott stílusokat és a HTML5-t használó érvénytelen osztály CSS tulajdonságait is használja.
Például helytelen e-mailt írunk be:
Helytelen dátumot is megadunk, és úgy látjuk, hogy nem tudja benyújtani az űrlapot. Ha jobbat akarunk, vagy adunk hozzá vizuális effektusokat, akkor a CSS segítségével háttér-ikont adhatunk a vezérlőhöz, ahol a hiba fordul elő. Például a következő css stílusokat hozzáadjuk azokhoz, amelyek már rendelkeztek, a bemenetet bemenetre változtatjuk [type = 'text'], hogy a stíluslapok csak a szövegmezőket érintsék, nem pedig a gombot.
bemenet: érvénytelen {szegély: 1 képpont folytonos piros; } bemenet: érvényes {szegély: 1 képpont folytonos zöld; } span {szélesség: 100px; margó: 5 képpont; kijelző: inline-block; } input: érvénytelen {háttérkép: url (novalido.webp); háttér-helyzet: jobb felső; háttér-ismétlés: nem ismétlés; } input: érvényes {háttérkép: url (valid.webp); háttér-helyzet: jobb felső; háttér-ismétlés: nem ismétlés; } input [type = 'benyújtás'] {háttérkép: nincs; szegély: szilárd 1px # 000000; } A következő ikonokat használjuk:
Minden vezérlőelem mellé hozzáadjuk a szükséges tulajdonságot, például:
A példa végrehajtásakor láthatjuk, hogy ha az űrlapot üres mezőkkel küldjük el, akkor megmutatják a szükséges és érvényes mezőket.
A minták előnye, hogy nem használunk JQuery vagy más típusú validálást, és ha ezt a lehetőséget deaktiváljuk a böngészőben, akkor az általunk meghatározott korlátozások és szabályok továbbra is működni fognak. Ez nem jelenti azt, hogy az űrlap elküldésekor kerüljük az ellenőrzést, amikor az adatokat feldolgozzuk, akár az adatbázisba mentés céljából, akár postán küldjük el, vagy bármilyen műveletet végrehajtsunk.
$config[ads_text6] not foundŰrlap több szállítással
Bonyolult feladat az volt, hogy ugyanazt az űrlapot két különböző oldalra küldi el, tegyük fel, hogy egyetlen bejelentkezési űrlap segítségével egy gombnyomásra más oldalakra lépünk, ahol a lekérdezések és az információs folyamat megváltozik. Ezt úgy végezzük, hogy meghatározzuk a formázási tulajdonságot, ahol egy másik folyamatot jelölünk az alapértelmezett művelethez.
span {szélesség: 100px; margó: 5 képpont; kijelző: inline-block; }Űrlap több szállítással
felhasználói:
kulcs:
Nem kétséges, hogy az ilyen típusú tulajdonságokkal és attribútumokkal való kölcsönhatás nagyban megkönnyíti a webhelyek fejlesztését anélkül, hogy külső könyvtárakat és összetett javascript kódot kellene használni.
$config[ads_text5] not foundMint tervezők és fejlesztők, általában azt találjuk, hogy egy szkriptnek van egy bizonyos monoton szerkezete a html-ben és érvényesítése, különösen az érvényesítési szabályok írására, majd a felhasználó megmutatására, amikor hiba történik. A HTML 5 bevezeti ezeket az új attribútumokat, bemeneti típusokat és egyéb elemeket, így kevesebb kódot kell írni és inkább a szemantikára, mint a szintaxisra kell összpontosítanunk.
Ezek a szabályok minden böngészőben működnek, függetlenül az operációs rendszertől, és nem kell más könyvtárakat vagy hacket használni a különböző rendszerekhez vagy eszközökhöz való alkalmazkodáshoz. Számos olyan formattribútumot láthattunk, amelyek elősegítik a felhasználói élmény javítását és a fejlesztési idő megtakarítását. Vannak olyan attribútumok, amelyek továbbra sem működnek minden böngészőben.
$config[ads_text6] not found
Cikk