Izrada prilagođenog obrasca za registraciju korisnika u WordPressu. Izrada prilagođenog WordPress obrasca za registraciju korisnika Dodavanje novih polja u obrazac za registraciju

Ovdje je primjer html koda za obrazac za registraciju studenata. U ovom smo primjeru prikazali mnoga tekstualna polja, radio gumb, gumb Reset i gumb Pošalji obrazac. Koristili smo gumb Reset koji vraća sva polja na prazna. Koristili smo JavaScript provjeru valjanosti u obrascu za registraciju studenata.

Ovdje je primjer html koda za obrazac za registraciju studenata. U ovom smo primjeru prikazali mnoga tekstualna polja, radio gumb, gumb Reset i gumb Pošalji obrazac. Koristili smo gumb Reset koji vraća sva polja na prazna. Koristili smo JavaScript provjeru valjanosti u obrascu za registraciju studenata. html kod za obrazac za prijavu studenata

Ovdje je primjer html koda za obrazac za registraciju studenata. U ovom smo primjeru prikazali mnoga tekstualna polja, radio gumb, gumb Reset i gumb Pošalji obrazac. Koristili smo gumb Reset koji vraća sva polja na prazna. Koristili smo JavaScript provjeru valjanosti u obrascu za registraciju studenata. Ako ne unesete vrijednost u tekstualno polje, prikazat će se poruka o pogrešci. U ovom smo primjeru unos u svako polje učinili obaveznim, stoga se prikazuje pogreška ako jedno od njih nije ispravno ispunjeno. Međutim, programer ga može prilagoditi u skladu s tim.

Kada su sva polja ispravno popunjena, obrazac za slanje dodaje podatke. Programer može koristiti ovaj obrazac za slanje kako želi, ili ga može poslati/preusmjeriti na drugu stranicu ili ga spremiti u bazu podataka.

Evo video tutoriala "Kako kreirati obrazac za registraciju učenika u HTML-u?":

U gornjim video uputama objasnili smo vam kako napraviti html stranicu za registraciju studenata i potvrditi je JavaScriptom. JavaScript se koristi za provjeru valjanosti HTML stranice u web aplikacijama. Danas se Ajax i jQuery također koriste za izradu dinamičkih web aplikacija.

StudentRegistration.html

Obrazac za prijavu studenata
Ime
ime Oca
Poštanska adresa
osobna adresa
seks muško Žensko
Grad odaberite.. NEW DELHI MUMBAI GOA PATNA
tečaj odaberite.. B.TECH MCA MBA BCA
Okrug odaberite.. NALANDA GORE GOA PATNA
država odaberite.. NEW DELHI MUMBAI GOA BIHAR
PIN kod
EmailId
DOB
Broj mobitela

Provjera valjanosti obrasca

