Reģistrācijas un autorizācijas veidlapa jquery. Lieliskas reģistrācijas sistēmas izveide, izmantojot PHP, MySQL un jQuery. Izsmalcināta AJAX saziņas veidlapa

Viss darbojas ar PHP, un dati tiek glabāti MySQL datu bāzē.

Sistēma izmanto izcilu bīdāmo paneli, ko izstrādājis Web-kreation.

Vispirms mums ir jāizveido tabula, kurā būs visi dati par reģistrētajiem lietotājiem. Vaicājuma kods ir pieejams avota arhīva failā table.sql.

Mēs definējam id kā veselu skaitli ar opciju auto_increment - tas tiks automātiski piešķirts katram jaunam reģistrētajam lietotājam. Tāpat usr ir definēts kā unikāla atslēga – tabulā nav atļauts eksistēt diviem ierakstiem ar vienu un to pašu lietotājvārdu.

Vēlāk mēs izmantosim norādītos rekvizītus reģistrācijas procesā, kad tiks ievadīts lietotājvārds.

Pēc tabulas izveides failā connect.php ir jāaizpilda mainīgie, lai izveidotu savienojumu ar datu bāzi, lai varētu palaist kodu savā serverī.

Pirmkārt, mūsu lapā ir jāievieto tīmekļa izveides veidlapa.

Demo dati

• Sveiki !



• 
  
  Aizvērt paneli
  

Vairākās koda vietās ir PHP priekšraksti, kas pārbauda, ​​vai ir definēts $_SESSION["usr"] vai $_SESSION["id"]. Tie ir patiesi tikai tad, ja lapas apmeklētājs ir reģistrēts lietotājs, kas ļauj mums parādīt slēpto saturu reģistrētajiem apmeklētājiem.

Pēc formas ievietojam pārējo lapas saturu.

jQuery bīdāmais panelis
Vienkārša reģistrācijas pārvaldība ar izmantojot PHP un jQuery

Kaut kāds teksts...

Kodā nav nekā īpaša.

Tagad mēs pārveidosim veidlapu par pilnīgu reģistrācijas un pieteikšanās sistēmu. Lai atrisinātu problēmu, jums būs nepieciešams kaut kas cits, nevis parasts PHP kods. Viss kods ir sadalīts divās daļās.

Ja plānojat kaut ko pievienot, vislabāk ir sadalīt visu vairākos atsevišķi faili un ieslēdziet tos pēc vajadzības. Šī pieeja palīdz izstrādāt lielus projektus un vienlaikus atkārtoti izmantot kodu dažādās vietnes daļās.

Lūk, kā tas tiek īstenots šeit.

Šeit sīkfails tzRemember darbojas kā vadības elements, lai noteiktu, vai ir jāatsakās no lietotāja, kurš nav atzīmējis izvēles rūtiņu “Atcerēties mani”. Ja sīkfails trūkst (pārlūkprogrammas restartēšanas dēļ) un apmeklētājs nav atzīmējis opciju “atcerēties mani”, mēs dzēšam sesiju.

Pati sesija paliks aktīva divas nedēļas (kā iestatīts parametrā session_set_cookie_params).

Un šeit ir demo.php otrā daļa.

Else if($_POST["iesniegt"]=="Reģistrēties")
{
// Ja pieprasījums ir nosūtīts no Reģistrācijas formas
$err = masīvs();
if(strlen($_POST["lietotājvārds"])32)
{
$err="Lietotājvārdam jābūt no 3 līdz 32 rakstzīmēm garam!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["lietotājvārds"]))
{
$err="Lietotājvārds satur nederīgas rakstzīmes!";
}
if(!checkEmail($_POST["e-pasts"]))
{
$err="Jūsu epasta adrese nepareizi!";
}
if(!count($err))
{
// Ja kļūdu nav
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// Izveidojiet nejaušu paroli
$_POST["e-pasts"] = mysql_real_escape_string($_POST["e-pasts"]);
$_POST["lietotājvārds"] = mysql_real_escape_string($_POST["lietotājvārds"]);
// sagatavojiet datus
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VĒRTĪBAS(
"".$_POST["lietotājvārds"]."",
".md5($pass).",
"".$_POST["e-pasts"]."",
"".$_SERVER["REMOTE_ADDR"]."",
TAGAD ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-pasts"],
"Reģistrācijas sistēmas demonstrēšana - paroles ģenerēšana",
"Jūsu parole: ".$pass);
$_SESSION["msg"]["reg-success"]="Mēs esam nosūtījuši jums e-pastu ar jūsu jauno paroli!";
}
else $err="Šis lietotājvārds jau tiek lietots!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Atrašanās vieta: demo.php");
Izeja;
}
$script = "";
if($_SESSION["ziņa"])
{
// Skripts parāda bīdāmu paneli ielādes lapā
$script = "

$(funkcija())(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Visas definētās kļūdas mēs saglabājam masīvā $err, kas vēlāk tiek piešķirts mainīgajam $_SESSION. Tādā veidā piekļuve tai tiek saglabāta pēc pārlūkprogrammas novirzīšanas.

Dažas vietnes var saņemt brīdinājumu, kad tiek iesniegta veidlapa vai nākamreiz, kad lapa tiek atsvaidzināta, ka dati jau ir iesniegti. Tas var radīt problēmas, jo tas izraisa dublikātu reģistrāciju un nevajadzīgu servera slodzi.

Mēs izmantojam galvenes funkciju, lai novērstu kļūdu, novirzot pārlūkprogrammu uz to pašu lapu. Tādējādi tiek atjaunināts lapas skats, pārlūkprogrammai neatpazīstot to kā veidlapas pieprasījumu. Rezultātā lapa tiek atsvaidzināta un dati netiek pārsūtīti.

Bet, tā kā mēs izmantojam $_SESSION, lai saglabātu visas atklātās kļūdas, ir ļoti svarīgi, lai mēs atiestatītu visus mainīgos, tiklīdz kļūda tiek parādīta lietotājam. Pretējā gadījumā tas tiks parādīts katrā lapas skatījumā.

Arī lietots papildu skripts, kas parāda joslu lejupielādes lapā, lai ziņojums būtu redzams lietotājam.

Bīdāmajā panelī tiek izmantots savs stilu fails. Tāpēc mums atliek tikai izveidot mūsu lapas stilu.

Bīdāmajam panelim ir savs jQuery fails.

Pirmajā rindā ir iekļauta jQuery bibliotēka no Google CDN. Nākamais nāk IE6 PNG ielāps caurspīdīguma elementiem. Pēc tam paneļa skripts ir ieslēgts

Mainīgais $script parāda paneli ielādes lapā, ja nepieciešams.

IN Twitter tīkli Jūs varat redzēt, ka lapa darbojas ar tīru un vienkāršu dizainu. Apskatiet lapas augšējo labo daļu, tur jūs redzēsiet pogu, lai pieteiktos sistēmā, noklikšķinot uz tās jūs redzēsiet veidlapas datu aizpildīšanai. Šodien mēs jums pateiksim, kā izveidot līdzīgu efektu savā vietnē. Patiesībā tas ir ļoti vienkārši. Turklāt tas palīdzēs ietaupīt vietu lapā un pievienot apmeklētājiem komforta sajūtu. Šajā rakstā mēs soli pa solim pastāstīsim, kā darbojas visa šī sistēma, un šī rokasgrāmata noderēs arī tiem, kas vēlas apgūt jQuery. Uz priekšu!

HTML kods

Vispirms jums jāsāk ar HTML kodu. HTML kods ir ļoti vienkāršs - tajā ir tags “a”, kas iet kopā ar tagu “fieldset”, kura dēļ forma tiek parādīta.

Vienkārši iekopējiet to savā kodā jauna lapa:

Vai jums ir konts? Ielogoties


Lietotājvārds vai e-pastu

Parole

Atceries mani

Aizmirsi savu paroli?

Aizmirsāt savu lietotājvārdu?

Jums būs nepieciešams izmantojot CSS lai definētu autorizācijas pogu un pieteikšanās veidlapu. Zemāk esošais kods veic tieši šo funkciju.

Vienkārši nokopējiet šo kodu savā css failā vai pievienojiet to savam HTML kodam, kurā definējat stilu. Šie kodi nosaka pieteikšanās pogu.

#container (
platums: 780 pikseļi;
margin:0 auto;
pozīcija: relatīvs;
}

#content (
platums: 520 pikseļi;
minimālais augstums: 500 pikseļi;
}
a:link, a:visted (
krāsa:#27b;
teksta noformējums: nav;
}
a:hover (
teksta dekorēšana: pasvītrojums;
}
attēls (
apmales platums: 0;
}
#topnav (
polsterējums: 10 pikseļi 0 pikseļi 12 pikseļi;
fonta izmērs: 11 pikseļi;
līnijas augstums: 23 pikseļi;
text-align:right;
}
#topnav a.signin (
background:#88bbd4;
polsterējums: 4 pikseļi 6 pikseļi 6 pikseļi;
teksta noformējums: nav;
fonta svars: treknrakstā;
krāsa:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
apmales rādiuss: 4 pikseļi;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*polsterējums:4px 12px 6px;
}
#topnav a.signin:hover (
fons:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*polsterējums:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*fona pozīcija:0 3 pikseļi!svarīgi;
}

a.signin(
pozīcija: radinieks;
piemale-kreisais: 3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
fona pozīcija: 100% 50%;
polsterējums: 4 pikseļi 16 pikseļi 6 pikseļi 0;
}
#topnav a.menu-open (
background:#ddeef6!svarīgi;
krāsa:#666!svarīgi;
kontūra: nav;
}
#small_signup (
displejs: iekļauts;
peldēt: nav;
līnijas augstums: 23 pikseļi;
piemale: 25 pikseļi 0 0;
platums: 170 pikseļi;
}
a.signin.menu-open span (
background-image:url("images/toggle_up_dark.png");
krāsa:#789;
}

Un tad nāk pieteikšanās formas definīcija:

#signin_menu (
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
displejs: nav;
fona krāsa:#ddeef6;
pozīcija: absolūts;
platums: 210 pikseļi;
z-indekss:100;
apmale: 1px caurspīdīga;
teksta izlīdzināšana: pa kreisi;
polsterējums: 12 pikseļi;
augšpusē: 24,5 pikseļi;
pa labi: 0 pikseļi;
mala augšdaļa: 5 pikseļi;
mala-labā: 0px;
*mala-labā: -1px;
krāsa:#789;
fonta izmērs: 11 pikseļi;
}

#signin_menu ievade, #signin_menu ievade (
displejs: bloks;
-moz-border-radius:4px;
-webkit-border-radius:4px;
apmale: 1px ciets #ACE;
fonta izmērs: 13 pikseļi;
piemale: 0 0 5 pikseļi;
polsterējums: 5px;
platums: 203 pikseļi;
}
#signin_menu p (
piemale:0;
}
#signin_menu a (
krāsa:#6AC;
}
#signin_menu etiķete (
fonta svars: normāls;
}
#signin_menu p.remember (
polsterējums: 10 pikseļi 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
skaidrs: abi;
piemale: 5 pikseļi 0;
}
#signin_menu p a (
krāsa:#27B!svarīgi;
}
#signin_submit (
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
apmale: 1px solid #39D;
krāsa:#fff;
text-shadow:0 -1px 0 #39d;
polsterējums: 4 pikseļi 10 pikseļi 5 pikseļi;
fonta izmērs: 11 pikseļi;
piemale: 0 5 pikseļi 0 0;
fonta svars: treknrakstā;
}
#signin_submit::-moz-focus-inner (
polsterējums:0;
robeža:0;
}
#signin_submit:hover, #signin_submit:focus (
fona pozīcija: 0–5 pikseļi;
kursors:rādītājs;
}

Ir pienācis laiks strādāt ar javascript

Šķiet, ka, HTML kodi un CSS ir diezgan sarežģīti un mulsinoši, bet javascript viss ir ļoti vienkārši. Vienkārši nokopējiet šo javascript kodu, kas ļaus jums parādīt un paslēpt veidlapu, noklikšķinot uz pieteikšanās pogas, pat ja klikšķis tiek veikts ārpus pieteikšanās veidlapas.

$(dokuments).ready(function() (

$(.signin").click(function(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(.signin").toggleClass("izvēlne-atvērt");
});

$("fieldset#signin_menu").mouseup(function() (
atgriezt nepatiesu
});
$(document).mouseup(function(e) (
if($(e.target).parent("a.signin").length==0) (
$(.signin").removeClass("izvēlne-atvērt");
$("fieldset#signin_menu").hide();
}
});

});

Saskaņā ar iepriekš norādīto kodu, kad apmeklētājs noklikšķina uz pieteikšanās pogas, jauna funkcija. Vispirms tiek parādīta pieteikšanās forma (ievietota tagā “filedset”), pēc tam saite, kas atrodas klasē “.signin”, pievieno vēl vienu “menu-open” klasi, kuras dēļ tiek mainīts fona attēls.

Vēl viens notikums šajā kodā ir tāds, ka apmeklētājiem noklikšķinot nevis uz pieteikšanās veidlapas, bet kaut kur lapā, forma pati aizveras. Citiem vārdiem sakot, klasei "menu-open" tiek noņemta saite ar klasi ".signin" un tiek atgriezta tā sākotnējā fona attēls.

Kas attiecas uz padomiem?

$(funkcija() (
$("#forgot_username_link").tipsy((gravitācija: "w"));
});

Mēs parasti iesakām izmantot jQuery spraudni – tipsy. Rīka padoma saturs ir rakstīts ar saiti saistītajā atribūtā "title". Varat mainīt rīka padoma pozīciju attiecībā pret austrumiem, rietumiem, dienvidiem vai ziemeļiem. Tas tiek īstenots, izmantojot “gravitācijas” parametru, kas norādīts iepriekš minētajā kodā. Mēs piedāvājam jums saiti uz šim spraudnim veltītu vietni, kur varat sīkāk izpētīt tā iespējas un lejupielādēt spraudni. ...

Beidzot

Ja nokopējāt visu kodu no šī raksta, lūdzu, nemainiet mapes struktūru. Ja to mainīsit, kods nedarbosies. Šis kods ir tikai piemērs, kā izveidot pieteikšanās nolaižamo veidlapu, izmantojot jQuery. Veiksmi jūsu praksē!

Adaptīvs ar pieteikšanās un reģistrācijas formu funkcijām, ar iespēju dinamiski pārslēgties, nepārlādējot lapu. Pēc loga parādīšanās lietotājs var viegli pārslēgties no viena uz otru un, ja nepieciešams, izvēlēties iespēju mainīt paroli.
Šodien apskatīsim, kā to visu var īstenot, izmantojot neliela, bet ļoti funkcionāla jQuery spraudņa un jauno CSS3 standartu kombināciju.

Šī metode būs noderīga, ja vēlaties, lai pieteikšanās un reģistrācijas veidlapas būtu pieejamas lietotājiem katrā vietnes lapā. Piesakoties vietnē vai reģistrējoties, lietotāji netiks novirzīti uz citu lapu un varēs veikt visu nepieciešamās darbības“neizkāpjot no kases”, viss vienā lapā.

Dekors izskats uznirstošās formas tiek realizētas, izmantojot CSS3, spraudņa kopējais svars nemaz nav liels, modālā loga reakcija un ielāde notiek gandrīz bez kavēšanās.
100% atsaucīgs izkārtojums, modālā loga augstums un platums ar formām tiek automātiski iestatīts atbilstoši lietotāja ierīču ekrāna izmēriem.

Mēs apskatījām piemēru, tagad detalizēti apskatīsim visus modālā loga un veidlapu galvenos komponentus, lai uzzinātu, kā tos izmantot savā vietnē.
Uznirstošais logs ar pieteikšanās un reģistrācijas veidlapām ir veidots, izmantojot populāro JavaScript bibliotēku, izpildāmo jQuey spraudni un ģenerētos CSS stilus. Visi šie rīki ir jāsavieno ar jūsu vietni. Pēdējais pašreizējā versija jQuey bibliotēkas var pieslēgt tieši no Google, arhīvā var atrast spraudņa failu main.js un gatavu ģenerēto stilu kopu style.css.
Javascript tiek rakstīts pirms beigu taga, CSS stili var kopēt un pievienot jūsu vietnes failam styles.css.

Modālo logu pamata konteiners uz tumša fona un iebūvētās formas ar vadīklām tiek ievietotas lapas pamattekstā. Lai labāk saprastu, es nošķiru nozares un pievienoju komentārus. Visi dizaina elementi ir cieši saistīti ar CSS, izmantojot noteiktas klases, tāpēc nav grūti mainīt veidlapu dizainu atbilstoši jūsu vietņu kopējam dizainam.

• Ieeja
• Reģistrācija

E-pasts Kļūdas ziņojums šeit!

Parole SlēptŠeit ir kļūdas ziņojums!

Atceries mani

Aizmirsi savu paroli?

Lietotājvārda kļūdas ziņojums šeit!

E-pasts Kļūdas ziņojums šeit!

Parole SlēptŠeit ir kļūdas ziņojums!

ES piekrītu Noteikumi

Aizmirsi savu paroli? Lūdzu ievadiet savu e-pasta adresi. Jūs saņemsiet saiti jaunas paroles izveidošanai.

E-pasts Kļūdas ziņojums šeit!

Atgriezties pie ieejas

Autors izveidoja pamata veidni un veidlapas vadīklas populārajā, plakans stils(Flat), ar skaidru uzsvaru uz minimālismu. Nekas lieks, vidēji caurspīdīgs tumšāks fons, viegli salasāmas krāsas, labi izvēlēts fonts un ikonas ievades lauku apzīmēšanai. Izmantojot CSS īpašības, varat viegli modificēt jebkuru formas elementu.

Cd-user-modal ( pozīcija: fiksēta; augšā: 0; pa kreisi: 0; platums: 100%; augstums: 100%; fons: rgba(52, 54, 66, 0.9); z-indekss: 3; pārpildes-y : auto; kursors: rādītājs; redzamība: slēpta; necaurredzamība: 0; -webkit-pāreja: necaurredzamība 0,3 s 0, redzamība 0 0,3 s; -moz-pāreja: necaurredzamība 0,3 s 0, redzamība 0 0,3 s; pāreja: necaurredzamība 0,3 s 0, redzamība 0 0,3 s; ) .cd-user-modal.is-visible ( redzamība: redzama; necaurredzamība: 1; -webkit-transition: necaurredzamība 0,3 s 0, redzamība 0 0; -moz-transition: necaurredzamība 0,3 s 0 , redzamība 0 0; pāreja: necaurredzamība 0,3 s 0, redzamība 0 0; ) .cd-user-modal.is-visible .cd-user-modal-container ( -webkit-transform: translateY(0); -moz-transform : translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transformate: translateY(0); ) .cd-user-modal-container ( pozīcija: relatīvā; platums: 90 %; maksimālais platums: 600 pikseļi; fons: #FFF; piemale: 3 em auto 4 em; kursors: auto; apmales rādiuss: 0,25 em; -webkit-transform: translateY (-30px); -moz-transform: translateY (-30px) ); -ms-transform: translateY(-30px); -o-transformācija: translateY(-30px); pārveidot: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; pārejas īpašība: pārveidot; -webkit-transition-duration: 0,3s; -moz-transition-duration: 0,3s; pārejas ilgums: 0,3 s; ) .cd-user-modal-container .cd-switcher:after ( saturs: ""; displejs: tabula; skaidrs: abi; ) .cd-user-modal-container .cd-switcher li ( platums: 50%; peldēt : pa kreisi; teksta līdzināšana: centrā; ) .cd-user-modal-container .cd-switcher li:first-child a ( border-radius: .25em 0 0 0; ) .cd-user-modal-container .cd -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( displejs: bloks; platums: 100%; augstums: 50 pikseļi; līnijas augstums : 50 pikseļi; fons: #d2d8d8; krāsa: #809191; ) .cd-user-modal-container .cd-switcher a.selected ( fons: #FFF; krāsa: #505260; ) @media only screen and (min-width) : 600px) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal-container .cd-switcher a ( augstums: 70 pikseļi; līnijas augstums: 70 pikseļi; ) ) .cd-form ( polsterējums: 1.4em; ) .cd-form .fieldset ( pozīcija: relatīvā; piemale: 1.4em 0; ) .cd-form .fieldset:first-child ( margin-top: 0; ) .cd-form .fieldset:last -bērns ( margin-bottom: 0; ) .cd-form label ( font-size: 14px; fonta izmērs: 0,875 rem; ) .cd-form label.image-replace ( /* aizstāt tekstu ar ikonu */ displejs: inline-block; pozīcija: absolūts; pa kreisi: 15 pikseļi; augšā: 50%; apakšā: automātiski; -webkit-transform: translateY(- 50%); -moz-transform: translateY (-50%); -ms-transform: translateY (-50%); -o-transform: translateY (-50%); transform: translateY (-50%); augstums : 20 pikseļi; platums: 20 pikseļi; pārpilde: paslēpta; teksta atkāpe: 100%; atstarpe: bez iesaiņojuma; krāsa: caurspīdīga; teksta ēna: nav; fona atkārtojums: neatkārtot; fona pozīcija: 50% 0; ) /* Ikonas ievades laukiem */ .cd-form label.cd-username ( background-image: url(). ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( fona attēls: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( fona attēls: url("../img/cd-icon-password.svg"); ) .cd formas ievade ( piemale: 0; polsterējums: 0; apmales rādiuss: 0,25 em; ) .cd-form input.full-width (platums: 100%; ) .cd-form input.has-padding ( polsterējums: 12px 20px 12px 50px; ) .cd-form input.has-border ( apmale: 1px ciets #d2d8d8; -webkit-appearance: nav; -moz-appearance: nav; -ms-appearance: nav; -o-appearance: nav; izskats: nav; ) .cd-form input.has-border:focus ( border -krāsa: #343642; lodziņa ēna: 0 0 5px rgba(52, 54, 66, 0.1); kontūra: nav; ) .cd-form input.has-error ( apmale: 1px solid #d76666; ) .cd- veidlapas ievade ( /* atstarpe pogai Slēpt */ padding-right: 65px; ) .cd-form input ( polsterējums: 16px 0; kursors: rādītājs; fons: #2f889a; krāsa: #FFF; fonta svars: trekns; apmale : nav; -webkit-appearance: nav; -moz-appearance: nav; -ms-appearance: nav; -o-appearance: nav; izskats: nav; ) .no-touch .cd-form input:hover, .no-touch .cd-form input:focus ( fons: #3599ae; kontūra: nav; ) .cd-form .hide-password ( displejs: inline-block; pozīcija: absolūta; pa labi: 0; augšā: 0; polsterējums: 6 pikseļi 15 pikseļi; apmale pa kreisi: 1 pikseļi cieta #d2d8d8; augšā: 50%; apakšā: automātiski; -webkit-transform: translateY (-50%); -moz- transformācija: translateY (-50%); -ms-transform: translateY (-50%); -o-transform: translateY (-50%); transformācija: translateY (-50%); fonta izmērs: 14px; font- izmērs: 0,875 rem; krāsa: #343642; ) .cd-form .cd-error-message ( displejs: inline-block; pozīcija: absolūts; pa kreisi: -5 pikseļi; apakšā: -35 pikseļi; fons: rgba(215, 102, 102, 0,9); polsterējums: 0,8 em; z indekss: 2; krāsa: #FFF; fonta izmērs: 13 pikseļi; fonta izmērs: 0,8125 rem; apmales rādiuss: 0,25 em; /* novērst klikšķus un pieskārienus */ rādītājs -notikumi: nav; redzamība: slēpta; necaurredzamība: 0; -tīmekļa komplekta pāreja: necaurredzamība 0,2 s 0, redzamība 0 0,2 s; -moz-pāreja: necaurredzamība 0,2 s 0, redzamība 0 0,2 s; pāreja: necaurredzamība 0,2 s 0, redzamība 0 0,2s; ) .cd-form .cd-error-message::after ( /* kļūdas ziņojuma stūris */ saturs: ""; pozīcija: absolūtā; pa kreisi: 22 pikseļi; apakšā: 100%; augstums: 0; platums: 0; apmale - pa kreisi: 8 pikseļi, viendabīgi caurspīdīgi; apmale pa labi: 8 pikseļi, caurspīdīga; apmale apakšā: 8 pikseļi ciets rgba(215, 102, 102, 0,9); ) .cd-form .cd-error-message.is-visible (necaurredzamība: 1 ; redzamība: redzama; -webkit-transition: necaurredzamība 0,2s 0, redzamība 0 0; -moz-transition: necaurredzamība 0. 2s 0, redzamība 0 0; pāreja: necaurredzamība 0,2s 0, redzamība 0 0; ) @media only screen un (min-width: 600px) ( .cd-form ( polsterējums: 2em; ) .cd-form .fieldset ( margin: 2em 0; ) .cd-form .fieldset:first-child ( margin- augšā: 0; ) .cd-form .fieldset:last-child ( margin-bottom: 0; ) .cd-form input.has-padding ( polsterējums: 16px 20px 16px 50px; ) .cd-form input ( polsterējums: 16px 0; ) ) .cd-form-message ( polsterējums: 1,4 em 1,4 em 0; fonta izmērs: 14 pikseļi; fonta izmērs: 0,875 rem; līnijas augstums: 1,4; teksta izlīdzināšana: centrā; ) @media tikai ekrāns un (min-width: 600px) ( .cd-form-message ( polsterējums: 2em 2em 0; ) ) .cd-form-bottom-message ( pozīcija: absolūtais; platums: 100%; pa kreisi: 0; apakšā: -30 pikseļi; teksta izlīdzināšana: centrā; fonta izmērs: 14 pikseļi; fonta izmērs: 0,875 rem; .cd-form-bottom-message a ( krāsa: #FFF; teksta noformējums: pasvītrot; ) .cd-close-form ( / * stila X poga augšējā labajā stūrī */ displejs: bloks; pozīcija: absolūtais; platums: 40 pikseļi; augstums: 40 pikseļi; pa labi: 0; augšā: -40 pikseļi; fons: url("../img/cd-icon-close.svg ") bez atkārtošanas centra centrs; teksta atkāpe: 100%; atstarpe: nowrap; pārplūde: slēpta; ) @media only screen un (min-width: 1170px) (.cd-close-form (displejs: nav; ) ) #cd-login, #cd-signup, #cd-reset-password (displejs: nav; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( displejs: bloķēt; )

Izbalēšanas pārejas efektā ir pievienota aizkave, lai nodrošinātu, ka modāls vienmērīgi izgaist, kad tas ir aizvērts.

Piezīme:. Pēc noklusējuma visu ievades lauku fonta lielums ir iestatīts uz 16 pikseļi. Tas novērš automātisko tālummaiņu, kas notiek, skatoties mobilajās ierīcēs.

Atrodas autora, buržuāziskā spraudņa versija. Tur jūs varat lejupielādēt oriģinālu.
Krievu versija, to var iegūt no mana Yandex.Disk, tas arī viss nepieciešamie faili, rūpīgi iesaiņots vienā arhīvā, pirms tam neaizmirstiet apskatīt pilnībā pielāgotu, dzīvu piemēru, kā darbojas šis brīnišķīgais jQuery spraudnis:

Visu cieņu, Endrjū

Kontaktu formu izveide: atsauksmes, komentāri, pieteikšanās forma, reģistrācijas forma ar ievadītās informācijas pareizības pārbaudi.

Glīta forma ar soli pa solim pildīšana. Zemāk ir veidlapas aizpildīšanas indikators.

Aizpildiet veidlapu vairākos posmos un pārbaudiet, vai tā ir aizpildīta pareizi.

Ievadītās informācijas pareizības pārbaude tiek veikta lidojumā pirms ziņojuma nosūtīšanas, izmantojot javascript.

Animēta pārslēgšanās starp vietnes pieteikšanās veidlapu, reģistrācijas veidlapu un paroles atkopšanas lauku, izmantojot jQuery. Demonstrācijas lapā noklikšķiniet uz dzeltenās saites, lai redzētu efektu.

Līdzīgu risinājumu var izmantot, lai sniegtu apmeklētājam iespēju ātri sazināties ar vietnes īpašnieku no jebkuras lapas. Demonstrācijas lapā noklikšķiniet uz tālāk esošās bultiņas, lai atvērtu veidlapu.

Veidlapa ar ievadītās informācijas pareizības pārbaudi.

Jauka reģistrācijas veidlapa, kas ieviesta, izmantojot CSS, PHP un jQuery.

Ir ieviesta iespēja pievienot jaunus laukus pirms ziņojuma nosūtīšanas.

Jauka PHP atsauksmju veidlapa ar ievadītās informācijas pareizības pārbaudi. Tehnoloģijas: CSS, PHP, jQuery.

Ar pareizas pildījuma pārbaudi.

Ieviest izejošo atsauksmju veidlapu ātrai ziņojuma nosūtīšanai.