Sitenizin bölümlerinden birini yabancı, ancak belirli sayıda osib için erişilebilir hale getirmeniz gerekiyorsa, coristuvach'ların ek kaydı ve yetkilendirmesi için bunu yapmak daha kolaydır. Koristuvach'ları yetkilendirmenin birçok yolu vardır. Web sunucusu araçlarını ve programlama araçlarını hackleyebilirsiniz. PHP oturumları oylanırsa, artı oylar hakkında konuşalım.

Imovirno, böyle bir form yaratmanın daha iyi bir yolunu bulmak istiyorsunuz. Bunun dışında, bu gerçek tezahür hala planlarımda, ancak ters çevrilmiş bağlantının formunun PHP'de ek nesne yönlendirme yöntemleri için teşvik edilebileceğini düşünebilirsiniz.

Koçanı için yakі zrobimo'nun verdiği tüm detayları tartışacağız. Neye ihtiyacımız var? Koristuvach kaydetme, koristuvach'ı yetkilendirme, bir koristuvach'ı yetkilendirmeden sonra nereye yönlendirme gibi bir komut dosyasına ihtiyacımız var. Bu nedenle, yetkisiz coristuvachiv erişiminden korunacağı için bir kenar çubuğu oluşturmamız gerekecek. Kayıt ve yetkilendirme için oluşturmamız gerekecek HTML formları. Veri tabanından adli tabiplerin kaydı hakkında bilgi topluyoruz. Tse, DBMS'ye bağlanmak için hala bir komut dosyasına ihtiyacımız olduğu anlamına gelir. Kendimiz yazacağımız gibi mikonvatimemo fonksiyonlarının çalışmalarını kullanıyoruz. Fonksiyonlar Ocremy dosyasını kaydediyoruz.

Otzhe, aşağıdaki dosyalara ihtiyacımız var:

• DBMS'den çağrı;
• koristuvach'ın işlevleri;
• yetki;
• kayıt;
• yan çalıntı;
• koristuvach'ın çalışmalarını tamamlamak için senaryo;
• bir koristuvach'ın yetkilendirme durumunu değiştiren bir komut dosyası;
• en basit kenar tasarımı için stil sayfası.

Veritabanında ilgili tablonuz olmadığı için her şey aptalca olacaktır. DBMS'nizi yönetmek için aracı çalıştırın (PhpMyAdmin veya Komut satırı, yak zruchnіshe) yeni bir saldırgan soruda vykonayte:

CREATE TABLE `users` (`id` int(11) NULL DEĞİL AUTO_INCREMENT, `login` char(16) NULL DEĞİL, `password' char(40) NULL DEĞİL, `reg_date' zaman damgası NULL DEĞİL VARSAYILAN CURRENT_TIMESTAMP, PRIMARY ANAHTAR kimliği' )) MOTOR=MyISAM VARSAYILAN CHARSET=utf8 AUTO_INCREMENT=1 ;

Dosyalarımızı şu şekilde betiklerle isimlendireceğim (tüm kokular aynı dizinde olacak):

• veritabanı.php
• işlevler.php
• login.php
• kayıt.php;
• index.php;
• çıkış.php;
• checkAuth.php;
• stil.css

Deri atama onlardan, şarkı söyle, anlarsın. DBMS'den betiği kontrol edelim. Çiş yoga zaten bachili. Sadece bu betiğin kodunu database.php dosyasına kaydedin. Functions.php dosyasındaki fonksiyonları deşifre edeceğiz. Her şey nasıl pracyuvatime? Yetkisiz coristuvach şifreli index.php belgesine erişmeye çalışır, sistem coristuvach yetkilerini kontrol eder, sanki coristuvach yetki vermiyor, şarap yetkilendirme tarafına yönlendirilir. Yetkilendirme tarafında, yetkilendirme formunu gönderebilirsiniz. Haydi zrobimo її.

Kullanıcı girişin:

Şifreniz:

Kayıt ol.

Şimdi formumuza bir göz atmak gerekiyor. Aynı zamanda, diğer unsurların kuralları önemlidir. Ben, öne atlayarak, üstteki stil tablolarını getireceğim.

/* style.css dosyası */ .row ( margin-bottom:10px; width:220px; ) .row etiketi ( display:block; font-weight:bold; ) .row input.text ( font-size:1.2em; padding:2px 5px; ) .to_reg ( font-size:0.9em; ) .instruction ( font-size:0.8em; color:#aaaaaa; margin-left:2px; imleç:varsayılan; ) .error ( color:red; sol kenar boşluğu:3px;

Her şey doğru ayarlandığından, tarayıcınız aşağıdakilere sahip olabilir:

Açıkçası, hala kayıtlı bir koristuvach'ımız yok ve yetkilendirilmek için kayıt olmak gerekiyor. Kayıt formunu dolduralım.

Giriş bilgilerinizi girin: " />

Şifre yaz:

Şifre girişini tekrarlayın:

Sen, şarkı söyleyen, HTML kodunda PHP değişikliği olanlara saygılarını yönelttin. Koku, formların metin alanlarının öznitelikleri yerine, konteynerler yerine afları göstermek için işaretlerdir. Alemy değişiklikleri başlatmadı. Hadi ezelim.

Giriş bilgilerinizi girin: " />

Bir koristuvach adına, Latin alfabesinin sembollerinden, sayılardan, "_", "-", "." sembollerinden daha fazlası olabilir. Koristuvach adındaki Dovzhina suçlu, ancak 4 karakter için kısa değil ve 16 karakter için uzun değil

Şifre yaz:

Şifrede yalnızca Latin alfabesinin sembollerini, sayıları, "_", "!", "(", ")" sembollerini değiştirebilirsiniz. Şifre 6 karakterden kısa olmamaktan ve 16 karaktere ulaşmamaktan suçludur.

Şifre girişini tekrarlayın:

Şifre girişini tekrarla

Form etiketinin action özelliğinde parametre belirtilmedi. Bu durumda, bu formları bastırırken, kokunun düzeltildiği aynı senaryoda koku obroblyatsya olacaktır. Yani bu formları işleyecek bir kod yazmamız gerekiyor. Ale, їhnoyї işlemenin algoritmasıyla başlayalım.

Kullanıcı adı ve şifre alanlarının boş olmadığından emin olmamız gerekiyor. Ardından, mümkün olana kadar girişin geçerliliğini kontrol etmemiz gerekir. Parola, parolanın yeniden girilmesinden de sorumludur ve parolanın yeniden girilmesi bundan sorumludur ve dahası, koku aynı olabilir. Sanki bu akıllardan dayak yemiyorlarmış gibi, bu formların işlenmesi suçlu ama ekli, dizide, af hakkında hatırlamak itirafta yazılabilir ve Koristuvachev durumunda yapılabilir. Koristuvach'ın rahatlığı için, giriş bilgilerinin girişini (ve giriş bilgilerini girmenin yanı sıra) $fields dizisine değerini yazarak kaydediyoruz.

Her şey yolunda, tarayıcınızda kayıt.php belgesine geri döndüğünüzde şöyle bir şey görebilirsiniz:

Şimdi diyelim ki bir koristuvach form alanlarını doldurmadan kayıt ol butonuna tıkladı. Algoritmamıza bağlı olarak, giriş ve şifre boş olamaz. Akıl muzaffer olmadığı için kayıt mümkün değildir. Bu formların işlenmesinin bir akış senaryosunda gerçekleştirildiğini hatırlıyoruz. Bu, ek revizyonlar ekleyerek bu kodu değiştirmemiz gerektiği anlamına gelir. Hemen değiş tokuş yapalım ve yeniden doğrulayalım. Kullanıcı adınızı ve şifrenizi girdikten sonra, atanan kimlik bilgilerinin geçerliliğini kontrol etmeniz gerekir. Kullanıcı adı ve şifreyi yeniden doğrulamak için, function.php dosyasında coristuvacha'nın işlevini oluşturuyoruz.

/** * function.php * Koristuvach işlevli dosya */ // Dosyayı DBMS bağlantı parametreleriyle bağla require_once("database.php"); // Koristuvach fonksiyonunun adını yeniden kontrol ediyoruz checkLogin($str) ( // Pardon hakkında bir şey hatırlayabiliyorsak başlangıçta değiştirin $error = ""; // Login ile ilgili satır yokmuş gibi, af hakkında dönebiliriz if(!$str) ( $error = " "coristuvacha" adını girmediniz; return $error; ) /** * Ek normal ifadeler için yeniden kontrol edeceğiz ve "_", "- karakterlerini kullanacağız. ", "." */ $pattern = "/^[- _.az\d](4,16)$/i"; $result = preg_match($pattern, $str) ; // Yeniden doğrulama yapılmadığından geçelim, affa dönelim if(!$result) ( $error = " Koristuvach adında geçersiz karakterler veya koristuvach'ın adı çok kısa (uzun)"; return $error; ) // Her şey yolunda , değeri true döndürmek true; ) // Koristuvach işlevinin parolası yeniden kontrol ediliyor checkPassword($str) ( // Olası bir af uyarısı varsa başlatma değişikliği $error = ""; // Hala aynı gün giriş satırında af uyarısını açabiliyoruz if(!$str) ( $error = "Parola girmediniz"; return $error; ) /** * Şifreyi doğrula ek normal virüsler için koristuvach * Şifre suçludur ancak 6 karaktere kadar kısa değildir, 16 karaktere kadar değildir * Bazı durumlarda, Latin alfabesinin karakterleri, sayılar, * diğerlerinde, "_", "!" karakterleri olabilir, " (", ") " */ $desen = "/^[_!)(.az\d](6,16)$/i"; $sonuç = preg_match($desen, $str); // Doğrulamanın başarısız olduğunu varsayarak, affa dönelim if(!$result) ( $error = "Parolanın parolasında geçersiz karakterler veya parola çok kısa (uzun)"; return $error; ) / / Her şey yolunda, doğru dönüşü doğruya çevir; )

Şimdi duyurduğumuz işlevleri etkinleştirmek için kayıt.php dosyasını düzenlemeniz gerekiyor. Senaryodan önce, kayıt düğmesinin saldırısını saptırıyormuşum gibi fikrimi ekleyeceğim. Aklın ortasında, giriş ve şifrelerin yeniden doğrulanması başlatılır. Geriye dönüp baktığımızda, yeniden doğrulamadan başarısızlıkla sonuçlanıyormuş gibi, formu yeniliyoruz ve af hakkında bir hatırlatma gösteriyoruz. Daha fazla af yok, ancak kayıt ediyoruz, kayıt formu artık görünmüyor, kaydın başarısını size hatırlatıyoruz ve ek header() işlevi için yetkilendirme formuna yönlendiriliyor.

Sisteme başarıyla kayıt oldunuz. Bir kerede yetkilendirme tarafına yönlendirileceksiniz. Sanki hiçbir şey olmamış gibi, doğrudan bir istek için ona gidin.

"; header("Refresh: 5; URL = login.php"); ) // else affından bahsedelim ( $errors["full_error"] = $reg; ) )> ?>

Giriş bilgilerinizi girin: " />

Bir koristuvach adına, Latin alfabesinin sembollerinden, sayılardan, "_", "-", "." sembollerinden daha fazlası olabilir. Koristuvach adındaki Dovzhina suçlu, ancak 4 karakter için kısa değil ve 16 karakter için uzun değil

Şifre yaz:

Şifrede yalnızca Latin alfabesinin sembollerini, sayıları, "_", "!", "(", ")" sembollerini değiştirebilirsiniz. Şifre 6 karakterden kısa olmamaktan ve 16 karaktere ulaşmamaktan suçludur.

Şifre girişini tekrarlayın:

Şifre girişini tekrarla

Betikte yeni bir fonksiyondan bahsetmiştik, record() . Ve henüz şaşırmadık. Hadi ezelim.

// Kaydedici fonksiyon kaydı fonksiyon kaydı($login, $password) ( // Olası özür uyarılarının değişimini başlat $error = ""; // Oturum açma satırı yok, özür uyarısını if(!$) çevirin login) ( $ error = "Giriş belirtilmedi"; // Bir sorgu dizesi yazın $sql = "users" WHERE `login`="" SEÇ `kimliği` . $login . """; // Robimo sorgusu veritabanına $query = mysql_query ($sql) veya die( ""); // Böyle bir giriş ile satır sayısına bakarız, eğer sadece bir tane varsa, // affı çevirebiliriz if(mysql_num_rows( $sorgu) > 0) ( $error = " login zaten kayıtlı"; return $ error; ) // Böyle bir koristuvach olmadığı için kayıt etmek mümkündür // $sql için bir satır yazın = "INSERT INTO `users ` (`id`,`login`,`password`) DEĞERLER (NULL, "" . $login ." ","". $şifre. "")"; // Robimo tabana sorar $query = mysql_query( $sql) veya öl("

Coristuvach eklenemiyor: " . mysql_error() . ". Pardon arka arkaya durdu " . __LINE__ . "

"); // DBMS'ye bağlanmayı unutmayın mysql_close(); // Sunucunun başarılı bir şekilde kaydedildiğini bildirmek için değeri true döndürün true; )

Her şey yolundaysa, koristuvach'ınız kaydedilecektir. Formu test edebilirsiniz. Corystuvac'ları aynı oturum açma bilgileriyle kaydetmeye çalışın. Başarılı bir kayıttan sonra, yetkilendirme formuna yönlendirileceksiniz. Daha önce, şeklin iyileştirilmesi için bir düzen oluşturduk. Action özniteliğinde gerekli parametre belirtilmezse, form tarafından gönderilen veriler bu senaryoda işlenecektir. Bu yüzden işleme için kodu yazmamız ve login.php belgesine eklememiz gerekiyor.

Kullanıcı girişin:

Şifreniz:

Sisteme kayıtlı değilseniz lütfen kayıt olunuz.

Belki de yetkilendirme komut dosyasının bilinmeyen bir işlevi daha olduğundan bahsettiniz - yetkilendirme (). Bu işlev, koristuvach'ı yetkilendirmekten sorumludur, bu tür bir giriş ve şifre ile koristuvach kayıt veritabanında ne olduğunu daha önce kontrol etmiştir. Böyle bir kötü adam bulunamazsa, yetkilendirme kesintiye uğrayacak, ekranda arıza ile ilgili bir bildirim görüntülenecektir. Başarılı bir yeniden doğrulamadan sonra, yetkilendirme () işlevi oturumu başlatır ve içine koristuvach'ın oturum açma bilgilerini ve şifresini yazar, komut dosyasını yetkilendirmenin başarısı hakkında geri çağırır ve komut dosyası koristuvach'ı korunan tarafa yönlendirir. kaynağın.

/** * Corystuvach yetkilendirme işlevi. * Koristuvachiv'in yetkilendirilmesi PHP oturumu ile ilgili yardım için zdіysnyuvatisya * olacağız. */ function Authority($login, $password) ( // Değişikliği olası af uyarılarıyla başlat $error = ""; // Hâlâ oturum açma satırı yok, pardon uyarısını çevir if(!$login) ( $error = " Oturum açma belirtilmedi"; return $hata; ) elseif(!$password) ( $error = "Parola belirtilmedi"; return $hata; ) // Zaten oturum açılmadığını doğrulayın // DBMS'ye bağlanılıyor connect(); // Tekrar gözden geçirmemiz gerekiyor, bu kadar kısa bir kayıt listesi nedir? password ."""; // $query = mysql_query($sql) veya die(" diye sorabiliriz.

Viconati'nin ". mysql_error()." diye sorması imkansız. Pardon arka arkaya durdu " . __LINE__ . "

"); // Bu tür haraçları kontrol etmenin bir yolu yok, af hakkında geri dönelim if(mysql_num_rows($query) == 0) ( $error = "Atanan kayıt olmadığı için ödeme"; return $error; ) // Pardon'u kontrol et , session_start(); $_SESSION["password"] = $password; / mysql_close() veritabanı ile oturumu kapatmayı unutmayın; // Sunucunun başarılı bir şekilde yetkilendirildiğini bildirmek için true değerini döndürün true;

Koristuvach çalıntı bir sayfaya takılırsa, yetkilendirmenizle ilgili verilerin doğruluğunu tersine çevirin. Kimler için koristuvach'ın bir işlevine daha ihtiyacımız var. Buna checkAuth() diyelim. Veritabanımızda kayıtlı olanlar için bu yetkileri kontrol edeceğiz. Veri görünmezse, coristuvach yetkilendirme tarafına yönlendirilecektir.

function checkAuth($login, $password) ( // Kullanıcı adı veya şifre olmadığı için false olarak çevrilebilir if(!$login || !$password) false döndürür; // Böyle bir stenografinin kayıtlarını kontrol ederiz // DBMS connect(); // Satır ekleme $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."" "; // $ sorgu = mysql_query($sql) veya die(" diye sorabiliriz

Viconati'nin ". mysql_error()." diye sorması imkansız. Pardon arka arkaya durdu " . __LINE__ . "

"); // Bu tür verilerle veriyi kapatmanın bir yolu yoksa yanlışa çevrilebilir; if(mysql_num_rows($query) == 0) ( false döndür; ) // Verileri ile kapatmayı unutmayın veritabanı mysql_close(); // Aksi takdirde, true döndürülebilir; )

Şimdi, eğer koristuvach çalınan tarafa gittiyse, bu yetkileri yeniden kontrol etme işlevinden sorumluyuz. Wiki'nin betiğini ve yeniden doğrulamayı checkAuth.php dosyasına koyacağız ve genel erişime kapatılacağı için diğer tarafa ekleyeceğiz.

/** * Kök hesabın yetkilendirmesinin yeniden doğrulanması için komut dosyası */ // Yetkili muhabirin oturum açma ve parolasını alacağımız oturumu başlatmak // session_start(); // koristuvach require_once("functions.php"); /** * Hangi yetkilendirmelerin doğru olduğunu belirleyebilmek için, oturum açma bilgileriniz için * hangi veritabanı kayıtlarını * ve şifrenizi kontrol etmemiz gerekiyor. Muhabirin işleyişini hızlandırmak amacıyla * yetkili muhabirin verilerinin doğruluğunu kontrol edin. * Bu fonksiyon false yapılırsa yetkilendirme yoktur. * Yetkilendirmenin geçerliliği için koristuvach'ı yetkilendirme tarafına yönlendirmemiz yeterlidir. */ // Oturumda oturum açma ve parola hakkında veriler olduğu sürece, // bunları kontrol edin if(isset($_SESSION["login"]) && $_SESSION["login"] && isset($ _SESSION["password" ]) && $_SESSION["password"]) ( // Sonuç olarak, temel verilerin doğrulanması başarısız if(!checkAuth($_SESSION["login"], $_SESSION["password"]) ) ( // Girişin giriş sayfasına yönlendirilmesi başlık ("konum: login.php"); // Çıkış scriptinin çıkışa atanması; ) ) // Bu giriş ile ilgili olsa da, aksi halde herhangi bir bilgi yoktur. şifre, // Yetki olmadığını lütfen unutmayın, yetkilendirme tarafına // yeniden yönlendirilir, else ( header("location: login.php"); // script çıkışına atanır;

Ve şimdi çalınan tarafımızın kodunu oluşturalım. Şarap affedilecek.

Başarılı yetkilendirme.

Çalınan tarafa erişimi engellediniz. Sistemden çıkış yapabilirsiniz.

Bildiğiniz gibi, şifrelenmiş belgenin yalnızca bir dosyası vardır - checkAuth.php. Diğer dosyalar zaten başka senaryolara dahil edilmiştir. Bu nedenle kodumuz hantal görünmüyor. Muhabirlerin kayıt ve yetkilendirme işlemlerini organize ettik. Şimdi coristuvachas'ın sistemden ayrılmasına izin vermek gerekiyor. logout.php dosyasında kimin için bir komut dosyası oluşturuyoruz.

/** * Sistemden coristuvach'tan çıkmak için komut dosyası. Anahtar hesap sahipleri oturumlar aracılığıyla yetkilendirilir, oturum açma bilgileri ve parolaları $_SESSION süper küresel dizisinde saklanır. Sistemden * çıkış yapmak için, $_SESSION["login"] ve $_SESSION["password"] dizisine * değerini eklemeniz yeterlidir, ardından tekrar giriş sayfasına yönlendiriliriz */ // Oturumu başlatırız oturum_başlangıç(); unset($_SESSION["giriş"]); unset($_SESSION["şifre"]); header("konum: login.php");

Belgelerin kaydı, yetkilendirilmesi ve yeniden doğrulanması için komut dosyası hazır. Yogayı yerinizde bükebilir, tamamlayabilir, ihtiyaçlarınıza göre değiştirebilirsiniz. Yemekleriniz varsa, yorumlara koyabilirsiniz. Burada bahsedilen tüm dosyaları tek bir arşivde paketlenmiş olarak yakalayabilirsiniz.

not Nesneye yönelik kod yazmanın daha iyi olduğunun farkındayım, taranan kişiden şifreyi aktarmanın ve kaydetmenin gerekmediğini, veri tabanına girilen bilgilerin önceden tersine çevrilmesi gerektiğini biliyorum. Biliyorum. Ben buradan bahsetmiyorum.

Taraf değiştirmeden dinamik geçiş imkanı ile giriş ve kayıt için formların işlevlerine duyarlı. Yeni bir hesap göründüğünde, bir hesaptan diğerine kolayca geçiş yapabilir ve gerekirse şifrenizi değiştirme seçeneğini belirleyebilirsiniz.
Bugün, küçük ama işlevsel bir jQuery eklentisinin ve yeni CSS3 standartlarının ek bağlantısı için her şeyin nasıl uygulanabileceğini görebiliriz.

Bu yöntem doğru olacaktır, eğer böyle bir şekilde çalışmak istiyorsanız giriş ve kayıt formu sitenizin dış yüzünde muhabirler için mevcut olacaktır. Siteye girdiğinizde veya muhabir olarak kayıt olduğunuzda, başka bir tarafa yönlendirilmezsiniz ve gerekli olan tüm şeyleri “gelmemesi durumunda” görebilirsiniz, her şey bir tarafta.

CSS3 yardımıyla birleştirilebilen modern görünümlü formların tasarımı, eklentinin ana fikri harika değil, modal görünümün görünümü ve hissi pratik olarak hıçkırıksız.
Stovidsotkovo uyarlanabilir düzeni, formlarla kalıcı pencerenin yüksekliği ve genişliği, uzantıların ekranlarını yeniden boyutlandırmak için otomatik olarak sığacak şekilde ayarlanır.

Butt hayretler içinde, şimdi modal pencerenin ve formların tüm ana bileşenlerinin detaylarına bir göz atalım, onları sitenizde nasıl yeneceğinizi öğrenelim.
Popüler JavaScript kitaplığından, jQuey eklentisinden ve oluşturulan CSS stillerinden esinlenerek pencereyi girmek ve kaydolmak için formlarla birleştirme işi. Tüm bu araçların sitenize bağlı olması gerekir. jQuey kitaplığının kalan sürümü doğrudan Google'dan, main.js eklenti dosyasının kendisinden ve arşivde bulacağınız hazır style.css stilleri kümesinden bağlanabilir.
Javascript kapanan etiketin önüne yazılır, CSS stilleri kopyalanabilir ve sitenizin stylesheet.css dosyasına eklenebilir.

HTML Yapısı:

Karartılmış bir arka plan üzerinde modal vicon'ların taban kabı ve kontrol öğelerine sahip yerleşik bir form, yan başlığına yerleştirilir. Daha iyi bir anlayış için, sektörleri ayırıp yorum ekleyerek. Formların tasarımını herhangi bir zorluk yaşamadan sitenizin tasarımına uyacak şekilde değiştirebilmeniz için sınıf adları aracılığıyla CSS'ye bağlanan tüm tasarım öğeleri.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Giriş < li>< a href= "#0" >kayıt < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >E-posta < input class = id= "signin-email" type= "email" placeholder= "E-posta" > < span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Şifre < input class = "tam genişlikte dolgunun sınırı vardır" id= "signin-password" type= "metin" placeholder= "(!LANG:(!LANG:Parola)" > !}!}< a href= "#0" class = "hide-password" >özel < span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Beni Hatırla < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Çıkmak" > < p class = "cd-form-bottom-message" >< a href= "#0" >Parolanızı mı unuttunuz? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Im'ya Koristuvacha < input class = "tam genişlikte dolgunun sınırı vardır" id="signup-username" type="text" yer tutucu= "Im'ya Koristuvacha"> < span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >E-posta < input class = "tam genişlikte dolgunun sınırı vardır" id= "kayıt-e-postası" type= "email" placeholder= "(!LANG:(!LANG:E-posta)" > !}!}< span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Şifre < input class = "tam genişlikte dolgunun sınırı vardır" id= "kayıt-parolası" type= "metin" yer tutucu= "(!LANG:(!LANG:Parola)" > !}!}< a href= "#0" class = "hide-password" >özel < span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >için uygunum< a href= "#0" >zihinler < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Hesap oluştur"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Parolanızı mı unuttunuz? Nazik olun, e-posta adresini girin. Yeni şifre oluşturma talebinizi iptal etmeniz gerekmektedir. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >E-posta < input class = "tam genişlikte dolgunun sınırı vardır" id= "reset-email" type= "email" placeholder= "(!LANG:(!LANG:E-posta)" > !}!}< span class = "cd-error-message" >İşte af hakkında bir hatırlatma! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Şifreyi yenile"> < p class = "cd-form-bottom-message" >< a href= "#0" >girişe dön < a href= "#0" class = "cd-close-form" >kapat

CSS Stilleri:

Bu form kontrol öğesinin temel şablonu, minimalizme açıkça vurgu yapan popüler, düz stilin (Düz) yazarıdır. Hiçbir şey zayvogo, dünyanın vizyonu karanlık, renklendirme için ışık, yazı tipinin ve simgelerin iyi seçilmesi, girişin sulanmasının tanımlanması için. CSS'nin gücü sayesinde herhangi bir form öğesini kolayca değiştirebilirsiniz.

.cd-user-modal (konum: sabit; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; arka plan: rgba (52, 54, 66, 0.9); z-endeksi: 3; y: otomatik ; imleç : işaretçi ; görünürlük : gizli ; opaklık : 0 ; s 0 , görünürlük 0 0.3s ; ) 0 , görünürlük 0 0 ; -moz-geçiş: opaklık 0.3s 0 , görünürlük 0 0 ; geçiş : opaklık 0.3s 0 , görünürlük 0 0 ; ) .cd-user-modal . transform: translateY(0) ; -ms-dönüşümü: translateY(0) ; -o-dönüşüm: çevirY(0 ) ; transform : translateY(0 ) ; %90; dth: 600 piksel; arka plan: #FFF; kenar boşluğu: 3em otomatik 4em; imleç: otomatik; sınır yarıçapı: 0.25em -webkit-dönüşüm: çevirY(-30 piksel); -moz-dönüşüm: çevirY(-30 piksel); -ms-dönüşüm: çevirY(-30 piksel); -o-dönüşüm: çevirY(-30 piksel); dönüştür : çevirY(-30 piksel ); -webkit-geçiş-özelliği: -webkit-dönüşüm; -moz-geçiş-özelliği: -moz-dönüşüm; geçiş özelliği : dönüşüm; -webkit-geçiş-süresi: 0.3s; -moz-geçiş-süresi: 0,3 sn; geçiş süresi : 0.3s; ) .cd-user-modal-container .cd-switcher : after ( content : "" ; display : table ; clear : Both ; ) .cd-user-modal-container .cd-switcher li ( genişlik : %50 ; kayan nokta : sol ; metin hizalama : merkez ; ) .cd-user-modal-container .cd-switcher li: first-child a (sınır yarıçapı: .25em 0 0 0 ; ) -switcher li: last-child a ( border -yarıçap : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a (ekran : blok ; genişlik : %100 ; yükseklik : 50 piksel ; satır yüksekliği : 50 piksel ;arka plan : #d2d8d8 ; renk : #809191 ; ) .cd-user-modal-container .cd-switcher a.selected ( background : #FFF ; color : #505260 ; ) : 600px ) ( .cd-user-modal-container ( kenar boşluğu : 4em auto ; ) .cd-user-modal-container .cd-switcher a ( height : 70px ; line-height : 70px ; ) ) .cd-form ( padding: 1. 4em; ) .cd-form .fieldset ( konum : göreli ; kenar boşluğu : 1.4em 0 ; ) .cd-form .fieldset : first-child ( margin-top : 0 ; ) .cd-form .fieldset : last-child ( margin-bottom : 0 ; ) .cd-form etiketi ( font- boyut : 14 piksel ; yazı tipi boyutu : 0.875r em; ) .cd-form label.image-replace( /* metni simgeyle değiştir */ ekran: satır içi blok konum: mutlak; sol: 15 piksel; üst: %50; alt: otomatik; -webkit-dönüşüm: çevirY(-50%); -moz-dönüşüm: çevirY(-50%); -ms-dönüşüm: çevirY(-50%); -o-dönüştürme: çevirY(-50%); transform : translateY(-50%); yükseklik: 20 piksel; genişlik: 20 piksel taşma: gizlenmiş; metin girintisi: 100% ; Beyaz boşluk: şimdi rap; renk: şeffaf; Metin gölgesi: Yok; arka plan-tekrar: tekrarsız; arka plan konumu: 50% 0 ; } /* Giriş alanı simgeleri */ .cd formu etiket .cd-kullanıcı adı { arka plan görüntüsü: url("../img/cd-icon-kullanıcıadı.svg") ; } .cd formu etiket .cd e-postası { arka plan görüntüsü: url("../img/cd-icon-email.svg") ; } .cd formu etiket .cd-şifre { arka plan görüntüsü: url("../img/cd-icon-password.svg") ; } .cd formu giriş { marj: 0 ; dolgu malzemesi: 0 ; sınır yarıçapı: 0.25em; } .cd formu giriş .Tam genişlik { Genişlik: 100% ; } .cd formu giriş .dolgu vardır { dolgu malzemesi: 12 piksel 20 piksel 12 piksel 50 piksel; } .cd formu giriş .sınırlıdır { sınır: 1 piksel sağlam #d2d8d8; -webkit-görünüm : Yok; -moz-görünüm : Yok; -ms-görünüm : Yok; -o-görünüm : Yok; görünüm : Yok; } .cd formu giriş .sınırlıdır: odak { sınır rengi: #343642 ; kutu gölgesi: 0 0 5 piksel rgba(52 , 54 , 66 , 0.1 ) ; anahat: Yok; } .cd formu giriş .has-hatası { sınır: 1 piksel sağlam #d76666; } .cd formu giriş [ tip = parola ] { /* gizleme butonu için boşluk */ sağ dolgu: 65 piksel; } .cd formu giriş [ tip = Sunmak ] { dolgu malzemesi: 16 piksel 0 ; imleç: Işaretçi; arka fon: #2f889a; renk: #FFF; yazı tipi ağırlığı: gözü pek; sınır: Yok; -webkit-görünüm : Yok; -moz-görünüm : Yok; -ms-görünüm : Yok; -o-görünüm : Yok; görünüm : Yok; } .dokunmak yok .cd formu giriş [ tip = Sunmak ] : üzerine gelmek, .dokunmak yok .cd formu giriş [ tip = Sunmak ] : odak { arka fon: #3599ae; anahat: Yok; } .cd formu .şifreyi gizle { Görüntüle: satır içi blok; konum: mutlak; Sağ: 0 ; üst: 0 ; dolgu malzemesi: 6 piksel 15 piksel; sınır-sol: 1 piksel sağlam #d2d8d8; üst: 50% ; alt kısım: Oto; -webkit-dönüşüm : çevirY (-50% ) ; -moz-dönüşüm : çevirY (-50% ) ; -ms-dönüşüm : çevirY (-50% ) ; -o-dönüşüm : çevirY (-50% ) ; dönüştürmek: çevirY (-50% ) ; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; renk: #343642 ; } .cd formu .cd-hata-mesajı { Görüntüle: satır içi blok; konum: mutlak; sol: -5 piksel; alt kısım: -35 piksel; arka fon: rgba(215 , 102 , 102 , 0.9 ) ; dolgu malzemesi: .8em; z-endeksi: 2 ; renk: #FFF; yazı Boyutu: 13 piksel; yazı Boyutu: 0.8125 rem; sınır yarıçapı: 0.25em; /* Tıklamaları ve noktaları bırak */ işaretçi olayları: Yok; görünürlük: gizlenmiş; opaklık: 0 ; -webkit-geçiş : opaklık 0.2s 0 , görünürlük 0 0.2s; -moz-geçiş : opaklık 0.2s 0 , görünürlük 0 0.2s; geçiş: opaklık 0.2s 0 , görünürlük 0 0.2s; } .cd formu .cd-hata-mesajı:: sonrasında { /* af hakkında küçük bir not */ içerik: "" ; konum: mutlak; sol: 22 piksel; alt kısım: 100% ; yükseklik: 0 ; Genişlik: 0 ; sınır-sol: 8 piksel sağlam şeffaf; sınır-sağ: 8 piksel sağlam şeffaf; sınır-alt: 8 piksel sağlam rgba(215 , 102 , 102 , 0.9 ) ; } .cd formu .cd-hata-mesajı.görünür { opaklık: 1 ; görünürlük: görünür; -webkit-geçiş : opaklık 0.2s 0 , görünürlük 0 0 ; -moz-geçiş : opaklık 0.2s 0 , görünürlük 0 0 ; geçiş: opaklık 0.2s 0 , görünürlük 0 0 ; } @medya sadece ekran ve (minimum genişlik: 600 piksel) { .cd formu { dolgu malzemesi: 2em; } .cd formu .fieldset { marj: 2em 0 ; } .cd formu .fieldset: ilk çocuk { kenar boşluğu: 0 ; } .cd formu .fieldset: son çocuk { kenar boşluğu-alt: 0 ; } .cd formu giriş .dolgu vardır { dolgu malzemesi: 16 piksel 20 piksel 16 piksel 50 piksel; } .cd formu giriş [ tip = Sunmak ] { dolgu malzemesi: 16 piksel 0 ; } } .cd-form-mesajı { dolgu malzemesi: 1.4em 1.4em 0 ; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; satır yüksekliği: 1.4 ; Metin hizalama: merkez; } @medya sadece ekran ve (minimum genişlik: 600 piksel) { .cd-form-mesajı { dolgu malzemesi: 2em 2em 0 ; } } .cd-form-alt-mesaj { konum: mutlak; Genişlik: 100% ; sol: 0 ; alt kısım: -30 piksel; Metin hizalama: merkez; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; } .cd-form-alt-mesaj a { renk: #FFF; metin-dekorasyon: altını çizmek; } .cd-yakın-form { /* sağ üstteki stil X düğmesi */ Görüntüle: engellemek; konum: mutlak; Genişlik: 40 piksel; yükseklik: 40 piksel; Sağ: 0 ; üst: -40 piksel; arka fon: url("../img/cd-icon-close.svg") tekrarsız merkez merkez; metin girintisi: 100% ; Beyaz boşluk: şimdi rap; taşma: gizlenmiş; } @medya sadece ekran ve (minimum genişlik: 1170 piksel) { .cd-yakın-form { Görüntüle: Yok; } } #cd giriş, #cd kaydı, #cd-sıfırlama-şifre { Görüntüle: Yok; } #cd giriş.seçildi, #cd kaydı.seçildi, #cd-sıfırlama-şifre.seçildi { Görüntüle: engellemek; }

