Skaista css3 pieteikšanās forma. Mēs izveidojam reģistrācijas veidlapu. Veidlapas iesniegšanas poga

Pieteikšanās veidlapas ir visur tīmeklī. Taču tagad visi pieteikšanās veidlapu dizaini ir skaisti un tiem ir labs lietotāja interfeiss, tāpēc mēs nolemjam izveidot šos pieteikšanās veidlapu veidņu dizainus un kopīgot tos bez maksas.

Vai jūs izmantojat sociālos tīklus? Jums ir jāiziet sava veida pieteikšanās forma. Vai jums ir e-pasts? Vai pievienojies kādam forumam? Vai mēģinājāt atstāt komentāru WordPress vietnē? Lai piekļūtu kaut kam internetā, iespējams, jums būs jāveic sava veida pieteikšanās process. Iespējams, vispirms būs jāreģistrējas, jāreģistrējas vai jāatstāj kāda informācija. Lai kaut ko darītu internetā, jums būs jāizmanto sava veida pieteikšanās veidlapa.

Tātad, kāds sakars pieteikšanās veidlapām ar HTML un CSS? Tās abas ir būtiskas pieteikšanās veidlapu daļas.

HTML (HyperText Markup Language) ir standarta iezīmēšanas valoda, ko izmanto tīmekļa lapu izveidei. HTML elementi ir visu vietņu pamatelementi.

CSS (Cascading Style Sheet) ir valoda, ko izmanto, lai aprakstītu iezīmēšanas valodā rakstīta dokumenta izskatu un formatējumu. Piemēram, HTML!

Mēs izmantojam HTML, lai izveidotu vietni, un CSS, lai tā izskatītos jauki. Ar to lielākā daļa lietotāju saskaras, pārlūkojot tīmekli.

Mēs esam izveidojuši sarakstu ar 50 bezmaksas pieteikšanās veidlapu noformējumiem, kurus varat izmantot savā WordPress vietnē, emuārā, forumā vai jebkur citur. Šis ir Colorlib rūpīgi atlasīts saraksts, lai nodrošinātu visaugstāko veidlapu kvalitāti. Katra veidlapa ir rūpīgi pārbaudīta, lai nodrošinātu, ka netrūkst neviena komponenta un avota kods ir pieejams katrā lejupielādes reizē. Protams, jūs varat brīvi izmantot šīs veidlapas personiskiem un komerciāliem mērķiem, bez nepieciešams attiecināšana.

Izpētiet 2,5 miljonus digitālo aktīvu, tostarp 2019. gada labākās WordPress veidnes

Vairāk nekā 2 miljoni vienumu no pasaulē lielākā HTML5 veidņu, motīvu un dizaina līdzekļu tirgus. Neatkarīgi no tā, vai tas ir tas, kas jums nepieciešams, vai arī esat tikai pēc dažiem krājuma fotoattēliem – to visu var atrast šeit Envato tirgū.

LEJUPIELĀDĒJIET TAGAD

WordPress pieteikšanās pielāgotājs

Pārējais saraksts un HTML/CSS darbināmas pieteikšanās veidlapas, taču šeit varat redzēt labāko WordPress pieteikšanās pielāgotāja spraudni. Tam ir vairākas noteiktas veidnes, kuras varat vēl vairāk pielāgot, lai tās atbilstu jūsu vietnes dizainam. Ar šo spraudni jūs beidzot varat atbrīvoties no garlaicīgas WordPress wp-admin lapas un izveidot patiesi unikālu pieredzi sev un saviem lietotājiem.

Colorlib pieteikšanās veidlapa 1

Vienkārša, radoša un dinamiska pieteikšanās veidlapa ar gradienta fonu. Varat to izmantot visu veidu nodomiem, piemēram, tīmekļa, mobilajām ierīcēm vai darbvirsmas lietojumprogrammām. Bet esiet radošs ar to, ja vēlaties.

Radošs pieteikšanās veidlapas dizains

Vienkārša, taču radoša pieteikšanās veidlapa, kas izveidota, izmantojot HTML5 un CSS3. Šo veidlapu var izmantot arī kā reģistrācijas veidlapu. Šī ir mūsu iecienītākā veidne šajā sarakstā, pateicoties tās elastībai un līdzībai, kas ļauj jums izveidot

Mēs meklējām internetā foršas pieteikšanās veidlapas, taču bija ļoti grūti atrast izskatīgas, tāpēc nolēmām tās pieņemt. Mēs vēlamies iepazīstināt ar 20 pieteikšanās veidlapām, kuras izstrādājusi un izstrādāta Colorlib komanda.

Colorlib pieteikšanās veidlapa 2

Minimāla un izsmalcināta Colorlib pieteikšanās forma ar gradienta pogu ar animāciju un logotipu. Izmantojiet to, mainiet to un izmantojiet to kā jauku papildinājumu jau tā lieliskajai tīmekļa telpai.

Colorlib pieteikšanās veidlapa 3

Krāšņa pieteikšanās lapa ar fona attēlu ar ēnu un gradienta formas lodziņu ar pieteikšanās pogas kursora efektu. Vienīgais ierobežojums, kas jums ir, ir jūsu iztēle, tāpēc paplašiniet savu skatījumu un pilnībā izmantojiet 3. pieteikšanās veidlapu.

Colorlib pieteikšanās veidlapa 4

Radošumam nav robežu, tāpat arī 4. pieteikšanās veidlapai. Šeit tā ir jūsu rīcībā, gatava lejupielādēšanai un lietderīgai izmantošanai. Neuztraucieties arī par atsaucību.

Colorlib pieteikšanās veidlapa 5

Krāšņa, tīra un moderna forma ar iespēju pieteikties ar Facebook vai Google. Visām pogām ir patīkams spārnu efekts, kas uzlabo pieredzi.

Colorlib pieteikšanās veidlapa 6

Ja jūsu lapa jau ir ļoti glīta un sakārtota, pieteikšanās forma nedrīkst atšķirties. Šeit ir viens, kas viegli attaisnos jūsu cerības, ja minimālisms ir jūsu tējas tase.

Colorlib pieteikšanās veidlapa 7

Veidlapa ar trīs veidu iespēju pieteikties kontā. Viņiem dod priekšroku Facebook, Twitter vai e-pasta pieteikšanās — šis ir rīka veids, kas jums ir jāiekļauj savā lapā. Un, ja viņiem vēl nav konta, varat to saistīt arī ar savu reģistrācijas lapu.

Colorlib pieteikšanās veidlapa 8

Vēl viena mūsdienīga, moderna un vilinoša pieteikšanās forma ar noapaļotu visu. Šis ir īpaši piemērots mobilo sakaru lietotājiem, jo ​​pašlaik ir ļoti populārs noapaļoto stūru stils.

Colorlib pieteikšanās veidlapa 9

Ja vēlaties izvairīties no balta vai vienkrāsaina fona, šī ir pieteikšanās veidlapas lapa, kas jums jāapsver. Tas ne tikai atbalsta pilnu attēla fonu, bet arī ir aprīkots ar gradienta pārklājumu un iespēju pieteikties, izmantojot Facebook vai Google.

Colorlib pieteikšanās veidlapa 10

Nedaudz pilnīgs pretstats, salīdzinot ar iepriekšējo, ir pieteikšanās veidlapa 10. Tā gandrīz nevar būt minimālistiskāka, vienlaikus saglabājot mūsdienīgu sajūtu.

