Gözəl css3 giriş forması. Qeydiyyat formasını yaradırıq. Forma göndər düyməsi

Giriş formaları internetdə hər yerdə var. Ancaq indi bütün giriş formaları dizaynları gözəldir və yaxşı UI-yə malikdir, buna görə də biz bu girişləri forma şablon dizaynlarını yaratmağa və onları pulsuz paylaşmağa qərar verdik.

Sosial şəbəkələrdən istifadə edirsiniz? Bir növ giriş formasından keçməlisiniz. E-poçtunuz var? Hər hansı foruma qoşulmusunuz? WordPress saytında şərh yazmağa çalışmısınız? İnternetdə hər hansı bir şeyə giriş əldə etmək üçün şansınız bir növ giriş prosesindən keçməli olacaqsınız. Yəqin ki, əvvəlcə qeydiyyatdan keçməli, qeydiyyatdan keçməli və ya bəzi məlumatları geridə qoymalı olacaqsınız. İnternetdə hər hansı bir iş görmək üçün bir növ giriş formasından istifadə etməli olacaqsınız.

Beləliklə, Giriş Formalarının HTML və CSS ilə nə əlaqəsi var? Onların hər ikisi Giriş Formalarının vacib hissələridir.

HTML (HyperText Markup Language) veb səhifələr yaratmaq üçün istifadə olunan standart işarələmə dilidir. HTML elementləri bütün vebsaytların tikinti bloklarıdır.

CSS (Cascading Style Sheet) işarələmə dilində yazılmış sənədin görünüşünü və formatını təsvir etmək üçün istifadə olunan bir dildir. HTML kimi!

Veb saytı yaratmaq üçün HTML və gözəl görünməsi üçün CSS-dən istifadə edirik. İstifadəçilərin əksəriyyəti internetə baxarkən bununla qarşılaşır.

WordPress saytınızda, bloqunuzda, forumunuzda və ya başqa yerdə istifadə edə biləcəyiniz 50 pulsuz giriş forması dizaynının siyahısını hazırladıq. Bu, formaların ən yüksək keyfiyyətini təmin etmək üçün Colorlib tərəfindən əl ilə seçilmiş siyahıdır. Hər bir forma heç bir komponentin əskik olmadığından və hər yükləmə ilə mənbə kodunun mövcud olduğundan əmin olmaq üçün hərtərəfli sınaqdan keçirilmişdir. Əlbəttə ki, siz bu formalardan şəxsi və kommersiya məqsədləri üçün istifadə edə bilərsiniz ehtiyac atribut.

2019-cu ilin ən yaxşı WordPress şablonları daxil olmaqla 2,5 milyon rəqəmsal aktivi araşdırın

HTML5 Şablonları, Mövzular və Dizayn Aktivləri üçün dünyanın ən böyük bazarından 2M+ element. İstər sizə lazım olan budur, istərsə də bir neçə Stok Fotoşəkillərindən sonrasınız – bunların hamısını burada Envato Marketdə tapa bilərsiniz.

İNDİ YÜKLƏ

WordPress Giriş Fərdiləşdiricisi

Siyahının qalan hissəsi və HTML/CSS ilə təchiz edilmiş giriş formaları, lakin burada WordPress üçün ən yaxşı giriş fərdiləşdirici plaginini görə bilərsiniz. Veb saytınızın dizaynına uyğunlaşdırmaq üçün daha da düzəldə biləcəyiniz bir neçə müəyyən edilmiş şablonla gəlir. Bu plagin sayəsində nəhayət darıxdırıcı WordPress wp-admin səhifəsindən qurtula və özünüz və istifadəçiləriniz üçün həqiqətən unikal təcrübə yarada bilərsiniz.

Colorlib tərəfindən daxil olun Form 1

Qradient fonu olan sadə, yaradıcı və canlı giriş forması. Bunu veb, mobil və ya masaüstü proqramlar kimi hər cür niyyətlər üçün istifadə edə bilərsiniz. Ancaq xoşunuza gəlirsə, yaradıcılıqla məşğul olun.

Yaradıcı Giriş Formasının Dizaynı

HTML5 və CSS3 istifadə edərək yaradılmış sadə, lakin yaradıcı giriş forması. Bu forma həm də qeydiyyat forması kimi istifadə edilə bilər. Yaratmağa imkan verən çevikliyi və oxşarlığı sayəsində bu siyahıda ən sevimli şablonumuzdur

İnternetdə sərin giriş formaları üçün axtarış etdik, lakin yaxşı görünənləri tapmaq çox çətin idi, buna görə də onları götürməyə qərar verdik. Colorlib komandası tərəfindən hazırlanmış və tərtibatçı olan 20 giriş formasını təqdim etmək istərdik.

Colorlib tərəfindən 2-ci Giriş Formu

Colorlib tərəfindən animasiya və loqo ilə gradient düyməsi ilə minimal və mürəkkəb giriş forması. Ondan istifadə edin, dəyişdirin və artıq gözəl veb məkanınıza gözəl əlavə kimi sahib olun.

Colorlib tərəfindən 3-cü Giriş Formu

Kölgə ilə fon təsviri və giriş düyməsinə hover effekti ilə qradiyent forma qutusu olan möhtəşəm giriş səhifəsi. Sizdə olan yeganə məhdudiyyət sizin təsəvvürünüzdür, ona görə də baxışınızı genişləndirin və Login Form 3-dən tam potensialına qədər istifadə edin.

Colorlib-dən Giriş Formu 4

Yaradıcılıq heç bir məhdudiyyət tanımır və Giriş Forması 4 də yoxdur. Budur, onu yükləmək və ondan yaxşı istifadə etmək üçün sizin ixtiyarınızdadır və hazırdır. Cavab verməkdən də narahat olmayın.

Colorlib-dən Giriş Formu 5

Facebook və ya Google ilə daxil olmaq imkanı ilə möhtəşəm, təmiz və müasir forma. Bütün düymələr təcrübəni daha da gözəlləşdirən gözəl hove effektinə malikdir.

Colorlib tərəfindən daxil olmaq üçün Forma 6

Səhifəniz artıq super səliqəli və səliqəlidirsə, giriş forması fərqli olmamalıdır. Budur, minimalizm sizin stəkan çayınızdırsa, gözləntilərinizi asanlıqla qarşılayacaq.

Colorlib tərəfindən daxil olun Forma 7

Hesaba daxil olmaq üçün üç tərəfli seçim olan forma. İstər Facebook, istər Twitter, istərsə də e-poçt girişinə üstünlük verirlər, bu, səhifənizdə təqdim etməli olduğunuz alət növüdür. Əgər onların artıq hesabı yoxdursa, siz onu qeydiyyat səhifənizlə də əlaqələndirə bilərsiniz.

Colorlib tərəfindən 8-ə daxil olun

Hər şeyi yuvarlaqlaşdıran başqa bir müasir, moda və cazibədar giriş forması. Bu, hazırda çox populyar olan yuvarlaq künc tərzinə görə xüsusilə mobil istifadəçilər üçün tətbiq olunur.

Colorlib tərəfindən 9-a daxil olun

Ağ və ya tək rəngli fondan qaçmaq istəyirsinizsə, bu, nəzərə almalı olduğunuz giriş forması səhifəsidir. O, təkcə tam şəkil fonunu dəstəkləmir, həm də gradient örtüyü və Facebook və ya Google ilə daxil olmaq imkanı ilə gəlir.

Colorlib tərəfindən 10-a daxil olun

