Cum se creează o pagină de înregistrare în html. Crearea de formulare HTML. Conexiune la baza de date

15.11.2020

Retururi

Utilizare

Model de utilizare

wp_login_form(array("echo" => true, "redirect" => site_url($_SERVER["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __("Username"), "label_password" " => __("Parolă"), "label_remember" => __("Reține-mă"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => NULL, "value_remember" => false)); $args(șir/matrice)
O serie de argumente care controlează rezultatul.

Implicit: setări implicite

$args Argumente ale parametrilor ecou(logic)
Afișează (1) sau returnează (0). Implicit: 1 redirecţiona(linia)
Adresa URL la care va fi transferată după autorizare. Implicit: pagina curentă redirecţiona form_id

.
atributul etichetei id Implicit: „loginform” redirecţiona label_username
Textul titlului pentru câmpul „nume utilizator”. Implicit: "__("Nume de utilizator")" redirecţiona etichetă_parolă
Textul titlului pentru câmpul „parolă”. Implicit: "__("Parola")" redirecţiona label_remember
Textul titlului pentru câmpul „Ține-mă minte”. Implicit: „__(„Ține minte”)” redirecţiona label_log_in
Trimiteți textul butonului. Implicit: "__("Log In")" redirecţiona id_nume utilizator
valoarea atributului id: Implicit: „user_login” redirecţiona id_nume utilizator
id_parolă Implicit: „user_pass” redirecţiona id_nume utilizator
id_remember Implicit: „rememberme” redirecţiona id_nume utilizator
id_submit Implicit: „wp-submit” ecou amintește-ți
Afișează (1) sau returnează (0). Amintiți-vă valorile câmpurilor (1) sau nu (0). redirecţiona value_username
Nume de utilizator implicit. Implicit: "" redirecţiona value_remember
Afișează (1) sau returnează (0).

Valoarea atributului valoare, câmpul „ține minte”. Valoarea implicită este 1 - caseta de selectare este bifată. 0 - caseta de selectare este debifată.

Exemple

#1. Afișare în formă normală:

http://site/s

#2 Lăsați pe aceeași pagină când introduceți o autentificare/parolă incorectă

În mod implicit, dacă într-un astfel de formular este introdus un jurnal incorect, utilizatorul va fi redirecționat către pagina de autorizare de bază indicând eroarea.

## Lăsează utilizatorul pe aceeași pagină atunci când introduce o autentificare/parolă incorectă în formularul de autorizare wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // de unde a venit cererea // Dacă există un referrer și aceasta nu este pagina wp-login.php if(!empty($referrer) ) && !strstr($ referrer,"wp-login") && !strstr($referrer,"wp-admin")) ( wp_redirect(add_query_arg("login", "failed", $referrer)); // redirecționează și adăugați un parametru de interogare?login= ieșire eșuată ))

#3 Formular de înregistrare WordPress

Nu există nicio funcție specială furnizată pentru afișarea formularului de înregistrare. Prin urmare, formularul poate fi afișat scriind propriul cod HTML. Iată un exemplu de cod HTML pentru formularul de înregistrare:

Lista modificărilor

Din versiunea 3.0.0

Introdus.

Cod formular de conectare wp: wp-includes/general-template.php WP 5.3.2

true, // Valoarea implicită de „redirecționare” duce utilizatorul înapoi la URI-ul solicitării.

"redirect" => (is_ssl() ? "https://" : "http://") . $_SERVER[„HTTP_HOST”] . $_SERVER["REQUEST_URI"], "form_id" => "loginform", "label_username" => __("Nume de utilizator sau adresă de e-mail"), "label_password" => __("Parolă"), "label_remember" => __ ("Reține-mă"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => „wp-submit”, „remember” => true, „value_username” => „”, // Setați „value_remember” la true pentru ca caseta de selectare „Remember me” să fie bifată. * * @since 3.0.0 * * @see wp_login_form() * * @param array $defaults O matrice de argumente implicite ale formularului de conectare. " : "") . " /** * Filtrează conținutul pentru a fi afișat în partea de sus a formularului de conectare.

* * Filtrul evaluează doar după elementul etichetei formularului de deschidere.

Salutare tuturor. Așa că am învățat câteva elemente pentru a crea forme. Este timpul să ne combinăm cunoștințele pentru a rezolva o problemă mai mare. Să creăm cel mai simplu formular de autorizare pe site. Pentru a face acest lucru, avem nevoie de două câmpuri, le creăm și le atașăm semnături.

Primul câmp este pentru autentificare, al doilea este pentru parolă. Și cu al doilea nu este atât de simplu. Pentru că în momentul de față este doar un câmp de introducere a textului.

Rezultat în browser:

Pentru ca textul introdus în el să fie înlocuit cu asteriscuri, așa cum este obișnuit pentru un câmp de acest tip, trebuie să faceți o acțiune simplă. Și anume, pentru a înlocui valoarea atributului tip pe parolă:

Rezultat:

Butonul de trimitere formular

Poftim. Formularul nostru este aproape gata. Acum, pentru a finaliza crearea acestuia, trebuie să faceți un buton care va trimite formularul. Problema este rezolvată folosind o etichetă cu tip depune.

Dacă butonul ar trebui să aibă un fel de inscripție, atunci se poate face folosind atributul valoare. Dacă numiți sau nu butonul depinde de dvs., dar dacă o faceți, serverul va primi numele respectiv, precum și valoarea butonului.

De regulă, numele unui buton de trimitere a formularului este necesar atunci când formularul are mai multe butoane, fiecare dintre ele efectuând o acțiune specifică. Datorită acestui fapt, serverul, primind numele și valoarea butonului din browser, înțelege pe ce buton a făcut clic utilizatorul și, în consecință, ce trebuie făcut.

Drept urmare, codul formularului nostru va fi următorul:

Rezultat în browser:

2018-08-15

Crearea unui formular de înregistrare

Buna draga vizitatoare!

Astăzi vom crea un formular de înregistrare conceput pentru a introduce datele contului atunci când plasați o comandă online. Ca urmare, folosind un login și o parolă, clienții se vor putea conecta la contul lor personal pentru a obține informații despre comenzile plasate. Prin urmare, în cazul nostru, elementele de înregistrare pot fi considerate ca una dintre secțiunile formularului de comandă online creat anterior.

Trebuie remarcat faptul că accentul principal aici va fi pe crearea elementelor HTML și validarea completării câmpurilor de formular pe partea clientului.

În același timp, pentru toate câmpurile, cu puține excepții, vom folosi instrumente de validare folosind capabilitățile bogate ale HTML5. În comparație cu versiunile anterioare de HTML, când în aceste scopuri era necesară compilarea diverselor scripturi în JavaScript, acum această problemă se rezolvă mult mai ușor. Ceea ce putem verifica în practică.

Singura excepție va fi verificarea identității intrărilor inițiale și repetate ale parolei. Ceea ce vom face mai târziu folosind scriptul corespunzător.

În ceea ce privește elementele de stil care folosesc stiluri CSS, nu vom lua în considerare această problemă aici. Deoarece acest lucru a fost discutat suficient de detaliat în articolul anterior folosind exemplul de elemente din alte secțiuni ale formularului de comandă online. Și probabil că nu merită repetat.

Formarea elementelor formularului de înregistrare
Verificarea validării formularului din partea clientului
Fișierele sursă ale site-ului

Formarea elementelor formularului de înregistrare

Să creăm câmpurile „Nume”, „Autentificare”, „E-mail”, „Parolă” și „Confirmare parolă” în formularul de înregistrare, folosit de obicei în aceste cazuri.

Pentru a face acest lucru, vom folosi etichete ca elemente HTML: conceput pentru a crea câmpuri de intrare și - etichetă pentru câmpul de intrare.

Fig.1 Corespondența elementelor HTML în formularul de înregistrare

În același timp, vom adăuga blocuri de înveliș suplimentare la unele elemente

, a cărui utilizare va simplifica proiectarea elementelor prin realizarea de stiluri similare secțiunilor anterioare.

Ca urmare, vom obține o versiune a codului HTML pentru formularul de comandă online, completată cu elemente ale secțiunii de înregistrare, așa cum se arată în tabelul următor (elementele nou create sunt evidențiate cu un fundal mai deschis).

kak-sozdat-formu-registracii_1

Fig. 2 Cod HTML al formularului de comandă online cu o secțiune de înregistrare

Elemente folosite aici Şi Le-am folosit deja înainte, așa că nu are sens să le luăm din nou în considerare. Dar în ceea ce privește atributele etichetei , care determină parametrii câmpurilor de înregistrare, în ciuda faptului că unele au fost deja întâlnite, merită totuși să ne oprim mai detaliat asupra lor.

Atribut tip este atributul principal al elementului , care îi determină tipul. În acest caz, sunt utilizate trei opțiuni: text(poz. 81,91), destinat câmpului text, e-mail(poz.85) - pentru adresa de e-mail și parolă(poz. 100, 108) - pentru a introduce o parolă.
Ultimul este, de asemenea, un câmp care permite introducerea textului. Dar, spre deosebire de textul obișnuit, această opțiune asigură că toate caracterele introduse vor fi afișate ca asteriscuri. Și acest tip este folosit special pentru câmpurile de introducere a parolei, astfel încât nimeni să nu poată arunca o privire asupra parolei introduse.
Atribut universal titlu aici este folosit pentru a descrie conținutul elementului (pozițiile 81,91,100) sub forma unui tooltip care apare când treceți cursorul peste el.
Deci, pentru câmpul „Nume” (poz. 81), când treceți cursorul, va apărea un sfat cu textul „Numele trebuie să fie în rusă și să conțină cel puțin 3 caractere”. Pentru alte domenii - la fel.
Atribut model setează șablonul de intrare (poz. 81,91,100). Pentru a face acest lucru, valoarea sa specifică o expresie regulată în conformitate cu care va fi necesar să introduceți date în câmp. Mai mult, dacă acest atribut este prezent, atunci dacă câmpul este completat incorect, formularul nu va fi trimis.
În acest caz, pentru câmpul „Nume” (poz. 81), o expresie obișnuită definește condiția de a folosi numai litere mari ale alfabetului rus într-o cantitate de cel puțin 3. Pentru câmpul „Autentificare” (poz. 91) - numere și litere ale alfabetului latin într-o cantitate de cel puțin 3. Și pentru câmpul „Parolă” (poz. 100) - ca în cazul precedent, dar numai în numărul de caractere de cel puțin 6.
Trebuie remarcat faptul că acest atribut este destul de des folosit în formulare, deoarece poate reduce semnificativ probabilitatea de a face erori la completarea câmpurilor. Prin urmare, ar trebui să încercați să profitați la maximum de capacitățile sale.
În formularul nostru de comandă online, pe lângă elementele destinate înregistrării, acest atribut poate fi aplicat și în alte secțiuni. De exemplu, în secțiunea pentru completarea datelor despre o mașină, le puteți include și în elementul de câmp „6 cifre ale codului VIN” cu o valoare a expresiei regulate în formular {6} . Ceea ce va determina posibilitatea completarii numai cu numere egale cu 6 caractere (poz. 34).
Atribut necesar specifică că câmpul este obligatoriu. Dacă este gol, formularul nu va fi trimis și va fi emis mesajul corespunzător. În acest caz, acest lucru se aplică câmpurilor „Nume” (poz. 81), „Login” (poz. 91) și „Parolă” (poz. 100).
În rest, nu există un atribut pentru „E-mail” (poz. 85), deoarece acest câmp nu este obligatoriu să fie completat. Despre aceasta informează nota corespunzătoare (poz. 87).
Pentru câmpul „Confirmare parolă” (poz. 108), nu este nevoie să utilizați atributul din alt motiv. Acest lucru se datorează faptului că va fi folosit un script JavaScript pentru a verifica identitatea intrării repetate Iar dacă combinația de caractere la introducerea parolei nu se potrivește, formularul nu va fi trimis. Prin urmare, pentru a trimite cu succes formularul, acest câmp trebuie în orice caz completat.
Atribut substituent afișează un text indiciu care este de obicei gri și dispare pe măsură ce tastați.
În acest caz, aceasta se aplică câmpurilor de introducere a parolei. Pentru câmpul „Parolă” (poz. 100), textul prompt este „Introduceți parola”, iar pentru a confirma parola (poz. 108) - „Repetați parola”.
Trebuie remarcat faptul că utilizarea acestui atribut oferă elementelor conținut informațional suplimentar. Și dacă se dorește, forma poate fi simplificată puțin. De exemplu, pentru astfel de câmpuri nu puteți folosi deloc un element de etichetă . Sau, pur și simplu indicați o valoare goală în ea, așa cum s-a făcut în cazul nostru pentru câmpul de confirmare a parolei (poz. 105).

După ce adăugăm elementele de înregistrare nou generate la formularul de comandă online aflat în fișierul „poluchit-skidku.php” din directorul „articole”, puteți deschide pagina corespunzătoare „Obțineți o reducere” și puteți vedea ce am făcut.

Fig.3 Elemente de înregistrare nou generate

După cum puteți vedea în captură de ecran, toate elementele noi au fost adăugate. Cu toate acestea, dimensiunea și locația lor pe pagină nu corespund încă cu aspectul tipic al altor elemente de formular.

Acest lucru se datorează faptului că în acest moment elemente noi sunt afișate de browser în conformitate cu proprietățile de stil atribuite implicit. Pentru a remedia acest lucru, trebuie să le stilați, așa cum am făcut mai devreme în articolul Stilizarea elementelor de formular folosind CSS.

Ca urmare, după transformările finalizate, vom obține formularul final al formularului de comandă online cu secțiunea de înregistrare adăugată (codul CSS corespunzător se găsește în fișierul „main.css”, care se găsește în secțiunea) .

Pentru a mări/scădea dimensiunea imaginii, faceți clic pe imagine

Fig.4 Elemente de înregistrare create după stilarea cu stiluri CSS

După cum puteți vedea, toate elementele necesare au fost create și au căpătat aspectul potrivit. În acest caz, sunt specificate toate condițiile necesare pentru completarea câmpurilor de formular.

Acum să verificăm cum vor funcționa filtrele specificate, care determină condițiile de completare a câmpurilor de intrare.

Verificarea validării formularului din partea clientului

Anterior, la crearea elementelor de formular pentru a forma diferite filtre, am folosit anumite atribute . Și acum să vedem cum vor funcționa, și anume: dacă trimiterea formularului va fi blocată dacă nu sunt îndeplinite condițiile de completare a câmpurilor și cum va fi afișat acest lucru pe pagină.

Pentru a face acest lucru, completați corect toate câmpurile formularului, cu excepția unuia, în care simulăm alternativ diferite tipuri de erori. Și apoi, separat pentru fiecare caz, vom încerca să trimitem formularul făcând clic pe butonul „trimite”.

Mai întâi, să creăm o situație în care unul dintre câmpurile necesare este gol. În acest caz, vom lăsa evident câmpul necompletat, al cărui element a fost completat cu atributul necesar. În acest caz, selectați câmpul „Autentificare” pentru aceasta.

Rezultatul unei astfel de verificări este afișat în următoarea captură de ecran.

Pentru a mări/scădea dimensiunea imaginii, faceți clic pe imagine

Fig.5 Verificarea trimiterii unui formular cu un câmp obligatoriu gol

După cum puteți vedea, opțiunea cu câmp gol, care este definită ca fiind obligatorie, este procesată corespunzător și anume: formularul nu este trimis (blocat), iar câmpul cu problemă și tipul de eroare sunt afișate în browser.

În următorul test, vom vedea dacă filtrul va funcționa pe baza introducerii corecte a caracterelor. Pentru a face acest lucru, selectați un câmp al cărui element include atributul model. După cum sa menționat anterior, valoarea sa este o expresie regulată care determină condiția de completare a câmpului.

În formularul nostru, acest atribut este aplicat câmpurilor „Nume”, „Autentificare” și „Parolă”. Pentru a verifica, să luăm, de exemplu, câmpul „Nume”, în elementul căruia expresia regulată este specificată în formular [A-Yaa-yaYoyo](3,). Ceea ce înseamnă că în acest câmp trebuie introdusă o combinație de caractere, formată din litere mari și mici ale alfabetului rus și care să conțină cel puțin 3 caractere.

Acum vom completa acest câmp folosind nu litere rusești, ci litere latine. Apoi vom încerca să trimitem formularul.

Pentru a mări/scădea dimensiunea imaginii, faceți clic pe imagine

Fig.6 Verificarea trimiterii unui formular cu un câmp completat incorect

Captura de ecran arată că această versiune a erorii cu introducere și formular incorecte este în curs de procesare.

Iar ultimul lucru pe care îl vom verifica este funcționalitatea de detectare a adreselor de e-mail introduse incorect.

Anterior, pentru un astfel de element am atribuit în mod specific un tip e-mail, care în HTML5 necesită o verificare separată pentru a se asigura că acest câmp este completat corect. Și acum să verificăm cum funcționează acest lucru în formularul nostru.

Pentru a face acest lucru, introduceți o adresă de e-mail evident eronată în câmpul specificat, de exemplu, excludeți simbolul „@” din acesta. Și ca și în cazurile anterioare, să încercăm să trimitem formularul în această stare.

Pentru a mări/scădea dimensiunea imaginii, faceți clic pe imagine

Fig.7 Verificarea trimiterii unui formular cu un câmp de e-mail completat incorect

Ca urmare, formularul a fost blocat din nou și a fost generată o eroare. Aceasta indică funcționarea normală a acestor tipuri de verificări.

Astfel, am creat elemente de înregistrare prin includerea acestei secțiuni în formularul de comandă online. Apoi am verificat validarea clientului în partea care ar putea fi oferită de capabilitățile limbajului de marcare HTML5.

În concluzie, adăugăm formularului text explicativ și obținem versiunea finală a paginii în care, la completarea unei cereri online, clientul primește o reducere la instalarea sistemelor antifurt auto. Puteți vedea cum va arăta până la urmă la pagina corespunzătoare locul de testare.

captura de ecran 77

În articolul următor, vom crea un alt instrument de validare care va verifica identitatea unei combinații de caractere la introducerea unei parole pentru prima dată și din nou. Dar acest lucru va fi deja implementat folosind un script adecvat scris în JavaScript.

Fișierele sursă ale site-ului

Fișierele sursă ale site-ului cu actualizările care au fost făcute în acest articol pot fi descărcate din materialele suplimentare atașate:

fisierele directorului www
Tabelele bazei de date MySQL

Formularele HTML sunt elemente complexe de interfață. Acestea includ diferite elemente funcționale: câmpuri de intrare Şi , liste <select>, sfaturi etc. Tot codul formularului este conținut în element <form> .</p> <p>Majoritatea informațiilor din formularele web sunt transmise folosind elementul <input>. Pentru a introduce un rând de text, utilizați elementul <input type="text">, pentru mai multe linii - element <textarea>. Element <select>creează o listă derulantă.</p> <p>Element <label>creează etichete pentru câmpurile de formular. Există două moduri de a grupa etichetele și câmpurile. Dacă câmpul se află în interiorul unui element <label>, atunci nu trebuie specificat atributul for.</p><p> <label for="lastname">Nume</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Nume</label> <label>Nume <input type="text" name="lastname"></label> </p><p>Câmpurile formularului pot fi împărțite în blocuri logice folosind elementul <fieldset>. Fiecare secțiune poate fi denumită folosind elementul <legend> .</p><p> <fieldset> <legend>Informații de contact</legend> <label>Nume <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Orez. 1. Gruparea câmpurilor formularului</p><p>Pentru a face formularul mai ușor de înțeles pentru utilizatori, textul este adăugat în câmpurile formularului pentru a oferi un exemplu de date de intrare. Acest tip de text se numește text wildcard și este creat folosind atributul substituent.</p> <p>Câmpurile obligatorii trebuie, de asemenea, evidențiate. Înainte de apariția HTML5, simbolul asterisc * era folosit lângă numele câmpului. Noua specificație introduce un atribut obligatoriu special, care vă permite să marcați un câmp obligatoriu la nivel de marcare. Acest atribut indică browserului (presupunând că acceptă HTML5) să nu trimită date după ce utilizatorul dă clic pe Trimite până când câmpurile specificate sunt completate.</p><p> <input type="text" required placeholder="Numele dumneavoastră"> </p><p>Pentru a schimba aspectul unui câmp de text atunci când primiți focalizarea, utilizați pseudoclasa de focalizare. De exemplu, puteți întuneca fundalul câmpului curent sau puteți adăuga un chenar colorat pentru a-l scoate în evidență de restul:</p><p>Intrare: focus ( fundal: #eaeaea; )</p><p>Un alt atribut HTML5 util este atributul autofocus. Vă permite să setați automat focalizarea pe câmpul inițial dorit pentru elemente <input>Şi <textarea>(doar un element din fiecare formular).</p> <h2>Exemplu de creare a unui formular de înregistrare</h2> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Înregistrare</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nume</label> <input type="text" name="name" required> </div> <div class="radio">Podea <label> <input type="radio" name="sex" value="bărbat">bărbat <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="femeie">femeie <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Ţară</label> <select name="country"> <option>Selectați țara de reședință</option> <option value="Rusia">Rusia</option> <option value="Ucraina">Ucraina</option> <option value="Bielorusia">Bielorusia</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Trimite</button> </form> </div> <p><b>Nota</b><br>action="form.php" - link către fișierul de gestionare a formularelor. Creați un fișier în codificare UTF-8, încărcați-l pe server și înlocuiți action="form.php" cu calea către fișierul de pe serverul dvs.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Orez. 2. Aspectul implicit al formularului <p>După cum puteți vedea din figură, fiecare element de formular are stiluri implicite de browser. Să ștergem stilurile și să stilăm elementele de formular.</p><p> Form-wrap ( lățime: 550px; fundal: #ffd500; chenar-rază: 20px; ) .form-wrap *(tranziție: .1s liniar) .profile ( lățime: 240px; float: stânga; text-align: center; umplutură) : 30px; ) form ( fundal: alb; float: stânga; lățime: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; culoare: #7b7b7b; ) .form-wrap:after, form div:after (conținut: ""; afișare: tabel; clar: ambele; ) form div ( margin-bottom: 15px; poziție: relativ; ) h1 ( font-size: 24px; font-weight: 400; poziție: relativ ; margin-top: 50px ) h1:after (conținut: "\f138"; font-size: 40px; font-family: FontAwesome; poziție: absolut; sus: 50px; stânga: 50%; transform: translateX(-50) %); /******************** stilul elementelor de formular ******************** ** / etichetă, span ( afișare: bloc; dimensiunea fontului: 14px; marginea inferioară: 8px; ) intrare, intrare ( lățime chenar: 0; contur: niciunul; margine: 0; lățime: 100%; umplutură: 10px 15px; fundal: #e6e6e6; ) input:focus, input:focus (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etichetă ( poziție: relativă; padding-left: 50px; cursor: pointer; lățime: 50%; float: stânga; line-height: 40px; ) .radio input (poziție: absolut; opacitate: 0; ) .radio -control (poziție: absolut; sus: 0; stânga: 0; înălțime: 40px; lățime: 40px; fundal: #e6e6e6; chenar-rază: 50%; text-align: center; ) .male:before ( conținut: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before (conținut: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label:hover input ~ . control radio, .radiol input:focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:verificat ~ .radio-control (culoare: roșu; ) selectați ( lățime: 100%; cursor: indicator; umplutură: 10px 15px; contur: 0; chenar: 0; fundal: #e6e6e6; culoare: #7b7b7b; -webkit-appearance: none; /* debifați webkit -browsere */ -moz-appearance: none /*debifați în Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*debifați în IE*/ ) .select-arrow (poziție: absolute);</p><p><b>Fișierul Form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: email-ul dvs.." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo „Vă mulțumesc! V-ați înregistrat cu succes.”; ) ?></p><p><b>Nota</b><br>În variabila $subiect, specificați textul care va fi afișat ca titlu al scrisorii; <br>Your_name - aici puteți specifica numele care va fi afișat în câmpul „de la cine este scrisoarea”; <br>înlocuiți your_site_url cu adresa site-ului cu formularul de înregistrare; <br>înlocuiți your_email cu adresa dvs. de e-mail; <br>$headers .= „Bcc: e-mail-ul tău”. „\r\n”; trimite BCC la adresa ta de e-mail.</p> <p>În această lecție vom crea un formular de înregistrare în patru pași: 1. Introducerea numelui de autentificare și a parolei 2. Prenume Prenume și adresă de e-mail 3. Vârsta, sexul și țara 4. Informații generale</p> <h3>HTML</h3> <p>Mai întâi, ca de obicei, să creăm marcajul <b>html</b>. Avem nevoie de un container cu patru blocuri <b>DIV</b>, câte unul pentru fiecare pas. <br>Codul principal <b>html</b> va fi asa:</p><p> <div id="container"> <form action="#" method="post"> <div id="first_step"> <div id="second_step"> <div id="third_step"> <div id="fourth_step"> </form> </div> </p><p><img src='https://i1.wp.com/pcvector.net/uploads/posts/2011-07/1311511689_signup_form_2.png' width="100%" loading=lazy loading=lazy></p> <p>În interiorul fiecărui bloc vom plasa câmpuri și simple <b>eticheta</b>:</p><p>  <div id="first_step"> <h1>Înregistrează-te pe site</h1> <div class="form"> <input type="text" name="username" id="username" value="Va afișa:" /> <label for="username"></label> <input type="password" name="password" id="password" value="Log in" /> <label for="password"></label> <input type="password" name="cpassword" id="cpassword" value="Log in" /> <label for="cpassword"></label> </div> <div class="clear"></div> <input class="submit" type="submit" name="submit_first" id="submit_first" value="" /> </div> <div class="clear"></div> </p><p><img src='https://i2.wp.com/pcvector.net/uploads/posts/2011-07/1311511694_signup_form_3.png' width="100%" loading=lazy loading=lazy></p> <p>Am folosit trei câmpuri de intrare: <b>Autentificare, Parolă</b>Şi <b>Confirmarea parolei</b>, iar la sfârșitul blocului eticheta <b>intrare</b> cu tip <b>depune</b> pentru a trece la pasul următor. Alte blocuri funcționează exact la fel. <br>La sfârșitul containerului avem o bară de progres simplă, iată codul acesteia:</p><p> <div id="progress_bar"> <div id="progress"></div> <div id="progress_text">0% finalizat</div> </div> </p><p><img src='https://i2.wp.com/pcvector.net/uploads/posts/2011-07/1311511742_signup_form_4.png' width="100%" loading=lazy loading=lazy></p> <p>Deplin <b>html</b> codul este cam asa:</p><p> <div id="container"> <form action="#" method="post">  <div id="first_step"> <h1>Înregistrează-te pe site</h1> <div class="form"> <input type="text" name="username" id="username" value="Va afișa:" /> <label for="username">Cel puțin 4 caractere. Doar litere mari, mici sau cifre.</label> <input type="password" name="password" id="password" value="Log in" /> <label for="password">Cel puțin 4 caractere. Utilizați o combinație de litere mari și mici pentru a îmbunătăți fiabilitatea.</label> <input type="password" name="cpassword" id="cpassword" value="Log in" /> <label for="cpassword">Dacă parolele dvs. nu se potrivesc, nu veți putea continua înregistrarea.</label> </div> <div class="clear"></div> <input class="submit" type="submit" name="submit_first" id="submit_first" value="" /> </div> <div class="clear"></div>  <div id="second_step"> <h1>Înregistrează-te pe site</h1> <div class="form"> <input type="text" name="firstname" id="firstname" value="Nume" /> <label for="firstname">Numele dumneavoastră.</label> <input type="text" name="lastname" id="lastname" value="Nume" /> <label for="lastname">Numele dvs. de familie.</label> <input type="text" name="email" id="email" value="E-mail" /> <label for="email">E-mailul dvs.</label> </div> <div class="clear"></div> <input class="submit" type="submit" name="submit_second" id="submit_second" value="" /> </div> <div class="clear"></div>  <div id="third_step"> <h1>Înregistrează-te pe site</h1> <div class="form"> <select id="age" name="age"> <option> 0 - 17</option> <option>18 - 25</option> <option>26 - 40</option> <option>40+</option> </select> <label for="age">Vârsta ta.</label> <div class="clear"></div> <select id="gender" name="gender"> <option>Om</option> <option>Femeie</option> </select> <label for="gender">Genul tău</label> <div class="clear"></div> <select id="country" name="country"> <option>Rusia</option> <option>Ucraina</option> <option>Bielorusia</option> <option>Kazahstan</option> <option>Alte</option> </select> <label for="country">Țara ta.</label> <div class="clear"></div> </div> <div class="clear"></div> <input class="submit" type="submit" name="submit_third" id="submit_third" value="" /> </div> <div class="clear"></div>  <div id="fourth_step"> <h1>Înregistrează-te pe site</h1> <div class="form"> <h2>Informații generale</h2> <table> <tr><td>Va afișa:</td><td></td></tr> <tr><td>Log in</td><td></td></tr> <tr><td>E-mail</td><td></td></tr> <tr><td>Nume</td><td></td></tr> <tr><td>Vârstă</td><td></td></tr> <tr><td>Podea</td><td></td></tr> <tr><td>Ţară</td><td></td></tr> </table> </div> <div class="clear"></div> <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" /> </div> </form> </div> <div id="progress_bar"> <div id="progress"></div> <div id="progress_text">0% finalizat</div> </div> <br>După cum probabil ați observat, în al patrulea pas tabelul este gol. Îl vom completa cu informațiile introduse de utilizator folosind jQuery.</p><h3>CSS</h3> <p>Acum să adăugăm stiluri în formular. Vom aplica regula <b>@fontface</b> pentru a utiliza fonturi personalizate. În cazul nostru, acesta este fontul <b>Cantarell</b>. Cod complet <b>CSS</b> este dat mai jos:</p><p> /* Resetare CSS (Eric Meyer) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address, mare,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol,ul,li,fieldset,form,etichetă,legendă,tabel,legendă,tbody,tfoot,thead,tr,th,td(border:0;outline:0;font-size:100%;vertical -align:baseline;background:transparent;margin:0;padding:0)body(line-height:1)ol,ul(list-style:none)blockquote,q(quotes:none):focus(outline:0) ins(text-decoration:none)del(text-decoration:line-through)table(border-collapse:collapse;border-spacing:0) @font-face (familie de fonturi: „Cantarell”; src: url(. ./fonts/Cantarell-Regular.eot); src: local("Cantarell"), url("../fonts/Cantarell-Regular.ttf") format("truetype" ) body ( background-color: # f9f9f9; culoare: #222; font-family: Cantarell, Verdana, sans-serif font-size: 12px input::-moz-focus-inner, input::-moz-focus-inner; focus, input:focus (contur: niciunul; ) .clear (clar: ambele; ) #container ( fundal: url("../images/container.png") fără repetare; lățime: 754px; înălțime: 370px; margine: 20px automat; padding: 50px 0; overflow: ascuns; poziție: relativă; ) #container #first_step, #second_step, #third_step, #fourth_step ( afișare: niciunul; ) #container #first_step ( afișare: bloc; ) #container .form ( margine: 66px 72px 0 72px; ) #container h1, #container h2 ( font-size: Cantarell, Verdana, font-size: 24px text-shadow: 1px 2px color: #888; ; ) #container table (marja: 20px 40px; font-weight: bold; ) #container table td (padding: 5px 10px; ) #container table td:nth-child(2) ( culoare: #a90329; ) #container input , #container select ( background: url("../images/input.png") no- repeat; culoare: #888; chenar: 1px solid #ccc; font-family: Cantarell, Verdana, font-weight: bold; ./images/send.png") no-repeat; ) #container input.error ( chenar: 1px roșu continuu; ) #container input.valid ( chenar: 1px solid #1FFF00; ) #container input:focus, #container select :focus (chenar: 1px solid #a90329; culoare: #a90329; ) #container select (padding: 5px 0 5px 25px; ) #container option (padding: 0 15px; ) #container etichetă (culoare: #666; font-size : 12px; font-greutate: aldine: 14px; margine: 23px -25px; margine: 0 auto; : center-greutate: bold: text-shadow: 1px 222 px;</p><h3>JS</h3> <p><b>jQuery</b>Îl vom folosi pentru a schimba fără probleme blocurile (diapozitive), pentru a verifica corectitudinea datelor și pentru a modifica procentul de finalizare. <br>Va trebui să conectăm biblioteca în antetul paginii <b>jQuery</b>și încă două plugin-uri: <br><b>jQuery UI</b>Şi <b>jQuery inputfocus</b>(folosit pentru a controla evenimentele de focalizare și de neclaritate). <br><b>jQuery</b> codul este mai jos:</p><p>$(funcție())( //valorile câmpului original var field_values = ( //id: valoare "nume utilizator)" : "Логин", "password" : "Пароль", "cpassword" : "Пароль", "firstname" : "Имя", "lastname" : "Фамилия", "email" : "email" }; //inputfocus $("input#username").inputfocus({ value: field_values["username"] }); $("input#password").inputfocus({ value: field_values["password"] }); $("input#cpassword").inputfocus({ value: field_values["cpassword"] }); $("input#lastname").inputfocus({ value: field_values["lastname"] }); $("input#firstname").inputfocus({ value: field_values["firstname"] }); $("input#email").inputfocus({ value: field_values["email"] }); //reset progress bar $("#progress").css("width","0"); $("#progress_text").html("0% Выполнено"); //first_step $("form").submit(function(){ return false; }); $("#submit_first").click(function(){ //remove classes $("#first_step input").removeClass("error").removeClass("valid"); //ckeck if inputs aren"t empty var fields = $("#first_step input, #first_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length!}<4 || value==field_values[$(this).attr("id")]) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { if($("#password").val() != $("#cpassword").val()) { $("#first_step input").each(function(){ $(this).removeClass("valid").addClass("error"); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $("#progress_text").html("33% Выполнено"); $("#progress").css("width","113px"); //slide steps $("#first_step").slideUp(); $("#second_step").slideDown(); } } else return false; }); $("#submit_second").click(function(){ //remove classes $("#second_step input").removeClass("error").removeClass("valid"); var emailPattern = /^+@+\.{2,4}$/; var fields = $("#second_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<1 || value==field_values[$(this).attr("id")] || ($(this).attr("id")=="email" && !emailPattern.test(value))) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { //update progress bar $("#progress_text").html("66% Выполнено"); $("#progress").css("width","226px"); //slide steps $("#second_step").slideUp(); $("#third_step").slideDown(); } else return false; }); $("#submit_third").click(function(){ //update progress bar $("#progress_text").html("100% Выполнено"); $("#progress").css("width","339px"); //prepare the fourth step var fields = new Array($("#username").val(), $("#password").val(), $("#email").val(), $("#firstname").val() + " " + $("#lastname").val(), $("#age").val(), $("#gender").val(), $("#country").val()); var tr = $("#fourth_step tr"); tr.each(function(){ //alert(fields[$(this).index()]) $(this).children("td:nth-child(2)").html(fields[$(this).index()]); }); //slide steps $("#third_step").slideUp(); $("#fourth_step").slideDown(); }); $("#submit_fourth").click(function(){ //send information to server alert("Данные отправлены"); }); }); <br>Aici avem un formular cu înregistrarea în mai mulți pași. Pentru a folosi acest exemplu, trebuie doar să schimbați formularul <b>acţiune</b> cu un link către dvs <b>php</b> fișier folosit pentru a stoca date și a edita linia 132 la: <br><b>$('formular').unbind('trimite').submit();</b>. Pentru a vedea formularul în acțiune, faceți clic pe butonul <b>Demo</b>. </p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="text-19" class="widget widget_text clearfix"> <h3 class="widget-title"><span>Publicitate</span></h3> <div class="textwidget"> <p> </p> </div> </aside> <aside id="recent-posts-7" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Ştiri</span></h3> <ul> <li> <a href="https://shyza.ru/ro/mozhno-li-dobavit-v-vatsap-2-nomera-kak-sozdat-vtoroi-akkaunt-v-whatsapp.html">Cum să creați un al doilea cont WhatsApp pe un smartphone</a> </li> <li> <a href="https://shyza.ru/ro/kak-skachat-i-ispolzovat-mobilnoe-prilozhenie-moi-bilain-prilozhenie-moi.html">Cum să descărcați și să utilizați aplicația mobilă My Beeline</a> </li> <li> <a href="https://shyza.ru/ro/prilozhenie-google-planeta-zemlya-besplatnye-programmy-dlya-windows-skachat.html">Programe gratuite pentru Windows descărcare gratuită</a> </li> <li> <a href="https://shyza.ru/ro/el-pochta-voiti-na-moyu-stranicu-email-pochta-registraciya-vybor.html">Poștă prin e-mail - înregistrare, alegerea unei adrese de e-mail, cum să introduceți căsuța poștală și cum să vizualizați scrisorile primite pe pagina dvs.</a> </li> <li> <a href="https://shyza.ru/ro/kak-proverit-sostoyanie-ozu-na-kompyutere-testirovanie-operativnoi-pamyati.html">Testarea memoriei RAM</a> </li> <li> <a href="https://shyza.ru/ro/pochemu-vsegda-ispolzuetsya-100-procentov-diska-10-zhestkii-disk-polnostyu.html">Hard disk-ul este complet încărcat: cauze și soluții</a> </li> <li> <a href="https://shyza.ru/ro/instrumenty-komandnoi-stroki-dlya-veb-razrabotchika-curl-setopt--.html">Curl_setopt - Setează un parametru pentru sesiunea CURL Exemple Curl Linux</a> </li> <li> <a href="https://shyza.ru/ro/oracle-isklyucheniya-isklyucheniya-oshibki-v-oracle-gruppy-oshibok.html">Excepții (Erori) în Oracle</a> </li> <li> <a href="https://shyza.ru/ro/kak-otobrazhat-yazykovuyu-panel-na-vindovs-7-kak-dobavit-yazyk-na-panel.html">Cum să adăugați o limbă în bara de activități</a> </li> <li> <a href="https://shyza.ru/ro/kak-otsledit-prishla-li-posylka-na-pochtu-otsledit-posylku-pochta-rossii.html">Urmăriți coletul prin poșta rusă</a> </li> </ul> </aside> <aside id="text-20" class="widget widget_text clearfix"> <h3 class="widget-title"><span>Publicitate</span></h3> <div class="textwidget"> <p> </p> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-widgets-wrapper"> <div class="inner-wrap"> <div class="footer-widgets-area clearfix"> <div class="tg-footer-main-widget"> </div> <div class="tg-footer-other-widgets"> <div class="tg-second-footer-widget"> <aside id="text-28" class="widget widget_text clearfix"> <div class="textwidget"> <p style="text-align: center;"><strong>shyza.ru</strong></p> <p style="text-align: center;"><strong>Sfat. Răspunsuri. Soluții</strong></p> <p style="text-align: center;"><strong>2024</strong></p> <p style="text-align: center;" <span style="display:scroll;"> <noindex><a target="blank" href="https://www.facebook.com/sharer/sharer.php?u=https://shyza.ru/kak-sozdat-stranicu-registracii-v-html-sozdanie-html-form.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_facebook.png" width="40" height="40" title="grup Facebook" alt="Postează pe Facebook" loading=lazy loading=lazy></a></noindex> </span><span style="display:scroll;"> <noindex><a target="blank" href="https://vk.com/share.php?url=https://shyza.ru/kak-sozdat-stranicu-registracii-v-html-sozdanie-html-form.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_vk.png" width="40" height="40" title="Grupul VKontakte" alt="Publicați pe VKontakte" loading=lazy loading=lazy></a></noindex></span><span style="display:scroll;"> <noindex><a target="blank" href="https://connect.ok.ru/offer?url=https://shyza.ru/kak-sozdat-stranicu-registracii-v-html-sozdanie-html-form.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_odnoklass.png" width="40" height="40" title="Grup în Odnoklassniki" alt="Publicați pe Odnoklassniki" loading=lazy loading=lazy></a></noindex></span> <span style="display:scroll;"> </span> </div> </aside> </div> <div class="tg-third-footer-widget"> <aside id="text-32" class="widget widget_text clearfix"> <div class="textwidget"> <div class="footer-socket-left-sectoin"> </div> </div> </div> </div></div> </aside> </div> <div class="tg-fourth-footer-widget"> </div> </div> </div> </div> </div> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.1'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/navigation.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/sticky/jquery.sticky.js?ver=20150309'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/sticky/sticky-setting.js?ver=20150309'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/magnific-popup/jquery.magnific-popup.min.js?ver=20150310'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/magnific-popup/image-popup-setting.js?ver=20150310'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/post-format.js?ver=20150422'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.3'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(easy_fancybox_handler); jQuery(document.body).on('post-load', easy_fancybox_handler); jQuery(easy_fancybox_auto); </script> </body> </html>

Va afișa:
Log in

Va afișa:
Log in