Funkcija validate() ( if(document.StudentRegistration.textnames.value == "") ( alert("Molimo unesite svoje ime!"); document.StudentRegistration.textnames.focus() ; return false; ) if(document.StudentRegistration .fathername.value == "") ( upozorenje("Molimo navedite svoje ime oca!"); document.StudentRegistration.fathername.focus() ; return false; ) if(document.StudentRegistration.paddress.value == "") ( alert("Molimo navedite svoju poštansku adresu!"); document.StudentRegistration.paddress.focus() ; return false; ) if(document.StudentRegistration.personaladdress.value == "") ( alert("Molimo navedite svoju osobnu adresu !"); document.StudentRegistration.personaladdress.focus() ; return false; ) if ((StudentRegistration.sex.checked == false) && (StudentRegistration.sex.checked == false)) ( upozorenje ("Molimo odaberite svoj spol : Muškarac ili žena"); return false; ) if(document.StudentRegistration.City.value == "-1") ( alert("Molimo navedite svoj grad!"); document.StudentRegistration.City.focus() ; vratiti lažno; ) if(document.StudentRegistration.Course.value == "-1") ( upozorenje("Molimo navedite svoj tečaj!"); return false; ) if(document.StudentRegistration.District.value == "-1") ( upozorenje("Molimo da navedete svoju odabranu državu!"); return false; ) if(document.StudentRegistration.State.value == "-1") ( upozorenje("Molimo da unesete svoju odabranu državu!"); return false; ) ako (document.StudentRegistration.pincode.value == "" || isNaN(document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6) ( upozorenje("Molimo da navedete pin kod u formatu ######."); document.StudentRegistration.pincode.focus() ; return false; ) var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@"); dotpos = email.lastIndexOf("."); ako (e-pošta == "" || na pos

Ovaj vodič će vam pokazati kako izmijeniti stranicu za registraciju u Joomla 3.x.

Promjena naziva polja obrasca za registraciju

Da biste promijenili nazive polja obrasca za registraciju, slijedite ove upute:

Da biste unijeli izmjene u polja obrasca za registraciju, napravite promjene u datoteci en-GB.com_users.ini koja se nalazi u mapi language/en-GB na vašem poslužitelju. Koristite naredbu CTRL+F kako biste pronašli tekst koji želite promijeniti. Možete promijeniti sljedeće nazive polja u datoteci en-GB.com_users.ini:

    Obavezna polja

    (Obavezno polje)

    Ime

    Korisničko ime

  • potvrda lozinke

    (Potvrdi lozinku)

    Email adresa

    Potvrde putem e-pošte

    (Potvrdi email adresu)

    nije potrebno

Uredite datoteku en-GB.plg_user_profile.ini koja se nalazi u mapi administrator/language/en-GB na vašem poslužitelju kako biste promijenili sljedeća zaglavlja:

    Adresa 1 (Adresa 1)

    Adresa 2 (Adresa2)

    Grad

    Regija

    Zemlja

    Poštanski broj (poštanski broj)

    Telefon

    Web stranica

    Omiljena knjiga (Omiljena knjiga)

    O meni (O meni)

    Uneseni datum rođenja mora biti u formatu godina-mjesec-dan, na primjer: 0000-00-00

    Datum rođenja

Da biste promijenili nazive gumba "Registracija" (Registracija) i "Odustani" (Odustani), uredite datoteku en-GB.ini iz mape language/en-GB na vašem poslužitelju.

Uklanjanje polja iz obrasca za registraciju

Kako biste onemogućili neka od polja svoje registracijske forme, morate učiniti sljedeće:


Dodavanje novih polja u obrazac za registraciju

Kako biste dodali nova polja u obrazac za registraciju, morate izvršiti izmjene u datotekama predložaka i bazi podataka. Morate izvršiti sljedeće izmjene u bazi podataka:


Kako bi novo polje bilo prikazano na vašoj stranici, napravite izmjene u sljedećim datotekama:

Napravite promjene u datoteci user.php iz mape libraries/joomla/user. Pronađite kod polja nakon kojeg treba dodati novo polje:

public $name = null;

Dodajte kod za novo polje nakon ovog koda:

Javno $field_label_here= null;

Gdje naziv polja je naziv vašeg polja.

Također napravite promjene u datoteci users.xml iz mape administrator/components/com_users/models/forms.

Pronađite kod polja nakon kojeg će se prikazati dodano polje:

Dodajte kod za svoje polje nakon ovog koda:

Zamijeniti polje_oznaka_ovdje ime vašeg polja. Također promijeniti Vaš opis na opis koji želite.

Napravite promjene u datoteci registration.xml iz mape components/com_users/models/forms na vašem poslužitelju. Kôd za svoje polje dodajte ispod koda za polje pod kojim bi trebalo biti prikazano novo polje.

U ovom ćete članku naučiti kako izraditi obrazac za registraciju i autorizaciju koristeći HTML, JavaScript, PHP i MySql. Takvi se obrasci koriste na gotovo svakom mjestu, bez obzira na njegovu vrstu. Stvoreni su za forum, i za internetsku trgovinu i za društvene mreže (kao što su, na primjer, Facebook, Twiter, Odnoklassniki) i za mnoge druge vrste stranica.

Ako imate web mjesto na svom lokalnom računalu, nadam se da već imate . Bez toga ništa neće uspjeti.

Izrada tablice u bazi podataka

Da bismo proveli registraciju korisnika, prvo nam je potrebna baza podataka. Ako ga već imate, onda je super, u suprotnom, morate ga stvoriti. U članku sam detaljno objasnio kako to učiniti.

I tako, imamo bazu podataka (skraćeno DB), sada trebamo napraviti tablicu korisnika u koje ćemo dodavati naše registrirane korisnike.

Kako napraviti tablicu u bazi, također sam objasnio u članku. Prije izrade tablice potrebno je definirati koja će polja sadržavati. Ova će polja odgovarati poljima iz obrasca za registraciju.

Dakle, pomislili smo, zamislili koja će polja naš obrazac imati i izraditi tablicu korisnika sa ovim poljima:

  • iskaznica- Identifikator. Polje iskaznica treba biti u svakoj tablici iz baze podataka.
  • ime- Da sačuvam ime.
  • prezime- Da sačuvam prezime.
  • elektronička pošta- Za spremanje poštanske adrese. Za prijavu ćemo koristiti e-mail, tako da ovo polje mora biti jedinstveno, odnosno imati JEDINSTVEN indeks.
  • email_status- Polje za označavanje je li pošta potvrđena ili ne. Ako je pošta potvrđena, tada će imati vrijednost 1, inače će imati vrijednost 0. Prema zadanim postavkama, ovo polje će imati vrijednost 0.
  • lozinka- Za spremanje lozinke.

Sva polja tipa "VARCHAR" moraju imati zadanu vrijednost NULL.


Ako želite da vaš obrazac za registraciju ima još neka polja, možete ih dodati i ovdje.

To je to, naš stol korisnika spreman. Prijeđimo na sljedeći korak.

Veza s bazom podataka

Napravili smo bazu podataka, sada se trebamo spojiti na nju. Spojit ćemo se pomoću MySQLi PHP ekstenzije.

U mapi naše stranice kreirajte datoteku s imenom dbconnect.php, i u njemu pišemo sljedeću skriptu:

Ova datoteka dbconnect.php morat će se povezati s rukovateljima obrascima.

Obratite pozornost na varijablu $address_site, ovdje sam naveo naziv svog testnog mjesta na kojem ću raditi. U skladu s tim navodite naziv svoje stranice.

Struktura stranice

Sada pogledajmo HTML strukturu naše stranice.

Premjestite zaglavlje i podnožje stranice u zasebne datoteke, zaglavlje.php I podnožje.php. Povezat ćemo ih na svim stranicama. Naime, na glavnoj (datoteci indeks.php), na stranicu s obrascem za registraciju (datoteka obrazac_registar.php) i na stranici s obrascem za autorizaciju (datoteka obrazac_auth.php).

Blokiraj s našim vezama, registracija I ovlaštenje, dodajte u zaglavlje stranice tako da budu prikazani na svim stranicama. Jedna poveznica vodi do stranice s formularom za registraciju (datoteka obrazac_registar.php), a drugi na stranicu s obrascem za autorizaciju (datoteka obrazac_auth.php).

Sadržaj datoteke header.php:

Naziv naše stranice

Kao rezultat toga, naša glavna stranica izgleda ovako:


Naravno, vaša stranica može imati potpuno drugačiju strukturu, ali to nam sada nije važno. Glavna stvar je da postoje poveznice (gumbi) za registraciju i autorizaciju.

Sada prijeđimo na obrazac za registraciju. Kao što ste već shvatili, imamo ga u dosjeu obrazac_registar.php.

Idemo u bazu podataka (u phpMyAdmin), otvorimo strukturu tablice korisnika i vidjeti koja nam polja trebaju. Dakle, potrebna su nam polja za unos imena i prezimena, polje za unos poštanske adrese (Email) i polje za unos lozinke. A iz sigurnosnih razloga, dodat ćemo polje za unos captcha.

Na poslužitelju, kao rezultat obrade registracijske forme, mogu se pojaviti razne greške zbog kojih se korisnik neće moći registrirati. Stoga, da bi korisnik razumio zašto registracija ne uspijeva, potrebno mu je prikazati poruke o tim greškama.

Prije prikaza obrasca dodajemo blok za prikaz poruka o greškama iz sesije.

I još jedan trenutak, ako je korisnik već autoriziran, a radi interesa ulazi na stranicu za registraciju izravno upisivanjem u adresnu traku preglednika web_url/obrazac_registar.php, tada ćemo u ovom slučaju umjesto obrasca za registraciju prikazati naslov da je već registriran.

Općenito, kod datoteke obrazac_registar.php dobili smo ovako:

Već ste registrirani

U pregledniku stranica za registraciju izgleda ovako:


Uz obavezni atribut učinili smo sva polja obaveznim.

Obratite pozornost na kod registracijske forme gdje se prikazuje captcha:


Mi smo u vrijednosti atributa src za sliku naveli put do datoteke captcha.php, koji generira ovaj captcha.

Pogledajmo kod datoteke captcha.php:

Kod je dobro komentiran, pa ću se usredotočiti samo na jednu točku.

Unutar funkcije imageTtfText(), naveden je put do fonta verdana.ttf. Da bi captcha radila ispravno, moramo stvoriti mapu fontovi, i tamo stavite datoteku fonta verdana.ttf. Možete ga pronaći i preuzeti s interneta ili preuzeti iz arhive s materijalima ovog članka.

Završili smo s HTML strukturom, vrijeme je da krenemo dalje.

Provjera e-pošte s jQueryjem

Svaki obrazac zahtijeva provjeru valjanosti unesenih podataka, kako na strani klijenta (koristeći JavaScript, jQuery), tako i na strani poslužitelja.

Posebnu pozornost moramo obratiti na polje Email. Vrlo je važno da je unesena email adresa važeća.

Za ovo polje za unos postavili smo vrstu email (type="email"), ovo nas malo upozorava na netočne formate. No, to nije dovoljno, jer kroz inspektor koda koji nam preglednik nudi, možete jednostavno promijeniti vrijednost atributa tip S elektronička pošta na tekst, i to je to, naš ček više neće vrijediti.


I u tom slučaju moramo napraviti pouzdaniju provjeru. Da bismo to učinili, koristit ćemo jQuery biblioteku iz JavaScripta.

Za povezivanje jQuery biblioteke, u datoteci zaglavlje.php između oznaka , prije završne oznake , dodajte ovaj redak:

Odmah nakon ovog retka dodajte kod za provjeru valjanosti e-pošte. Ovdje dodajemo kod za provjeru duljine unesene lozinke. Mora imati najmanje 6 znakova.

Uz pomoć ove skripte provjeravamo valjanost unesene email adrese. Ako je korisnik unio pogrešnu e-poštu, prikazujemo pogrešku o tome i deaktiviramo gumb za slanje obrasca. Ako je sve u redu, uklanjamo grešku i aktiviramo gumb za slanje na obrascu.

I tako, s provjerom valjanosti obrasca na strani klijenta, gotovi smo. Sada ga možemo poslati na server, gdje ćemo također napraviti par provjera i dodati podatke u bazu.

Registracija korisnika

Obrazac šaljemo na obradu u datoteku registar.php, POST metodom. Naziv ove datoteke rukovatelja, naveden u vrijednosti atributa akcijski. A način slanja naveden je u vrijednosti atributa metoda.

Otvori ovu datoteku registar.php i prva stvar koju trebamo učiniti je napisati funkciju pokretanja sesije i uključiti datoteku koju smo ranije stvorili dbconnect.php(U ovoj datoteci napravili smo vezu s bazom podataka). Pa ipak, odmah deklarirajte ćelije poruke_pogreške I poruke_uspjeha u globalnom polju sesije. U poruke_pogreške zabilježit ćemo sve poruke o pogreškama koje se pojave tijekom obrade obrazaca i u poruke_uspjeha Pišimo sretne poruke.

Prije nastavka moramo provjeriti je li obrazac uopće poslan. Napadač može pogledati vrijednost atributa akcijski iz obrasca i saznajte koja datoteka obrađuje ovaj obrazac. I može doći na ideju da ode izravno na ovu datoteku upisivanjem sljedeće adrese u adresnu traku preglednika: http://site_site/register.php

Stoga moramo provjeriti postoji li ćelija u globalnom POST nizu čiji naziv odgovara nazivu našeg gumba "Registracija" iz obrasca. Dakle, provjeravamo je li gumb "Registracija" pritisnut ili ne.

Ako napadač pokuša otići izravno na ovu datoteku, dobit će poruku o pogrešci. Podsjećam vas da varijabla $address_site sadrži naziv stranice i deklarirana je u datoteci dbconnect.php.

Captcha vrijednost u sesiji dodana je tijekom njenog generiranja, u datoteku captcha.php. Kao podsjetnik, još jednom ću pokazati ovaj dio koda iz datoteke captcha.php, gdje se captcha vrijednost dodaje sesiji:

A sad prijeđimo na sam test. U datoteci registar.php, unutar if bloka, gdje provjeravamo da li je pritisnuta tipka "Registracija", odnosno gdje je komentar " // (1) Mjesto za sljedeći dio koda"pišemo:

//Provjeri primljeni captcha //Skrati razmake od početka i od kraja niza $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Usporedite primljenu vrijednost s vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ako captcha nije točna, vratite korisnika na stranicu za registraciju, a tamo ćemo prikazati poruku o pogrešci da je unio krivi captcha. $error_message = "

Greška! Unijeli ste krivi captcha

"; // Spremite poruku o pogrešci u sesiju. $_SESSION["error_messages"] = $error_message; // Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: " .$address_site ."/form_register.php"); //Zaustavite skriptu exit(); ) // (2) Mjesto za sljedeći dio koda )else( //Ako captcha nije proslijeđena ili je prazna izlaz ("

Greška! Ne postoji kontrolni kod, odnosno captcha kod. Možete otići na glavnu stranicu.

"); }

Zatim moramo obraditi primljene podatke iz POST polja. Prije svega trebamo provjeriti sadržaj globalnog POST niza, odnosno postoje li tamo ćelije čiji nazivi odgovaraju nazivima polja za unos iz naše forme.

Ako ćelija postoji, tada skraćujemo razmake od početka i od kraja niza iz ove ćelije, u suprotnom, preusmjeravamo korisnika natrag na stranicu s formularom za registraciju.

Nadalje, nakon što su razmaci obrezani, dodajemo niz u varijablu i provjeravamo da li je varijabla prazna, ako nije prazna, onda idemo dalje, u suprotnom preusmjeravamo korisnika natrag na stranicu s obrascem za registraciju.

Zalijepite ovaj kod na navedeno mjesto // (2) Mjesto za sljedeći dio koda".

/* Provjerite sadrži li globalni niz $_POST podatke poslane iz obrasca i priložite poslane podatke regularnim varijablama.*/ if(isset($_POST["first_name"]))( // Skratite razmake od početka i kraja niz $first_name = trim($_POST["first_name"]); //Provjeri je li varijabla prazna if(!empty($first_name))( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $first_name = htmlspecialchars( $first_name, ENT_QUOTES) ; )else( // Spremi poruku o pogrešci u sesiju. $_SESSION["error_messages"] .= "

Unesite svoje ime

Nedostaje polje za naziv

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) if( isset($_POST["last_name"]))( // Skrati razmake s početka i kraja niza $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Spremite poruku pogreške u sesiju. $_SESSION["error_messages"] .= "

Unesite svoje prezime

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) )else ( // Spremite poruku pogreške u sesiju. $_SESSION["error_messages"] .= "

Nedostaje polje za naziv

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) if( isset($_POST["email"]))( // Skrati razmake s početka i kraja niza $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Mjesto koda za provjeru formata adrese e-pošte i njezine jedinstvenosti )else( // Spremi poruku o pogrešci u sesiju. $_SESSION["error_messages" ] .= "

Unesi svoj email

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) )else ( // Spremite poruku pogreške u sesiju. $_SESSION["error_messages"] .= "

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) if( isset($_POST["password"]))( // Skrati razmake s početka i kraja niza $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Kriptiraj lozinku $password = md5($password."top_secret"); )else( // Spremi poruku o pogrešci u sesiju. $_SESSION["error_messages"] .= "

Unesite svoju lozinku

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) )else ( // Spremite poruku pogreške u sesiju. $_SESSION["error_messages"] .= "

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) // (4) Mjesto za kod za dodavanje korisnika u bazu