cd-user-modal (konum: sabit; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; arka plan: rgba(52, 54, 66, 0.9); z-endeksi: 3; taşma-y : otomatik, imleç: işaretçi, görünürlük: gizli, opaklık: 0; 0, görünürlük 0 0,3s; ) 0, görünürlük 0 0; -moz-geçişi: opaklık 0,3s 0 , görünürlük 0 0; geçiş: opaklık 0,3s 0, görünürlük 0 0; ) .cd-user-modal.is-visible .cd-user-modal-container ( -webkit-transform: translateY(0); -moz-transform : translateY(0); -ms-transform: translateY (0); -o-transform: translateY(0); transform: translateY(0); ) cd -user-modal-container (pozisyon: göreceli; %;maks-genişlik:600px;background:#FFF;margin:3em auto 4em;cursor:auto;border-radius:0.25em;-webkit-transform: translateY(-30px ); translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(- 30px); transform: translateY(-30px); -webkit-geçiş-özelliği: -webkit-dönüşümü; -moz-geçiş-özelliği y: -moz-dönüşümü; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0.3s; -moz-geçiş-süresi: 0,3 sn; geçiş süresi: 0,3 sn; ) .cd-user-modal-container .cd-switcher:after ( içerik: ""; ekran: tablo; temizle: her ikisi; ) .cd-user-modal-container .cd-switcher li ( genişlik: %50; kayan nokta : sol; metin hizalama: merkez; .-switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( ekran: blok; genişlik: %100; yükseklik: 50 piksel; satır yüksekliği: 50 piksel; arka plan: #d2d8d8; renk: #809191; ) : 600 piksel) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal -container .cd-switcher a ( height: 70px; line-height: 70px; ) ) .cd-form (dolgu: 1.4em; ) .cd-form .fieldset (konum: göreceli; kenar boşluğu: 1.4em 0; ) . cd-form .fieldset:first-child ( margin-top: 0; ) .cd-form .fieldset: last -child ( margin-bottom: 0; ) .cd-form etiketi ( font-size: 14px; font-size : 0.875rem; ) .cd-form etiketi. image-replace ( /* metni simgeyle değiştir */ display: satır içi blok; konum: mutlak; sol: 15 piksel; üst: %50; alt : Oto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-dönüşüm: çevirY(-50%); : 20 piksel, genişlik: 20 piksel, taşma: gizli, metin girintisi: %100; boşluk: nowrap; renk: şeffaf metin gölgesi: yok arka plan tekrarı: tekrar yok; ) /* Giriş alanı simgeleri */ .cd-form label.cd-username (background-image: url(")). ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( background-image: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( background-image: url("../img/cd-icon-password.svg"); ) .cd-form girişi ( kenar boşluğu: 0; dolgu: 0; kenarlık yarıçapı: 0.25 em;) .cd-form input.full-width (genişlik: %100; ) .cd-form input.has-padding (dolgu: 12px 20px 12px 50px; ) katı #d2d8d8; -webkit-görünümü: yok; -moz -görünüm: yok; -ms-görünüm: yok; -o-görünüm: yok; görünüm: yok; ) -renk: #343642; kutu gölgesi: 0 0 5px rgba(52, 54, 66, 0.1); anahat: yok; .form girişi ( /* Ekle düğmesi için boşluk */ dolgu-sağ: 65px; ) .cd-form girişi ( dolgu: 16px 0; imleç: işaretçi; arka plan: #2f889a; renk: #FFF; yazı tipi- ağırlık : kalın; kenarlık : yok;-webkit-görünümü: yok;-moz-görünümü: yok;-ms-görünümü: yok; -o-görünüm: yok; görünüm: yok; ) .no-touch .cd-form girişi : üzerine gelin, .no-touch .cd-form girişi:odak ( arka plan: #3599ae; anahat: yok; ) .cd-form .hide-pass word ( ekran: satır içi blok; konum: mutlak, sağ: 0; üst: 0; dolgu: 6px 15px; sol kenarlık: 1 piksel düz #d2d8d8; üst: %50; dönüştürmek: çevirY(-50%); -ms-dönüşüm: çevirY(-50%); -o-dönüştürme: çevirY(-50%); dönüştürmek: çevirY(-50%); boyut: 0.875rem; renk: #343642; ) .cd-form .cd-hata-mesajı (ekran: satır içi blok; 102, 0.9), dolgu: .8em; z-endeksi: 2; renk: #FFF; yazı tipi boyutu: 13 piksel; yazı tipi boyutu: 0.8125rem sınır yarıçapı: 0.25em -olaylar: yok; görünürlük: gizli; opaklık: 0 -webkit-geçiş: opaklık 0.2s 0, görünürlük 0 0.2s; görünürlük 0 0.2s; ) .cd-form .cd-error-message::after ( /* pardon hakkında küçük not */ content: ""; konum: mutlak; sol: 22 piksel; alt: %100; yükseklik: 0; genişlik: 0; kenarlık -sol: 8px katı şeffaf;kenarlık-sağ: 8px katı şeffaf;1;görünürlük: görünür;-webkit-geçişi: opaklık 0,2s 0, görünürlük 0 0;-moz-geçişi: opaklık 0,2s 0, görünürlük 0 0; geçiş : opaklık 0,2s 0, görünürlük 0 0; ) yalnızca medya ekranı ve (min-genişlik: 600px) ( .cd-form (dolgu: 2em; ) .cd-form .fieldset ( kenar boşluğu: 2em 0; ) .cd - form .fieldset:ilk-çocuk ( margin-top: 0; ) .cd-form .fieldset:last-child ( margin-bottom: 0; .0; ) ) .cd-form-message (dolgu: 1.4em 1.4 em 0; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0.875rem; satır yüksekliği: 1.4; metin hizalama: merkez; ) (min-genişlik: 600 piksel) ( .cd-form-message ( dolgu: 2em 2em 0 ; ) ) .cd-form-bottom-message (konum: mutlak; genişlik: %100; sol: 0; alt: -30 piksel; metin hizalama: merkez; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0. 875rem; ) .cd-form-bottom-message a (renk: #FFF; metin-dekorasyon: altı çizili; ) * düğme X stili sağ elle */ ekran: blok; konum: mutlak; genişlik: 40 piksel yükseklik: 40 piksel; sağ: 0; üst: -40 piksel; ") tekrarsız orta merkez; metin girintisi: %100; beyaz boşluk: nowrap; taşma: gizli; ) yalnızca medya ekranı ve (min-genişlik: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password ( display: yok; ) #cd-login.is-seçili, #cd-signup.is-selected, #cd-reset-password.is -seçildi (görüntüleme: blok; )

Geçişin etkisinde, modal pencerenin kapatıldığında yumuşak bir geçiş elde etmesi için bir solma eklendi.

Not. Tüm alanlar için yazı tipi boyutu 16 piksel olarak ayarlanmıştır. Tse zapobіgaє otomatik ölçeklendirme, yak vіdbuvaєtsya, mobil müştemilatlara bakmak için bir saat sürdü.

Yazarın, eklentinin burjuva versiyonu biliniyor. Orjinalini de oradan indirebilirsiniz.
Rusça versiyonu, Yandex.Disk'imden alabilirsiniz, gerekli tüm dosyalar, hatta tek bir arşivde toplanmıştır, onlardan önce hayret etmeyi unutmayın, daha fazla uyarlama, robotik mucize jQuery eklentisinin yaşayan bir poposu:

saygılarımla

Sitede şık bir yetkilendirme formu oluşturduk, Volodymyr Kudinov tarafından oluşturulan Futurico UI Pro'dan öğrenebilirsiniz. Formu oluşturmak için CSS3 ve jQuery'yi hackleyeceğiz.

Krok 1 - HTML düzeni

HTML anahatlarının oluşturulmasından başlayalım. Birkaç girdi ile bir form oluşturalım (im'ya koristuvacha, şifre, onay kutusu ve "gönder" düğmesi) ensign, ensign'a stil vermek için kullanacağımız bir span etiketine saracağız. Formu ve başlığı DIV etiketi ile saralım ve "login-form" sınıfınıza atayalım.