Colorlib pieteikšanās veidlapa 11

Izmantojot mūsu labāko HTML5 un CSS3 pieteikšanās veidlapu kolekciju, jūs ietaupāt savu laiku un pūles (arī naudu). Tā vietā, lai izveidotu to no nulles, šeit ir vēl viena, lietošanai gatava veidne, kuru varat izmantot.

Colorlib pieteikšanās veidlapa 12

Attēla fons ar zilu ēnas pārklājumu, nosaukumu, attēlu un obligāto veidlapu. Tas ir tas, kas ir pieejams ar 12. pieteikšanās veidlapu. Pieteikšanās pogai ir arī foršs kursora efekts, kas sniedz iespēju saistīt to ar reģistrācijas veidlapu visi jaunie lietotāji.

Colorlib pieteikšanās veidlapa 13

Sadalīta ekrāna reģistrācijas veidlapa, kur viena puse ir veltīta attēlam, bet otra puse formai. Tas ir bezmaksas rīks, kuru varat sākt lietot tieši šajā brīdī. Vienkārši lejupielādējiet izkārtojumu un izmantojiet to pilnībā.

Colorlib pieteikšanās veidlapa 14

Šajā kolekcijā ir apvienotas gan vienkāršotas, gan nedaudz sarežģītākas un uzlabotas pieteikšanās formas. Īsāk sakot, ikvienam ir kaut kas, un pieteikšanās veidlapa 14 ir vairāk minimālisma pusē. Bet kāpēc pat sarežģīt ar pieteikšanās veidlapu, vai ne? Katram savs.

Colorlib pieteikšanās veidlapa 15

Lai gan lietas joprojām ir minimālas, viens lielisks papildinājums pieteikšanās veidlapai 15 ir attēla reklāmkarogs tieši virs veidlapas. Izmantojot šo mazo funkciju, jūs varat padarīt pieredzi nedaudz saistošāku.

Colorlib pieteikšanās veidlapa 16

Šī ir pieteikšanās veidlapa ar pilnekrāna attēlu, virs kura ir ievietota forma ar lietotājvārda un paroles laukiem un gradienta poga ar kursora virzīšanas efektu. Vienkārši un saprotami.

Colorlib pieteikšanās veidlapa 17

Lai padarītu to personiskāku, šī ierāmētā pieteikšanās veidlapas veidne jums ir vislabāk piemērota. Tam ir attēla puse un formas puse, taču tas samazina lietas līdz minimumam, vienlaikus nodrošinot profesionalitāti.

Colorlib pieteikšanās veidlapa 18

Ja jums patīk atšķirties un saglabāt lietas oriģinālus, apsveriet iespēju izmantot pieteikšanās veidlapu 18. Lai gan dažiem pieteikšanās lapas ir ļoti vienkāršas, citi vēlas, lai izkārtojums būtu papildu labs. Un, ja vēlaties pievienot attēlu, šis ir paredzēts jums.

Colorlib pieteikšanās veidlapa 19

Spilgts, enerģisks un uzmanību piesaistošs, tas ir tas, par ko ir šī nākamā pieteikšanās forma, kuras pamatā ir HTML5 un CSS3. Tas ir arī pilnībā atsaucīgs un gatavs mobilajām ierīcēm, kā arī saderīgs ar visām lielākajām tīmekļa pārlūkprogrammām.

Colorlib pieteikšanās veidlapa 20

Gradienta fons, melna pierakstīšanās poga ar kursora virzīšanas efektu, lietotājvārda un paroles lauki, kā arī pielāgots teksts un “Aizmirsāt paroli?” Jā, tas viss ir daļa no pieteikšanās veidlapas 20. Izklausās satriecoši, bet patiesībā tālu no tā.

Veidlapa ir paslēpta, ja vien nenoklikšķināt uz opcijas “Pieteikties”. Patiešām lieliska iespēja modernām vietnēm, kuras vēlas izvairīties no atsevišķas lapas pieteikšanās veidlapai. Izmantojot šo jaudīgo rīku, varat parādīt veidlapu jebkurā vietā savā vietnē.

Pieteikšanās veidlapas dizains, izmantojot cilnes un peldošās veidlapas etiķetes.

Sākotnēji tas, kas tika izveidots, lai neļautu cilvēkiem iekļūt vienas personas WordPress vietnē, kļuva par ļoti populāru formu tās vienkāršības un glītā dizaina dēļ.

Vienmērīga pieteikšanās — reģistrēšanās veidlapa

Kad augšējā labajā stūrī noklikšķināsit uz pogas “Noklikšķiniet uz mani”, jūs iegūsit vienmērīgu animāciju, kas pārveidos šo pieteikšanās veidlapu par reģistrēšanās veidlapu.

Piesakieties, izmantojot pašpietiekamu SCSS veidlapu

Šī ir veidlapa ar autonomu SCSS. CSS paplašinājums, kas pamatvalodai piešķir spēku un eleganci. Tas ļauj izmantot mainīgos, ligzdotos noteikumus, mixins, iekļauto importēšanu un daudz ko citu.

Šī faktiski ir animēta pieteikšanās forma, kuras augšdaļā “Hei, piesakieties jau” tiek pārveidota veidlapa apakšā. Vienmērīgi animācijas efekti.

Šis ir piemērs, kā izveidot vienkāršu pieteikšanās veidlapu, izmantojot HTML5 un CSS3. Šajā veidlapā tiek izmantoti pseido elementi (: pēc un: pirms), lai izveidotu vairāku lappušu efektu. Šie elementi tiek pagriezti, izmantojot CSS3 transformācijas rekvizītu. Šajā veidlapā tiek izmantots HTML5, lai atvieglotu validāciju un iesniegšanu.

Kad šajā veidlapā ievadāt nepareizu paroli, jauks kratīšanas efekts brīdinās, ka neesat ievadījis pareizo paroli. Vienkāršs un efektīvs risinājums, kas norādīs uz nepareizu paroļu problēmu.

Pieteikšanās forma ar nelielu pārsteigumu. Izmēģiniet “admin” kā lietotājvārdu un “1234” kā paroli, lai iegūtu pilnu pieredzi.

Kārtīga maza pieteikšanās forma. Kad noklikšķināsiet uz “LOGIN” kreisajā pusē, animācijas efekts labajā pusē izveido nelielu pieteikšanās veidlapu. Noteikti unikāla pieeja!

Materiāla dizaina veidlapa

Diezgan vienkārša un vienkārša acu pieteikšanās veidlapā, ko varat pievienot savam emuāram vai jebkurai citai vietnei un uzlabot pieredzi. Nav nepieciešams pārlieku sarežģīt ar vienkāršu lietu, jo pieteikšanās forma ir. Pat tad, ja jūs tikai vācat abonentus, varat arī paspēlēties ar šo izkārtojumu un padarīt lietas dinamiskas.

Bootstrap fragmenta veidlapa

Acīmredzot šī nākamā bezmaksas HTML5 pieteikšanās veidlapa ir balstīta uz populāro Bootstrap Framework. Tas norāda, ka jūs varat sagaidīt jauku elastību, kas jāpraktizē jebkurai modernai vietnei un elementam. E-pasta adrese, parole un izvēles rūtiņa, lai atzīmētu, vai lietotājs vēlas, lai platforma atcerētos viņa informāciju. Viegli un pēc būtības.

Neatkarīgi no jūsu galvenā tīmekļa dizaina, jūs nevēlaties to pārāk sarežģīt ar tādām lietām kā pieteikšanās veidlapas. Tā vietā jūs vēlētos, lai tas būtu vienkāršs un ļautu tam darboties, lai lietotāji varētu netraucēti piekļūt saviem kontiem. Jūs neapšaubāmi sasniegsit šo mērķi, izmantojot šo pieteikšanās veidlapu ar plakanu lietotāja interfeisu.

Moderna lietotāja interfeisa komplektu veidlapa

No īpaši vienkāršām pieteikšanās veidlapām līdz tām, kurās notiek nedaudz vairāk darbību. Šis konkrētais ir diezgan līdzīgs, salīdzinot ar pēdējo, tikai ar to, ka jūs pamanīsit rāmi, kas iet ap visu formu. Lieciet viņiem ierakstīt savus vārdus vai lietotājvārdus un paroles, un viņi varēs iekļūt jūsu pārsteidzošajā pasaulē.

Informācijas paneļa CSS3 HTML5 veidlapa

Visas šajā sarakstā atrodamās HTML5 un CSS3 pieteikšanās veidlapas ir vienkārši lietojamas un bez piepūles pievienojamas jūsu tīmekļa platformai. Šim pat ir uzraksts “Aizmirsāt paroli?” apakšā visiem, kuri vienkārši nevar atcerēties savas paroles. Veidne ir lieliski piemērota informācijas paneļa ievadīšanai, taču varat to izmantot arī citām vajadzībām.

Piesakieties, izmantojot atkopšanas veidlapu

Virsraksts diezgan daudz izsaka visu; šī ir glīta, tīra un minimāla izskata pieteikšanās veidlapa ar atkopšanu. Jūs arī pamanāt, ka nav tradicionālās “lodziņas”, ko esat pieradis redzēt pieteikšanās veidlapu lietošanā. Ja vēlaties kaut ko mainīt, tagad zināt, kuru izkārtojumu izvēlēties.

Bezmaksas plakana pieteikšanās veidlapa ar satriecošu un elegantu tumšu izkārtojumu kopā ar zaļu aicinājuma uz darbību pogu. Protams, jūs varat mainīt rīku pēc savām vēlmēm, taču varat arī izmantot to tieši tādu, kāds tas ir, un nekavējoties ievietot to savā vietnē. Spēlējiet ar tā funkcijām un iestatiet visu tā, kā jums patīk.

Caurspīdīga pieteikšanās

Pat pieteikšanās forma var būt īpaši radoša un piesaista uzmanību. Lai gan daudzi pieturas pie vienkāršā un pamata izskata, ir citi, kuriem tas patīk īpašs un ekskluzīvs. Šī caurspīdīgā pieteikšanās veidlapa noteikti noderēs jūsu vietā. Izmantojot attēla fonu un veidlapu virs tā, šis izkārtojums var sekot jūsu zīmolam līdz T.

Nav nepieciešams pārāk padziļināti ar šo nākamo pieteikšanos, jo tas ir diezgan pašsaprotami. Tas ir saderīgs ar Google Chrome paplašinājumu, kā arī funkciju pogas tiem, kuri vēl nav reģistrējušies vai pazaudējuši paroli. Ja tas ir tas, ko meklējāt, ritināt līdz šim bija vairāk nekā tā vērts.

Eleganta plakana forma

Plakana, stilīga forma, ko varat pievienot savai tīmekļa vietai kā uznirstošo logu vai reklāmu kā logrīku lapā. Jebkurā gadījumā tas saglabās jūsu profesionālo pieeju neskartu. Tas ir vienkāršs un viegli uztverams, un tajā ir arī CTA ikvienam, kurš nokavēja pierakstīšanos jūsu dalībnieku zonā. Izmantojiet to tādu, kāds tas ir, vai uzlabojiet to atbilstoši savai gaumei.

Arvien vairāk vietņu īpašnieku ievieš sociālos pieteikšanos, un arī jūs varat pievienoties šai tendencei. Šī bezmaksas pieteikšanās veidlapa ar sociālo integrāciju ir pareizā izvēle. Tomēr kopā ar Twitter un Facebook pogām izkārtojumā ir arī tradicionālais reģistrēšanās veids, izmantojot e-pastu.

Ja jūsu parole ir ļoti sarežģīta, dažreiz vienkārši vēlaties to ievadīt “rādīšanas” režīmā. Piedāvājiet šo pašu funkciju visiem saviem lietotājiem, izmantojot pieteikšanās veidlapu parādīt un paslēpt paroli. Tam ir satriecošs tumšs izkārtojums ar zaļām detaļām, kas ir lieliski piemērotas tiem, kas izrauga šāda veida dizainu. Protams, nekautrējieties veikt tajā izmaiņas un pielāgot to atbilstoši savām vajadzībām.

Log 'N Ielādēt animētu veidlapu

Ja savā lapā jau praktizējat animācijas un specefektus, saglabājiet tendenci arī pieteikšanās veidlapā. Tā vietā, lai izveidotu savu, varat vienkārši izmantot šo pārsteidzošo Log ‘N Load animēto veidlapu, kas palīdzēs. Kad virzāt kursoru virs pieteikšanās pogas, veidlapa tiek parādīta tieši jūsu priekšā. Tam pat ir apļveida ielāde, kas uzlabo pieredzi.

Šī plakanā, modernā un ērti lietojamā pieteikšanās veidlapa lieliski darbojas visās ierīcēs, mobilajās ierīcēs, planšetdatoros un galddatoros. Varat arī izspēlēt dažādus uzlabojumus un precīzi mainīt noklusējuma iestatījumus atbilstoši savas vietnes stilam. Rīkam ir arī forši lidojuma efekti, kas piešķir izsmalcinātību vispārējai pieredzei.

CSS3 forma ar ēnu

Lai gan jūs varat pievienot savai vietnei šo un šo papildu funkciju, daudzi vēlas to atstāt bez uzmanības. Tas attiecas arī uz specefektiem, animāciju un citām lietām. Tomēr vienkāršs radošuma pieskāriens ēnas veidā var jums palīdzēt. Īpaši pieteikšanās veidlapai šai ierīcei ir ēna ar vienu noapaļotu malu.

Šis vienkāršais, modernais un elastīgais pieteikšanās logrīks ir vairāk nekā tikai jūsu nākamā pieteikšanās veidlapas veidne. Izskats ir tīrs un precīzs, piedāvājot pamatinformāciju un pēc tam dažus. Un šīs "tad dažas" ir pogas, lai izveidotu saiti uz aizmirsta lietotājvārda un paroles sadaļu. Turklāt ikvienam, kas jauns jūsu vietā, jaunā konta poga apgriež pieteikšanās logrīku un parāda . Gudri!

Jūs pilnībā kontrolējat savu vietni. Jūs varat izvēlēties, ko pievienot savai lapai vai nepievienot to. Un, ja meklējat pareizo HTML5 un CSS3 pieteikšanās veidlapu, mūsu rīcībā ir ļoti daudz. Turklāt tie visi ir bez maksas. Ne tikai to, bet arī varat rediģēt un pielāgot tos atbilstoši savām vēlmēm. Cik forši tas ir?

Zaļa un dzeltena forma