Polje je od posebne važnosti. elektronička pošta. Moramo provjeriti format primljene poštanske adrese i njezinu jedinstvenost u bazi podataka. Odnosno je li korisnik s istom email adresom već registriran.

Na navedenoj lokaciji" // (3) Mjesto koda za provjeru formata poštanske adrese i njezine jedinstvenosti" dodajte sljedeći kod:

//Provjerite format primljene adrese e-pošte koristeći regularni izraz $reg_email = "/^**@(+(*+)*\.)++/i"; //Ako format primljene adrese e-pošte ne odgovara regularnom izrazu if(!preg_match($reg_email, $email))( // Spremi poruku o pogrešci u sesiju. $_SESSION["error_messages"] .= "

Unijeli ste nevažeću e-poštu

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); ) // Provjerite postoji li već takva adresa u bazi $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Ako postoji su točno jedan redak, tada je korisnik s ovom adresom e-pošte već registriran if($result_query->num_rows == 1)( //Ako rezultat nije lažan if(($row = $result_query->fetch_assoc()) ! = false) ( // Spremite poruku pogreške u sesiju. $_SESSION["error_messages"] .= "

Korisnik s ovom email adresom je već registriran

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); )else( //Spremi poruku o pogrešci na sesiju .$_SESSION["error_messages"] .= "

Pogreška u upitu baze podataka

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); ) /* zatvori odabir */ $ result_query-> close(); //Zaustavi skriptu exit(); ) /* zatvori odabir */ $result_query->close();

I tako, završili smo sa svim provjerama, vrijeme je da dodamo korisnika u bazu podataka. Na navedenoj lokaciji" // (4) Mjesto za kod za dodavanje korisnika u bazu" dodajte sljedeći kod:

//Upit za dodavanje korisnika u bazu $result_query_insert = $mysqli->query("INSERT INTO `users` (ime, prezime, email, lozinka) VRIJEDNOSTI ("".$first_name."", "".$last_name ." ", "".$email."", "".$lozinka."")"); if(!$result_query_insert)( // Spremi poruku o pogrešci u sesiju. $_SESSION["error_messages"] .= "

Zahtjev o pogrešci za dodavanje korisnika u bazu podataka

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavi izlaz skripte(); )else( $_SESSION["success_messages"] = "

Registracija uspješno završena!!!
Sada se možete prijaviti koristeći svoje korisničko ime i lozinku.

"; //Pošaljite korisnika na stranicu za prijavu header("HTTP/1.1 301 Moved Permanently"); header("Lokacija: ".$address_site."/form_auth.php"); ) /* Dovršite zahtjev */ $ result_query_insert-> close(); //Zatvaranje veze s bazom podataka $mysqli->close();

Ako se pojavi pogreška u zahtjevu za dodavanje korisnika u bazu podataka, sesiji dodajemo poruku o toj pogrešci i vraćamo korisnika na stranicu za registraciju.

Inače, ako je sve prošlo u redu, sesiji dodamo i poruku, ali to je već ugodnije, naime kažemo korisniku da je registracija uspjela. I preusmjeravamo ga na stranicu s obrascem za autorizaciju.

Skripta za provjeru formata e-mail adrese i duljine lozinke nalazi se u datoteci zaglavlje.php, pa će utjecati i na polja iz tog obrasca.

Sesija se također pokreće u datoteci zaglavlje.php, dakle u datoteci obrazac_auth.php sesiju ne treba pokretati jer dobivamo grešku.


Kao što rekoh, ovdje radi i skripta za provjeru formata mail adrese i duljine lozinke. Stoga, ako korisnik unese pogrešnu e-mail adresu ili kratku lozinku, odmah će dobiti poruku o pogrešci. Tipka ući postat će neaktivan.

Nakon ispravljanja grešaka, gumb ući postaje aktivan i korisnik može predati obrazac na poslužitelj gdje će se obraditi.

Autorizacija korisnika

Pripisati vrijednost akcijski obrazac za autorizaciju ima datoteku auth.php, što znači da će obrazac biti obrađen u ovoj datoteci.

Dakle, otvorimo datoteku auth.php i napišite kod za obradu autorizacijskog obrasca. Prvo što trebate učiniti je pokrenuti sesiju i uključiti datoteku dbconnect.php za povezivanje s bazom podataka.

Kada kliknete na link za izlaz sa stranice, ulazimo u datoteku odjava.php, gdje jednostavno uništavamo ćelije s email adresom i lozinkom iz sesije. Nakon toga vraćamo korisnika natrag na stranicu na kojoj je link kliknut Izlaz.

Kod datoteke odjava.php:

To je sve. Sada znate kako implementirati i obraditi obrasce za registraciju korisnika i autorizaciju na vašoj stranici. Ovi obrasci se nalaze na gotovo svakom mjestu, tako da bi svaki programer trebao znati kako ih izraditi.

Također smo naučili kako validirati ulazne podatke, kako na strani klijenta (u pregledniku, koristeći JavaScript, jQuery) tako i na strani poslužitelja (koristeći PHP jezik). Također smo naučili kako implementirati proceduru izlaza sa stranice.

Sve skripte su testirane i rade. Arhivu s datotekama ove male stranice možete preuzeti na ovom linku.

U budućnosti ću napisati članak u kojem ću opisati. Također planiram napisati članak u kojem ću objasniti (bez ponovnog učitavanja stranice). Dakle, kako biste bili svjesni objavljivanja novih članaka, možete se pretplatiti na moju stranicu.

Ako imate bilo kakvih pitanja, obratite se, također, ako primijetite bilo kakvu grešku u članku, javite mi.

Plan lekcije (5. dio):

  • Stvaranje HTML strukture za obrazac za autorizaciju
  • Zaprimljene podatke obrađujemo
  • Pozdrav korisnika prikazujemo u zaglavlju stranice
    • Svidio vam se članak?

    Otkrivanje: Vaša podrška pomaže u održavanju stranice! Zarađujemo naknadu za preporuke za neke od usluga koje preporučujemo na ovoj stranici. Saznajte više

    Dijeliti je voditi brigu!

    Zadnje ažuriranje 17. prosinca 2019

    Web-obrasci se koriste na gotovo svim web-mjestima za širok raspon svrha. Korisnici foruma i društvenih mreža koriste obrasce za dodavanje sadržaja i interakciju s drugim korisnicima. Web stranice koje se mogu prilagoditi za stvaranje personaliziranog iskustva, kao što su prilagodljivi izvori vijesti, koriste obrasce kako bi korisnicima omogućili kontrolu sadržaja koji se pojavljuje na stranici. I gotovo svaka web stranica koristi obrasce kako bi posjetiteljima web stranice omogućila da kontaktiraju organizaciju ili osobu koja upravlja web stranicom. Web obrasci su omogućeni integracijom više tehnologija:

    • HTML za stvaranje polja obrasca i oznaka i prihvaćanje korisničkog unosa.
    • CSS za stiliziranje prezentacije obrasca.
    • JavaScript za provjeru valjanosti unosa obrazaca i pružanje interakcija omogućenih za Ajax.
    • Jezici na strani poslužitelja kao što je PHP za obradu podataka obrazaca.

    U ovom ćemo vodiču pokriti sve HTML elemente koji se koriste za stvaranje web obrazaca. Imamo i druge koji pokrivaju teme kao što su izrada obrasca, oblikovanje i dizajn obrazaca te osiguravanje upotrebljivosti i pristupačnosti obrasca.

    Definiranje strukture obrasca

    sadržaj paragrafa.

    Kontakt obrazac

    Ime:

    Email:

    Predmet:

    Poruka: Ovdje upišite svoju poruku

    Dodatni sadržaj paragrafa

    Kada se prikaže u pregledniku, obrazac za kontakt bio bi jasno odvojen od okolnog sadržaja.

    Element skupa polja nije obavezan, ali se obično koristi za grupiranje povezanih elemenata na dugim i složenim obrascima ili za izolaciju polja obrasca od obližnjih elemenata kada je obrazac predstavljen zajedno sa sadržajem koji nije obrazac. HTML5 je dodao tri atributa koji se mogu primijeniti na elemente skupa polja:

    • onemogućeno: Koristi se za onemogućavanje svih obrazaca u skupu polja. Imajte na umu da smo koristili ovaj atribut u gornjem primjeru obrasca.
    • obrazac: Koristi se za povezivanje skupa polja s ID-om jednog ili više elemenata obrasca. Imajte na umu da je podrška preglednika za ovaj atribut vrlo ograničena.
    • ime: pridružuje ime skupu polja.
    Ulazni element

    Ovisno o vrsti obrasca koji stvarate, sasvim je moguće imati obrazac koji uključuje samo dvije vrste elemenata: jedan element obrasca i jedan ili više ulaznih elemenata. Element se koristi za stvaranje niza različitih vrsta unosa polja s kojima korisnici obrasca mogu komunicirati.

    Zajedničke vrijednosti

    Ulazni element je vrlo fleksibilan element čiji se izgled i ponašanje mogu dramatično promijeniti na temelju atributa tipa primijenjenog na element. Najčešće vrijednosti vrste uključuju: tekst : Zadana vrijednost za atribut type="". Definira jedan redak teksta širine 20 znakova. Širina se može prilagoditi atributom veličine kao što možete vidjeti u kodu obrasca u našem prethodnom primjeru. lozinka : Vrsta lozinke je u osnovi ista kao polje za tekst s iznimkom da su znakovi uneseni u polje zaporke maskirani. radio : Radio gumbi mogu se koristiti za pružanje više opcija od kojih se može odabrati samo jedna. potvrdni okvir : potvrdni okviri slični su radio gumbima, ali više od jednog odabira može biti aktivno istovremeno. To znači da se više vrijednosti može poslati skupom potvrdnih okvira, dok će skup radio gumba prihvatiti samo jednu vrijednost. pošalji : Vrijednost tipa pošalji stvara gumb za podnošenje obrasca. Kada se klikne, obrazac će poduzeti radnju navedenu u atributu akcije povezanom s elementom obrasca. Mnogi obrasci koriste samo jednu ili dvije vrste unosa, a većina jednostavnih formi izgrađena je pomoću samo gore navedenih vrsta. Međutim, postoje mnoge dodatne vrste koje možete koristiti za prihvaćanje podataka obrazaca koji se ne uklapaju ni u jednu od gore navedenih vrsta.

    Manje uobičajene vrijednosti

    Ove vrste unosa manje su uobičajene od gore navedenih, ali ih podržavaju gotovo svi preglednici i mogu se koristiti za izradu mnogo različitih vrsta unosa obrazaca. gumb : Ako želite pokrenuti a kada se klikne gumb, tip unosa gumba može se koristiti za stvaranje gumba koji se može povezati s raznim radnjama. skriveno : Ova vrsta atributa obično se koristi istovremeno s atributom vrijednosti, koji ćemo trenutno pokriti, za dodavanje unaprijed definirane vrijednosti svakom podnošenju obrasca. Na primjer, ako imate obrasce za kontakt na pet različitih stranica, možete dodati svakoj obrazac za slanje naziva stranice s koje je obrazac za kontakt poslan.reset : Ova vrsta se koristi za stvaranje gumba za poništavanje koji će vratiti sva polja obrasca u njihovo zadano stanje.file : Ako želite dopustiti korisnicima obrasca da učitaju i podnijeti datoteke, pružit će tu mogućnost za stiliziranje gumba.

    Nove vrijednosti koje je dodao HTML5

    Nekoliko dodatnih vrsta unosa definirano je HTML5 specifikacijom. Mnoge od ovih vrsta imaju ograničenu podršku preglednika. Dakle, ako ih koristite, svakako provjerite caniuse.com za podršku preglednika i pružite odgovarajuće rezervne opcije gdje je to potrebno. pretraživanje : Ovo je ispravan tip za određivanje pruža li vaš obrazac funkciju pretraživanja. Za razliku od većine drugih vrsta unosa dodanih u HTML5, type="search" podržavaju svi preglednici. Samo upamtite da ova značajka zapravo ne pruža funkciju pretraživanja, ona samo stvara polje za unos obrasca dizajnirano da se koristi kao dio značajke pretraživanja. boja : Kada je navedena vrsta unosa, prikazat će se gumb u boji koji pokreće osnovni alat za odabir boje. Postavite zadanu vrijednost boje pomoću atributa vrijednosti i heksadecimalnog koda boje poput ovog: .number : Ova vrsta proizvodi polje za unos broja koji ima gumbe za povećanje na desnoj strani okvira. Ograničenja se mogu postaviti na rasponu prihvatljivih unosa s atributima max , min i step, ali preglednici koji nemaju podršku za ovaj element obično se vraćaju na standardni unos teksta koji ne prepoznaje ta ograničenja. nekoliko iznimaka. Na primjer, ovaj bi kod proizveo klizač za odabir broja između 100 i 1000 u koracima od 50: . Morat ćete upariti element raspona s drugom tehnikom kako biste omogućili pregled uživo odabrane vrijednosti. Srećom, HTML5 Doctor ima jednostavan način da to učinite pomoću izlaznog elementa. Vrste datuma i vremena: HTML5 je dodao nekoliko vrsta unosa koje se mogu koristiti za određivanje vrijednosti vremena i datuma. koristite vrstu unosa vremena. Manje specifične vrste unosa uključuju opcije mjeseca i tjedna koje se mogu koristiti za odabir tjedna ili mjeseca unutar godine bez navođenja dana ili vremena. Preglednici su sporo dodaje podršku za ovu vrstu, stoga svakako provjerite postoji li podrška za preglednik i osigurajte rezervne ako koristite ovu vrstu unosa. (url).

    Uobičajeni atributi unosa

    Dok je atribut tipa daleko najčešće korišten i najkorisniji ulazni atribut, postoji nekoliko drugih atributa koje ćete morati znati za izradu korisnih obrazaca. ime : ime dodijeljeno ulaznom elementu bit će poslano zajedno s vrijednošću unesenom u pridruženo polje. Drugim riječima, ako se vrijednost "Fred" unese u ulazni element s ovim kodom, poslana vrijednost bi bila "first_name=Fred". vrijednost : Vrijednost ulaznog elementa obavlja različitu funkciju ovisno o vrsti ulaza na koji se primjenjuje. Kada se primijeni na tipove podnošenja, resetiranja ili gumba, vrijednost se koristi kao tekst na gumbu. Kada se primijeni na tekstualna polja, pruža zadanu vrijednost povezanu s poljem. Kada je povezana s potvrdnim okvirom ili radio gumbom, vrijednost daje vrijednost koja će biti povezana s tim poljem ako je odabrano.

    Tko vas je uputio na našu web stranicu?:

    ružičasta:

    Crvena:

    readonly : Kada se readonly primjenjuje kao atribut ulaznog elementa, vrijednost u polju se ne može promijeniti. JavaScript se može koristiti za uklanjanje atributa samo za čitanje nakon neke druge radnje, kao što je klik na gumb ili odabir potvrdnog okvira. Na primjer, samo za čitanje može se primijeniti na vrstu unosa podnošenja i ukloniti kada je odabran potvrdni okvir koji potvrđuje da je korisnik prihvatio uvjete usluge web-mjesta. onemogućeno : koristili smo ovaj atribut s primjerom obrasca ugrađenog ranije u ovom vodiču. Koristite ovaj atribut za onemogućavanje cijelog obrasca, skupa polja, jednog polja. veličina : Koristite atribut veličine s vrstama unosa teksta za određivanje vidljive širine polja bez ograničenja broja znakova koji se mogu unijeti u polje. maksimalna dužina : Ako ne" Ako želite prihvatiti više od određenog broja znakova u danom polju, upotrijebite maxlength da ograničite ta polja na definirani broj znakova. označeno : Ako želite da potvrdni okvir ili radio gumb budu unaprijed odabrani kada se obrazac učita, primijenite ovaj atribut na taj ulazni element. Ovi atributi imaju široku podršku i obično se koriste s obrascima s kojima se susrećete svaki dan.

    Novi atributi koje je dodao HTML5

    HTML5 je dodao mnogo novih atributa koji se mogu povezati s elementima unosa. Podrška preglednika za neke od ovih elemenata je ograničena, pa svakako provjerite ima li podrške i pružite rezervne opcije za korisnike nepodržanih preglednika. autocomplete : Ako vaš obrazac uključuje uobičajena polja, ostavljanje automatskog dovršavanja uključenim omogućit će pregledniku da predloži unose na temelju prethodno ispunjenih obrazaca. autofokus : Koristite ovaj atribut za identifikaciju polja obrasca koje bi trebalo biti u fokusu kada se obrazac učitava. multiple : atribut multiple može se koristiti s vrstama unosa e-pošte i datoteka kako bi se korisnicima obrazaca omogućilo unos više od jedne vrijednosti. Kada se koristi za unos e-pošte, može se poslati više od jedne adrese e-pošte odvajanjem svake adrese od druge zarezom. Kada se koristi za unos datoteka, može se odabrati i poslati više datoteka istovremeno. uzorak : Ponekad želite navesti da vrijednost unosa mora zadovoljiti određene kriterije. Na primjer, možda ćete htjeti zahtijevati da polje lozinke sadrži najmanje jedno veliko slovo, jedno malo slovo, jedan broj i da ispunjava uvjet minimalne duljine. Atribut uzorka može se koristiti za stvaranje izraza prema kojima se provjeravaju ulazne vrijednosti. Pisanje ovih izraza, koji se nazivaju Regularni izrazi ili RegExp, izvan je opsega ovog vodiča. Možete naučiti o regularnim izrazima na Wikipediji, a zatim napisati i testirati svoje izraze besplatno na RegExr. rezervirano mjesto : većina obrazaca uključuje tekst rezerviranog mjesta koji nestaje čim kliknete na polje ili počnete tipkati. Koristite ovaj atribut za dodavanje i definiranje teksta rezerviranog mjesta za sve unose koji prihvaćaju tekst. obavezno : Ako su određena polja u obrascu obavezna, koristite ovaj atribut kako biste spriječili podnošenje nepotpunih obrazaca. obrazac : Ako ikada trebate postaviti ulazni element izvan elementa obrasca, možete pridružiti pomaknuti element korištenjem atributa obrasca i primjenom vrijednosti koja odgovara atributu id primijenjenom na obrazac. Izmijeni ponašanje gumba za slanje obrasca Postoji pet atributa koji se mogu primijeniti na tipove slanja i unosa slike za nadjačavanje atributa primijenjenih na nadređeni element obrasca. Ti atributi uključuju:

    • formation : Definirajte drugačiji URL od onog identificiranog u atributu akcije nadređenog obrasca za obradu podnošenja obrasca. Često se koristi kada se obrasci mogu obrađivati ​​na više od jednog načina kako bi se pružile različite opcije podnošenja obrasca.
    • formenctype : Navedite vrstu kodiranja koja bi se trebala koristiti za slanje obrazaca. Upotrijebljena vrijednost nadjačava vrijednost primijenjenu na atribut enctype nadređenog elementa obrasca.
    • formmethod: Ovaj se atribut koristi za određivanje vrijednosti get ili post metode i nadjačat će atribut metode primijenjen na roditeljski obrazac.
    • formnovalidate : Ako ne želite da se unos obrasca potvrdi kada se pošalje, možete koristiti ovaj atribut.
    • formtarget : Zaobiđite ciljni atribut primijenjen na nadređeni element obrasca primjenom ovog atributa na polje vrste unosa za slanje ili sliku.

    Definirajte veličinu za type="image" : Ako koristite vrstu unosa slike za stvaranje gumba za slanje obrasca, možete kontrolirati veličinu slike pomoću atributa visine i širine. Alternativno, možete učiniti istu stvar sa CSS-om. Većina programera i dizajnera preporučila bi izbjegavanje ovih atributa i kontrolu izgleda gumba pomoću CSS-a. Postavite ograničenja i povećanja za numeričke vrijednosti: Možete koristiti atribute min, max i korak za definiranje minimalnih i maksimalnih vrijednosti, kao i prihvatljivih povećanja između ovih vrijednosti za bilo koji unos koji prihvaća numeričke vrijednosti.

    Padajući izbornik, tekstualna područja i gumbi

    Unosi nisu jedini elementi koji se mogu koristiti za stvaranje polja obrasca. Druge vrste elemenata mogu se pridružiti obrascima za stvaranje padajućih popisa ili opcija, tekstualnih područja slobodnog oblika i fleksibilnih gumba.

    Unaprijed popunjeni padajući popisi

    Za izradu padajućeg popisa unaprijed popunjenih opcija s kojih posjetitelj web stranice može odabrati opciju, upotrijebite element odabira za stvaranje polja i ugniježdite više elemenata opcija za stvaranje različitih opcija koje bi se trebale pojaviti na padajućem izborniku . Na primjer, za izradu padajućeg izbornika pretencioznih opcija boja za izmišljenu trgovinu e-trgovine, može se koristiti sljedeći kod:

    Vjetrom šibana pješčana dina Bujna šuma Turbulentne vode Duboka noć

    Imajte na umu da je vrijednost ono što će se zapravo poslati s obrascem, dok je tekst između početnih i završnih oznaka ono što se prikazuje posjetitelju koji ispunjava obrazac. Na primjer, ako posjetitelj odabere "Bujna šuma", stvarna vrijednost poslana uz obrazac bit će zelena. Evo kako se naš padajući popis prikazuje u pregledniku:

    Vjetrom šibana pješčana dina Bujna šuma Turbulentne vode Duboka noć

    Slobodna tekstualna područja

    Svi unosi teksta koje smo do sada vidjeli, kao što je , prihvaćaju samo jedan redak teksta. Međutim, ako želite stvoriti veće područje teksta za duži unos teksta, polje za unos jednog retka neće raditi. Element textarea ispravan je izbor za stvaranje velikog područja za unos teksta koje može prihvatiti unos teksta koji se neće dobro prikazati u jednom retku. Postoje tri dijela tekstualnog područja:

  • Textarea se stvara umetanjem otvarajućih i zatvarajućih oznaka. Svaki tekst ugniježđen između oznaka bit će učitan u tekstualno područje kada se obrazac učita i bit će predan zajedno s obrascem osim ako posjetitelj koji šalje obrazac ne izbriše tekst iz tekstualnog područja.
  • Ako želite definirati veličinu područja teksta, upotrijebite atribut rows da definirate broj redaka teksta koji bi se trebao moći prikazati bez promjene veličine područja teksta.
  • Za postavljanje unaprijed definirane širine upotrijebite atribut cols. Primijenjena vrijednost bit će broj znakova koji će se pojaviti u jednom retku prije prelamanja u drugi red.

    • Veličina elemenata tekstualnog područja može se mijenjati. Međutim, atributi redaka i stupaca definirat će veličinu tekstualnog područja kada ga preglednik prvi put prikaže, a također će postaviti minimalni prostor kojemu se može promijeniti veličina područja kako bi odgovaralo.


    Unesite tekst ovdje

    Ovaj kod će proizvesti dva tekstualna područja iste veličine koja su visoka tri retka i mogu prihvatiti 60 znakova po retku. Moći će im se promijeniti veličina na bilo koju veću nego zadana veličina. Obratite pažnju na to kako je tekst rezerviranog mjesta dodan u prvi s elementom rezerviranog mjesta, ali je jednostavno ugniježđen između početnih i završnih oznaka u drugom primjeru. Ispod možete vidjeti kako se ova dva bita koda prikazuju.

    Iako se veličina tekstnog područja može odrediti pomoću "redova" i "stupaca", bolje je koristiti CSS za stiliziranje i veličinu tekstualnih područja. Mnogi od atributa koji se mogu primijeniti na elemente unosa također se mogu primijeniti na elemente textarea. Osim onih uključenih u naš gornji primjer, atributi koji se mogu primijeniti na tekstualna područja uključuju: autofokus, onemogućeno, oblik, maksimalna duljina, naziv, samo za čitanje, potrebno i prelamanje.

    Fleksibilni gumbi

    Postoje dva načina za stvaranje gumba za obrasce:

    Već smo govorili o elementu unosa i različitim tipovima koji se mogu koristiti za stvaranje gumba. Dakle, zašto postoji još jedan gumb? Postoje najmanje dva načina na koje se elementi gumba razlikuju od svojih rođaka unosa.

  • Budući da su gumbi napravljeni s oznakom za otvaranje i zatvaranje, različite vrste sadržaja – obično tekst i slike – mogu se ugniježditi između oznaka za otvaranje i zatvaranje i prikazat će se na gumbu.
  • Gumbi ne moraju biti povezani s elementom obrasca. Mogu se koristiti kao samostalni gumbi za pokretanje skripti, kao sadržaj elementa sidra i za izvođenje drugih radnji.
    • Elementi obrasca dodani u HTML5

    Tri nova elementa obrasca dodana su u HTML5: datalist : Koristite ovaj element za pružanje popisa predloženih vrijednosti automatskog dovršavanja za ulazni element. Kako biste koristili element datalist, prvo stvorite ulazni element s atributom popisa. Zatim stvorite element datalist s atributom id. Vrijednost primijenjena na atribut ulaznog popisa mora odgovarati ID-u popisa podataka. Vrijednosti se dodaju na popis podataka dodavanjem elemenata opcija između početnih i završnih oznaka popisa podataka. Evo primjera kako sve ovo funkcionira:

    Kada renderiramo taj kod u pregledniku i pojavit će se ulazni element. Ako počnemo tipkati, izradit će se prijedlozi za automatsko dovršavanje na temelju opcija uključenih u popis podataka. Imajte na umu da korisnici koji podnose obrazac nisu ograničeni na odabir jedne od ovih opcija. I dalje mogu odabrati da unesu vrijednost koja nije uključena opcija ako to žele.

    Koja je vaša omiljena web tehnologija?

    izlaz: Koristite ovaj element za prikaz rezultata izračuna ili korisničkog unosa. Povežite ga s elementom unosa pomoću atributa for s vrijednošću koja odgovara ID-u relevantnog elementa unosa ili ga povežite s obrascem dodavanjem atributa obrasca pomoću vrijednosti koja odgovara ID-u relevantnog obrasca. Izlazni element također se može upariti s elementom raspona kako bi korisnici obrasca znali točnu vrijednost predstavljenu trenutnim položajem klizača elementa raspona. Korištenje izlaznih i rasponskih elemenata na ovaj način je izvan opsega ovog uvodnog vodiča, ali ako želite koristiti ova dva elementa zajedno, možete saznati više o ovoj tehnici na HTML5 Doctoru.

    Sljedeći koraci

    Ovaj vodič pruža pregled elemenata koji se koriste za izradu obrazaca za web. Sljedeći korak je da isprobate dio znanja koje ste stekli. Ostali vodiči u ovom odjeljku provest će vas kroz proces kreiranja obrasca za rezervaciju, oblikovanja i dizajna obrazaca i osiguravanja da vaši obrasci zadovoljavaju smjernice za upotrebljivost i pristupačnost.

    Često postavljana pitanja Kako ograničiti polje obrasca da prihvaća samo brojeve?

    U prošlosti je ograničavanje polja na brojeve zahtijevalo samo upotrebu JavaScripta. Međutim, s izdanjem HTML5, sada je jednostavno ograničiti polje samo na numerički unos. Samo primijenite vrijednost broja na atribut tipa primjenjivog elementa unosa. Na primjer:

    Kada se prikaže, stvara polje za unos teksta koje prihvaća samo brojeve.

    Kako ograničiti polje obrasca da prihvaća samo alfanumeričke znakove?

    U prošlosti je jedini način da se unos polja ograniči na alfanumeričke znakove bio korištenje jQueryja ili JavaScripta i izrada prilagođene funkcije. Međutim, HTML5 je dodao atribut uzorka za elemente unosa koji se mogu koristiti za ograničavanje polja obrasca da prihvaća samo alfanumerički unos. Evo koda koji će učiniti trik:

    U ovom slučaju, element uzorka prihvaća mala slova, velika slova i brojeve. Drugi dio vrijednosti u vitičastim zagradama određuje koliko se ukupno znakova smije unijeti u polje. Pogledajmo kako to izgleda u pregledniku.

    Način na koji to funkcionira je da kada pokušate poslati vrijednosti koje ne zadovoljavaju navedeni uzorak, prikazuje se atribut naslova. Dakle, trebali biste staviti neke upute unutar atributa uzorka kako bi korisnici mogli shvatiti što su krivo učinili . Podrška preglednika za ovaj relativno novi atribut stvarno je prilično dobra. IE 9 i starije verzije IE-a ga ne podržavaju, a Opera Mini također nema podršku. Međutim, svi ostali preglednici podržavaju atribut.

    Kako učiniti da se obrazac pošalje kada korisnik pritisne enter?

    Ako ste naišli na obrazac koji se ne šalje kada pritisnete enter, onda je netko namjerno dizajnirao obrazac da se tako ponaša - a to stvarno nije trebao učiniti. Specifikacije web-pristupačnosti su jasne: dizajnirajte obrasce kako biste omogućili implicitno podnošenje. Što je implicitno podnošenje? Slanje obrasca pritiskom na enter. Preglednici su dizajnirani da podržavaju implicitno podnošenje. Evo kako to funkcionira. Uzmite, na primjer, ovaj obrazac:

    Ime:
    Dob:

    Ako ste bili usredotočeni na bilo koji element u tom obrascu i pritisnuli enter, obrazac bi bio poslan. Ovo je implicitna predaja i svi moderni preglednici podržavaju ovo ponašanje. Upotrijebite element gumba u obrascu i ne morate čak koristiti vrijednost za slanje za atribut tipa. Pritisnite enter dok ste fokusirani na bilo koji element u ovom obrascu i obrazac će i dalje biti poslan.

    Ime:
    Dob:
    podnijeti

    Dakle, kako programeri prekidaju ovo ponašanje? Jedan od načina da se zaobiđe ovo ponašanje—i da budemo jasni, ne preporučujemo ovo—je ispuštanje elemenata obrasca. Preglednik zna što treba poslati tako što grupira sve zajedno između oznaka obrasca. Ispustite te oznake i preglednik neće ne znam što podnijeti. Još jedan način na koji neki programeri manipuliraju ponašanjem preglednika je korištenje CSS-a za izradu gumba umjesto ispravnih HTML elemenata, poput ovog.

    .submitButton ( padding: 10px 20px; margin-top: 10px; background-color: #ddd; border-radius: 5px; display: inline-block; ) .submitButton:hover ( background-color: #ccc; ) .submitButton: aktivno (boja pozadine: #ddd;) Naziv:
    Dob:
    podnijeti

    Što bi, kada bi ga prikazao preglednik, proizvelo gumb koji je izgledao kao gumb, ali nije radio ništa kada se pritisne enter.

    SubmitButton(padding: 10px 20px; margin-top: 10px; background-color: #ddd; border-radius: 5px; display: inline-block;).submitButton:hover(background-color: #ccc;).submitButton:active (boja pozadine: #ddd;)

    WordPress ima obrazac za registraciju koji omogućuje registraciju novih korisnika na stranici. Ali što ako želite izraditi prilagođeni obrazac za registraciju koji ne odgovara postavkama WordPress nadzorne ploče i dodati mu nova polja?

    | Preuzmite spremni dodatak za obrazac |

    U današnjem vodiču naučit ćete kako izraditi obrazac za registraciju u WordPressu koristeći kombinaciju oznaka predložaka i kratkih kodova.

    Standardni obrazac za registraciju sastoji se od samo dva polja - korisničko ime i e-mail.

    Postojanje samo dva polja za ispunjavanje na obrascu za registraciju čini proces registracije vrlo lakim. Prvo upisujete svoje korisničko ime i e-mail adresu, nakon čega vam se na e-mail automatski šalje lozinka za ulazak na stranicu. Zatim uđete na stranicu pomoću lozinke koja vam je poslana, ispunite svoj profil i promijenite lozinku u novu koju ćete sami smisliti i koju ćete lako zapamtiti.

    Ili možete malo promijeniti gore navedeni proces registracije na Vašoj stranici i koristiti dodatna polja uz dva već postojeća. To može biti polje za lozinku, URL korisničke stranice, bilo koji osobni podaci, nadimak, prezime i ime.

    Danas ćemo izraditi prilagođeni WordPress dodatak za registracijski obrazac pomoću sljedećih polja:

    • Korisničko ime
    • lozinka
    • e-pošta
    • URL stranice
    • prezime
    • nadimak
    • osobne informacije

    Prilagođeni obrazac za registraciju može se integrirati u WordPress pomoću kratkog koda dodatka i odgovarajuće oznake predloška.

    Kratki kod vam omogućuje da izradite stranicu i učinite je glavnom stranicom za registraciju svoje web stranice. Također možete koristiti kratki kod u postu tako da se korisnik može pretplatiti na ažuriranja vaše stranice nakon što pročita jedan od članaka koji mu se sviđaju.

    Ako želite dodati obrazac za registraciju na bočnu traku ili bilo koju drugu stranicu na vašem web-mjestu, tada ćete morati urediti temu koju koristite i postaviti oznaku predloška na mjesto gdje želite da se obrazac za registraciju pojavi.

    Prije nego počnemo stvarati dodatak, vrijedno je napomenuti da su nam potrebna polja za korisničko ime, lozinku i e-poštu.

    Slijedit ćemo ovo pravilo kada stvaramo funkciju provjere valjanosti.

    Stvaranje dodatka

    Imajući sve gore navedeno na umu, bacimo se na pisanje koda dodatka. Prvo uključite naslov i zaglavlje dodatka.

    Zaključak

    U današnjem smo postu prošli kroz proces stvaranja dodatka koji dodaje prilagođeni obrazac za registraciju na WordPress stranicu. Na temelju pruženih informacija, možete proširiti broj polja za popunjavanje, ali samo tako da provjerite da su polja obrasca valjani metapodaci za wp_insert_user.