Majesteetlike kasutajate registreerimisvorm. Kohandatud kasutaja registreerimisvormi loomine WordPressis
Avalikustamine: Teie tugi aitab saiti töös hoida! Me teenime mõnede sellel lehel soovitatud teenuste eest suunamistasu. rohkem teada saada
Jagamine on hoolimine!
Viimati uuendatud 17. detsembril 2019
Veebivorme kasutavad peaaegu kõik veebisaidid mitmesugustel eesmärkidel. Foorumite ja sotsiaalvõrgustike kasutajad kasutavad sisu lisamiseks ja teiste kasutajatega suhtlemiseks vorme. Veebisaidid, mida saab kohandada isikupärastatud kasutuskogemuse loomiseks (nt kohandatavad uudistevood), kasutavad vorme, mis võimaldavad kasutajatel hallata lehel kuvatavat sisu. Ja peaaegu iga veebisait kasutab vorme, mis võimaldavad veebisaidi külastajatel ühendust võtta veebisaiti haldava organisatsiooni või isikuga. Veebivormid on võimalikud tänu mitme tehnoloogia integreerimisele:
- HTML vormiväljade ja siltide loomiseks ning kasutaja sisendi vastuvõtmiseks.
- CSS vormi esitluse stiiliks.
- JavaScript vormisisestuse kinnitamiseks ja Ajaxi toega interaktsioonide pakkumiseks.
- Serveripoolsed keeled (nt PHP) vormiandmete töötlemiseks.
Selles juhendis käsitleme kõiki veebivormide loomiseks kasutatavaid HTML-i elemente. Meil on ka muid teemasid, nagu vormi koostamine , vormide kujundamine ja kujundamine ning vormide kasutatavuse ja juurdepääsetavuse tagamine .
Vormi struktuuri määratlemine
lõigu sisu.
Lõigu täiendav sisu
Brauseris renderdades oleks kontaktivorm ümbritsevast sisust selgelt eraldatud.
Väljakomplekti element on valikuline, kuid seda kasutatakse tavaliselt seotud elementide rühmitamiseks pikkadel ja keerukatel vormidel või vormiväljade eraldamiseks lähedalasuvatest elementidest, kui vorm esitatakse koos vormivälise sisuga. HTML5 lisas kolm atribuuti, mida saab väljakomplekti elementidele rakendada:
- keelatud: kasutatakse väljakomplekti kõigi vormide keelamiseks. Pange tähele, et kasutasime seda atribuuti ülaltoodud näitevormis.
- vorm: kasutatakse väljakomplekti seostamiseks ühe või mitme vormielemendi ID-ga. Pange tähele, et brauseri tugi sellele atribuudile on väga piiratud.
- nimi: seostab nime väljakomplektiga .
Sisendelement
Sõltuvalt loodava vormi tüübist on täiesti võimalik luua vorm, mis sisaldab ainult kahte tüüpi elemente: ühte vormielementi ja ühte või mitut sisendelementi. Elementi kasutatakse mitmesuguste sisendtüüpide loomiseks. väljad, millega vormi kasutajad saavad suhelda.
Levinud väärtused
Sisendelement on väga paindlik element, mille välimus ja käitumine võivad elemendile rakendatud tüübiatribuudi põhjal dramaatiliselt muutuda. Kõige tavalisemad tüübiväärtused on järgmised: tekst: atribuudi type="" vaikeväärtus. Määratleb ühe 20 tähemärgi laiuse tekstirea. Laiust saab reguleerida atribuudi size abil, nagu näete meie eelmise näite vormikoodis. parool: parooli tüüp on põhimõtteliselt sama mis tekstiväljal, välja arvatud see, et parooliväljale sisestatud märgid on maskeeritud. raadio: raadionuppe saab kasutada mitme valiku pakkumiseks, millest saab valida ainult ühe. märkeruut: Märkeruudud sarnanevad raadionuppudega, kuid korraga võib olla aktiivne rohkem kui üks valik. See tähendab, et märkeruutude komplektiga saab esitada mitu väärtust, samas kui raadionuppude komplekt aktsepteerib ainult ühte väärtust. Esita: Esitamise tüübi väärtus loob vormi esitamise nupu. Klõpsamisel sooritab vorm vormielemendiga seotud toiminguatribuudis määratud toimingu. Paljud vormid kasutavad ainult ühte või kahte sisestustüüpi ja enamik lihtsaid vorme on koostatud ainult ülaltoodud tüüpidest. Siiski on palju täiendavaid tüüpe, mida saate kasutada vormiandmete vastuvõtmiseks, mis ei sobi ühegi ülaltoodud tüüpiga.
vähem tuntud väärtused
Need sisestustüübid on vähem levinud kui ülalloetletud, kuid neid toetavad peaaegu kõik brauserid ja neid saab kasutada mitme erinevat tüüpi vormisisendite koostamiseks. nuppu: Kui soovite nupul klõpsamisel käivitada a, saab nupu sisestustüübi abil luua nupu, mida saab seostada mitmesuguste toimingutega. peidetud: seda atribuuditüüpi kasutatakse tavaliselt samaaegselt atribuudiga value, mida me hetkega katame, et lisada igale vormi esitamisele eelmääratletud väärtus. Näiteks kui teil on kontaktivormid viiel erineval lehel, saate lisada igale vormile esitada selle lehe nimi, kust kontaktvorm esitati. lähtestada: seda tüüpi kasutatakse lähtestamisnupu loomiseks, mis tagastab kõik vormiväljad nende vaikeolekusse. faili: kui soovite lubada vormi kasutajatel faile üles laadida ja esitada, annab selle võimaluse. pilt: Varem oli levinud pildi kasutamine saatmisnupuna. Kuigi see tüübi väärtus on endiselt kehtiv, ei kasutata seda tänapäevases veebivormide kujunduses kuigi sageli. Selle asemel kasutage nupu stiili loomiseks CSS-i.
Uus HTML5 lisatud väärtused
HTML5 spetsifikatsioonis on määratletud mitu täiendavat sisenditüüpi. Paljudel nendel tüüpidel on brauseri tugi piiratud. Nii et kui kasutate neid, kontrollige kindlasti veebilehelt caniuse.com brauseri tuge ja pakkuge vajaduse korral piisavaid varuvalikuid. otsing: see on õige tüüp määramaks, kas teie vorm pakub otsingufunktsioone. Erinevalt enamikust muudest HTML5-sse lisatud sisendite tüüpidest toetavad type="search" kõik brauserid. Pidage meeles, et see funktsioon ei paku tegelikult otsingufunktsiooni, vaid loob lihtsalt vormi sisestusvälja, mis on mõeldud kasutamiseks otsingufunktsiooni osana. värvi: kui see sisendtüüp on määratud, kuvatakse värviline nupp, mis käivitab põhivärvivaliku tööriista. Määrake värvi vaikeväärtus, kasutades väärtuse atribuuti ja kuueteistkümnendvärvikoodi, näiteks: . number: see tüüp loob välja numbri sisestamiseks, mille kasti paremal küljel on juurdekasvunupud. Vastuvõetavatele kirjetele saab määrata piiranguid atribuutidega max , min ja step, kuid brauserid, millel puudub selle elemendi tugi, naasevad tavaliselt standardsele tekstisisendile, mis neid piiranguid ei tunne. ulatus: Selle elemendi brauseri tugi on mõne erandiga üsna hea. Kasutage seda atribuuti liuguri loomiseks, mida saab kasutada väärtuse valimiseks määratud vahemikus. Näiteks loob see kood liuguri numbri 100 ja 1000 vahel valimiseks 50 kaupa: . Valitud väärtuse reaalajas eelvaate pakkumiseks peate vahemiku elemendi siduma mõne muu tehnikaga. Õnneks on HTML5 Doctoril lihtne viis seda teha väljundelemendi abil. Kuupäeva ja kellaaja tüübid: HTML5 lisas mitmeid sisestustüüpe, mida saab kasutada kellaaja ja kuupäeva väärtuste määramiseks. Näiteks määrab kuupäeva tüüp juhtelemendi aasta, kuu ja päeva sisestamiseks. Kuupäeva sisestusse aja lisamiseks kasutage ikooni datetime-local. Kui soovite kellaaega ilma kuupäeva teabeta, kasutage aja sisestustüüpi. Vähem spetsiifilised sisestustüübid hõlmavad kuu ja nädala valikuid, mida saab kasutada nädala või kuu valimiseks aasta sees ilma päeva või kellaaega määramata. Brauserid on seda tüüpi sisendile toe lisamisega aeglased, seega kontrollige kindlasti brauseri tuge ja pakkuge seda tüüpi sisendi kasutamisel varuvõimalusi. Kontaktandmete tüübid: Laialdane tugi on saadaval kolmele sisenditüübile, mida kasutatakse asjakohaste üksikasjade (nt e-posti aadressid (e-post), telefoninumbrid (tel) ja veebisaidi URL-id (url) kogumiseks.
Ühised sisendatribuudid
Kuigi atribuut tüüp on vaieldamatult enimkasutatav ja kasulikum sisendatribuut, on kasulike vormide koostamiseks vaja teada mitmeid muid atribuute. nimi: sisendelemendile määratud nimi esitatakse koos seotud väljale sisestatud väärtusega. Teisisõnu, kui selle koodiga sisendelemendisse sisestataks väärtus "Fred". esitatav väärtus oleks "first_name=Fred". väärtus: sisendelemendi väärtus täidab erinevat funktsiooni olenevalt sisendi tüübist, millele seda rakendatakse. Kui seda rakendatakse esitamis-, lähtestamis- või nuputüüpidele, kasutatakse väärtust nupu tekstina. Tekstiväljadele rakendatuna annab see väljaga seotud vaikeväärtuse. Kui see on seotud märkeruudu või raadionupuga, annab see väärtus väärtuse, mis selle väljaga valimisel seostatakse.
Kes suunas teid meie veebisaidile?:
roosa:
Punane:
Loe ainult: Kui sisendelemendi atribuutina kasutatakse kirjutuskaitstud funktsiooni, ei saa välja väärtust muuta. JavaScripti saab kasutada kirjutuskaitstud atribuudi eemaldamiseks pärast mõne muu toimingu, näiteks nupu klõpsamist või märkeruudu valimist. Näiteks kirjutuskaitstud saab rakendada esitatavale sisenditüübile ja eemaldada, kui valiti ruut, mis kinnitab, et kasutaja nõustus veebisaidi teenusetingimustega. puudega: kasutasime seda atribuuti selles õpetuses varem manustatud näidisvormiga. Kasutage seda atribuuti terve vormi, väljakomplekti või üksiku välja keelamiseks. suurus: Kasutage tekstisisestustüüpidega atribuuti size, et määrata välja nähtav laius, piiramata väljale sisestatavate märkide arvu. max pikkus: kui te ei soovi antud väljal lubada rohkem kui teatud arvu märke, kasutage maxlengthi, et piirata nende väljade arvu määratletud tähemärkidega. kontrollitud: kui soovite, et vormi laadimisel oleks märkeruut või raadionupp eelvalitud, rakendage see atribuut sellele sisendelemendile. Nendel atribuutidel on laialdane tugi ja neid kasutatakse tavaliselt vormidega, mida kohtate iga päev.
HTML5 lisanud uued atribuudid
HTML5 lisas palju uusi atribuute, mida saab seostada sisendelementidega. Mõnede nende elementide brauseri tugi on piiratud, seega kontrollige kindlasti tuge ja pakkuge toetamata brauserite kasutajatele varuvalikuid. automaatne täitmine: kui teie vorm sisaldab üldisi välju, võimaldab automaatse täitmise sisselülitamine külastajate brauseris soovitada kirjeid varem täidetud vormide põhjal. autofookus: kasutage seda atribuuti vormivälja tuvastamiseks, mis peaks vormi laadimisel fookuses olema. mitmekordne: atribuuti Mitu saab kasutada meili- ja failisisestustüüpidega, et vormi kasutajad saaksid sisestada rohkem kui ühe väärtuse. Kui seda kasutatakse e-posti sisestamiseks, saab esitada rohkem kui ühe e-posti aadressi, eraldades iga aadressi järgmisest komaga. Kui seda kasutatakse failisisendite jaoks, saab valida ja esitada korraga mitu faili. muster: võib juhtuda, et soovite täpsustada, et sisendi väärtus peab vastama teatud kriteeriumidele. Näiteks võite nõuda, et parooliväli sisaldaks vähemalt ühte suurtähte, ühte väiketähte ja ühte numbrit ning vastaks minimaalse pikkuse nõudele. Mustri atribuuti saab kasutada avaldiste loomiseks, mille alusel sisendväärtusi valideeritakse. Nende avaldiste kirjutamine, mida nimetatakse regulaaravaldisteks või RegExp-iks, ei kuulu selle õpetuse raamesse. Saate õppida regulaaravaldiste kohta Wikipedias ning seejärel kirjutada ja testida oma avaldisi tasuta veebisaidil RegExr. kohatäide: enamik vorme sisaldab kohatäite teksti, mis kaob kohe, kui klõpsate väljal või alustate tippimist. Kasutage seda atribuuti kohahoidja teksti lisamiseks ja määratlemiseks mis tahes teksti aktsepteerivate sisendite jaoks. nõutud: kui vormi teatud väljad on kohustuslikud, kasutage seda atribuuti, et vältida mittetäielike vormide esitamist. vormi: kui teil on kunagi vaja asetada sisendelement vormielemendist väljapoole, saate nihutatud elemendi seostada, kasutades vormiatribuuti ja rakendades väärtust, mis vastab vormile rakendatud atribuudile id. Vormi esitamise nupu käitumise muutmine Esitamiseks ja kujutise sisenditüüpide jaoks saab rakendada viit atribuuti, et alistada põhivormielemendile rakendatud atribuudid. Need atribuudid hõlmavad järgmist:
- moodustamine: määratlege vormi esitamise töötlemiseks põhivormi toiminguatribuudis tuvastatust erinev URL. Kasutatakse sageli siis, kui vorme saab töödelda mitmel viisil, et pakkuda erinevaid vormi esitamise valikuid.
- formenctüüp: määrake vormi esitamisel kasutatava kodeeringu tüüp. Kasutatav väärtus alistab vormi ülemelemendi atribuudile enctype rakendatud väärtuse.
- vormimeetod: Seda atribuuti kasutatakse määrake kas hankimise või postitamise meetodi väärtus ja see alistab emavormile rakendatud meetodi atribuudi.
- vorminovalidaat: kui te ei soovi, et vormi sisendit esitamisel kinnitataks, võite kasutada seda atribuuti.
- vormisihtmärk: alistage vormi ülemelemendile rakendatud sihtatribuut, rakendades selle atribuudi esitus- või kujutise sisenditüübi väljale.
Määrake type="image" suurus: kui kasutate vormi esitamise nupu loomiseks pildisisestustüüpi, saate kujutise suurust juhtida kõrguse ja laiuse atribuutide abil. Teise võimalusena saate sama teha ka CSS-iga. Enamik arendajaid ja disainereid soovitaks neid atribuute vältida ja nuppude välimust CSS-iga juhtida. Määrake arvväärtustele piirangud ja juurdekasvud: Saate kasutada atribuute min , max ja step, et määratleda minimaalsed ja maksimaalsed väärtused ning nende väärtuste vahele jäävad vastuvõetavad sammud iga sisendi jaoks, mis aktsepteerib arvväärtusi.
Rippmenüüd, tekstialad ja nupud
Sisendid ei ole ainsad elemendid, mida saab vormiväljade loomiseks kasutada. Vormidega saab seostada muud tüüpi elemente, et luua ripploendeid või valikuid, vabas vormis tekstialasid ja paindlikke nuppe.
Eeltäidetud rippmenüüd
Eeltäidetud valikute ripploendi loomiseks, millest veebisaidi külastaja saab valiku teha, kasutage välja loomiseks valikuelementi ja pesastage mitu valikuelementi, et luua erinevad valikud, mis peaksid rippmenüüs ilmuma. . Näiteks väljamõeldud e-poe jaoks pretensioonikate värvivalikute rippmenüü loomiseks võib kasutada järgmist koodi:
Pange tähele, et väärtus on see, mis vormiga tegelikult esitatakse, samas kui ava- ja sulgemärgendi vaheline tekst on see, mis esitatakse vormi täitvale külastajale. Näiteks kui külastaja valib „Lopsakas mets”, on vormiga esitatud tegelik väärtus roheline . Meie rippmenüü kuvatakse brauseris järgmiselt.
Tuulega pühitud liivadüün Lopsakas mets, rahutu vesi, sügav öö
Vabas vormis tekstialad
Kõik tekstisisendid, mida oleme seni näinud, näiteks , aktsepteerige ainult ühte tekstirida. Kui aga soovite luua pikema tekstisisestuse jaoks suurema tekstiala, siis üherealine sisestusväli ei tööta. Tekstiala element on õige valik suure tekstisisestusala loomiseks, mis suudab vastu võtta tekstisisestuse, mis ei tööta renderdada hästi ühel real. Tekstialal on kolm osa:
- Tekstiala luuakse avamise ja sulgemise siltide sisestamise teel. Kõik siltide vahele pesatud tekst laaditakse vormi laadimisel tekstialale ja esitatakse koos vormiga, välja arvatud juhul, kui vormi esitav külastaja teksti tekstialast välja ei kustuta.
- Kui soovite määrata tekstiala suurust, kasutage atribuuti rows, et määrata tekstiridade arv, mida peaks olema võimalik kuvada ilma tekstiala suurust muutmata.
- Eelmääratletud laiuse määramiseks kasutage atribuuti cols. Rakendatav väärtus on märkide arv, mis kuvatakse ühel real enne teisele reale mähkimist.
Tekstiala elementide suurust saab muuta. Ridade ja veergude atribuudid määravad aga tekstiala suuruse, kui brauser selle esimest korda renderdab, ja määravad ka minimaalse ruumi, mille suurust saab kohandada.
See kood loob kaks identse suurusega tekstiala, mis on kolme rea pikkused ja mahutavad 60 tähemärki rea kohta. Nende suurust saab muuta mis tahes suuruseks, mis on suurem kui vaikesuurus. Pange tähele, kuidas kohatäidetekst lisati esimesele koos kohatäiteelemendiga, kuid teises näites pesastatakse lihtsalt ava- ja sulgemärgendi vahele. Allpool näete, kuidas need kaks koodibitti renderdatakse.
Kuigi tekstiala suurust saab määrata ridade ja veergudega, on parem tava kasutada tekstialade stiili ja suuruse määramiseks CSS-i. Paljusid atribuute, mida saab rakendada sisendelementidele, saab rakendada ka tekstiala elementidele. Lisaks meie ülaltoodud näites sisalduvatele atribuutidele, mida saab tekstialadele rakendada, on järgmised: autofookus , keelatud , vorm , maxlength , nimi , kirjutuskaitstud , kohustuslik ja murramine .
Paindlikud nupud
Vormide jaoks nuppude loomiseks on kaks võimalust.
Oleme juba rääkinud sisendelemendist ja erinevatest tüüpidest, mida saab nuppude loomiseks kasutada. Miks siis on veel üks nupp? Nupuelemendid erinevad oma sisendnõbudest vähemalt kahel viisil.
- Kuna nupud koostatakse avamis- ja sulgemissildiga, saab avamis- ja sulgemärgendi vahele pesastada erinevat tüüpi sisu – tavaliselt teksti ja pilte – ning see renderdatakse nupul.
- Nupud ei pea olema vormielemendiga seotud. Neid saab kasutada eraldiseisvate nuppudena skriptide käivitamiseks, ankurelemendi sisuna ja muude toimingute tegemiseks.
HTML5-sse lisatud vormielemendid
HTML5-sse lisati kolm uut vormielementi: andmeloend: kasutage seda elementi sisendelemendi soovitatud automaatse täitmise väärtuste loendi esitamiseks. Andmeloendi elemendi kasutamiseks loo esmalt loendi atribuudiga sisendelement. Seejärel looge atribuudiga id andmeloendi element. Sisendloendi atribuudile rakendatud väärtus peab ühtima andmeloendi ID-ga. Väärtused lisatakse andmeloendisse, lisades andmeloendi avamise ja sulgemise siltide vahele valikuelemendid. Siin on näide sellest, kuidas see kõik töötab:
Kui me selle koodi brauseris renderdame, ilmub sisestuselement. Kui hakkame tippima, tehakse andmeloendis sisalduvate valikute põhjal automaatse täitmise soovitused. Pange tähele, et vormi esitavad kasutajad ei piirdu nende valikute valimisega. Soovi korral võivad nad siiski valida, kas sisestada väärtuse, mis ei ole kaasatud.
Mis on teie lemmik veebitehnoloogia?
väljund: kasutage seda elementi arvutuse tulemuse või kasutaja sisendi kuvamiseks. Seostage see sisendelemendiga, kasutades atribuuti for väärtusega, mis ühtib asjakohase sisendelemendi ID-ga, või seostage see vormiga, lisades vormiatribuudi, kasutades väärtust, mis ühtib asjakohase vormi ID-ga . Väljundelemendi saab siduda ka vahemiku elemendiga, et anda vormi kasutajatele teada täpne väärtus, mida esindab vahemiku elemendi liuguri praegune asukoht. Väljundi ja vahemiku elementide kasutamine sel viisil ei kuulu selle sissejuhatava õpetuse ulatusse, kuid kui soovite neid kahte elementi koos kasutada, saate selle tehnika kohta lisateavet HTML5 Doctorilt.
Järgmised sammud
See õpetus on andnud ülevaate elementidest, mida kasutatakse veebivormide koostamiseks. Järgmine samm on proovida mõningaid omandatud teadmisi. Teised selles jaotises olevad õpetused juhendavad teid broneerimisvormi loomise, vormide kujundamise ja kujundamise protsessi ning tagama, et teie vormid vastaksid kasutatavuse ja juurdepääsetavuse juhistele .
Korduma kippuvad küsimused
Kuidas piirata vormivälja ainult numbreid aktsepteerima?
Varem nõudis välja piiramine numbritega ainult JavaScripti kasutamist. Kuid pärast HTML5 väljalaskmist on nüüd lihtne piirata välja ainult numbriliste sisestustega. Lihtsalt rakendage numbri väärtus kohaldatava sisendelemendi tüübi atribuudile. Näiteks:
Renderdamisel loob tekstisisestusvälja, mis aktsepteerib ainult numbreid.
Kuidas piirata vormivälja nii, et see aktsepteeriks ainult tähtnumbrilisi märke?
Varem oli ainus viis väljasisestuse piiramiseks tähtnumbriliste tähemärkidega jQuery või JavaScripti kasutamine ja kohandatud funktsiooni loomine. HTML5 lisas aga sisendelementide mustriatribuudi, mida saab kasutada vormivälja piiramiseks, et see aktsepteeriks ainult tähtnumbrilist sisendit. Siin on kood, mis teeb asja ära:
Sel juhul aktsepteerib mustri element väiketähti, suurtähti ja numbreid. Väärtuse teine osa lokkis sulgudes määrab, mitu tähemärki kokku võib väljale sisestada. Vaatame, kuidas see brauseris välja näeb.
See toimib nii, et kui proovite esitada väärtusi, mis ei vasta määratud mustrile, kuvatakse pealkirja atribuut. Seega peaksite mustri atribuudi sisse panema mõned juhised, et kasutajad saaksid aru, mida nad on valesti teinud. . Selle suhteliselt uue atribuudi brauseri tugi on tõesti päris hea. IE 9 ja varasemad IE versioonid seda ei toeta ning Opera Minil puudub samuti tugi, kuid kõik teised brauserid toetavad seda atribuuti.
Kuidas panna vorm esitama, kui kasutaja vajutab sisestusklahvi?
Kui olete kohanud vormi, mida sisestusklahvi vajutamisel ei esitata, siis on keegi tahtlikult kujundanud vormi selliselt käituma – ja tegelikult poleks ta pidanud seda tegema. Veebi juurdepääsetavuse spetsifikatsioonid on selged: kujundusvormid, mis võimaldavad kaudset esitamist. Mis on kaudne esitamine? Vormi esitamine vajutades sisestusklahvi. Brauserid on loodud toetama kaudset esitamist. See toimib järgmiselt. Võtke näiteks see vorm:
Kui keskenduksite selle vormi mõnele elemendile ja vajutaksite sisestusklahvi, siis vorm esitatakse. See on kaudne esitamine ja kõik kaasaegsed brauserid toetavad seda käitumist. Kasutage vormi nupu elementi ja te ei pea isegi atribuudi tüübi jaoks esitamisväärtust kasutama. Vajutage sisestusklahvi, kui keskendute selle vormi mis tahes elemendile ja vorm esitatakse ikkagi.
Kuidas saavad arendajad seda käitumist murda? Üks võimalus sellest käitumisest mööda hiilida – ja selgesõnaliselt me ei soovita seda – on vormielementidest loobumine. Brauser teab, mida esitada, rühmitades kõik vormimärgendite vahele. Loobuge need sildid ja brauser ei tee seda. ei tea mida esitada. Teine viis, kuidas mõned arendajad brauseri käitumist manipuleerivad, on CSS-i kasutamine nuppude loomiseks, mitte korralike HTML-i elemente, nagu see.
Mis brauseri renderdamisel annaks nupu, mis näeb välja nagu nupp, kuid ei teinud sisestusklahvi vajutamisel midagi.
SubmitButton(polster: 10px 20px; ülemine veeris: 10px; taustavärv: #ddd; äärise raadius: 5px; ekraan: inline-block;).submitButton:hover(taustavärv: #ccc;).submitButton:active (taustavärv: #ddd;)
See õpetus näitab, kuidas muuta Joomla 3.x registreerimislehte.
Registreerimisvormi väljanimede muutmine
Registreerimisvormi väljade nimede muutmiseks järgige neid juhiseid:
Registreerimisvormi väljade muutmiseks tehke failis muudatused et-GB.com_users.ini asub kaustas keel/et-GB teie serveris. Kasutage käsku CTRL+F et leida tekst, mida soovite muuta. Saate failis muuta järgmisi väljade nimesid et-GB.com_users.ini:
Salasõna kinnitamine
(Kinnita salasõna)
E-posti aadress
Meili kinnitused
(Kinnita e-posti aadress)
ei ole vajalik
Nõutud väljad
(Nõutud väli)
Nimi
Kasutajanimi
Redigeeri faili et-GB.plg_user_profile.ini asub kaustas administraator/keel/et-GB oma serveris järgmiste päiste muutmiseks:
Aadress 1 (aadress 1)
Aadress 2 (aadress2)
Linn
Piirkond
Riik
Postiindeks (postiindeks)
Telefon
Veebileht
Lemmikraamat (Lemmikraamat)
Minust (Minust)
Sisestatud sünnikuupäev peab olema vormingus Aasta-kuu-päev, näiteks: 0000-00-00
Sünnikuupäev
Nuppude "Registreerimine" (Registreerimine) ja "Tühista" (Tühista) nimede muutmiseks muutke faili et-GB.ini kaustast keel/et-GB teie server.
Registreerimisvormilt väljade eemaldamine
Mõnede registreerimisvormi väljade keelamiseks peate tegema järgmist.
Uute väljade lisamine registreerimisvormile
Registreerimisvormile uute väljade lisamiseks tuleb teha muudatused nii mallifailides kui ka andmebaasis. Peate andmebaasis tegema järgmised muudatused:
Uue välja kuvamiseks oma saidil muutke järgmisi faile.
Tehke failis muudatused user.php kaustast raamatukogud/joomla/kasutaja. Leidke välja kood, mille järel tuleks uus väli lisada:
avalik $nimi = null;
Lisage selle koodi järel uue välja kood:
Avalik $field_label_here= null;
kus välja_nimi on teie välja nimi.
Tehke ka failis muudatused users.xml kaustast administraator/komponendid/com_users/models/forms.
Leidke välja kood, mille järel kuvatakse lisatud väli:
Lisage oma välja kood pärast seda koodi:
Asenda välja_silt_siin teie välja nimi. Samuti muuta Teie kirjeldus soovitud kirjeldusele.
Tehke failis muudatused register.xml kaustast komponendid/com_users/models/forms teie server. Lisage oma välja kood selle välja koodi alla, mille all uus väli kuvada.
Sellest artiklist saate teada kuidas luua registreerimis- ja autoriseerimisvormi kasutades HTML-i, JavaScripti, PHP-d ja MySql-i. Selliseid vorme kasutatakse peaaegu igal saidil, olenemata selle tüübist. Need on loodud foorumi, veebipoe ja jaoks sotsiaalsed võrgustikud(nagu näiteks Facebook, Twiter, Odnoklassniki) ja paljude muude saitide jaoks.
Kui teie kohalikus arvutis on sait, siis loodan, et teil on juba . Ilma selleta ei tööta midagi.
Tabeli loomine andmebaasis
Kasutaja registreerimise rakendamiseks vajame esmalt andmebaasi. Kui teil see juba on, siis suurepärane, muidu peate selle looma. Artiklis selgitan üksikasjalikult, kuidas seda teha.
Ja nii, meil on andmebaas (lühendatult DB), nüüd peame looma tabeli kasutajad kuhu lisame oma registreeritud kasutajad.
Kuidas andmebaasis tabelit luua, selgitasin ka artiklis. Enne tabeli loomist peame määratlema, milliseid välju see sisaldab. Need väljad ühtivad registreerimisvormi väljadega.
Niisiis, me mõtlesime, kujutasime ette, millised väljad meie vormil on, ja koostasime tabeli kasutajad nende väljadega:
- id- Identifikaator. Väli id peaks olema andmebaasi igas tabelis.
- eesnimi- Nime salvestamiseks.
- perekonnanimi- Perekonnanime salvestamiseks.
- meili- Postiaadressi salvestamiseks. Kasutame sisselogimiseks e-posti, seega peab see väli olema kordumatu, st sellel peab olema UNIKALNE indeks.
- email_status- Väli, mis näitab, kas kiri on kinnitatud või mitte. Kui kiri kinnitatakse, on selle väärtus 1, vastasel juhul on selle väärtus 0. Vaikimisi on selle välja väärtus 0.
- parool- Parooli salvestamiseks.
Kõik "VARCHAR" tüüpi väljad peavad vaikimisi olema NULL.
Kui soovite, et registreerimisvormil oleks rohkem välju, saate need ka siia lisada.
See on kõik, meie laud kasutajad valmis. Liigume edasi järgmise sammu juurde.
Andmebaasi ühendus
Oleme andmebaasi loonud, nüüd peame sellega ühenduse looma. Ühendame MySQLi PHP laienduse abil.
Looge meie saidi kaustas fail nimega dbconnect.php ja sellesse kirjutame järgmise skripti:
Andmebaasi ühenduse viga. Vea kirjeldus: ".mysqli_connect_error()."
"; exit(); ) // Määrake ühenduse kodeering $mysqli->set_charset("utf8"); //Lisage mugavuse huvides siia muutuja, mis sisaldab meie saidi nime $address_site = "http://testsite .local" ; ?>See fail dbconnect.php tuleb ühendada vormikäitlejatega.
Pöörake tähelepanu muutujale $aadress_sait, siin olen märkinud oma testsaidi nime, mille kallal töötan. Vastavalt sellele märgite oma saidi nime.
Saidi struktuur
Vaatame nüüd meie saidi HTML-i struktuuri.
Liigutage saidi päis ja jalus failide eraldamiseks, header.php Ja jalus.php. Me ühendame need kõigil lehtedel. Nimelt peamisel (fail index.php), lehele, kus on registreerimisvorm (fail form_register.php) ja volitusvormiga lehel (fail form_auth.php).
Blokeerige meie linkidega, registreerimine Ja luba, lisage saidi päisesse, nii et neid kuvatakse kõigil lehtedel. Siseneb üks link registreerimisvormi leht(fail form_register.php) ja teine lehele volituse vorm(fail form_auth.php).
Header.php faili sisu:
Meie saidi nimi
Selle tulemusena näeb meie avaleht välja selline:
Muidugi võib teie saidil olla täiesti erinev struktuur, kuid see pole meie jaoks praegu oluline. Peaasi, et registreerimiseks ja autoriseerimiseks on olemas lingid (nupud).
Liigume nüüd edasi registreerimisvormi juurde. Nagu te juba aru saite, on see meil failis form_register.php.
Me läheme andmebaasi (phpMyAdminis), avame tabeli struktuuri kasutajad ja vaata, milliseid põlde me vajame. Seega vajame välju ees- ja perekonnanime sisestamiseks, välja postiaadressi sisestamiseks (e-post) ja välja parooli sisestamiseks. Ja turvalisuse huvides lisame captcha sisestusvälja.
Serveris võib registreerimisvormi töötlemise tulemusena ilmneda erinevaid tõrkeid, mille tõttu ei saa kasutaja end registreerida. Seetõttu, et kasutaja saaks aru, miks registreerimine ebaõnnestub, on vaja kuvada talle nende vigade kohta teateid.
Enne vormi kuvamist lisame seansi veateadete kuvamiseks ploki.
Ja veel üks hetk, kui kasutaja on juba volitatud ja huvi pärast siseneb ta otse registreerimislehele, kirjutades brauseri aadressiribale website_url/form_register.php, siis sel juhul kuvame registreerimisvormi asemel selle pealkirja, et see on juba registreeritud.
Üldiselt faili kood form_register.php saime selle nii:
Sa oled juba registreeritud
Brauseris näeb registreerimisleht välja selline:
Via nõutav atribuut, oleme muutnud kõik väljad kohustuslikuks.
Pöörake tähelepanu registreerimisvormi koodile, kus kuvatakse captcha:
Me määrasime pildi atribuudi src väärtuses faili tee captcha.php, mis genereerib selle captcha.
Vaatame faili koodi captcha.php:
Kood on hästi kommenteeritud, seega keskendun vaid ühele punktile.
Funktsiooni sees imageTtfText(), on fondi tee määratud verdana.ttf. Seega, et captcha töötaks õigesti, peame looma kausta fonte ja pange sinna fondifail verdana.ttf. Saate selle leida ja alla laadida Internetist või võtta selle artikli materjalidega arhiivist.
Oleme HTML-i struktuuriga valmis, on aeg edasi liikuda.
Meili kinnitamine jQueryga
Iga vorm vajab sisestatud andmete valideerimist nii kliendi poolel (JavaScripti, jQuery abil) kui ka serveri poolel.
Peame pöörama erilist tähelepanu väljale E-post. On väga oluline, et sisestatud meiliaadress oleks kehtiv.
Selle sisestusvälja jaoks määrame tüübi email (type="email"), see hoiatab meid veidi valede vormingute eest. Kuid sellest ei piisa, sest brauseri pakutava koodiinspektori kaudu saate atribuudi väärtust hõlpsalt muuta tüüp alates meili peal tekst, ja kõik, meie tšekk enam ei kehti.
Ja sel juhul peame tegema usaldusväärsema kontrolli. Selleks kasutame JavaScripti jQuery teeki.
JQuery teegi ühendamiseks failis header.php siltide vahel , enne sulgevat silti , lisage see rida:
Vahetult pärast seda rida lisage meili kinnitamise kontrollkood. Siia lisame koodi sisestatud parooli pikkuse kontrollimiseks. See peab olema vähemalt 6 tähemärki pikk.
Selle skripti abil kontrollime sisestatud meiliaadressi kehtivust. Kui kasutaja sisestas vale e-posti, kuvame selle kohta veateate ja desaktiveerime vormi esitamisnupu. Kui kõik on korras, eemaldame vea ja aktiveerime vormi esitamisnupu.
Ja nii, vormi kinnitamisega kliendi poolel, olemegi valmis. Nüüd saame selle saata serverisse, kus teeme ka paar kontrolli ja lisame andmed andmebaasi.
Kasutaja registreerimine
Saadame vormi töötlemiseks faili register.php, POST-meetodi abil. Selle töötleja faili nimi, mis on määratud atribuudi väärtuses tegevust. Ja saatmismeetod on määratud atribuudi väärtuses meetod.
Ava see fail register.php ja esimene asi, mida peame tegema, on kirjutada seansi käivitamise funktsioon ja lisada varem loodud fail dbconnect.php(Selles failis lõime ühenduse andmebaasiga). Ja veel, deklareerige kohe rakud error_messages Ja edu_sõnumid seansi globaalses massiivis. IN veateated salvestame kõik veateated, mis ilmnevad vormi töötlemisel ja sisse edu_sõnumid Kirjutame rõõmsaid sõnumeid.
Enne jätkamist peame kontrollima kas ankeet üldse esitati. Ründaja saab vaadata atribuudi väärtust tegevust vormilt ja uurige, milline fail seda vormi töötleb. Ja tal võib tekkida idee minna otse selle faili juurde, tippides brauseri aadressiribale järgmise aadressi: http://site_site/register.php
Seega peame kontrollima, kas globaalses POST-massiivis on lahter, mille nimi ühtib vormil oleva nupu "Registreeri" nimega. Seega kontrollime, kas nuppu "Registreeri" vajutati või mitte.
Kui ründaja proovib otse sellesse faili minna, kuvatakse talle veateade. Tuletan meelde, et muutuja $address_site sisaldab saidi nime ja see deklareeriti failis dbconnect.php.
Viga! avaleht.
"); } ?>Seansi captcha väärtus lisati selle genereerimise ajal faili captcha.php. Meeldetuletuseks näitan veel kord seda koodijuppi failist captcha.php, kus seansile lisatakse captcha väärtus:
Liigume nüüd testi enda juurde. Failis register.php, if-ploki sees, kus kontrollime, kas vajutati nuppu "Registreeri" või õigemini, kus on kommentaar " // (1) Koht järgmise koodilõigu jaoks"Me kirjutame:
//Saadud captcha kontrollimine //Tühikute kärpimine stringi algusest ja lõpust $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Võrdle saadud väärtust seansi väärtusega. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Kui captcha ei ole õige, siis tagastage kasutaja registreerimislehele ja seal kuvame veateate, et ta sisestas vale captcha. $error_message = "
Viga! Sisestasite vale captcha
"; // Salvestage veateade seansi. $_SESSION["error_messages"] = $error_message; // Tagastab kasutaja registreerimislehe päises("HTTP/1.1 301 Moved Permanently"); header("Asukoht: " .$address_site ."/form_register.php"); //Peatage skripti väljumine(); ) // (2) Koht järgmise koodilõigu jaoks )else( //Kui captcha-d ei edastata või see on tühi, väljuge ("Viga! Kinnituskoodi pole, see tähendab captcha-koodi. Võite minna avalehele.
"); }Järgmisena peame töötlema POST-massiivist saadud andmeid. Kõigepealt peame kontrollima globaalse POST-massiivi sisu ehk seda, kas seal on lahtreid, mille nimed ühtivad meie vormi sisendväljade nimedega.
Kui lahter on olemas, siis kärbime selle lahtri stringi algusest ja lõpust tühikud, vastasel juhul suuname kasutaja registreerimisvormiga lehele tagasi.
Edasi, peale tühikute kärpimist, lisame muutujale stringi ja kontrollime selle muutuja tühjust, kui see pole tühi, siis liigu edasi, vastasel juhul suuname kasutaja registreerimisvormiga lehele tagasi.
Kleepige see kood määratud asukohta // (2) Koht järgmise koodilõigu jaoks".
/* Kontrollige, kas globaalses massiivis $_POST on vormilt saadetud andmeid ja lisage esitatud andmed tavaliste muutujate hulka. = trim($_POST["eesnimi"]); //Kontrolli, kas muutuja on tühi if(!empty ($eesnimi))( // Ohutuse huvides teisendage erimärgid HTML-i olemiteks $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "
Sisestage oma nimi
Nimeväli puudub
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["perenimi"]))( // Kärbi tühikuid stringi algusest ja lõpust $last_name = trim($_POST["perenimi"]); if(!empty($perenimi)) ( // Ohutuse huvides teisendage erimärgid HTML-i olemiteks $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Sisestage oma perekonnanimi
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Nimeväli puudub
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["email"]))( // Kärbi tühikuid stringi algusest ja lõpust $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Koodi koht e-posti aadressi vormingu ja selle unikaalsuse kontrollimiseks )else( // Salvestage veateade seansi. $_SESSION["error_messages" ] .= "Sisestage oma e-posti aadress
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= " "; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["parool"]))( // Kärbi tühikuid stringi algusest ja lõpust $password = trim($_POST["parool"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Parooli krüptimine $password = md5($password."top_secret"); )else( // Salvestage veateade seansile. $_SESSION["error_messages"] .= "Sisestage oma parool
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= " "; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) // (4) Koht kasutaja andmebaasi lisamise koodi jaoksValdkond on eriti oluline. meili. Peame kontrollima saabunud postiaadressi vormingut ja unikaalsust andmebaasis. See tähendab, kas sama meiliaadressiga kasutaja on juba registreeritud.
määratud kohas" // (3) Koodi koht postiaadressi vormingu ja kordumatuse kontrollimiseks" lisage järgmine kood:
//Kontrollige saabunud meiliaadressi vormingut regulaaravaldise $reg_email = "/^**@(+(*+)*\.)++/i" abil; //Kui vastuvõetud meiliaadressi vorming ei ühti regulaaravaldisega if(!preg_match($reg_email, $email))( // Salvestage veateade seansile. $_SESSION["error_messages"] .= "
Sisestasite vale e-posti aadressi
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) // Kontrollige, kas selline aadress on andmebaasis juba olemas $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Seal on täpselt 1 rida, seega on selle meiliaadressiga kasutaja juba registreeritud if($result_query->num_rows == 1)( //Kui tulemus ei ole võrdne valega if(($row = $result_query->fetch_assoc()) != false) ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Selle e-posti aadressiga kasutaja on juba registreeritud
"; //Tagastab kasutaja registreerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadress_sait."/form_register.php"); )else( //Salvesta veateade seansile .$_SESSION["error_messages"] .= "Viga andmebaasi päringus
"; //Tagastab kasutaja registreerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_register.php"); ) /* sulge valik */ $ result_query-> close(); //Skripti väljumise peatamine(); ) /* valiku sulgemine */ $result_query->close();Ja nii, oleme kõigi kontrollidega lõpetanud, on aeg lisada kasutaja andmebaasi. määratud kohas" // (4) Koht kasutaja andmebaasi lisamise koodi jaoks" lisage järgmine kood:
//Päring kasutaja lisamiseks andmebaasi $result_query_insert = $mysqli->query("INSERT INTO `kasutajad` (eesnimi, perekonnanimi, email, parool) VALUES ("".$eesnimi."", "".$perenimi ." ", "".$email."", "".$password."")"); if(!$result_query_insert)( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "
Tõrketaotlus kasutaja lisamiseks andmebaasi
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); )else( $_SESSION["success_messages"] = "Registreerimine edukalt lõpule viidud!!!
Nüüd saate oma kasutajanime ja parooliga sisse logida.
Kui kasutaja andmebaasi lisamise taotluses ilmneb viga, lisame seansile selle vea kohta teate ja tagastame kasutaja registreerimislehele.
Muidu, kui kõik läks hästi, lisame seansile ka teate, aga see on juba meeldivam, nimelt ütleme kasutajale, et registreerimine õnnestus. Ja suuname selle autoriseerimisvormiga lehele.
Failis on meiliaadressi vormingu ja parooli pikkuse kontrollimise skript header.php, seega mõjutab see ka selle vormi välju.
Seanss käivitatakse ka failis header.php, nii failis form_auth.php seanssi pole vaja käivitada, sest saame vea.
Nagu öeldud, töötab siin ka meiliaadressi vormingu ja parooli pikkuse kontrollimise skript. Seega, kui kasutaja sisestab vale meiliaadressi või lühikese parooli, saab ta koheselt veateate. Nupp tulla sisse muutub passiivseks.
Pärast vigade parandamist nupp tulla sisse muutub aktiivseks ja kasutaja saab vormi esitada serverisse, kus seda töödeldakse.
Kasutaja autoriseerimine
Väärtuse omistamiseks tegevust volitusvormil on fail auth.php, mis tähendab, et vormi töödeldakse selles failis.
Nii et avame faili auth.php ja kirjutage kood autoriseerimisvormi töötlemiseks. Esimene asi, mida teha, on seansi käivitamine ja faili kaasamine dbconnect.php andmebaasiga ühenduse loomiseks.
//Vormi töötlemisel tekkida võivate vigade lisamiseks deklareerige lahter. $_SESSION["error_messages"] = ""; //Deklareerige lahter edukate sõnumite lisamiseks $_SESSION["success_messages"] = "";
/* Kontrollige, kas vorm esitati, st kas klõpsati nuppu Logi sisse. Kui jah, siis läheme kaugemale, kui ei, siis kuvame kasutajale veateate, mis ütleb, et ta läks otse sellele lehele. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Järgmise koodilõigu koht )else( exit("
Viga! Olete sellele lehele otse sisenenud, seega pole töötlemiseks andmeid. Võite minna avalehele.
"); }//Kontrollige vastuvõetud captcha-d if(isset($_POST["captcha"]))( //Kärbi tühikuid stringi algusest ja lõpust $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Võrdle saadud väärtust seansi väärtusega. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Kui captcha on kehtetu, siis tagastame kasutaja autoriseerimislehele ja seal kuvame veateate, et ta sisestas vale captcha. $error_message = "
Viga! Sisestasite vale captcha
"; // Salvestage veateade seansi. $_SESSION["error_messages"] = $error_message; // Tagastab kasutaja autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: " .$address_site ."/form_auth.php"); //Peatage skripti väljumine(); ) )else( $error_message = "Viga! Captcha sisestusväli ei tohi olla tühi.
"; // Salvestage veateade seansi. $_SESSION["error_messages"] = $error_message; // Tagastab kasutaja autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: " .$address_site ."/form_auth.php"); //Stop the script exit(); ) //(2) Koht postiaadressi töötlemiseks //(3) Koht parooli töötlemiseks //(4) Koht for päringu tegemine andmebaasi )else ( //Kui captcha-d ei edastata exit("Viga! Kinnituskoodi pole, see tähendab captcha-koodi. Võite minna avalehele.
"); }Kui kasutaja on sisestanud kinnituskoodi õigesti, liigume edasi, vastasel juhul tagastame ta autoriseerimislehele.
E-posti aadressi kinnitamine
// Kärbi tühikuid stringi algusest ja lõpust $email = trim($_POST["email"]); if(isset($_POST["e-post"]))(if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Kontrollige vastuvõetud meiliaadressi vormingut regulaaravaldise $ abil reg_email = " /^**@(+(*+)*\.)++/i"; //Kui vastuvõetud meiliaadressi vorming ei ühti regulaaravaldisega if(!preg_match($reg_email, $email ))( // Salvesta seansi veateatesse.$_SESSION["error_messages"] .= "
Sisestasite vale e-posti aadressi
"; //Kasutaja tagastamine autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Postiaadressi (e-posti) sisestamise väli ei tohi olla tühi.
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "E-posti sisestamiseks ei ole välja
"; //Kasutaja tagastamine autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) // (3) Parooli töötlemise kohtKui kasutaja on sisestanud vales vormingus e-posti aadressi või meiliaadressi välja väärtus on tühi, suuname ta tagasi autoriseerimislehele, kus kuvame sellekohase teate.
Parooli kontroll
Järgmine töödeldav väli on parooliväli. määratud kohta" //(3) Paroolitöötluse koht", me kirjutame:
If(isset($_POST["parool"]))( // Kärbi tühikuid stringi algusest ja lõpust $password = trim($_POST["parool"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Krüpteeri parool $password = md5($password."top_secret"); )else( // Salvestage veateade seansile. $_SESSION["error_messages"] . = "
Sisestage oma parool
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Parooli sisestamiseks ei ole välja
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); )Siin krüpteerime funktsiooni md5 () abil vastuvõetud parooli, kuna andmebaasis on meil paroolid krüptitud kujul. Täiendav salasõna krüptimisel, meie puhul " ülisalajane" peab olema see, mida kasutati kasutaja registreerimisel.
Nüüd tuleb teha andmebaasi päring kasutaja valiku kohta, kelle meiliaadress võrdub vastuvõetud meiliaadressiga ja parool on võrdne vastuvõetud parooliga.
//Päring andmebaasi kasutaja valiku kohta. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" JA parool = "".$parool."""); if(!$result_query_select)( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "
Päringu viga andmebaasist kasutaja valimisel
"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); )else( //Kontrolli, kas andmebaasis pole selliste andmetega kasutajat, siis kuvatakse veateade if($result_query_select->num_rows == 1)( // Kui sisestatud andmed ühtivad andmebaasi andmetega, siis salvesta seansi massiivi sisselogimine ja parool. $_SESSION["email"] = $e-post; $_SESSION["password"] = $parool; //Tagasi kasutaja avalehe päisesse("HTTP/1.1 301 teisaldatud jäädavalt" ); header("Asukoht: ".$aadressi_sait ."/index.php"); )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "Vale kasutajanimi ja/või parool
"; //Kasutaja tagastamine autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) )Saidi väljumine
Ja viimane asi, mida me rakendame, on väljumisprotseduur. Hetkel kuvame päises linke autoriseerimislehele ja registreerimislehele.
Saidi päises (fail header.php), kontrollime seanssi kasutades, kas kasutaja on juba sisse logitud. Kui ei, siis kuvame registreerimis- ja autoriseerimislingid, vastasel juhul (kui see on volitatud), siis registreerimis- ja autoriseerimislinkide asemel kuvame linki Välju.
Muudetud koodiosa failist header.php:
registreerimine
Välju
Kui klõpsate saidilt väljumise lingil, siseneme faili logout.php, kus me lihtsalt hävitame seansi e-posti aadressi ja parooliga lahtrid. Pärast seda suuname kasutaja tagasi lehele, millel lingil klõpsati väljuda.
Faili kood logout.php:
See on kõik. Nüüd sa tead, kuidas rakendada ja töödelda registreerimis- ja autoriseerimisvorme kasutaja teie saidil. Neid vorme leidub peaaegu igal saidil, seega peaks iga programmeerija teadma, kuidas neid luua.
Õppisime ka sisendandmete valideerimist nii kliendi poolel (brauseris, JavaScripti, jQuery abil) kui ka serveri poolel (PHP keele abil). Õppisime ka rakendada väljalogimisprotseduuri.
Kõik skriptid on testitud ja töötavad. Selle väikese saidi failidega arhiivi saate alla laadida sellelt lingilt.
Tulevikus kirjutan artikli, kus kirjeldan. Ja plaanin ka kirjutada artikli, kus ma seletan (ilma lehte uuesti laadimata). Seega, et olla kursis uute artiklite ilmumisega, võite tellida minu saidi.
Kui teil on küsimusi, võtke ühendust, samuti, kui märkate artiklis viga, andke mulle teada.
Tunniplaan (5. osa):
- Autoriseerimisvormi jaoks HTML-i struktuuri loomine
- Töötleme saadud andmeid
- Kuvame saidi päises kasutaja tervituse
Kas meeldis artikkel?
WordPressil on registreerimisvorm, mis võimaldab uutel kasutajatel saidil registreeruda. Aga mis siis, kui soovite luua kohandatud registreerimisvormi, mis ei vasta WordPressi juhtpaneeli sätetele, ja lisada sellele uusi välju?
| Laadige alla valmis vormi pistikprogramm |
Tänases õpetuses saate teada, kuidas luua WordPressi registreerimisvormi, kasutades mallimärgendite ja lühikoodide kombinatsiooni.
Tavaline registreerimisvorm koosneb ainult kahest väljast – kasutajanimi ja e-post.
Kui registreerimisvormil on täita vaid kaks välja, on registreerimisprotsess väga lihtne. Esmalt sisestate oma kasutajanime ja e-posti aadressi, misjärel saadetakse teile automaatselt e-posti teel saidile sisenemise parool. Seejärel sisenete saidile, kasutades teile saadetud parooli, täitke oma profiil ja muudate parooli uueks, mille mõtlete ise välja ja mida saate hõlpsalt meeles pidada.
Või saate eelnimetatud registreerimisprotsessi oma saidil pisut muuta ja kasutada lisaks kahele juba saadaolevale väljale täiendavaid välju. See võib olla parooliväli, kasutaja saidi URL, mis tahes isiklik teave, hüüdnimi, perekonnanimi ja eesnimi.
Ja täna loome kohandatud registreerimisvormi WordPressi pistikprogrammi, kasutades järgmisi välju:
- Kasutajanimi
- parool
- Saidi URL
- perekonnanimi
- hüüdnimi
- isiklik informatsioon
Kohandatud registreerimisvormi saab WordPressi integreerida, kasutades pistikprogrammi lühikoodi ja sobivat mallisilti.
Lühikood võimaldab teil luua lehe ja muuta see oma saidi peamiseks registreerimisleheks. Saate postituses kasutada ka lühikoodi, et kasutaja saaks pärast mõne neile meeldiva artikli lugemist teie saidi värskendusi tellida.
Kui soovite lisada registreerimisvormi külgribale või mõnele teisele saidi lehele, peate muutma kasutatavat teemat ja asetama mallisildi kohta, kuhu soovite registreerimisvormi kuvada.
Enne pistikprogrammi loomisega alustamist tasub tähele panna, et vajame kasutajanime, parooli ja meilivälju.
Seda reeglit järgime valideerimisfunktsiooni loomisel.
Plugina loomine
Kõike eelnevat silmas pidades asume pistikprogrammi koodi kirjutamise juurde. Esmalt lisage pistikprogrammi pealkiri ja päis.
Seejärel loome PHP-funktsiooni, mis sisaldab registreerimisvormi HTML-koodi.
Funktsiooni registreerimisvorm ($kasutajanimi, $parool, $e-post, $veebisait, $eesnimi, $perekonnanimi, $hüüdnimi, $bio) ( kaja ""; kaja"
"; }Kas märkasite, et registreerimisväli lisati selle funktsiooni muutujana?
Funktsioonis näete näiteid järgmisest koodist:
(isset($_POST["lname"]) ? $perekonnanimi: null)
See konstruktsioon kontrollib kogu $_POST stringi komponente, veendumaks, et vorm sisaldab õigeid väärtusi. Kui jah, täidab see vormiväljad nende väärtustega, et säästa kasutajat sisestusväljale uuesti sisenemast.
Registreerimisvormis täidetud väljad tuleb kontrollida. Selleks loome valideerimisfunktsiooni register_validation .
Valideerimisprotsessi hõlbustamiseks kasutame WordPressi klassi WP_Error.
- Loome funktsiooni ja edastame registreerimisvälja argumendina funktsioonile. funktsioon register_validation($kasutajanimi, $parool, $e-post, $veebisait, $eesnimi, $perekonnanimi, $hüüdnimi, $bio) (
- Kasutame klassi WP_Error ja muudame muutuja globaalseks, et see saaks toimida juurdepääsuna väljaspool funktsiooni. globaalsed $reg_errors; $reg_errors = uus WP_viga;
- Pidage meeles, et eespool ütlesime, et vajame kasutajanime, parooli ja e-posti ning et neid ei tohiks vahele jätta? Seega lisame sellele reeglile kontrolli kõigi nende väljade kohta, kas need on tühjad. Kui neid ei täideta, siis lisame veateate globaalsesse klassi WP_Error. if (empty($username) || empty($password) || empty($email)) ( $reg_errors->add("väli", "Nõutav vormiväli puudub"); )
- Kontrollige kasutajanimes olevate märkide arvu. See peab olema vähemalt 4 tähemärki pikk. if (4 > strlen($kasutajanimi)) ( $reg_errors->add("kasutajanimi_pikkus", "Kasutajanimi liiga lühike. Nõutav on vähemalt 4 tähemärki"); )
- Kontrollime, kas selline sisestatud nimega kasutaja on süsteemis juba olemas. if (kasutajanimi_exists($kasutajanimi)) $reg_errors->add("kasutaja_nimi", "Vabandust, see kasutajanimi on juba olemas!");
- Kasutajanime kehtivuse kontrollimiseks kasutame WordPressi funktsiooni validate_username. if (! validate_username($kasutajanimi)) ( $reg_errors->add("kasutajanimi_kehtetu", "Vabandust, teie sisestatud kasutajanimi ei kehti"); )
- Kontrollime, et kasutaja sisestatud parool koosneks vähemalt 5 tähemärgist. if (5 > strlen($parool)) ( $reg_errors->add("parool", "Parooli pikkus peab olema suurem kui 5"); )
- Kontrollige, kas e-kiri on õigesti sisestatud. if (!is_email($email)) ( $reg_errors->add("e-post_invalid", "E-post ei kehti"); )
- Kontrollime, et sisestatud e-kiri poleks veel varem registreeritud. if (email_exists($email)) ( $reg_errors->add("email", "Email juba kasutusel"); )
- Kui saidi aadress on sisestatud, kontrollige, kas see on kehtiv. if (! empty($website)) ( if (! filter_var($website, FILTER_VALIDATE_URL)) ( $reg_errors->add("veebisait", "Veebisait ei ole kehtiv URL"); ) )
- Lõpuks vaatame vigade otsimiseks läbi näite WP_Error ja kuvame iga vea eraldi, kui neid on. if (is_wp_error($reg_errors)) ( foreach ($reg_errors->get_error_messages() kui $error) ( echo " "; kaja" VIGA:"; kaja $viga . ""; } }
"; kaja"
See on kõik! See lõpetab funktsioonikoodi.
täielik registreerimine()
Ja kasutaja registreerimine ise toimub tegelikult funktsiooni wp_insert_user abil, mis aktsepteerib mitmeid kasutajaandmeid.
Funktsioon complete_registration() ( globaalne $reg_errors, $kasutajanimi, $parool, $e-post, $veebisait, $eesnimi, $perekonnanimi, $hüüdnimi, $bio; if (1 > count($reg_errors->get_error_messages())) ( $ kasutajaandmed = array("kasutaja_sisselogimine" => $kasutajanimi, "kasutaja_e-post" => $e-post, "kasutaja_pääs" => $parool, "kasutaja_url" => $veebisait, "eesnimi" => $eesnimi, "perenimi" => $ perekonnanimi, "hüüdnimi" => $hüüdnimi, "kirjeldus" => $bio,); $user = wp_insert_user($userdata); echo "Registreerimine on lõpetatud. Mine sisselogimislehele."; ) )
Ülaltoodud funktsioonis complete_registration() lõime $reg_errors WP_Error näite ja muutuja vormi väljad, et muutujale oleks globaalne juurdepääs.
Seejärel kontrollime, et näidet käsitlev muutuja $reg_errors ei sisalda vigu. Kui viga ei leita, jätkake $userdata sisestamisega, sisestage kasutajaandmed WordPressi andmebaasi ja kuvage teade " registreerimine edukalt lõpule viidud koos lingiga sisselogimislehele.
custom_registration_function()
Järgmisena on meil suurepärane funktsioon, mis aktiveerib kõik meie loodud funktsioonid.
Funktsioon custom_registration_function() ( if (isset($_POST["submit"])) ( register_validation($_POST["kasutajanimi"], $_POST["parool"], $_POST["e-post"], $_POST["veebisait "], $_POST["fname"], $_POST["lname"], $_POST["hüüdnimi"], $_POST["bio"]); // desinfitseerige kasutaja vormisisene globaalne $kasutajanimi, $parool, $ e-post, $veebisait, $eesnimi, $perekonnanimi, $hüüdnimi, $bio; $kasutajanimi = sanitize_user($_POST["kasutajanimi"]); $parool = esc_attr($_POST["parool"]); $e-post = sanitize_email( $_POST["e-post"]); $veebisait = esc_url($_POST["veebisait"]); $eesnimi = sanitize_text_field($_POST["fname"]); $last_name = sanitize_text_field($_POST["lname"]) ; $hüüdnimi = sanitize_text_field($_POST["hüüdnimi"]); $bio = esc_textarea($_POST["bio"]); // kutsuge kasutaja loomiseks funktsiooni @function complete_registration // ainult siis, kui WP_viga ei leitud complete_registration($ kasutajanimi, $parool, $e-post, $veebisait, $eesnimi, $perenimi, $hüüdnimi, $bio); ) registreerimisvorm($kasutajanimi, $parool, $emai l, $veebisait, $eesnimi, $perenimi, $hüüdnimi, $bio); )
Nüüd selgitame funktsiooni koodi custom_registration_function().
Esmalt tuvastame, et vorm on esitatud, kontrollides, kas $_POST["esita"] on seadistatud. Kui jah, siis kasutame kasutaja esitatud vormi kinnitamiseks funktsiooni register_validation. Seejärel kontrollime vormiandmeid ja sisestame need vormiväljaga sama nimega muutujasse. Lõpuks kasutame kasutaja registreerimiseks täielikku_registreerimist.
Ja funktsioon register_form kuvab registreerimisvormi.
Lühikood
Kas mäletate, kui ütlesime, et pakume registreerimispluginale lühikoodide tuge? Allpool on lühikoodi asjakohane kood:
// Registreerige uus lühikood: add_shortcode("cr_custom_registration", "custom_registration_shortcode"); // Tagasihelistamise funktsioon, mis asendab funktsiooni custom_registration_shortcode() ( ob_start(); custom_registration_function(); return ob_get_clean(); )
Siin oleme pistikprogrammi kodeerimisega valmis. Allolev pilt illustreerib, kuidas registreerimisvorm välja näeb.
Kuid pidage meeles, et teie loodud WordPressi kasutaja registreerimisvorm võib sõltuvalt CSS-ist veidi erineda.
Plugina kasutamine
WordPressi postitusele või lehele pistikprogrammi lisamiseks kasutage lühikoodi .
Registreerimisvormi lisamiseks konkreetsele saidile kasutatava teema raames lisage järgmine mallimärgend:
Järeldus
Tänases postituses vaatasime läbi pistikprogrammi loomise protsessi, mis lisab WordPressi saidile kohandatud registreerimisvormi. Esitatud teabe põhjal saate täita täidetavate väljade arvu, kuid ainult siis, kui veenduge, et vormi väljad on kehtivad metaandmed wp_insert_user jaoks.
Siin on õpilasele mõeldud html-koodi näide registreerimisvorm. Selles näites oleme kuvanud palju tekstivälju, raadionuppu, nuppu Lähtesta ja nuppu Esita vorm. Oleme kasutanud nuppu Lähtesta, mis lähtestab kõik väljad tühjaks. Oleme õpilaste registreerimisvormis kasutanud JavaScripti valideerimist.
Siin on näide õpilaste registreerimisvormi html-koodist. Selles näites oleme kuvanud palju tekstivälju, raadionuppu, nuppu Lähtesta ja nuppu Esita vorm. Oleme kasutanud nuppu Lähtesta, mis lähtestab kõik väljad tühjaks. Oleme õpilaste registreerimisvormis kasutanud JavaScripti valideerimist.õpilaste registreerimisvormi html-kood
Siin on näide õpilaste registreerimisvormi html-koodist. Selles näites oleme kuvanud palju tekstivälju, raadionuppu, nuppu Lähtesta ja nuppu Esita vorm. Oleme kasutanud nuppu Lähtesta, mis lähtestab kõik väljad tühjaks. Oleme õpilaste registreerimisvormis kasutanud JavaScripti valideerimist. Kui te väärtust tekstiväljale ei sisesta, kuvatakse veateade. Selles näites oleme muutnud iga välja sisestamise kohustuslikuks, mistõttu kuvatakse viga, kui üks neist pole õigesti täidetud. Programmeerija saab seda siiski vastavalt kohandada.
Kui kõik väljad on õigesti täidetud, lisab andmed esitamise vormi. Programmeerija saab seda esitamisvormi kasutada vastavalt oma soovile, kas saata/suunata teisele lehele või salvestada andmebaasi.
Siin on videoõpetus teemal "Kuidas luua õpilaste registreerimisvormi HTML-is?":
Ülaltoodud videojuhises oleme selgitanud, kuidas teha õpilaste registreerimiseks html-lehte ja kinnitada see JavaScriptiga. JavaScripti kasutatakse veebirakendustes HTML-lehe kinnitamiseks. Tänapäeval kasutatakse Ajaxi ja jQueryt ka dünaamiliste veebirakenduste tegemiseks.
StudentRegistration.html
Vormi kinnitamine
Funktsioon validate() ( if(document.StudentRegistration.textnames.value == "") ( alert("Sisestage oma nimi!"); document.StudentRegistration.textnames.focus() ; return false; ) if(document.StudentRegistration .fathername.value == "") ( alert("Sisestage oma isa nimi!"); document.StudentRegistration.fathername.focus() ; return false; ) if(document.StudentRegistration.paddress.value == "") ( alert("Palun sisestage oma postiaadress!"); document.StudentRegistration.paddress.focus() ; return false; ) if(document.StudentRegistration.personaladdress.value == "") ( alert("Palun esitage oma isiklik aadress !"); document.StudentRegistration.personaladdress.focus() ; return false; ) if ((StudentRegistration.sex.checked == false) && (StudentRegistration.sex.checked == false)) ( alert ("Palun vali oma sugu : Male või Female"); return false; ) if(document.StudentRegistration.City.value == "-1") ( alert("Sisestage oma linn!"); document.StudentR egistration.City.focus() ; tagastama vale; ) if(document.StudentRegistration.Course.value == "-1") ( alert("Palun esitage oma kursus!"); return false; ) if(document.StudentRegistration.District.value == "-1") ( alert("Palun esitage oma valitud piirkond!"); return false; ) if(document.StudentRegistration.State.value == "-1") ( alert("Palun esitage oma valitud osariik!"); return false; ) if (document.StudentRegistration.pincode.value == "" || isNaN(document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6) ( alert("Palun sisestage PIN-kood vormingus ######."); document.StudentRegistration.pincode.focus() ; return false; ) var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@"); dotpos = email.lastIndexOf("."); if (e-post == "" || atpos