Svētā Patrika diena var nebūt šodien, taču jūs joprojām varat sekot tradīcijām un padarīt savu zīmolu zaļu. Tā vietā, lai tērētu laiku, izveidojot šāda stila pieteikšanās veidlapu no jauna, iegūstiet šo zaļo un dzelteno veidlapu un nosauciet to par dienu. Tas ir klāt, tikai viena klikšķa attālumā, gatavs un iestatīts, lai jūs varētu to izmantot un pilnībā izmantot.

Apvienojiet vienkāršību ar radošumu, un jūs iegūsit šo nežēlīgo pieteikšanās veidlapas logrīku ar izteiksmīgu rotējošu iekrāvēju. Pēdējais parādās tikai pēc tam, kad lietotājs aizpilda savu lietotājvārdu un paroli un nospiež pieteikšanās pogu. Izmēģiniet to pats, un jūs redzēsiet, cik tas ir lieliski un piesaista uzmanību.

Ar paroli aizsargāta veidlapa

Pievilcīga ar paroli aizsargāta veidlapa, kas sniedz trīs iespējas ierakstīt pareizo, pirms piedāvā to atgūt. Nekas nav pārāk sarežģīts, tomēr rezultāts izskatās fantastisks un pietiekami pielāgojams, lai to bez problēmām pievienotu savai vietnei vai lietojumprogrammai. Padariet to par savu, precizējot tā izskatu, un lieciet tam atbilst jūsu zīmola noteikumiem.

Ja vēlaties savā pieteikšanās lapā izkustināt pilnekrāna attēlu, šī caurspīdīgā HTML5 un CSS3 pieteikšanās veidlapa ir ideāli piemērota jums. Varat arī pievienot sava zīmola vai uzņēmuma logotipu un saglabāt visus savas tiešsaistes klātbūtnes segmentus tādā pašā zināšanu līmenī. Izmēģiniet dažādus pielāgošanas uzlabojumus, mainiet aicinājuma uz darbību pogas krāsu un uzlabojiet to ar savu paraksta stilu.

Runājot par mūsdienu, daži domā par minimālismu, bet citi iztēlojas kaut ko īpaši radošu un progresīvu. Ja jūs visvairāk meklējat pirmo, tad jums patiks šī modernā pieteikšanās veidlapa ar glītu kursora efektu uz aicinājuma uz darbību pogas. Logrīks sniedz arī iespēju saistīt to ar paroles atkopšanas lapu/veidlapu.
Lejupielādēt

Paldies, ka apmeklējāt Colorlib un lasījāt šo rakstu! Mēs to ļoti novērtējam! Tagad jūs varētu vēlēties uzzināt, kā izmantot mūsu bezmaksas.

Priekšgala tīmekļa izstrādātājs un tīmekļa dizaineris specializējas bezmaksas un augstākās kvalitātes WordPress motīvu izstrādē. Sāku mācīties kodēt pirms 2 gadiem un tagad esmu iepazinies ar CSS/HTML/JavaScript (jQuery) un PHP. Apsēsts ar lietojumprogrammu veiktspēju, lietotāja pieredzi un vienkāršību.

Informācijas atklāšana:Šajā lapā ir ietvertas ārējās saistītās saites, kuru rezultātā mēs varam saņemt komisijas maksu, ja izvēlēsities iegādāties minēto produktu. Šajā lapā sniegtie viedokļi ir mūsu pašu, un mēs nesaņemam papildu bonusu par pozitīvām atsauksmēm.

Šajā rakstā jūs uzzināsit kā izveidot reģistrācijas un autorizācijas veidlapu izmantojot HTML, JavaScript, PHP un MySql. Šādas veidlapas tiek izmantotas gandrīz katrā vietnē neatkarīgi no tās veida. Tie ir izveidoti forumam, tiešsaistes veikalam, sociālajiem tīkliem (piemēram, Facebook, Twitter, Odnoklassniki) un daudzu citu veidu vietnēm.

Ja jums ir vietne lokālais dators, tad es ceru, ka jums jau ir. Bez tā nekas nedarbosies.

Tabulas izveide datu bāzē

Lai ieviestu lietotāju reģistrāciju, vispirms mums ir nepieciešama datu bāze. Ja jums tas jau ir, tad lieliski, pretējā gadījumā jums tas ir jāizveido. Rakstā es sīki paskaidrošu, kā to izdarīt.

Un tā, mums ir datu bāze (saīsināti kā DB), tagad mums ir jāizveido tabula lietotājiem kurā pievienosim savus reģistrētos lietotājus.

Kā izveidot tabulu datu bāzē, es arī paskaidroju rakstā.

Tātad, mēs domājām, iedomājāmies, kādi lauki būtu mūsu formā, un izveidojām tabulu lietotājiem ar šiem laukiem:

• id- Identifikators. Lauks id Katrai datubāzes tabulai tai jābūt.
• pirmais_vārds- Lai saglabātu vārdu.
• uzvārds- Lai saglabātu uzvārdu.
• e-pasts- Lai saglabātu pasta adresi. Mēs izmantosim e-pastu kā pieteikšanos, tāpēc šim laukam ir jābūt unikālam, tas ir, ar UNIKĀLU indeksu.
• e-pasta_statuss- Lauks, lai norādītu, vai pasts ir apstiprināts vai nē. Ja pasts ir apstiprināts, tam būs vērtība 1, pretējā gadījumā vērtība ir 0. Pēc noklusējuma šī lauka vērtība būs 0.
• parole- Lai saglabātu paroli.

Visiem “VARCHAR” tipa laukiem ir jābūt noklusējuma vērtībai NULL.

Ja vēlaties, lai reģistrācijas veidlapā būtu daži citi lauki, varat tos pievienot arī šeit.

Tas ir viss, mūsu galds lietotājiem gatavs. Pāriesim uz nākamo posmu.

Datu bāzes savienojums

Mēs esam izveidojuši datu bāzi, tagad mums ir jāpieslēdzas tai. Mēs izveidosim savienojumu, izmantojot PHP paplašinājumu MySQLi.

Mūsu vietnes mapē izveidojiet failu ar nosaukumu dbconnect.php un ierakstiet tajā šādu skriptu:

DB savienojuma kļūda. Kļūdas apraksts: ".mysqli_connect_error()."

Šis fails dbconnect.php būs jāsavieno ar veidlapu apstrādātājiem.

Ievērojiet mainīgo $adrese_vietne, šeit es norādīju savas pārbaudes vietnes nosaukumu, pie kuras strādāšu. Lūdzu, attiecīgi norādiet savas vietnes nosaukumu.

Vietnes struktūra

Tagad apskatīsim mūsu vietnes HTML struktūru.

Mēs pārvietosim vietnes galveni un kājeni uz atsevišķi faili, header.php Un kājene.php. Mēs tos iekļausim visās lapās. Proti, galvenajā lapā (fails indekss.php), uz lapu ar reģistrācijas veidlapu (failu form_register.php) un uz lapu ar autorizācijas veidlapu (fails form_auth.php).

Bloķēt ar mūsu saitēm, reģistrācija Un autorizācija, pievienojiet tos vietnes galvenē, lai tie tiktu parādīti visās lapās. Viena saite tiks ievadīta plkst reģistrācijas veidlapas lapa(fails form_register.php) un otru uz lapu ar pilnvarojuma veidlapa(fails form_auth.php).

Header.php faila saturs:

Mūsu vietnes nosaukums