Əvvəlki ilə müqayisədə bir qədər tam əksi Login Form 10-dur. O, hələ də bu dəqiqəlik hissləri yaşayarkən, demək olar ki, daha minimalist görünə bilməzdi.

Colorlib tərəfindən daxil olun Form 11

Ən yaxşı HTML5 və CSS3 giriş formaları kolleksiyamızla siz vaxtınıza və səyinizə (pula da) qənaət edirsiniz. Sıfırdan birini qurmaq əvəzinə, işə götürə biləcəyiniz başqa bir qatil istifadəyə hazır şablondur.

Colorlib tərəfindən 12 Giriş Formu

Mavi kölgə örtüyü, ad, şəkil və mütləq forma ilə şəkil fonu, Login Form 12-də olan budur. Həmçinin, giriş düyməsində sərin hover effekti var və sizə onu qeydiyyat forması ilə əlaqələndirmək şansı verir. bütün yeni istifadəçilər.

Colorlib tərəfindən 13-cü Giriş Formu

Yarısı şəkilə, digər yarısı isə formaya həsr olunmuş bölünmüş ekran qeydiyyat forması. Bu, elə bu dəqiqə istifadə etməyə başlaya biləcəyiniz pulsuz bir vasitədir. Sadəcə tərtibatı yükləyin və onunla tam əyilməyə gedin.

Colorlib tərəfindən 14-cü Giriş Formu

Bu kolleksiyada sadə və bir az daha mürəkkəb və təkmil giriş formalarının qarışığı var. Bir sözlə, hər kəs üçün bir şey var və Giriş Formu 14 daha çox minimalist tərəfdədir. Bəs niyə giriş forması ilə müqayisə olunsun, elə deyilmi? öz hər birinə.

Colorlib tərəfindən 15-ə daxil olun

Hər şeyi minimuma endirməklə yanaşı, Giriş Formu 15-ə gözəl əlavələrdən biri də formanın üstündəki şəkil banneridir. Bu kiçik xüsusiyyət ilə təcrübəni bir az daha cəlbedici edə bilərsiniz.

Colorlib tərəfindən 16 Giriş Formu

Bu istifadəçi adı və parol sahələri olan forma və hover effektli qradient düyməsi olan tam ekran şəkli olan giriş formasıdır. Sadə və sadə.

Colorlib tərəfindən 17-yə daxil olun

Onun daha şəxsi görünməsi üçün bu çərçivəli giriş forması şablonu sizin üçün ən uyğundur. Onun görüntü tərəfi və forma tərəfi var, lakin peşəkarlığı təmin etməklə yanaşı, hər şeyi minimum səviyyədə saxlayır.

Colorlib tərəfindən 18-ə daxil olun

Özünüzü fərqləndirmək və hər şeyi orijinal saxlamaq istəyirsinizsə, Giriş Forması 18-dən istifadə etməyi düşünün. Bəziləri giriş səhifələrindən super sadə həzz alarkən, digərləri planı sarsıdan bəzi əlavə gözəlliklərə sahib olmaq istəyir. Əgər şəkil əlavə etmək ardınca gedirsinizsə, bu sizin üçündür.

Colorlib tərəfindən 19-a daxil olun

Canlı, enerjili və diqqəti cəlb edən HTML5 və CSS3-ə əsaslanan bu növbəti giriş forması budur. O, həmçinin tam cavabdehdir və mobil üçün hazırdır, həmçinin bütün əsas veb brauzerlərə uyğun gəlir.

Colorlib tərəfindən daxil olun Form 20

Qradient fon, hover effektli qara giriş düyməsi, istifadəçi adı və parol sahələri, fərdi mətn və “Şifrəni unutmusan?” bölmə, bəli, bunların hamısı Giriş Formu 20-nin bir hissəsidir. Çox təsir edici səslənir, amma əslində ondan uzaqdır.

“Giriş” seçiminə klikləməyincə, forma gizlədilir. Giriş forması üçün ayrıca səhifənin olmasının qarşısını almaq istəyən müasir veb saytlar üçün həqiqətən əla xüsusiyyətdir. Bu güclü alətlə formanı veb saytınızın istənilən yerində göstərə bilərsiniz.

Nişanlar və üzən forma etiketlərindən istifadə edərək Qeydiyyat forması üçün dizayn.

Başlanğıcda insanların bir nəfərin WordPress saytına daxil olmasını dayandırmaq üçün edilən şey, sadəliyi və səliqəli dizaynı sayəsində həqiqətən populyar bir forma çevrildi.

Düz Giriş – Qeydiyyat Forması

Yuxarı sağ küncdəki “Mənə klikləyin” düyməsini kliklədikdən sonra bu Giriş formasını Qeydiyyat formasına çevirən hamar animasiya əldə edəcəksiniz.

Öz-özünə SCSS Forması ilə daxil olun

Bu, müstəqil SCSS ilə bir formadır. Əsas dilə güc və zəriflik əlavə edən CSS-in genişləndirilməsi. O, dəyişənlərdən, iç-içə qaydalardan, miksinlərdən, daxili idxallardan və s. istifadə etməyə imkan verir.

Bu, əslində animasiya edilmiş Giriş formasıdır, yuxarıdakı “Hey sən, artıq daxil ol” aşağıdakı formaya çevrilir. Hamar animasiya effektləri.

Bu, HTML5 və CSS3 istifadə edərək sadə giriş formasının yaradılmasına dair bir nümunədir. Bu forma çox səhifə effekti yaratmaq üçün psevdo elementlərdən (:after və:befor) istifadə edir. Bu elementlər CSS3 transform xüsusiyyətindən istifadə edərək fırlanır. Bu forma doğrulama və təqdimatı asanlaşdırmaq üçün HTML5-dən istifadə edir.

Bu formada səhv parol daxil etdikdən sonra gözəl silkələnmə effekti sizi düzgün parol daxil etmədiyiniz barədə xəbərdar edəcək. Yanlış parol problemini qeyd edəcək sadə və effektiv həll.

Kiçik bir sürprizlə qutulu giriş forması. Tam təcrübə üçün istifadəçi adı olaraq “admin”, parol kimi isə “1234”-ü sınayın.

Səliqəli kiçik giriş forması. Sol tərəfdə "LOGIN" düyməsini kliklədikdən sonra animasiya effekti sağda səliqəli kiçik giriş forması yaradır. Şübhəsiz ki, unikal yanaşma!

material dizayn forması

Bloqunuza və ya hər hansı digər vebsaytınıza əlavə edə və təcrübənizi artıra biləcəyiniz gözə giriş formasında kifayət qədər sadə və asan. Giriş forması olduğu kimi sadə bir şeylə həddindən artıq mürəkkəbləşdirməyə ehtiyac yoxdur. Sadəcə abunəçilər toplasanız belə, siz də bu layout ilə oynaya və hər şeyi silkələyə bilərsiniz.

Bootstrap Snippet Forması

Aydındır ki, bu növbəti pulsuz HTML5 giriş forması çox bəyənilən Bootstrap Framework-ə əsaslanır. Bu, hər hansı bir müasir veb-sayt və elementin tətbiq etməli olduğu bəzi gözəl çeviklik gözləyə biləcəyinizi söyləyir. E-poçt ünvanı, parol və istifadəçinin platformanın onun məlumatını yadda saxlamasını istəməsi üçün işarələmə qutusu. Asan və nöqtəyə.

Əsas veb dizaynınızdan asılı olmayaraq, giriş formaları kimi şeylərlə onu çox çətinləşdirmək istəmirsiniz. Bunun əvəzinə, istifadəçilərin öz hesablarına problemsiz daxil olmasını təmin edərək, bunu sadə saxlamaq və işə icazə vermək istərdiniz. Düz UI ilə bu giriş forması ilə şübhəsiz ki, bu məqsədə nail olacaqsınız.

Trendy UI Kitləri Forması

Super sadə giriş formalarından tutmuş bir az daha çox fəaliyyət göstərənlərə qədər. Bu, sonuncu ilə müqayisədə olduqca oxşardır, sadəcə olaraq, bütün formanın ətrafında bir çərçivəni görəcəksiniz. Onları adlarını və ya istifadəçi adlarını və parollarını daxil etmələrini təmin edin və onlar sizin heyrətamiz dünyanıza daxil ola bilərlər.

İdarə paneli CSS3 HTML5 Forması

Bu siyahıda tapdığınız bütün HTML5 və CSS3 giriş formalarının istifadəsi sadədir və veb platformanıza əlavə etmək asan deyil. Bu, hətta "Şifrənizi unutmusunuz?" parollarını xatırlaya bilməyən hər kəs üçün sağ altda. Şablon idarə panelinizə daxil olmaq üçün mükəmməldir, lakin siz onu digər ehtiyaclar üçün də tətbiq edə bilərsiniz.

Bərpa Forması ilə daxil olun

Başlıq demək olar ki, hər şeyi deyir; bu bərpa ilə səliqəli, təmiz və minimal görünüşlü giriş formasıdır. Diqqət etdiyiniz odur ki, giriş formalarının istifadəsini görməyə alışdığınız ənənəvi “qutu” yoxdur. Fərqlilik yaratmaq istəyirsinizsə, indi hansı planı seçəcəyinizi bilirsiniz.

Yaşıl hərəkətə çağırış düyməsi ilə birlikdə heyrətamiz və zərif qaranlıq tərtibata malik pulsuz düz giriş forması. Əlbətdə ki, siz aləti öz zövqünüzə görə dəyişə bilərsiniz, lakin siz də onu olduğu kimi istifadə edə və bir anda vebsaytınızda yayımlaya bilərsiniz. Onun xüsusiyyətləri ilə oynayın və hamısını istədiyiniz kimi qursun.

şəffaf giriş

Hətta giriş forması super yaradıcı və diqqəti cəlb edən xarakterə malik ola bilər. Bir çoxları sadə və əsas görünüşə sadiq olsalar da, onu xüsusi və eksklüziv bəyənənlər də var. Bu şəffaf giriş forması, şübhəsiz ki, sizin üçün hiylə edəcəkdir. Şəkil fonu və onun üzərində bir forma ilə bu tərtibat markanızı T-yə qədər izləyə bilər.

Bu növbəti girişlə həqiqətən çox dərinləşməyə ehtiyac yoxdur, çünki bu, olduqca özünü izah edir. ilə uyğun gəlir Google Chrome uzadılması, həmçinin hələ qeydiyyatdan keçməmiş və ya parolunu itirənlər üçün funksiya düymələri. Əgər axtardığınız budursa, o zaman bütün yolu bura qədər sürüşdürmək buna dəyərdi.

zərif düz forma

Veb məkanınıza pop-up və ya səhifədə vidcet kimi reklam kimi əlavə edə biləcəyiniz qəşəng düz forma. Nə olursa olsun, bu, peşəkar yanaşmanızı qoruyacaq. Bu sadə və göz üçün asandır və həmçinin üzvlərinizin ərazisinə qeydiyyatdan keçməyi qaçıran hər kəs üçün CTA-ya malikdir. Onu olduğu kimi istifadə edin və ya zövqünüzə uyğun olaraq təkmilləşdirin.

Getdikcə daha çox veb sayt sahibləri sosial girişləri həyata keçirir və siz də trendə qoşula bilərsiniz. Sosial inteqrasiyaya malik bu pulsuz giriş forması addım atmaq üçün doğru seçimdir. Bununla belə, tərtibatda Twitter və Facebook düymələri ilə yanaşı, e-poçtla qeydiyyatdan keçməyin ənənəvi üsulu da var.

Parolunuz çox mürəkkəbdirsə, bəzən onu sadəcə "göstərmə" rejimində daxil etmək istəyirsiniz. Şou və gizlət parol giriş forması ilə eyni xüsusiyyəti bütün istifadəçilərinizə təklif edin. Bu cür dizaynları qazmaq istəyənlər üçün mükəmməl yaşıl detallarla heyrətamiz tünd tərtibata malikdir. Əlbəttə ki, ona dəyişikliklər etməkdən və ehtiyaclarınıza uyğun olaraq dəqiq tənzimləməkdən çəkinməyin.

Giriş 'N Animasiya Formasını Yükləyin

Əgər siz artıq səhifənizdə animasiyalar və xüsusi effektlər tətbiq edirsinizsə, giriş forması ilə də trendi qoruyun. Özünüzü yaratmaq əvəzinə, sadəcə olaraq bu heyrətamiz Log 'N Load animasiya formasından istifadə edə bilərsiniz ki, bu da hiylə yaradacaq. Siz giriş düyməsinin üzərinə sürdükdən sonra forma düz qarşınızda görünür. Hətta təcrübəni artıran dairəvi bir yükə malikdir.

Bu düz, müasir və istifadəsi asan giriş forması bütün cihazlarda, mobil, planşet və masaüstü kompüterlərdə əla işləyir. Siz həmçinin müxtəlif çimdiklərlə oynaya və standart parametrləri veb saytınızın üslubuna uyğun olaraq dəyişə bilərsiniz. Alət, həmçinin ümumi təcrübəyə incəlik toxunuşu əlavə edən sərin hover effektlərinə malikdir.

Kölgə ilə CSS3 Forması

Veb saytınıza bu və digər əlavə funksiyanı əlavə edə bilsəniz də, çoxları onu diqqətdən yayındırmaq istəmir. Bu, həmçinin xüsusi effektlər, animasiya və digər şeylərə aiddir. Bununla belə, kölgə şəklində yaradıcılığın sadə bir toxunuşu sizə yaxşı təsir göstərə bilər. Xüsusi olaraq giriş forması üçün bu xüsusi cihaz bir dairəvi kənarı olan kölgəyə malikdir.

Bu sadə, müasir və çevik giriş vidceti sizin növbəti giriş forması şablonunuzdan daha çox şeydir. Görünüş təmiz və nöqtəlidir, əsasları və sonra bəzilərini təklif edir. Və bu "sonra bəziləri" istifadəçi adı və şifrəni unutmuş bölməyə keçid üçün düymələrdir. Bundan əlavə, məkanınızda yeni olan hər kəs üçün yeni hesab düyməsi giriş vidcetini çevirir və . Ağıllı!

Veb saytınıza tam nəzarət edirsiniz. Səhifənizə nə əlavə etmək və ya əlavə etməkdən çəkinmək sizə bağlıdır. Düzgün HTML5 və CSS3 giriş formasını axtarırsınızsa, bizdə sizin ixtiyarınızdadır. Üstəlik, hamısı pulsuzdur. Təkcə bu deyil, həm də onları seçiminizə uyğun olaraq redaktə edə və tənzimləyə bilərsiniz. Bu necə gözəldir?

Yaşıl və Sarı Forma

Müqəddəs Patrik Günü bu gün olmaya bilər, lakin siz yenə də ənənəyə əməl edə və markanızı yaşıl rənglərlə doldura bilərsiniz. Sıfırdan belə üslubun bir giriş formasını hazırlamaq üçün vaxt itirmək əvəzinə, əllərinizi bu yaşıl və sarı formaya çəkin və bir gün adlandırın. O, buradadır, bir klik uzaqlıqdadır, onu istifadə etmək və tam üstünlüklərinizdən istifadə etmək üçün hazırdır.

Sadəliyi yaradıcılıqla birləşdirin və siz xırtıldayan yükləyici ilə bu dope giriş forması vidcetini əldə edin. Sonuncu yalnız istifadəçi istifadəçi adı və şifrəsini doldurduqdan və giriş düyməsini basdıqdan sonra görünür. Davam edin, özünüz üçün cəhd edin və bunun nə qədər zəhmli və diqqəti cəlb etdiyini görəcəksiniz.

Parolla qorunan forma

Onu bərpa etməyi təklif etməzdən əvvəl doğru olanı daxil etmək üçün üç şans verən göz oxşayan parolla qorunan forma. Çox mürəkkəb bir şey yoxdur, amma yenə də nəticə fantastik və problemsiz vebsaytınıza və ya tətbiqinizə əlavə etmək üçün kifayət qədər uyğunlaşır. Görünüşünü dəqiq tənzimləməklə onu özünüz edin və brendinq qaydalarına əməl edin.

Giriş səhifənizdə tam ekran şəklini silkələmək istəyirsinizsə, bu şəffaf HTML5 və CSS3 giriş forması sizin üçün mükəmməldir. Siz həmçinin brendinizi və ya şirkət loqotipinizi əlavə edə və onlayn mövcudluğunuzun bütün seqmentlərini eyni təcrübə səviyyəsində saxlaya bilərsiniz. Fərqli fərdiləşdirmə çimdiklərini sınayın, fəaliyyətə çağırış düyməsinin rəngini dəyişdirin və imza tərzinizlə onu təkmilləşdirin.

Müasir demişkən, bəziləri minimalizm haqqında düşünür, digərləri isə super yaradıcı və qabaqcıl bir şey təsəvvür edir. Əgər birincisi sizin ən çox axtardığınız şeydirsə, onda hərəkətə çağırış düyməsində səliqəli hover effekti ilə bu müasir giriş formasını sevəcəksiniz. Vidcet həmçinin onu parolun bərpa səhifəsi/forması ilə əlaqələndirmək imkanı verir.
Yüklə

Colorlib-ə baş çəkdiyiniz və bu məqaləni oxuduğunuz üçün təşəkkür edirik! Biz bunu yüksək qiymətləndiririk! İndi bizim pulsuz istifadə etməyi öyrənmək istəyə bilərsiniz.

Frontend veb tərtibatçısı və veb dizayneri pulsuz və premium WordPress mövzusunun hazırlanmasında ixtisaslaşmışdır. 2 il əvvəl kodlamağı öyrənməyə başladım və indi CSS/HTML/JavaScript (jQuery) və PHP ilə tanışam. Tətbiq performansı, istifadəçi təcrübəsi və sadəliyi ilə maraqlanır.

Açıqlama: Bu səhifədə qeyd olunan məhsulu almağı seçsəniz, komissiya almağımızla nəticələnə biləcək xarici filial bağlantıları var. Bu səhifədəki rəylər bizə məxsusdur və müsbət rəylər üçün əlavə bonus almırıq.

Bu yazıda öyrənəcəksiniz qeydiyyat və icazə formasını necə yaratmaq olar HTML, JavaScript, PHP və MySql istifadə edərək. Bu cür formalar növündən asılı olmayaraq demək olar ki, hər bir saytda istifadə olunur. Onlar forum, onlayn mağaza və sosial şəbəkələr (məsələn, Facebook, Twiter, Odnoklassniki) və bir çox başqa saytlar üçün yaradılmışdır.

Əgər saytınız varsa yerli kompüter, onda ümid edirəm ki, artıq var. Onsuz heç nə işləməyəcək.

Verilənlər bazasında cədvəlin yaradılması

İstifadəçi qeydiyyatını həyata keçirmək üçün bizə ilk növbədə verilənlər bazası lazımdır. Əgər sizdə artıq varsa, o zaman əladır, əks halda onu yaratmalısınız. Məqalədə bunu necə edəcəyimi ətraflı izah edirəm.

Beləliklə, verilənlər bazamız (qısaldılmış DB) var, indi cədvəl yaratmalıyıq istifadəçilər qeydiyyatdan keçmiş istifadəçilərimizi əlavə edəcəyik.

Verilənlər bazasında necə bir cədvəl yaratmaq olar, mən də məqalədə izah etdim. Cədvəl yaratmazdan əvvəl onun hansı sahələri ehtiva edəcəyini müəyyən etməliyik. Bu sahələr qeydiyyat formasındakı sahələrə uyğun olacaq.

Beləliklə, formamızın hansı sahələrin olacağını düşündük, təsəvvür etdik və cədvəl yaratdıq istifadəçilər bu sahələrlə:

• id- İdentifikator. Sahə id verilənlər bazasından hər bir cədvəldə olmalıdır.
• ad_ad- Adı saxlamaq üçün.
• Soyad- Soyadı saxlamaq üçün.
• e-poçt- Poçt ünvanını saxlamaq üçün. Giriş kimi e-poçtdan istifadə edəcəyik, ona görə də bu sahə unikal olmalıdır, yəni UNİKAL indeksə malik olmalıdır.
• email_status- Məktubun təsdiq edilib-edilmədiyini göstərən sahə. Əgər poçt təsdiqlənərsə, onda onun dəyəri 1 olacaq, əks halda onun dəyəri 0 olacaq. Varsayılan olaraq, bu sahə 0 dəyərinə sahib olacaq.
• parol- Parolu saxlamaq üçün.

"VARCHAR" tipli bütün sahələr standart olaraq NULL olmalıdır.

Əgər qeydiyyat formanızda daha çox sahənin olmasını istəyirsinizsə, onları da buraya əlavə edə bilərsiniz.

Budur, bizim masamız istifadəçilər hazır. Gəlin növbəti mərhələyə keçək.

Verilənlər bazası bağlantısı

Biz verilənlər bazasını yaratdıq, indi ona qoşulmaq lazımdır. MySQLi PHP uzantısından istifadə edərək qoşulacağıq.

Saytımızın qovluğunda adı olan bir fayl yaradın dbconnect.php, və orada aşağıdakı skripti yazırıq:

Verilənlər bazası bağlantısı xətası. Xətanın təsviri: ".mysqli_connect_error()."

Bu fayl dbconnect.php forma işləyicilərinə qoşulmaq lazımdır.

Dəyişənlərə diqqət yetirin $address_site, burada üzərində işləyəcəyim test saytımın adını qeyd etmişəm. Siz müvafiq olaraq saytınızın adını qeyd edirsiniz.

Saytın strukturu

İndi isə saytımızın HTML strukturuna nəzər salaq.

Saytın başlığını və altbilgisini bura köçürün fərdi fayllar, header.php Və footer.php. Onları bütün səhifələrdə birləşdirəcəyik. Məhz, əsas (fayl index.php), qeydiyyat forması olan səhifəyə (fayl form_register.php) və avtorizasiya forması olan səhifədə (fayl form_auth.php).

Linklərimizlə bloklayın, qeydiyyat Və icazə, saytın başlığına əlavə edin ki, onlar bütün səhifələrdə göstərilsin. Bir keçid daxil olacaq qeydiyyat forması səhifəsi(fayl form_register.php) və digəri ilə səhifəyə icazə forması(fayl form_auth.php).

header.php faylının məzmunu:

Saytımızın adı

Nəticədə əsas səhifəmiz belə görünür:

Təbii ki, saytınız tamam başqa struktura malik ola bilər, lakin bu, bizim üçün indi vacib deyil. Əsas odur ki, qeydiyyat və avtorizasiya üçün keçidlər (düymələr) var.

İndi isə keçək qeydiyyat formasına. Artıq başa düşdüyünüz kimi, faylda var form_register.php.

Verilənlər bazasına (phpMyAdmin-də) gedirik, cədvəl strukturunu açırıq istifadəçilər və görün bizə hansı sahələr lazımdır. Beləliklə, bizə ad və soyad daxil etmək üçün sahələr, poçt ünvanını (E-poçt) daxil etmək üçün sahə və parol daxil etmək üçün sahə lazımdır. Və təhlükəsizlik məqsədləri üçün biz captcha giriş sahəsi əlavə edəcəyik.

Serverdə qeydiyyat formasının işlənməsi nəticəsində istifadəçinin qeydiyyatdan keçə bilməyəcəyi müxtəlif xətalar baş verə bilər. Buna görə də, istifadəçinin qeydiyyatın niyə uğursuz olduğunu başa düşməsi üçün ona bu səhvlər haqqında mesajlar göstərmək lazımdır.

Formanı göstərməzdən əvvəl sessiyadan səhv mesajlarını göstərmək üçün blok əlavə edirik.

Və başqa bir an, əgər istifadəçi artıq səlahiyyətlidirsə və maraq naminə brauzerin ünvan çubuğuna yazaraq birbaşa qeydiyyat səhifəsinə daxil olur. website_url/form_register.php, onda bu halda, qeydiyyat forması əvəzinə, onun artıq qeydiyyata alındığı başlığını göstərəcəyik.

Ümumiyyətlə, fayl kodu form_register.php biz bunu belə aldıq:

Siz artıq qeydiyyatdan keçmisiniz

Brauzerdə qeydiyyat səhifəsi belə görünür:

İstifadə etməklə tələb olunan atribut, biz bütün sahələri məcburi etdik.

Qeydiyyat formasının koduna diqqət yetirin captcha göstərilir:

Şəkil üçün src atributunun dəyərində faylın yolunu müəyyən etdik captcha.php, bu captcha-nı yaradır.

Faylın koduna baxaq captcha.php:

Kod yaxşı şərh olunub, ona görə də mən yalnız bir məqama diqqət yetirəcəyəm.

Funksiya daxilində imageTtfText(), şriftə gedən yol müəyyən edilir verdana.ttf. Beləliklə, captcha-nın düzgün işləməsi üçün bir qovluq yaratmalıyıq şriftlər, və şrift faylını ora qoyun verdana.ttf. İnternetdən tapıb yükləyə və ya bu məqalənin materialları ilə birlikdə arxivdən götürə bilərsiniz.

HTML strukturu ilə işimiz bitdi, davam etmək vaxtıdır.

JQuery ilə e-poçtun təsdiqlənməsi

İstənilən forma həm müştəri tərəfində (JavaScript, jQuery-dən istifadə etməklə), həm də server tərəfində daxil edilmiş məlumatların yoxlanılmasını tələb edir.

E-poçt sahəsinə xüsusi diqqət yetirməliyik. Daxil edilmiş e-poçt ünvanının etibarlı olması çox vacibdir.

Bu daxiletmə sahəsi üçün e-poçt tipini təyin etdik (type="email"), bu, bizi yanlış formatlara qarşı bir az xəbərdar edir. Ancaq bu kifayət deyil, çünki brauzerin bizə təqdim etdiyi kod müfəttişi vasitəsilə siz atributun dəyərini asanlıqla dəyişə bilərsiniz. növü ilə e-poçt haqqında mətn, və bu qədər, çekimiz artıq etibarlı olmayacaq.

Və bu halda biz daha etibarlı yoxlama aparmalıyıq. Bunun üçün JavaScript-dən jQuery kitabxanasından istifadə edəcəyik.

jQuery kitabxanasına qoşulmaq üçün faylda header.php etiketlər arasında , bağlanış etiketindən əvvəl , bu sətri əlavə edin:

Bu sətirdən dərhal sonra e-poçt təsdiqləmə yoxlama kodunu əlavə edin. Burada daxil edilmiş parolun uzunluğunu yoxlamaq üçün kodu əlavə edirik. Ən azı 6 simvol uzunluğunda olmalıdır.

Bu skriptin köməyi ilə daxil edilmiş e-poçt ünvanının etibarlılığını yoxlayırıq. Əgər istifadəçi səhv E-poçt ünvanını daxil edibsə, biz bununla bağlı xəta göstəririk və formanın təqdim düyməsini deaktiv edirik. Hər şey qaydasındadırsa, o zaman xətanı aradan qaldırırıq və formanın təqdim düyməsini aktivləşdiririk.

Beləliklə, müştəri tərəfində forma yoxlaması ilə işimiz bitdi. İndi onu serverə göndərə bilərik, burada da bir neçə yoxlama aparacağıq və verilənlər bazasına məlumat əlavə edəcəyik.

İstifadəçi qeydiyyatı

Formanı emal üçün fayla göndəririk register.php, POST üsulu ilə. ad verilmiş fayl atribut dəyərində göstərilən işləyici hərəkət. Göndərmə metodu isə atribut dəyərində göstərilir üsul.

Bu faylı açın register.php və etməli olduğumuz ilk şey seans başlatma funksiyasını yazmaq və əvvəllər yaratdığımız faylı daxil etməkdir dbconnect.php(Bu faylda verilənlər bazası ilə əlaqə yaratdıq). Və yenə də dərhal hüceyrələri elan edin xəta_mesajları Və uğur_mesajları sessiya qlobal massivində. IN xəta_mesajları biz formanın işlənməsi zamanı baş verən bütün səhv mesajlarını qeyd edəcəyik uğur_mesajları Gəlin xoşbəxt mesajlar yazaq.

Davam etməzdən əvvəl yoxlamaq lazımdır formanın ümumiyyətlə təqdim edilib-edilməməsi. Təcavüzkar atributun dəyərinə baxa bilər hərəkət formadan və bu formanı hansı faylın işlədiyini öyrənin. Və o, yazaraq birbaşa bu fayla getmək fikri ilə çıxış edə bilər ünvan çubuğu brauzer ünvanı belədir: http://site_site/register.php

Beləliklə, qlobal POST massivində adı formadakı "Qeydiyyatdan keç" düyməmizin adına uyğun gələn xananın olub olmadığını yoxlamaq lazımdır. Beləliklə, "Qeydiyyatdan keç" düyməsinin basılıb-basılmadığını yoxlayırıq.

Təcavüzkar birbaşa bu fayla getməyə çalışarsa, o, xəta mesajı alacaq. Xatırladıram ki, $address_site dəyişəni saytın adını ehtiva edir və o, faylda elan edilib. dbconnect.php.

Xəta!Əsas səhifə .

Sessiyadakı captcha dəyəri onun yaradılması zamanı fayla əlavə edilib captcha.php. Xatırlatma olaraq, fayldan bu kod parçasını bir daha göstərəcəyəm captcha.php, burada captcha dəyəri sessiyaya əlavə olunur:

İndi keçək testin özünə. Faylda register.php, if blokunun içərisində "Qeydiyyatdan keç" düyməsinin basılıb-basılmadığını yoxladığımız, daha doğrusu şərhin olduğu yerdə " // (1) Növbəti kod parçası üçün yerləşdirin"Biz yazırıq:

//Qəbul edilən captcha-nı yoxlayın //Sətrin əvvəlindən və sonundan boşluqları kəsin $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Alınan dəyəri sessiyanın dəyəri ilə müqayisə edin. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Əgər captcha düzgün deyilsə, istifadəçini qeydiyyat səhifəsinə qaytarın və orada onun səhv captcha daxil etdiyinə dair xəta mesajı göstərəcəyik. $error_message = "

Xəta! Siz səhv captcha daxil etdiniz

Xəta! Doğrulama kodu, yəni captcha kodu yoxdur. Əsas səhifəyə keçə bilərsiniz.

Sonra, POST massivindən alınan məlumatları emal etməliyik. Hər şeydən əvvəl qlobal POST massivinin məzmununu, yəni adları bizim formamızdakı giriş sahələrinin adlarına uyğun gələn xanaların olub-olmadığını yoxlamaq lazımdır.

Əgər xana mövcuddursa, onda biz bu xanadan sətirin əvvəlindən və sonundan boşluqları kəsirik, əks halda istifadəçini qeydiyyat forması olan səhifəyə yenidən yönləndiririk.

Bundan əlavə, boşluqlar kəsildikdən sonra dəyişənə sətir əlavə edirik və bu dəyişənin boşluğunu yoxlayırıq, əgər boş deyilsə, davam edin, əks halda istifadəçini qeydiyyat forması ilə səhifəyə yönləndiririk.

Bu kodu müəyyən edilmiş yerə yapışdırın // (2) Növbəti kod parçası üçün yerləşdirin".

/* $_POST qlobal massivində formadan təqdim edilmiş məlumatların olub-olmadığını yoxlayın və təqdim edilmiş məlumatları adi dəyişənlərə əlavə edin.*/ if(isset($_POST["first_name"]))( // Boşluqları əvvəldən və sonundan kəsin. sətir $first_name = trim($_POST["first_name"]); //Dəyişənlərin boş olub olmadığını yoxlayın if(!empty($first_name))( //Təhlükəsizlik üçün çevirin Xüsusi simvollar HTML obyektində $first_name = htmlspecialchars($first_name, ENT_QUOTES); )else( // Səhv mesajını sessiyada yadda saxlayın. $_SESSION["error_messages"] .= "

Adınızı daxil edin

Ad sahəsi çatışmır

Soyadınızı daxil edin

Ad sahəsi çatışmır

E-poçtunuzu daxil edin

Şifrənizi daxil edin

Sahə xüsusi əhəmiyyət kəsb edir. e-poçt. Alınan poçt ünvanının formatını və verilənlər bazasında unikallığını yoxlamaq məcburiyyətindəyik. Yəni eyni e-poçt ünvanına malik istifadəçinin artıq qeydiyyatdan keçib-keçməməsi.

Göstərilən yerdə" // (3) Poçt ünvanının formatını və unikallığını yoxlamaq üçün kodun yeri" aşağıdakı kodu əlavə edin:

//$reg_email = "/^**@(+(*+)*\.)++/i" normal ifadəsindən istifadə edərək qəbul edilən e-poçt ünvanının formatını yoxlayın; //Əgər alınan e-poçt ünvanının formatı adi ifadə ilə uyğun gəlmirsə if(!preg_match($reg_email, $email))( // Səhv mesajını sessiyada yadda saxlayın. $_SESSION["error_messages"] .= "

Siz yanlış e-poçt daxil etdiniz

Bu e-poçt ünvanı olan istifadəçi artıq qeydiyyatdan keçib

Verilənlər bazası sorğusunda xəta

Beləliklə, bütün yoxlamaları bitirdik, istifadəçini verilənlər bazasına əlavə etməyin vaxtı gəldi. Göstərilən yerdə" // (4) Verilənlər bazasına istifadəçi əlavə etmək üçün kodu yerləşdirin" aşağıdakı kodu əlavə edin:

//İstifadəçini verilənlər bazasına əlavə etmək üçün sorğu $result_query_insert = $mysqli->query("INSERT INTO `users` (ad, soyad, e-poçt, parol) VALUES ("".$first_name."", "".$last_name ." ", "".$e-poçt."", "".$parol."")"); if(!$result_query_insert)( // Səhv mesajını sessiyada yadda saxlayın. $_SESSION["error_messages"] .= "

Məlumat bazasına istifadəçi əlavə etmək üçün xəta sorğusu

Qeydiyyat uğurla başa çatdı!!!
İndi istifadəçi adı və şifrənizlə daxil ola bilərsiniz.

İstifadəçinin verilənlər bazasına əlavə edilməsi sorğusunda xəta baş verərsə, biz bu xəta haqqında sessiyaya mesaj əlavə edirik və istifadəçini qeydiyyat səhifəsinə qaytarırıq.

Əks halda, hər şey qaydasındadırsa, biz də sessiyaya bir mesaj əlavə edirik, lakin bu, artıq daha xoşdur, yəni istifadəçiyə qeydiyyatın uğurlu olduğunu bildiririk. Və biz onu avtorizasiya forması ilə səhifəyə yönləndiririk.

E-poçt ünvanının formatını və parolun uzunluğunu yoxlamaq üçün skript fayldadır header.php, buna görə də o formadan sahələrə təsir edəcək.

Sessiya da faylda başlayır header.php, belə ki, faylda form_auth.php seansın başlamasına ehtiyac yoxdur, çünki xəta alırıq.

Dediyim kimi, poçt ünvanının formatını və parolun uzunluğunu yoxlamaq üçün skript də burada işləyir. Buna görə də, istifadəçi səhv e-poçt ünvanı və ya qısa parol daxil edərsə, dərhal səhv mesajı alacaq. Bir düymə girmək fəaliyyətsiz olacaq.

Səhvləri düzəltdikdən sonra düyməni basın girmək aktivləşir və istifadəçi formanı onun işlənəcəyi serverə təqdim edə bilər.

İstifadəçi icazəsi

Dəyəri atribut etmək üçün hərəkət avtorizasiya formasında fayl var auth.php, yəni forma bu faylda işlənəcək.

Beləliklə, faylı açaq auth.php və icazə formasını emal etmək üçün kodu yazın. Ediləcək ilk şey sessiyanı başlamaq və faylı daxil etməkdir dbconnect.php verilənlər bazasına qoşulmaq üçün.

//Formanın işlənməsi zamanı baş verə biləcək xətaları əlavə etmək üçün xana elan edin. $_SESSION["error_messages"] = ""; //Uğurlu mesajlar əlavə etmək üçün xana elan edin $_SESSION["success_messages"] = "";

/* Formanın təqdim edilib-edilmədiyini, yəni Giriş düyməsinin kliklədiyini yoxlayın. Əgər belədirsə, daha da irəliləyirik, yoxsa, istifadəçiyə birbaşa bu səhifəyə getdiyini bildirən bir səhv mesajı göstərəcəyik. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Növbəti kod parçası üçün yer )else( exit("

Xəta! Siz bu səhifəyə birbaşa daxil olmusunuz, ona görə də emal ediləcək məlumat yoxdur. Əsas səhifəyə keçə bilərsiniz.

//Qəbul edilən captcha-nı yoxlayın if(isset($_POST["captcha"]))( //Sətrin əvvəlindən və sonundan boşluqları kəsin $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Alınan dəyəri sessiyanın dəyəri ilə müqayisə edin. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Əgər captcha etibarsızdırsa, istifadəçini avtorizasiya səhifəsinə qaytarırıq və orada onun səhv captcha daxil etdiyinə dair səhv mesajı göstərəcəyik. $error_message = "

Xəta! Siz səhv captcha daxil etdiniz

Xəta! Captcha daxiletmə sahəsi boş olmamalıdır.

Xəta! Doğrulama kodu, yəni captcha kodu yoxdur. Əsas səhifəyə keçə bilərsiniz.

İstifadəçi doğrulama kodunu düzgün daxil edibsə, davam edirik, əks halda onu avtorizasiya səhifəsinə qaytarırıq.

E-poçt ünvanının yoxlanılması

// Sətirin əvvəlindən və sonundan boşluqları kəsin $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //$ adi ifadəsindən istifadə edərək qəbul edilən e-poçt ünvanının formatını yoxlayın reg_email = " /^**@(+(*+)*\.)++/i"; //Əgər alınan e-poçt ünvanının formatı normal ifadə ilə uyğun gəlmirsə if(!preg_match($reg_email, $email) ))( // Sessiya xəta mesajında ​​yadda saxla.$_SESSION["error_messages"] .= "

Siz yanlış e-poçt daxil etdiniz

Poçt ünvanını (elektron poçtu) daxil etmək üçün sahə boş olmamalıdır.

E-poçtu daxil etmək üçün heç bir sahə yoxdur

İstifadəçi e-poçt ünvanını səhv formatda daxil edibsə və ya e-poçt ünvanı sahəsinin dəyəri boşdursa, biz onu avtorizasiya səhifəsinə qaytarırıq, burada bu barədə mesaj göstərilir.

Şifrə yoxlanışı

Emal ediləcək növbəti sahə parol sahəsidir. Təyin olunmuş yerə" //(3) Parolun işlənməsi üçün yer", Biz yazırıq:

If(isset($_POST["password"]))( // Sətirin əvvəlindən və sonundan boşluqları kəsin $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Şifrəni şifrələyin $password = md5($password."top_secret"); )else( // Səhv mesajını sessiyada saxla. $_SESSION["error_messages"] . = "

Şifrənizi daxil edin

Parol daxil etmək üçün heç bir sahə yoxdur

Burada md5 () funksiyasından istifadə edərək, alınan parolu şifrələyirik, çünki verilənlər bazasında şifrələnmiş formada parollarımız var. Şifrələmədə əlavə gizli söz, bizim vəziyyətimizdə " tam məxfi" istifadəçini qeydiyyatdan keçirərkən istifadə edilən olmalıdır.

İndi poçt ünvanı qəbul edilmiş poçt ünvanına və parol qəbul edilmiş parola bərabər olan istifadəçi seçimi üzrə verilənlər bazasına sorğu verməlisiniz.

//İstifadəçinin seçimi üzrə verilənlər bazasına sorğu. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$parol."""); if(!$result_query_select)( // Səhv mesajını sessiyada yadda saxlayın. $_SESSION["error_messages"] .= "

Verilənlər bazasından istifadəçi seçimində sorğu xətası

Səhv istifadəçi adı və/və ya parol

Saytdan çıxış

Və həyata keçirdiyimiz son şeydir çıxış proseduru. Hazırda başlıqda avtorizasiya səhifəsinə və qeydiyyat səhifəsinə keçidlər göstərilir.

Saytın başlığında (fayl header.php), sessiyadan istifadə edərək istifadəçinin artıq daxil olub-olmadığını yoxlayırıq. Yoxdursa, biz qeydiyyat və avtorizasiya bağlantılarını göstəririk, əks halda (əgər bu icazəlidirsə), onda qeydiyyat və avtorizasiya keçidlərinin əvəzinə linki göstəririk. Çıx.

Fayldan dəyişdirilmiş kod parçası header.php:

Qeydiyyat

Çıx

Saytdan çıxış linkinə tıkladığınız zaman fayla daxil oluruq çıxış.php, burada biz sadəcə olaraq sessiyadan e-poçt ünvanı və parol olan hüceyrələri məhv edirik. Bundan sonra istifadəçini keçidin kliklədiyi səhifəyə qaytarırıq çıxış.

Fayl Kodu logout.php:

Hamısı budur. İndi necə olduğunu bilirsiniz qeydiyyat və icazə formalarını həyata keçirmək və emal etmək saytınızdakı istifadəçi. Bu formalar demək olar ki, hər bir saytda var, ona görə də hər bir proqramçı onları necə yaratmağı bilməlidir.

Biz həmçinin həm müştəri tərəfində (brauzerdə, JavaScript, jQuery istifadə edərək) və həm də server tərəfində (istifadə edərək) daxil edilmiş məlumatların doğrulanmasını öyrəndik. PHP dili). Biz də öyrəndik çıxış prosedurunu həyata keçirin.

Bütün skriptlər sınaqdan keçirilir və işləyir. Bu kiçik saytın faylları ilə arxivi bu linkdən yükləyə bilərsiniz.

Gələcəkdə təsvir edəcəyim bir məqalə yazacağam. Mən də izah edəcəyim bir məqalə yazmağı planlaşdırıram (səhifəni yenidən yükləmədən). Beləliklə, yeni məqalələrin buraxılışından xəbərdar olmaq üçün saytıma abunə ola bilərsiniz.

Hər hansı bir sualınız varsa, əlaqə saxlayın, məqalədə hər hansı bir səhv görsəniz, mənə bildirin.

Dərs Planı (5-ci Hissə):

1. Avtorizasiya Forması üçün HTML Strukturunun yaradılması
2. Alınan məlumatları emal edirik
3. İstifadəçinin salamını saytın başlığında göstəririk

Məqaləni bəyəndiniz?

Giriş formaları forumlar, mağazalar, WordPress olan veb saytlarda tapıla bilər və əsasən internetdəki hər şey nəyəsə daxil olmaq üçün haradasa giriş forması tələb edir. Bütün internet giriş formaları və qeydiyyat olmadan natamamdır, qeydiyyat formaları.

HTML formaları çoxumuzun rastlaşdığı və HTML strukturuna üslub verən düzgün CSS ilə birinci olacaq. Ən son HTML versiyalarında məncə, HTML standart struktur üslubu seçimi kimi CSS3-ü seçmişdir. Hər halda, burada tapdığınız şey, qabaqcıl tərtibatçılar tərəfindən qurulmuş və istifadə üçün pulsuz olaraq ictimaiyyətə paylaşılan əvvəlcədən hazırlanmış HTML, CSS formalarıdır.

Bütün bu pulsuz giriş forması şablonlarından istifadə etməyə çalışın, çünki onların əksəriyyətində əvvəlcədən qurulmuş HTML təsdiqləmə funksiyaları, həmçinin bəzi jQuery və ya HTML təsdiqləmələri var (məsələn, aşağıda keçid sayğacı olan Giriş/Qeydiyyat forması).

Bu siyahı hələ bitməyib, mən yeni giriş forması dizaynlarını tapmaqda maraqlıyam, ona görə də 2017-ci ildə görünəndə bu siyahıları yeni giriş forması şablonları ilə yeniləməyə davam edəcəyəm. İzləmədə qalın.

Qırmızı Giriş Forması

Veb saytınız üçün əsas giriş sahələrini və əlavə proqramlaşdırma tələb edən sadə və effektiv giriş forması.

Artıq düz olan veb saytınız üçün hazırlanmış düz giriş forması dizaynı. Bu şablonu yükləyin və istənilən məqsəd üçün istifadə edin.

Müştəriləriniz üçün sürətli giriş tələb edirsiniz? Narahat olmayın, bu gözəl görünüşlü giriş forması sizi heç bir əngəl olmadan davam etdirəcək. Mənbə kodunu yükləyin və demonu yoxlayın, çünki sahələrə nümunə istifadəçi adı və şifrə qoyub daxil olmağa cəhd edə bilərsiniz. Siz çıxış animasiyasını göstərən çıxış düyməsi ilə möhtəşəm görünən profil səhifəsinə aparılacaqsınız.

Google material dizaynının düz dizayn üzərində populyarlaşması ilə biz bu css3 şablonunda dərin və diqqətlə kölgələnmiş giriş formasını və qeydiyyat formasını görə bilərik.

Burada giriş sahələrini gizlətmək/göstərmək seçimi ilə busienss veb saytınız üçün başqa bir parlaq giriş forması əldə edirsiniz. Yaxşı kodlanmış css/html/js dizaynı, cari saytınızın sürətini pozmadan sizə daha yaxşı yükləmə imkanı verəcək.

Maye animasiya ilə Minimal Giriş Forması

Lazım olan şəkil və ya düyməni klikləməklə giriş bölməsini açan giriş formasının hamar animasiyası.

Css ilə minimalist Giriş Forması

Burada siz tam ekran fonunda yerləşdirilən qeyri-xülyalı giriş forması ui tapa bilərsiniz. Yükləmə faylı bu girişin veb saytınıza asan tətbiqi üçün sizə css və html əldə edəcək.

Animasiyalı Giriş Forması

Mətn sahələrində göstərilən klik animasiyaları mükəmməldir və istifadəçi və parol nişanlarının kiçik sürüşmə animasiyasını göstərir. Daha sonra autentifikasiya edən ilk yükləyicini, eləcə də xoş qarşılanma blokunu izləmək üçün formaya daxil ola bilərsiniz. Bu endirmə öz veb saytınız üçün giriş formasını həyata keçirmək üçün bütün mənbə faylları ehtiva edir.

Eleqant Giriş

Bu, veb saytınızda göstərə biləcəyiniz giriş formasının sadə versiyasıdır, çünki bu da minimal kodu ilə saytın sürətinə daha az təsir göstərir.

Sakit Giriş Ekranı

Bütün səhifəyə rahatlıq verən animasiya fonu olan təmiz giriş forması. Bütün şablonu codepen-dən zip formatında endirin.

Giriş və Qeydiyyat Forması

Bu maye giriş və qeydiyyat formasını veb saytınıza asanlıqla inteqrasiya edin. Bu endirmə ilə zip faylı sizi css, html və js şablonları ilə təmin edəcək. Sosial media qeydiyyatı ekranda asan parol daxil etmək üçün parol göstərmə/gizlətmə seçimləri ilə də mövcuddur.

Hesab Yaratmaqla Giriş Forması

Fadein effekti ilə ekrana çıxan giriş formasını izləmək sadəcə əyləncəlidir. Bu effekti yalnız bir neçə müasir giriş formasında görmək olar. Qeydiyyatdan keçmək və ya forma yaratmaq üçün formanı dəyişmək üçün mənə klikləyin.

Düz dizaynlı minimal üslublu giriş formasını aşağıdakı linkdən yükləmək olar. HTML təsdiqləməsi mövcuddur və bu giriş şablonunda quraşdırılmışdır.

Giriş üçün Minimal Forma Şablonu

E-poçt üçün doğrulama hazırdır və bu şablon təmiz css, html-dir, heç bir dəbdəbəli jQuery modulları yoxdur.

Qeydiyyat/Giriş Forması

Veb saytına daxil olmaq üçün tək bir forma, eləcə də bir klik ilə çevrilə bilən qeydiyyat, qeydiyyat seçimi. Qeydiyyat zonasında bəzi vacib sahələr yoxdursa da, bu, bütün güclü xüsusiyyətləri ilə daha yaxşı formadır.

Siz giriş linkinə klikləməyincə bu giriş forması gizlidir. Bu, giriş üçün əlavə səhifədən qaça bilən müasir vebsayt üçün çox faydalı xüsusiyyətdir. Bu güclü giriş forması ilə istədiyiniz səhifədə girişi göstərin.

O, həm PSD, həm də tam kodlaşdırılmış HTML/CSS versiyası kimi təqdim olunur, ona görə də onu dərhal inteqrasiya etməyə başlaya bilərsiniz.

Giriş forması (kodlu)

Peşəkar giriş forması. Yükləmə PSD faylını ehtiva edir və mən də onu kodlaşdırmaq istədim, ona görə də xHTML, Js və CSS fayllarını daxil etdim.

Ağ Sadə Giriş Forması

Dəyirmi təqdim düyməsi və zərif diqqət vəziyyəti ilə təmiz və sadə giriş forması.

Sadəcə Giriş Forması

Sadəcə CSS3 istifadə edərək tərtib edilmiş və dizayn edilmiş Giriş Forması. Forma olduqca sadə işarələmə ilə yaradılmış və çox sadə CSS3 xassələrindən istifadə etməklə tərtib edilmişdir.

Hamıya salam. Beləliklə, forma yaratmaq üçün bir neçə element öyrəndik. Daha böyük bir problemi həll etmək üçün biliklərimizi birləşdirməyin vaxtı gəldi. Saytda avtorizasiya üçün ən sadə formanı yaradaq. Bunun üçün bizə iki sahə lazımdır, biz onlara imzalar düzəldirik və bağlayırıq.

Birinci sahə istifadəçi adı, ikincisi isə parol üçündür. Və ikincisi o qədər də sadə deyil. Çünki hazırda bu sadəcə mətn daxiletmə sahəsidir.

Brauzerdə nəticə:

Bu tip bir sahə üçün adət olduğu kimi, daxil edilmiş mətnin ulduzlarla əvəz edilməsi üçün bir sadə hərəkət etməlisiniz. Məhz, atributun dəyərini əvəz etmək üçün növü haqqında parol:

Nəticə:

Forma göndər düyməsi

Buyurunuz. Formamız demək olar ki, hazırdır. İndi onun yaradılmasını başa çatdırmaq üçün formanı təqdim etmək üçün istifadə olunacaq düyməni yaratmalısınız. Problem etiketdən istifadə etməklə həll olunur növü ilə təqdim.

Düymədə bir növ yazı olmalıdırsa, bu atributdan istifadə etməklə edilə bilər dəyər. Düyməni adlandırıb-qoymamaq sizə bağlıdır, lakin bunu etsəniz, server düymənin dəyəri ilə yanaşı həmin adı da alacaq.

Tipik olaraq, formanın hər biri müəyyən bir hərəkəti yerinə yetirən çoxsaylı düymələrə malik olduqda formanın təqdim düyməsinin adı tələb olunur. Bunun sayəsində brauzerdən düymənin adını və dəyərini alan server istifadəçinin hansı düyməni basdığını və müvafiq olaraq nə etmək lazım olduğunu başa düşür.

Nəticədə forma kodumuz belə görünəcək:

Brauzerdə nəticə: