A jelszóbeviteli mező egy normál szövegmező, amelyben a beírt szöveg böngészőtől függően csillagok vagy pontok formájában jelenik meg. Ezt a funkciót arra tervezték, hogy megakadályozza, hogy bárki leskelje a megadott jelszót. Bár a beírt szöveg nem jelenik meg a képernyőn, a beírt információ titkosítás nélkül, tiszta szöveggel kerül a szerverre. Ezért ennek a mezőnek a használata nem biztosítja az adatok biztonságát, és azok lehallgathatók.

A létrehozás szintaxisa a következő.

Az attribútumok megegyeznek a szövegmező attribútumaival, és a táblázatban vannak felsorolva. 1.

A jelszómezőt széles körben használják a webhelyeken a felhasználók engedélyezésére és a hozzáférés korlátozására a webhely azon részeihez, ahol meg kell erősítenie jogosultságát. Az 1. példa bemutatja, hogyan lehet ilyen mezőket létrehozni.

Példa 1. Jelszó mező

Jelszó mező

Belépés:

Jelszó:

Ennek eredményeként a következőket kapjuk (1. ábra).

Rizs. 1. Jelszómező típusa

A szín, a háttér, a keret stb. paramétereit meghatározó stílustulajdonságok a jelszómezőre vonatkoznak. Vegyük a szövegmezők stílusát alapul.

2. példa: Kép hozzáadása egy szövegmezőhöz

Jelszómező .textField, .passField ( szélesség: 100%; /* Mező szélessége */ padding: 10px; /* Margók */ box-sizing: border-box; /* Szélesség számítási algoritmus */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Shadow inside */ border: 1px solid #ccc; /user.png) no-repeat 5px 50% /* Felhasználó képe */ padding-left: 30px /* Távolság a bal széltől */ .passField ( háttér: url(/example/image/lock.png) no- ismétlés 5px 50% /* Kép a jelszó mezőhöz */ )

Ennek a példának az eredménye az ábrán látható. 2. A képek háttérként kerülnek hozzáadásra, ezért a szöveget a padding-left gombbal jobbra kell mozgatni, ellenkező esetben a kép tetején jelenik meg.

A HTML5 számos funkciót és fejlesztést hoz a webes űrlapokhoz, új attribútumok és mezőtípusok kerültek bevezetésre, amelyeket elsősorban a webfejlesztők életének megkönnyítése és a webes felhasználók számára kényelmesebb munkavégzés érdekében vezettek be. Ma létrehozunk egy bejelentkezési oldalt a html5 használatával. Ha nem ismeri az új űrlapokat, ez az oktatóanyag segít.

Végeredmény:

Jelölés írása

Hozzuk létre a következő jelölést

A class="loginform cf"> szakasz

• Email
• Jelszó

< /section>

Ha már dolgozott HTML-űrlapokkal, ez a kód ismerősnek tűnik. De van néhány sajátosság is. A mezőkben helyőrzők és néhány új attribútum található.

Helyőrzők

A helyőrző attribútum lehetővé teszi alapértelmezett szöveg beillesztését egy mezőbe, amely eltűnik, amikor az elem fókuszba kerül, vagy amikor a mező kitöltésre kerül. Korábban ezt JavaScript segítségével tettük, de most minden sokkal könnyebbé vált az új attribútumoknak köszönhetően.

"kötelező" attribútum

A kötelező attribútum megakadályozza, hogy a mezők üresen maradjanak az űrlap elküldéséig. Ha a felhasználó nem tölti ki a mezőt, a következő hibaüzenet jelenik meg.

Egy új választó is bekerült a CSS3-ba (:required). Íme egy példa:

Bemenet (szegély: 1 képpont folyamatos piros;)

Mezőtípusok

Az első mezőnk az e-mail típusú (a beviteli típusok egy másik HTML5 innováció). Ha a felhasználó nem tölti ki a cím mezőt Email, a következő értesítés jelenik meg;

Az ilyen bevitel használata azért is kényelmes, mert a mobileszközök (iPhone vagy Android) felhasználói számára kényelmesebb lesz kitölteni a mezőt a „@” jellel.

A HTML5-űrlapokhoz kínált új funkciók hatékonyak és könnyen megvalósíthatók, de például nem mindenhol támogatottak;

A helyőrző attribútumot csak a modern böngészők támogatják – Firefox 3.7+, Safari 4+, Chrome 4+ és Opera 11+. Ha ezt meg szeretné javítani, használja ezt a mankót a Modernizr-rel együtt.

Ugyanez a kötelező tulajdonsággal. A hibaértesítés nem személyre szabható, de a hiba továbbra is megmarad: "Kérjük, töltse ki a mezőket".
"Kérem, adjon meg egy nevet", ez az attribútum is csak normál böngészőkben támogatott.

Címke ( kijelző : blokk ; szín : #999 ; ) .cf :before , .cf :after ( tartalom : "" ; megjelenítés : táblázat; ) .cf :after ( törlés : mindkettő ; ) .cf ( *zoom: 1 ; ) :fókusz ( körvonal : 0 ; )

A "beküldés" mező kivételével minden mező a következő stílusokkal rendelkezik:

Loginform input:not ([ type=submit] ) ( padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0,1) , 0px 1px 0px 0px rgba(250, 250, 250, 0,5);

És itt vannak az űrlap beküldésére szolgáló gomb stílusai.

Loginform input[ type=submit] ( keret : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; háttér : #64c8ef ; /* Régi böngészők */ háttér : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ háttér : -webkit-gradiens(lineáris, bal felső , bal alsó lent, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,# 00a2e2 ) ) ; /* Chrome,Safari4+ */ háttér : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear- ; gradiens(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="Ty,Gpe=dien2t" 0 ) ; /* IE6-9 */ szín : #fff : 5px 15px : 15px 1px rgba(0 , 0 , 0 .3 ); )

Ez minden! Reméljük hasznosnak találta ezt az oktatóanyagot.

Összeállítottunk egy listát 60 ingyenes bejelentkezési űrlapból, amelyeket használhat WordPress-webhelyén, blogján, fórumán stb. Minden űrlapot alaposan tesztelnek annak érdekében, hogy biztosítsák a működését és a forráskód elérhetőségét.

WordPress bejelentkezési testreszabó

A listában szereplő űrlapok HTML/CSS használatával jönnek létre. De ebben az esetben arról beszélünk a legjobb beépülő modulról a WordPress UI testreszabásához. Számos sablont tartalmaz, amelyek tovább testreszabhatók, hogy megfeleljenek webhelyének. Ezzel a bővítménnyel megszabadulhat az unalmas WordPress bejelentkezési oldaltól.

Kreatív bejelentkezési űrlap

Egy egyszerű, de kreatív bejelentkezési űrlap HTML és CSS3 használatával. Regisztrációs lapként is használható. Ez a kedvenc sablonunk ebből a listából.

Kerestünk az interneten igazán klassz felhatalmazási űrlapokat, de nehéznek bizonyult megtalálni őket. Ezért úgy döntöttünk, hogy bemutatjuk a sajátunkat. Itt van a csapatunk által tervezett 20 bejelentkezési űrlap.

1. számú meghatalmazási nyomtatvány

Egyszerű, kreatív és élénk bejelentkezési űrlap gradiens háttérrel. Bármilyen célra felhasználhatja, például engedélyezésre webszolgáltatásban, mobil- vagy asztali alkalmazásban.

Letöltés

Előnézet

2. számú meghatalmazási lap

Minimalista és kifinomult bejelentkezési űrlap gombbal, színátmenetes kitöltéssel, animációval és logóval. Használja a szükséges elemek megváltoztatásával.

Letöltés

Előnézet

3. számú meghatalmazási lap

Bejelentkezési oldal háttérképpel, árnyékkal és lebegéssel a bejelentkezési gombhoz.

Letöltés

Előnézet

4. sz. meghatalmazás

Letöltheti ezt a webes űrlapot, és tetszés szerint használhatja. Teljesen adaptív.

Letöltés

Előnézet

5. számú meghatalmazási lap

Egy gyönyörű és modern űrlap a Facebookon vagy a Google-on keresztüli bejelentkezéssel. Gombjai gyönyörű lebegő effektusokkal rendelkeznek, hogy nagyszerű felhasználói élményt nyújtsanak a felhasználóknak.

Letöltés

Előnézet

6. sz. meghatalmazás

Ha a weboldal ügyes és szép, a bejelentkezési űrlap nem térhet el a designjától. Íme egy űrlap, amely biztosan megfelel az elvárásainak.

Letöltés

Előnézet

7. sz. meghatalmazás

Egy űrlap három lehetőséggel a fiókba való bejelentkezéshez: Facebook, Twitter vagy e-mail. És ha a felhasználónak még nincs fiókot, az űrlapot a regisztrációs oldalhoz kapcsolhatja.

Letöltés

Előnézet

8. sz. meghatalmazás

Egy másik modern, divatos és szép bejelentkezési űrlap. Különösen jól néz ki mobileszközökön.

Letöltés

Előnézet

9. sz. meghatalmazás

Ha szeretne megszabadulni a tiszta fehér vagy monokróm dizájntól, figyeljen erre a formára. Támogatja a háttérkép vagy színátmenetes átfedés hozzáadását. Lehetőség van a Facebookon vagy a Google-n keresztüli bejelentkezésre is.

Letöltés

Előnézet

10. sz. meghatalmazás

Ez pont az ellenkezője az előző lehetőségnek. Minimalistanak tűnik, de ugyanakkor nagyon ügyes.

Letöltés

Előnézet

11. sz. meghatalmazás

Ahelyett, hogy a semmiből hozna létre egy űrlapot, használhat egy nagyszerű, használatra kész sablont, mint ez.

Letöltés

Előnézet

12. sz. meghatalmazás

A 12-es számú meghatalmazási űrlap egy háttérkép kék árnyékréteggel, egy avatarral és beviteli mezőkkel ellátott névvel. Lebegő effektus hozzáadva a bejelentkezési gombra.

Letöltés

Előnézet

13. sz. meghatalmazás

Osztott képernyősablon, ahol az egyik fele a képé, a másik fele pedig az alakzaté.

Letöltés

Előnézet

14. sz. meghatalmazás

Ez a gyűjtemény egyszerű és összetettebb bejelentkezési űrlapokat is tartalmaz. A 14-es sablon pedig a minimalisták közé tartozik.

Letöltés

Előnézet

15. sz. meghatalmazás

Meglehetősen minimalista forma, de a tetejére bannert is felvehet. Ennek a kis lehetőségnek köszönhetően vonzóbbá teheti az űrlapot.

Letöltés

Előnézet

16. sz. meghatalmazás

Ez egy bejelentkezési űrlap egy teljes képernyős képpel, amely tetején találhatók a bejelentkezési név és a jelszó megadására szolgáló mezők, valamint egy lebegő effektusú gomb.

Letöltés

Előnézet

17. sz. meghatalmazás

Az űrlap személyre szabottabbá tételéhez használhatja ezt a sablont. Oldalán egy kép található.

Letöltés

Előnézet

18. sz. meghatalmazás

Letöltés

Előnézet

19. sz. meghatalmazás

Lendületes, energikus és izgalmas – erről szól ez a nevezési lap. Teljesen adaptív, erre optimalizálva mobil eszközökés minden nagyobb webböngészővel kompatibilis.

Letöltés

Előnézet

20. sz. meghatalmazás

Színátmenetes háttér, fekete gomb lebegő effektussal, mezők a bejelentkezési név és jelszó megadásához, valamint egy „Elfelejtette a jelszavát?” rész. Mindez a 20. számú meghatalmazáson található.

Letöltés

Előnézet

Legördülő bejelentkezési űrlap

Letöltés

Lebegő regisztrációs űrlap

A lapokat és címkéket használó előfizetési űrlapokhoz tervezték.

Letöltés

Egyszerű engedélyezési űrlap

Az embereket az akadályozta meg, amikor be akartak jelentkezni egy WordPress-webhelyre, hogy túl egyszerű volt kinézet. Ez a forma megtartja a népszerű dizájnt, de színt ad hozzá.

Letöltés

Lapos bejelentkezés – Regisztrációs űrlap

Ha a jobb felső sarokban található „Kattintson rám” gombra kattint, a bejelentkezési űrlap animáción keresztül regisztrációs űrlapmá alakul.

Letöltés

Jelentkezzen be önálló SCSS-űrlappal

Ez egy SCSS segítségével létrehozott űrlap. CSS-bővítmény, amely új funkciókat és eleganciát ad az alapnyelvhez. Lehetővé teszi változók, beágyazott szabályok, soron belüli importálások és még sok más használatát.

Letöltés

Animált bejelentkezési űrlap

Ez egy animált bejelentkezési űrlap, és a „Hé, jelentkezz már be” felső rész formává alakul, ha rákattint a gombra.

Letöltés

Bejelentkezési űrlap CSS3 és HTML5 használatával

Példa egy egyszerű bejelentkezési űrlap létrehozására HTML5 és CSS3 használatával. Pszeudo elemeket használ (:utána és :előtte) több oldal hatásának létrehozására. Ez az űrlap HTML5-öt használ az adatok ellenőrzésének és megjelenítésének egyszerűsítésére.

Letöltés

Jelentkezzen be Shake Effect segítségével

Ha rossz jelszót adott meg, egy gyönyörű shake effektussal értesítjük. Egyszerű és hatékony megoldás.

Letöltés

Boxy bejelentkezési űrlap

Letöltés

Animált bejelentkezési űrlap

Egy ügyes kis bejelentkezési űrlap Amikor a bal oldalon található „BEJELENTKEZÉS” gombra kattint, megjelenik a bejelentkezési űrlap.

Íme egy példa a html bejelentkezési oldal kódjára. Ebben a példában egy szövegmezőt jelenítettünk meg, a Jelszót, a Visszaállítás gombot és a Bejelentkezés gombot. A Reset gombot használtuk, amely minden mezőt üresre állít. JavaScript-ellenőrzést használtunk a Bejelentkezés oldalon. Beállítottuk a felhasználónév és jelszó értékét.

Íme egy példa a html bejelentkezési oldal kódjára. Ebben a példában egy szövegmezőt jelenítettünk meg, a Jelszót, a Visszaállítás gombot és a Bejelentkezés gombot. Használtuk a Visszaállítás gombot, amely minden mezőt üresre állít. JavaScript-ellenőrzést használtunk a Bejelentkezés oldalon. Beállítottuk a felhasználónév és jelszó értékét.

Íme egy példa a html bejelentkezési oldal kódjára. Ebben a példában egy szövegmezőt jelenítettünk meg, a Jelszót, a Visszaállítás gombot és a Bejelentkezés gombot. A Reset gombot használtuk, amely minden mezőt üresre állít. A bejelentkezési oldalon JavaScript érvényesítést alkalmaztunk. Beállítottuk a felhasználónév és jelszó értékét. Ha valaki rossz felhasználónevet vagy jelszót ír be, vagy mindkettőt, hibaüzenet jelenik meg a következővel: "Hiba: hibás felhasználónév vagy jelszó". Amíg a felhasználó be nem írja a helyes felhasználónevét és jelszavát, addig nem fog bejelentkezni.

A helyes felhasználónév és jelszó megadása után átirányítunk egy másik oldalra.

A bejelentkezési oldal a legtöbb dinamikus webhelyen a felhasználó hitelesítési adatai alapján történő ellenőrzésére szolgál. A weboldalak bejelentkezési oldalának elkészítéséhez HTML űrlapot és HTML elemeket használnak. A szövegmező a felhasználónév és jelszó elfogadására szolgál. A szövegmező a felhasználó jelszavának elfogadására szolgál.

Az elküldés gomb az adatok szerverre való elküldésére szolgál érvényesítés céljából. Érdemes a böngészőben JavaScript segítségével ellenőrizni a felhasználói bevitelt. Ebben az oktatóanyagban egy HTML bejelentkezési oldal kódját hozzuk létre, és JavaScripttel érvényesítjük a felhasználói bevitelt. A modern webalkalmazásokban a szerveroldali érvényesítés is nagyon fontos, a szerver oldalon történik a szerveren futó program mellett.

Íme az oktatóvideó:

De ebben az oktatóanyagban megtudhatja, hogyan hozhat létre bejelentkezési oldalt HTML-ben, és ellenőrizheti a felhasználói bevitelt JavaScript segítségével. Tekintse meg a HTML bejelentkezési oldal bemutatóját.

Íme az általunk készített bejelentkezési oldal képernyőképe:

Ezen a bejelentkezési oldalon a Felhasználónév, a Jelszó szövegmezők, majd a visszaállítás és a Bejelentkezés gombok jelennek meg. Miután a felhasználó megadja az adatokat, és rákattint a Bejelentkezés gombra, a JavaScriptet használja az űrlap érvényesítéséhez, és hibaüzenet jelenik meg, ha az érvényesítés sikertelen.

HTML bejelentkezési oldal JavaScript érvényesítéssel

Bejelentkezési oldal

HTML bejelentkezési oldal
Felhasználónév:
Jelszó:

function check(form) ( if(form.userid.value == "Roseindia" && form.pwd.value == "Roseindia") { return true; } else { alert("Error Password or Username") return false; } } !}

A HTML címkéje a szíve a felhasználói belépési űrlap létrehozásának webes alkalmazásban, amely megkapja a felhasználó által bevitt adatokat, és végül elküldi a szerver oldali programnak további feldolgozásra. A rendszer az összes beviteli vagy rejtett mező adatait veszi, és űrlapcímkén keresztül továbbítja a szerverhez. A "beküldés" gomb az űrlapadatok szerver felé történő elküldésének kezdeményezésére szolgál. Az űrlap beküldéséhez JavaScript kódot is használhat. Például, ha az űrlap neve "loginForm", akkor a következő JavaScript-kód hívható meg az űrlap programozott elküldéséhez.

Maga az űrlap általában arra szolgál, hogy információkat fogadjon a felhasználótól, és továbbítsa azt a szerverre, ahol az űrlapadatokat a kezelő program fogadja. Egy ilyen program bármilyen szerveroldali programozási nyelven írható, például PHP, Perl stb. A program címét a címke action attribútuma jelzi, ahogy az 1. példában látható.

1. példa: Űrlapadatok elküldése

HTML5 IE Cr Op Sa Fx

Űrlapadatok

Ebben a példában a name attribútum által jelzett űrlapadatok (bejelentkezési név és jelszó) átkerülnek a /example/handler.php fájlba. Ha az action attribútum nincs megadva, akkor az átvitel az aktuális oldal címére történik.

A szerverre való átvitel két különböző módszerrel történik: GET és POST A címkében lévő metódus beállításához a method attribútumot használjuk, amelynek értékei a get és a post kulcsszavak. Ha a method attribútum nincs megadva, akkor az adatok alapértelmezés szerint a GET metódussal kerülnek a szerverre. táblázatban Az 1. ábra mutatja a különbségeket ezen módszerek között.

Az alkalmazott módszer könnyen meghatározható a böngésző címsorából. Ha egy kérdőjel jelenik meg benne, és a cím így néz ki, akkor ez mindenképpen GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

A paraméterek egyedi kombinációja a címsorban egyedileg azonosítja az oldalt, így a ?q=node/add és ?q=node címmel rendelkező oldalak eltérőnek minősülnek. Ezt a funkciót a tartalomkezelő rendszerek (CMS, Tartalomkezelő rendszer) használják számos weboldal létrehozására. A valóságban egyetlen fájlt használnak, amely fogadja a GET kérést, és ennek megfelelően generálja a dokumentum tartalmát.

Az alábbiakban felsoroljuk ezeknek a módszereknek a webhelyeken történő tipikus alkalmazását.

KAP

Kis szöveges adatok átvitele a szerverre; Webhelykeresés.

A keresőmotorok és a webhelykereső űrlapok mindig a GET módszerrel kerülnek elküldésre, ez lehetővé teszi a keresési eredmények megosztását ismerőseivel, linkküldést e-mailben vagy fórumon való közzétételét.

POST

Fájlok átvitele (fotók, archívumok, programok stb.); megjegyzések küldése; üzenetek hozzáadása és szerkesztése a fórumon, blogon.

Alapértelmezés szerint az űrlap feldolgozása az aktuális böngészőlapon történik, azonban az űrlap elküldésekor módosíthatja ezt a paramétert, és új lapon vagy keretben nyithatja meg az űrlapkezelőt. Ezt a viselkedést a „kontextusnév” adja meg, amely a címke célattribútumának értéke. A népszerű értékek a _blank az űrlap új ablakban vagy lapon történő megnyitásához, valamint a keret neve, amelyet a címke name attribútuma határoz meg (2. példa).

2. példa: Űrlap megnyitása keretben

HTML5 IE Cr Op Sa Fx

Keret használata

BAN BEN ebben a példában Ha a „Küldés” gombra kattint, az űrlap elküldésének eredménye egy terület nevű keretben nyílik meg.

Az űrlapelemek hagyományosan a címkén belül helyezkednek el, így határozzák meg a szerverre továbbítandó adatokat. Ugyanakkor a HTML5 képes elválasztani egy űrlapot elemeitől. Ez a kényelem és a sokoldalúság érdekében történik, így egy összetett elrendezés több olyan űrlapot is tartalmazhat, amelyek nem metszhetik egymást, vagy például egyes elemek szkriptek segítségével jelennek meg az oldalon az egyik helyen, maga az űrlap pedig egy másik helyen található. . Az űrlap és elemei közötti kapcsolat ebben az esetben az űrlapazonosítón keresztül történik, és az ezzel az azonosítóval megegyező értékű form attribútumot hozzá kell adni az elemekhez (3. példa).

3. példa: Űrlap összekapcsolása mezőkkel

HTML5 IE Cr Op Sa Fx

Forma

Ebben a példában a címkét egyedileg azonosítja az auth azonosító, és a form="auth" hozzáadásra kerül az űrlapon keresztül beküldendő mezőkhöz. Ebben az esetben az elemek viselkedése nem változik a gombra kattintva, a bejelentkezési név és a jelszó elküldésre kerül a handler.php kezelőnek.

Bár az űrlapbeküldési paraméterek hagyományosan a címkében vannak megadva, átvihetők az űrlapküldő gombokra ( és ). Ehhez a formation , a formmethod , a formenctype és a formtarget attribútumok halmazát használják, amelyek a megfelelő attribútumok analógjai az űrlap előtag nélkül. A 4. példa ezen attribútumok használatát mutatja be.

4. példa: Űrlap beküldése

HTML5 IE Cr Op Sa Fx

Űrlap beküldése

Egyes böngészők, különösen az Internet Explorer és a Safari nem támogatják az összes új űrlapattribútumot.

Hasonló cikkek