Rezultātā mūsu galvenā lapa izskatās šādi:

Protams, jūsu vietnei var būt pavisam cita struktūra, taču tas mums šobrīd nav svarīgi. Galvenais, ka ir saites (pogas) reģistrācijai un autorizācijai.

Tagad pāriesim uz reģistrācijas veidlapu. Kā jūs jau saprotat, mums tas ir reģistrēts form_register.php.

Dodieties uz datu bāzi (phpMyAdmin), atveriet tabulas struktūru lietotājiem un paskaties, kādi lauki mums ir vajadzīgi. Tas nozīmē, ka mums ir nepieciešami lauki vārda un uzvārda ievadīšanai, lauks pasta adreses ievadīšanai (Email) un lauks paroles ievadīšanai. Un drošības nolūkos mēs pievienosim lauku captcha ievadīšanai.

Serverī reģistrācijas veidlapas apstrādes rezultātā var rasties dažādas kļūdas, kuru dēļ lietotājs nevarēs reģistrēties. Tāpēc, lai lietotājs saprastu, kāpēc reģistrācija neizdodas, ir jāparāda ziņojumi par šīm kļūdām.

Pirms veidlapas parādīšanas pievienojiet bloku, lai parādītu sesijas kļūdu ziņojumus.

Un vēl viena lieta, ja lietotājs jau ir autorizēts un ziņkārības dēļ dodas uz reģistrācijas lapu tieši, ierakstot pārlūkprogrammas adreses joslā vietnes_adrese/form_register.php, tad šajā gadījumā reģistrācijas veidlapas vietā mēs parādīsim galveni, kurā norādīts, ka viņš jau ir reģistrēts.

Kopumā faila kods form_register.php mēs saņēmām šo:

Jūs jau esat reģistrēts

Pārlūkprogrammā lapa ar reģistrācijas veidlapu izskatās šādi:

Izmantojot nepieciešamais atribūts, mēs esam padarījuši visus laukus obligātus.

Pievērsiet uzmanību reģistrācijas formas kodam, kur tiek parādīts captcha:

Mēs norādījām ceļu uz failu attēla atribūta src vērtībā captcha.php, kas ģenerē šo captcha.

Apskatīsim faila kodu captcha.php:

Kods ir labi komentēts, tāpēc es koncentrēšos tikai uz vienu punktu.

Funkcijas iekšpusē imageTtfText(), ir norādīts ceļš uz fontu verdana.ttf. Tātad, lai captcha darbotos pareizi, mums ir jāizveido mape fonti un ievietojiet tur fonta failu verdana.ttf. To var atrast un lejupielādēt no interneta vai paņemt no arhīva kopā ar šī raksta materiāliem.

Esam pabeiguši ar HTML struktūru, ir pienācis laiks doties tālāk.

E-pasta derīguma pārbaude, izmantojot jQuery

Jebkurai formai ir jāpārbauda ievadīto datu derīgums gan klienta pusē (izmantojot JavaScript, jQuery), gan servera pusē.

Īpaša uzmanība jāpievērš laukam E-pasts. Ir ļoti svarīgi, lai ievadītā pasta adrese būtu derīga.

Šim ievades laukam mēs iestatām e-pasta veidu (type = "email"), kas mūs nedaudz brīdina par nepareiziem formātiem. Bet ar to nepietiek, jo, izmantojot koda inspektoru, ko mums nodrošina pārlūkprogramma, mēs varam viegli mainīt atribūta vērtību veids Ar e-pasts ieslēgts tekstu, un viss, mūsu čeks vairs nebūs derīgs.

Un šajā gadījumā mums ir jāveic uzticamāka pārbaude. Lai to izdarītu, mēs izmantosim jQuery bibliotēku no JavaScript.

Lai savienotu jQuery bibliotēku, failā header.php starp tagiem , pirms beigu atzīmes , pievienojiet šo rindu:

Tūlīt pēc šīs rindas mēs pievienosim e-pasta apstiprināšanas kodu. Šeit mēs pievienosim kodu, lai pārbaudītu ievadītās paroles garumu. Tā garumam jābūt vismaz 6 rakstzīmēm.

Izmantojot šo skriptu, mēs pārbaudām ievadītās e-pasta adreses derīgumu. Ja lietotājs ievadījis nepareizu e-pasta adresi, mēs par to parādām kļūdas ziņojumu un atspējojam veidlapas iesniegšanas pogu. Ja viss ir kārtībā, mēs noņemam kļūdu un aktivizējam veidlapas iesniegšanas pogu.

Un tā, mēs esam pabeiguši veidlapas validāciju klienta pusē. Tagad varam nosūtīt uz serveri, kur arī veiksim pāris pārbaudes un pievienosim datus datu bāzei.

Lietotāja reģistrācija

Veidlapu nosūtām uz failu apstrādei register.php, izmantojot POST metodi. Vārds šo failu apdarinātājs, kas norādīts atribūta vērtībā darbība. Un nosūtīšanas metode ir norādīta atribūta vērtībā metodi.

Atveriet šo failu register.php un pirmā lieta, kas mums jādara, ir ierakstīt sesijas palaišanas funkciju un savienot iepriekš izveidoto failu dbconnect.php(Šajā failā mēs izveidojām savienojumu ar datu bāzi). Un arī nekavējoties deklarēsim šūnas error_messages Un veiksmes_ziņojumi globālajā sesiju masīvā. IN kļūdu_ziņojumi mēs reģistrēsim visus kļūdu ziņojumus, kas rodas veidlapas apstrādes laikā un iekšā Succes_Messages, mēs ierakstīsim priecīgas ziņas.

Pirms turpinām, mums ir jāpārbauda vai veidlapa vispār tika iesniegta?. Uzbrucējs var apskatīt atribūta vērtību darbība no veidlapas un uzziniet, kurš fails apstrādā šo veidlapu. Un viņam var rasties doma tieši pāriet uz šo failu, ierakstot adreses josla pārlūkprogrammas adrese ir: http://site_address/register.php

Tāpēc mums ir jāpārbauda, ​​vai globālajā POST masīvā nav šūnas, kuras nosaukums atbilst mūsu pogas "Reģistrēties" nosaukumam no veidlapas. Tādā veidā mēs pārbaudām, vai ir nospiesta poga "Reģistrēties".

Ja uzbrucējs mēģina tieši piekļūt šim failam, viņš saņems kļūdas ziņojumu. Atgādināšu, ka mainīgais $address_site satur vietnes nosaukumu un tas tika deklarēts failā dbconnect.php.

Kļūda! galvenā lapa.

Captcha vērtība sesijā tika pievienota failā, kad tā tika ģenerēta captcha.php. Atgādinājumam es vēlreiz parādīšu šo faila koda daļu captcha.php, kur sesijai tiek pievienota captcha vērtība:

Tagad pāriesim pie pašas pārbaudes. Failā register.php, if blokā, kur mēs pārbaudām, vai tika noklikšķināta uz pogas "Reģistrēties", vai drīzāk, kur komentārs " // (1) Atstarpe nākamajai koda daļai"Mēs rakstām:

//Pārbaudīt saņemto captcha //Apgriezt atstarpes no rindas sākuma un beigām $captcha = trim($_POST["captcha"]);

Kļūda! if(isset($_POST["captcha"]) && !empty($captcha))( //Salīdzināt saņemto vērtību ar sesijas vērtību. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ja captcha nav pareizs, mēs atgriezīsim lietotāju reģistrācijas lapā, un tur parādīsim viņam kļūdas ziņojumu, ka viņš ievadījis nepareizu captcha $error_message = ".

Kļūda!"; // Saglabājiet kļūdas ziņojumu sesijā. $_SESSION["error_messages"] = $error_message; // Atgriezt lietotāju uz reģistrācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: " .$address_site ."/form_register.php" //Apturēt skriptu exit(); "

Nav verifikācijas koda, tas ir, captcha koda. Jūs varat doties uz galveno lapu.

Tālāk mums ir jāapstrādā saņemtie dati no POST masīva. Pirmkārt, mums ir jāpārbauda globālā POST masīva saturs, tas ir, vai tur ir šūnas, kuru nosaukumi atbilst ievades lauku nosaukumiem no mūsu formas.

Ja šūna pastāv, mēs apgriežam atstarpes no šīs šūnas rindas sākuma un beigām, pretējā gadījumā mēs novirzām lietotāju atpakaļ uz lapu ar reģistrācijas veidlapu.

Pēc tam, kad esam apcirpuši atstarpes, mēs pievienojam rindiņu mainīgajam un pārbaudām, vai šis mainīgais nav tukšs, tad mēs virzāmies tālāk, pretējā gadījumā mēs novirzām lietotāju atpakaļ uz lapu ar reģistrācijas veidlapu. Ielīmējiet šo kodu norādītajā vietā"".

// (2) Atstarpe nākamajai koda daļai /* Pārbaudiet, vai globālajā masīvā $_POST ir dati, kas nosūtīti no formas, un ietiniet iesniegtos datus parastajos mainīgajos.*/ if(isset($_POST["first_name"]))( //Izgrieziet atstarpes no sākuma un virknes beigas $first_name = trim($_POST["first_name"] //Pārbaudiet, vai mainīgais nav tukšs if(!empty($first_name))( // Drošības nolūkos konvertējiet);īpašās rakstzīmes

HTML entītijā $first_name = htmlspecialchars($first_name, ENT_QUOTES);

)else( // Saglabājiet kļūdas ziņojumu sesijā. $_SESSION["error_messages"] .= "

Lūdzu, ievadiet savu uzvārdu

Trūkst uzvārda lauka

Ievadiet savu e-pastu

Ievadiet savu paroli

Īpaši svarīga ir joma e-pasts. Mums ir jāpārbauda saņemtās pasta adreses formāts un unikalitāte datu bāzē. Tas ir, vai ir jau reģistrēts kāds lietotājs ar tādu pašu e-pasta adresi?

Norādītajā vietā" // (3) Koda atrašanās vieta, lai pārbaudītu pasta adreses formātu un tās unikalitāti" pievienojiet šādu kodu:

//Pārbaudiet saņemtās e-pasta adreses formātu, izmantojot regulāro izteiksmi $reg_email = "/^**@(+(*+)*\.)++/i";

//Ja saņemtās e-pasta adreses formāts neatbilst regulārajai izteiksmei if(!preg_match($reg_email, $email))( // Saglabājiet kļūdas ziņojumu sesijā. $_SESSION["error_messages"] .= "

"; //Atgriezt lietotāju uz reģistrācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: ".$address_site."/form_register.php"); //Apturēt skripta izeju(); ) // Mēs pārbaudām, vai šāda adrese jau atrodas datu bāzē ir tieši viena rinda, kas nozīmē, ka lietotājs ar šo e-pasta adresi jau ir reģistrēts if($result_query->num_rows == 1)( //Ja iegūtais rezultāts nav nepatiess if(($row = $result_query->fetch_assoc() ) != false) ( // Saglabājiet kļūdas ziņojumu sesijā. $_SESSION["error_messages"] .= "

"; //Atgriezt lietotāju uz reģistrācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: ".$address_site."/form_register.php"); )else( // Saglabājiet kļūdas ziņojumu uz sesiju $_SESSION["error_messages"] .= "

"; //Atgriezt lietotāju uz reģistrācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: ".$address_site."/form_register.php"); ) /* atlases aizvēršana */ $ result_query-> close(); Un tā, mēs esam pabeiguši visas pārbaudes, ir pienācis laiks pievienot lietotāju datu bāzei. Norādītajā vietā"" pievienojiet šādu kodu:

// (4) Vieta koda lietotāja pievienošanai datu bāzei

//Vaicājums lietotāja pievienošanai datu bāzei $result_query_insert = $mysqli->query("INSERT INTO `users` (vārds, uzvārds, e-pasts, parole) VALUES ("".$first_name."", "".$last_name ." ", "".$email.", "".$password."")");

Kļūda pieprasījumā pievienot lietotāju datu bāzei
Tagad jūs varat pieteikties, izmantojot savu lietotājvārdu un paroli.

Ja pieprasījumā pievienot lietotāju datu bāzei radās kļūda, mēs sesijai pievienojam ziņojumu par šo kļūdu un atgriežam lietotāju reģistrācijas lapā.

Citādi, ja viss noritēja labi, sesijai pievienojam arī ziņu, bet šoreiz patīkamāk, proti, lietotājam sakām, ka reģistrācija bija veiksmīga. Un mēs to novirzām uz lapu ar autorizācijas veidlapu.

Skripts e-pasta adreses formāta un paroles garuma pārbaudei ir failā header.php, tāpēc tas attieksies arī uz šīs veidlapas laukiem.

Sesija tiek sākta arī failā header.php, tāpēc failā form_auth.php Nav nepieciešams sākt sesiju, jo mēs saņemsim kļūdu.

Kā jau teicu, šeit darbojas arī skripts e-pasta adreses formāta un paroles garuma pārbaudei. Tāpēc, ja lietotājs ievadīs nepareizu e-pasta adresi vai īsu paroli, viņš nekavējoties saņems kļūdas ziņojumu. Poga pieteikšanās kļūs neaktīvs.

Pēc kļūdu novēršanas poga pieteikšanās kļūst aktīva, un lietotājs veidlapu varēs iesniegt serverī, kur tā tiks apstrādāta.

Lietotāja autorizācija

Lai piešķirtu vērtību darbība autorizācijas handikapam ir norādīts fails auth.php, tas nozīmē, ka veidlapa tiks apstrādāta šajā failā.

Un tā, atveriet failu auth.php un ierakstiet kodu, lai apstrādātu autorizācijas veidlapu. Pirmā lieta, kas jums jādara, ir sākt sesiju un savienot failu dbconnect.php lai izveidotu savienojumu ar datu bāzi.

//Deklarējiet šūnu, lai pievienotu kļūdas, kas var rasties, apstrādājot veidlapu.

$_SESSION["error_messages"] = "";

Kļūda!//Deklarēt šūnu veiksmīgu ziņojumu pievienošanai $_SESSION["success_messages"] = "";

//Pārbaudiet saņemto captcha if(isset($_POST["captcha"]))( //Izgrieziet atstarpes no rindas sākuma un beigām $captcha = trim($_POST["captcha"]); if(! tukšs($captcha ))( //Salīdzināt saņemto vērtību ar sesijas vērtību. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // Ja captcha ir nepareizs , mēs atgriezīsim lietotāju autorizācijas lapā, un tur parādīsim viņam kļūdas ziņojumu, ka viņš ievadījis nepareizu captcha $error_message = ".

Kļūda! if(isset($_POST["captcha"]) && !empty($captcha))( //Salīdzināt saņemto vērtību ar sesijas vērtību. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ja captcha nav pareizs, mēs atgriezīsim lietotāju reģistrācijas lapā, un tur parādīsim viņam kļūdas ziņojumu, ka viņš ievadījis nepareizu captcha $error_message = ".

Kļūda! Captcha ievades lauks nedrīkst būt tukšs.

Kļūda! Nav verifikācijas koda, tas ir, captcha koda. Jūs varat doties uz galveno lapu.

Ja lietotājs ievadīja verifikācijas kodu pareizi, mēs virzāmies tālāk, pretējā gadījumā mēs viņu atgriežam autorizācijas lapā.

Pasta adreses pārbaude

//Izgriezt atstarpes no rindas sākuma un beigām $email = trim($_POST["email"]);

if(isset($_POST["e-pasts"]))(if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Pārbaudiet saņemtās e-pasta adreses formātu, izmantojot regulāro izteiksmi $ reg_email = " /^**@(+(*+)*\.)++/i" //Ja saņemtās e-pasta adreses formāts neatbilst regulārajai izteiksmei if(!preg_match($reg_email, $email); ))( // Saglabāt sesijas kļūdas ziņojumā. $_SESSION["error_messages"] .= "

"; //Atgriezt lietotāju uz autorizācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: ".$address_site."/form_auth.php"); //Apturēt skripta izeju(); ) )else ( // Saglabājiet kļūdas ziņojumu sesijā. $_SESSION["error_messages"] .= "

Lauks pasta adreses (e-pasta) ievadīšanai nedrīkst būt tukšs.

Ja lietotājs ievadīja e-pasta adresi nepareizā formātā vai e-pasta adreses lauka vērtība ir tukša, mēs viņu atgriežam autorizācijas lapā, kur par to parādām ziņojumu.

Paroles pārbaude

Nākamais apstrādājamais lauks ir paroles lauks. Uz norādīto vietu" //(3) Vieta paroles apstrādei", mēs rakstām:

If(isset($_POST["parole"]))( //Apgriezt atstarpes no virknes sākuma un beigām $password = trim($_POST["parole"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES) //Šifrēt paroli $password = md5($password."top_secret");else( //Saglabāt kļūdas ziņojumu sesijā. $_SESSION["error_messages"] .= "

Ievadiet savu paroli

Trūkst paroles lauka

Šeit mēs izmantojam funkciju md5(), lai šifrētu saņemto paroli, jo mūsu paroles datu bāzē ir šifrētā veidā. Papildu slepenais vārds šifrēšanā, mūsu gadījumā " ļoti_slepens" jābūt tam, kas tika izmantots, reģistrējot lietotāju.

Tagad jums ir jāveic datubāzes vaicājums, lai atlasītu lietotāju, kura e-pasta adrese ir vienāda ar saņemto e-pasta adresi un kura parole ir vienāda ar saņemto paroli.

//Vaicājums datu bāzē, pamatojoties uz lietotāja izvēli.

$result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" UN parole = "".$password.""");

header("Atrašanās vieta: ".$adreses_vietne."/index.php");

Nepareizs pieteikšanās vārds un/vai parole

"; //Atgriezt lietotāju uz autorizācijas lapas galveni("HTTP/1.1 301 Moved Permanently"); header("Atrašanās vieta: ".$address_site."/form_auth.php"); //Apturēt skripta izeju(); ) ) Iziet no vietnes Un pēdējā lieta, ko mēs īstenojam, ir

vietnes pamešanas procedūra header.php. Šobrīd galvenē tiek rādītas saites uz autorizācijas lapu un reģistrācijas lapu. Vietnes galvenē (fails.

), izmantojot sesiju, mēs pārbaudām, vai lietotājs jau ir autorizēts. Ja nē, tad mēs parādām reģistrācijas un autorizācijas saites, pretējā gadījumā (ja viņš ir pilnvarots), tad reģistrācijas un autorizācijas saišu vietā mēs parādām saiti header.php:

Iziet

Modificēts koda fragments no faila

Reģistrācija Iziet Noklikšķinot uz saites iziet no vietnes, mēs tiekam novirzīti uz failu logout.php.

, kur mēs vienkārši iznīcinām šūnas ar sesijas e-pasta adresi un paroli. Pēc tam mēs atgriezīsim lietotāju atpakaļ lapā, kurā tika noklikšķināts uz saites iziet

Faila kods logout.php: Tas arī viss. Tagad jūs zināt, kā

ieviest un apstrādāt reģistrācijas un autorizācijas veidlapas lietotājs jūsu vietnē. Šīs veidlapas ir atrodamas gandrīz katrā vietnē, tāpēc katram programmētājam ir jāzina, kā tās izveidot. Mēs arī uzzinājām, kā pārbaudīt ievades datus gan klienta pusē (pārlūkprogrammā, izmantojot JavaScript, jQuery), gan servera pusē (izmantojot PHP valoda.

). Mēs arī mācījāmies

ieviest procedūru objekta pamešanai

Ja jums ir kādi jautājumi, lūdzu, sazinieties ar mani, un, ja pamanāt rakstā kļūdu, lūdzu, informējiet mani.

Nodarbības plāns (5. daļa):

1. Autorizācijas veidlapas HTML struktūras izveide
2. Mēs apstrādājam saņemtos datus
3. Vietnes galvenē mēs rādām lietotāja sveicienu

Vai jums patika raksts?

Pieteikšanās veidlapas var atrast vietnēs ar forumiem, veikaliem, WordPress un pārsvarā visam internetā, lai kaut kam piekļūtu, ir nepieciešama pieteikšanās forma. Viss tīmeklis ir nepilnīgs bez pieteikšanās veidlapām un reģistrācijas, reģistrēšanās veidlapām.

HTML veidlapas būs pirmās, ar kurām lielākā daļa no mums saskaras, un ar atbilstošu CSS, kas piešķir HTML struktūrai stilu. Šķiet, ka jaunākajās HTML versijās HTML ir izvēlējies CSS3 kā noklusējuma struktūras veidošanas opciju. Jebkurā gadījumā šeit atrodamas iepriekš izstrādātas HTML, CSS veidlapas, kuras ir izveidojuši priekšgala izstrādātāji un kuras ir kopīgotas sabiedrībai bez maksas.

Mēģiniet izmantot visas šīs bezmaksas pieteikšanās veidlapu veidnes, jo lielākajai daļai no tām ir arī iepriekš izveidotas HTML validācijas funkcijas, kā arī dažas jQuery vai HTML validācijas iespējas (piemēram, pieteikšanās/reģistrēšanās veidlapa ar caurlaides mērītāju zemāk).

Šis saraksts vēl nav beidzies, es vēlos atrast jaunus pieteikšanās veidlapu dizainus, tāpēc es turpināšu atjaunināt šo sarakstu ar jaunām pieteikšanās veidlapu veidnēm, kad tās parādīsies 2017. gadā. Sekojiet līdzi jaunumiem.

Sarkanā pieteikšanās forma

Vienkārša un efektīva pieteikšanās veidlapa jūsu vietnei, kurai nepieciešami pamata ievades lauki un bez papildu programmēšanas.

Plakans pieteikšanās veidlapas dizains, kas paredzēts jūsu vietnei, kas jau ir plakana. Lejupielādējiet un izmantojiet šo veidni jebkuram nolūkam.

Vai klientiem ir nepieciešama ātra pierakstīšanās? Neuztraucieties, šī glītā pieteikšanās veidlapa ļaus jums darboties bez problēmām. Lejupielādējiet avota kodu un pārbaudiet demonstrāciju, jo laukos varat ievietot lietotājvārda un paroles paraugu un mēģināt pieteikties. Jūs tiksit novirzīts uz profila lapu, kas izskatās lieliski ar atteikšanās pogu, kas parāda atteikšanās animāciju.

Tā kā Google materiālu dizains kļūst populārs salīdzinājumā ar plakano dizainu, šajā css3 veidnē mēs varam redzēt dziļu un rūpīgi ēnotu pieteikšanās veidlapu un reģistra veidlapu.

Šeit jūs saņemat vēl vienu izcilu pieteikšanās veidlapu savai busienss vietnei ar iespēju paslēpt/rādīt pieteikšanās laukus. Labi kodēts css/html/js dizains nodrošinās labāku ielādi, neietekmējot pašreizējo vietnes ātrumu.

Minimālā pieteikšanās forma ar mainīgu animāciju

Vienmērīga pieteikšanās veidlapas animācija, kas atver pieteikšanās sadaļu, noklikšķinot uz attēla vai pogas pēc vajadzības.

Minimālistiska pieteikšanās forma ar css

Šeit jūs atradīsiet vienkāršu pieteikšanās veidlapu UI, kas ir novietota uz pilnekrāna fona. Lejupielādes fails iegūs css un html, lai ērti ieviestu šo pieteikšanos savā vietnē.

Animēta pieteikšanās veidlapa

Teksta laukos parādītās klikšķu animācijas ir izcilas, un tajā ir redzama neliela lietotāja un paroles ikonu bīdāma animācija. Pēc tam varat pieteikties veidlapā, lai skatītu autentificēšanas priekšielādētāju, kā arī sveiciena atgriešanās bloku. Šī lejupielāde satur visus avota failus, lai ieviestu pieteikšanās veidlapu jūsu vietnei.

Eleganta pieteikšanās

Šī ir vienkārša pieteikšanās veidlapas versija, kuru varat parādīt savā vietnē, jo tā arī mazāk ietekmē vietnes ātrumu ar minimālo kodu.

Mierīgs pieteikšanās ekrāns

Tīra pieteikšanās forma ar animētu fonu, kas sniedz relaksējošu sajūtu visai lapai. Lejupielādējiet visu veidni zip formātā no Codepen.

Pieteikšanās un reģistrācijas forma

Ērti integrējiet šo plūstošo pieteikšanās un reģistrēšanās veidlapu savā vietnē. Zip fails ar šo lejupielādi nodrošinās jums css, html un js veidnes. Pieteikšanās sociālajos tīklos ir pieejama arī ar paroles rādīšanas/slēpšanas opcijām, lai ekrānā viegli ievadītu paroli.

Pieteikšanās forma ar Izveidot kontu

Pieteikšanās veidlapu, kas tiek parādīta ar izbalēšanas efektu, ir vienkārši uzjautrinoši skatīties. Šo efektu var redzēt tikai dažās modernās pieteikšanās formās. Izmantojiet pogu noklikšķiniet uz mani, lai mainītu veidlapu, lai reģistrētos vai izveidotu veidlapu.

Minimāla stila pieteikšanās veidlapu ar plakanu dizainu var lejupielādēt no tālāk esošās saites. HTML validācija ir pieejama un iestatīta šajā pieteikšanās veidnē.

Minimālā pieteikšanās veidlapas veidne

E-pasta validācija tiek veikta, un šī veidne ir tīra css, html bez izdomātiem jquery moduļiem.

Reģistrācijas/pieteikšanās veidlapa

Viena veidlapa, lai pieteiktos vietnē, kā arī reģistrēšanās, reģistrēšanās opcija, kuru var apgriezt ar klikšķi. Lai gan reģistrēšanās apgabalā trūkst dažu svarīgu lauku, tā tomēr ir labāka forma ar visām jaudīgajām funkcijām.

Šī pieteikšanās forma ir paslēpta, ja vien nenoklikšķināt uz pieteikšanās saites. Šī ir ļoti noderīga funkcija mūsdienu vietnei, kas var izvairīties no papildu lapas pieteikšanās. Parādiet pieteikšanos jebkurā jums tīkamajā lapā, izmantojot šo jaudīgo pieteikšanās veidlapu.

Tas tiek nodrošināts gan kā PSD, gan kā pilnībā kodēta HTML/CSS versija, lai jūs varētu nekavējoties sākt tās integrēšanu.

Pieteikšanās veidlapa (kodēta)

Profesionāla pieteikšanās forma. Lejupielādē ir iekļauts PSD fails, un es arī gribēju to kodēt, tāpēc es iekļāvu arī xHTML, Js un CSS failus.

Balta Vienkāršā pieteikšanās veidlapa

Tīra un vienkārša pieteikšanās veidlapa ar apaļu iesniegšanas pogu un elegantiem fokusa stāvokļiem.

Vienkārši pieteikšanās forma

Vienkārši pieteikšanās veidlapa veidota un izstrādāta, izmantojot tikai CSS3. Veidlapa ir izveidota, izmantojot diezgan vienkāršu marķējumu, un veidota, izmantojot ļoti pamata CSS3 rekvizītus.

Sveiki visiem. Tāpēc mēs esam iemācījušies dažus elementus, lai izveidotu formas. Ir pienācis laiks apvienot savas zināšanas, lai atrisinātu lielāku problēmu. Vietnē izveidosim vienkāršāko autorizācijas veidlapu. Lai to izdarītu, mums ir nepieciešami divi lauki, mēs izveidojam un pievienojam tiem parakstus.

Pirmais lauks ir paredzēts pieteikšanās, otrais ir parolei. Un ar otro tas nav tik vienkārši. Jo šobrīd tas ir tikai teksta ievades lauks.

Rezultāts pārlūkprogrammā:

Lai tajā ievadītais teksts tiktu aizstāts ar zvaigznītēm, kā tas ir ierasts šāda veida laukam, jums ir jāveic viena vienkārša darbība. Proti, lai aizstātu atribūta vērtību veids ieslēgts parole:

Rezultāts:

Veidlapas iesniegšanas poga

Lūk. Mūsu forma ir gandrīz gatava. Tagad, lai pabeigtu tās izveidi, jums ir jāizveido poga, kas iesniegs veidlapu. Problēma tiek atrisināta, izmantojot tagu ar tipu iesniegt.

Ja pogai vajadzētu būt ar kaut kādu uzrakstu, tad to var izdarīt, izmantojot atribūtu vērtību. Tas, vai piešķirt pogai nosaukumu, ir atkarīgs no jums, taču, ja to darāt, serveris saņems šo nosaukumu, kā arī pogas vērtību.

Parasti veidlapas iesniegšanas pogas nosaukums ir nepieciešams, ja formai ir vairākas pogas, no kurām katra veic noteiktu darbību. Pateicoties tam, serveris, saņemot no pārlūkprogrammas pogas nosaukumu un vērtību, saprot, uz kuras pogas lietotājs noklikšķināja un kas attiecīgi ir jādara.

Rezultātā mūsu veidlapas kods būs šāds:

Rezultāts pārlūkprogrammā: