Jednostavan html obrazac za registraciju. Obrazac za prijavu i registraciju s HTML5 i CSS3

Uz revoluciju u konceptu dizajna i održavanja web stranica, važno je razviti bliži odnos s onim tko posjećuje vašu stranicu. Gledatelju će možda trebati koristiti ga drugi put, s druge strane dobivate aktivne posjetitelje svoje web stranice. Ovdje se pojavljuje koncept obrasca za prijavu i obrasca za registraciju. Prvo, nakon što smo sagledali važnost, pristupit ćemo boljem načinu za umetanje lijepog HTML CSS obrasca za prijavu i registraciju preko vaše web stranice.

Dok surfate internetom, naiđete na obrasce za prijavu spremne za korištenje. Ovi obrasci traže podatke o korisniku kao što su ime, adresa, ID e-pošte, fotografija, spol, posao uključujući biografiju. Obrasci za prijavu uključuju korisničko ime i lozinku kao osnovne elemente. Neke od ovih komponenti mogu varirati ovisno o obrascu koji odaberete, ali osnovna ideja je provjeriti identitet vašeg korisnika i razviti bolju vezu s njim.

Među mnogim HTML, CSS obrascima preko interneta naveli smo neke najbolje u smislu njihove kompatibilnosti, fleksibilnosti i zauzetog prostora. Ovo će vam biti od velike pomoći.

Ovaj responzivni CodePen na cijeloj stranici kreacija je Danyja Santosa. Obrasci za prijavu sadrže samo adresu e-pošte i lozinku, dok obrazac za prijavu sadrži adresu e-pošte, korisničko ime i lozinku. Osim toga, te se komponente pojavljuju samo kada odaberete želite li se prijaviti ili prijaviti. S pozadinskom animacijom ovaj izgleda atraktivno.

Slično kao i kod prvog, ovo je i CodePen od Erica, dok je komponenta formi također slična. Ali ovdje se komponenta pojavljuje na istoj stranici tako da ne morate prvo odabrati da biste vidjeli komponente. Ali priznajte činjenicu da je s običnom pozadinom ovaj manje privlačan, ali je fleksibilan i lagan.

Ovo je obrazac za registraciju jednostavnog izgleda koji uključuje mnogo primjera. Lako je kompatibilan s Windowsima i Androidima. Sam dizajner je podijelio oblike u različite kategorije kao što su mini Štoviše, oznake u vrhu, valjanost i tako dalje. Ovo je primjer interaktivnog obrasca prilagođenog korisniku iz tutorialzinea.
Preuzimanje i demo

Jose Carnerioover izradio je ovaj jednostavan i lagan obrazac preko CodePen-a za prikupljanje velikog broja informacija. Uključuje spol, datum rođenja i opciju plaćanja uključujući broj kreditne kartice pored osnovne, tj. email i lozinka. Dakle, ovo je najbolje dizajnirano za online kupovinu i marketing.
Kod i demo

Ovaj kompatibilni korisnički kod za obrazac za prijavu i prijavu dizajnirao je Josh Sorosky. Ima jednostavan izgled i kodiran je HTML-om, CSS-om i JavaScriptom. Animacija zaslona za prijavu sadrži samo osnovne stvari kao što su korisničko ime i lozinka, uključujući e-poštu za obrazac za prijavu.
Kod i demo

Ovaj atraktivan i lijep obrazac za prijavu i registraciju je kreacija Grandvinccent Marion. S prekrasnom pozadinskom slikom i samo osnovnom komponentom na obrascima ovo je zapravo popularno s tisućama pregleda. Ovo je vrlo fleksibilno što omogućuje jednostavne izmjene i privlačno je.

Materijalni dizajn log in sin up obrazac je jednostavan i izuzetno lagan obrazac tvrtke Brawada preko CodePena. Ovo se sastoji od HTML, CSS i JavaScript kodova i izgleda jednostavno i lijepo. Sadrži samo osnovnu komponentu obrazaca i zauzima manje prostora vaše web stranice.
Preuzimanje i kod

Ovo je interaktivan, prekrasan kod Kylea Laverya. Njegova jednostavnost čini ga popularnim s tisućama pogleda. Nadalje, materijal Design Signup Interaction sadrži samo osnovnu komponentu obrazaca, ali možete jednostavno dodati noviju jer je vrlo fleksibilna. Ovo je jednostavan obrazac za registraciju preko CodePen-a.
Kod i demo

Martin Machycek popularan je programer u CodePen-u. Dizajnirao je ovaj vrlo jednostavan i lijep obrazac za prijavu i prijavu putem HTML-a, CSS-a i JavaScripta. Osim toga, kompatibilan je i lagan, što je najbolji aspekt ovog oblika. Samo je uključio e-poštu i lozinku tako da je korisniji za jednostavne web-stranice nego za komercijalne.
Pogledajte kod i demo

Prijavite se i registrirajte – jedinstveni obrazac

Ovo su interaktivni lagani obrasci za prijavu i prijavu Danyja Santosa preko CodePena. Jednostavan je sa samo e-poštom i lozinkom pa nije dobro dizajniran za komercijalne svrhe. Zbog manje težine i jednostavnosti prikupio je nekoliko tisuća pregleda što ga čini atraktivnim.

Ovo je interaktivni obrazac za prijavu Matthewa Largenta. Ne samo e-poštu i lozinku, već također uključuje i druge osobne podatke kao što su dob i biografija. Dakle, ovo je korisno za komercijalne stranice i stranice za traženje posla. ima samo HTML i CSS kod, ali je koristan.
Kod i demo

Ovo je atraktivan obrazac za prijavu Kov Jonasa. Štoviše, omogućuje jednostavno povezivanje s društvenim medijima koje koriste gledatelji. Nadalje, ova mogućnost čini čestu vezu s gledateljima i nadalje čak pomaže u reklamiranju stranica preko društvenih medija. S prekrasnom pozadinskom slikom uz fleksibilnost, vrlo je poželjan.
Pogledajte kod i demo

Ovo je iznimno jednostavan i lagan obrazac za prijavu kodiran s HTML5 i CSS3. Ovo je dizajn Aigars Silkans. Sadržao je samo korisničko ime i lozinku, tako da je najbolje dizajniran za informativne osobne blogove i male web stranice. Uvjerljiva je činjenica da ovaj ima maksimalan broj pregleda za razliku od nekih drugih CodePena.
Demo uživo i kod

Ovaj prekrasan obrazac za prijavu je kreacija Momčila Popova. Uz jednostavne komponente obrasca, osim toga ima sliku koja se pomiče dodirom. Uključuje sve HTML, CSS i JavaScript kodove.

Posljednje, ali ne i najmanje važno, korisničko sučelje za prijavu je najbolji obrazac za prijavu na mobilni telefon Gabrielle wee preko CodePena. Izgleda privlačno s pozadinskom slikom, a animacija može lako zamijeniti tu sliku. Sadrži samo ime, adresu e-pošte i lozinku.

Zaključak
U početku znamo, među mnogim aspektima vaše web stranice, registracija i prijava slijede prvi red. To stvara profil svakog korisnika i štoviše dovodi do boljih sustava upravljanja korisnicima. U prvom koraku, HTML je građevni blok svega, a CSS čini da stvari izgledaju privlačno. Dakle, HTML i CSS sažimaju stvaranje prekrasnog HTML CSS obrasca za prijavu i registraciju za vašu web stranicu.

Ovdje je primjer obrasca za registraciju pomoću HTML-a. Ovdje programer može prikazati onoliko "tekstualnih polja" koliko on/ona želi. Naziv ispred tekstualnog polja zove se "Oznaka". Na kraju obrasca za registraciju nalazi se gumb "DODAJ" iza kojeg se može koristiti bilo koji željeni link. Nakon klika preusmjerit će se na to odredište.

HTML kod za obrazac za registraciju

U ovom primjeru smo prikazali 9 "Tekstualno polje". Veličina tekstualnog okvira također se može promijeniti prema zahtjevu.

registracija.html

upisnica

HTML obrasci su složeni elementi sučelja. Uključuju razne funkcionalni elementi: polja za unos i , popisi <select>, savjeti itd. Sav kod obrasca je zatvoren u elementu <form> .</p> <p>Većina informacija u web obrascima prosljeđuje se pomoću elementa. <input>. Element se koristi za unos jednog reda teksta. <input type="text">, za više linija - element <textarea>. Element <select>stvara padajući popis.</p> <p>Element <label>stvara naslove za polja obrazaca. Postoje dva načina grupiranja oznaka i polja. Ako je polje unutar elementa <label>, tada atribut for ne treba navesti.</p><p> <label for="lastname">prezime</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">prezime</label> <label>prezime <input type="text" name="lastname"></label> </p><p>Polja obrazaca mogu se podijeliti u logičke blokove pomoću elementa <fieldset>. Svakom dijelu može se dati naslov pomoću elementa <legend> .</p><p> <fieldset> <legend>Podaci za kontakt</legend> <label>Ime <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Riža. 1. Grupiranje polja obrasca</p><p>Kako bi obrazac bio razumljiviji korisnicima, u polja obrasca dodan je tekst koji sadrži primjer unosa podataka. Takav se tekst naziva tekst rezerviranog mjesta i stvara se pomoću atributa rezerviranog mjesta.</p> <p>Obavezna polja također moraju biti označena. Prije pojave HTML5, uz naziv polja koristio se znak zvjezdice *. Nova specifikacija uvela je poseban obavezni atribut koji vam omogućuje označavanje obaveznog polja na razini označavanja. Ovaj atribut upućuje preglednik (pod pretpostavkom da podržava HTML5) da ne šalje podatke nakon što korisnik klikne gumb za slanje dok se navedena polja ne ispune.</p><p> <input type="text" required placeholder="Tvoje ime"> </p><p>Za promjenu izgleda tekstualnog polja kada dobije fokus, koristite pseudo-klasu fokusa. Na primjer, možete učiniti pozadinu trenutnog polja tamnijom ili dodati obrub u boji kako biste ga istaknuli od ostalih:</p><p>Unos:fokus ( pozadina: #eaeaea; )</p><p>Još jedan koristan HTML5 atribut je atribut autofokusa. Omogućuje vam da automatski postavite fokus na željeno početno polje za elemente <input>i <textarea>(samo jedan element svakog oblika).</p> <h2>Primjer izrade registracijske forme</h2> <p><b>HTML označavanje</b></p><p> <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>Registracija</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Ime</label> <input type="text" name="name" required> </div> <div class="radio">Kat <label> <input type="radio" name="sex" value="muški">muški <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="ženski">ženski <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">Zemlja</label> <select name="country"> <option>Odaberite svoju državu prebivališta</option> <option value="Rusija">Rusija</option> <option value="Ukrajina">Ukrajina</option> <option value="Bjelorusija">Bjelorusija</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Poslati</button> </form> </div> </p><p><b>Bilješka</b><br>action="form.php" - poveznica na datoteku rukovatelja obrascima. Napravite datoteku u UTF-8 kodiranju, prenesite je na poslužitelj i zamijenite action="form.php" stazom do datoteke na vašem poslužitelju.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Riža. 2. Zadani izgled obrasca <p>Kao što možete vidjeti na slici, svaki element obrasca ima zadane stilove preglednika. Očistimo stilove i ukrasimo elemente obrasca.</p><p> Form-wrap (width: 550px; background: #ffd500; border-radius: 20px; ) .form-wrap *(transition: .1s linear) .profile (width: 240px; float: left; text-align: center; padding : 30px; ) obrazac ( pozadina: bijela; float: lijevo; širina: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; boja: #7b7b7b; ) .form-wrap:after, form div:after ( content: ""; display: table; clear: both; ) form div ( margin-bottom: 15px; position: relative; ) h1 (font-size: 24px; font-weight: 400; position: relative ; margin-top: 50px; ) h1:after ( content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50) %); ) /**************************** stilski elementi obrasca ***************** *** **/ label, span ( display: block; font-size: 14px; margin-bottom: 8px; ) input, input ( border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; pozadina: #e6e6e6; ) input:focus, input:focus ( box-sha dow: umetnuto 0 0 0 2px rgba(0,0,0,.2); ) .radio oznaka ( pozicija: relativna; padding-left: 50px; kursor: pokazivač; širina: 50%; float: lijevo; line-height: 40px; ) .radio input ( pozicija: apsolutna; neprozirnost: 0; ) .radio -kontrola (položaj: apsolutni; vrh: 0; lijevo: 0; visina: 40px; širina: 40px; pozadina: #e6e6e6; radijus granice: 50%; poravnanje teksta: središte; ) .male:before ( content: " \f222"; obitelj-fontova: FontAwesome; težina-fonta: podebljano; ) .female:before ( sadržaj: "\f221"; obitelj-fontova: FontAwesome; težina-fonta: podebljano; ) .radio label:hover input ~ . radio-upravljanje, .radiol input:focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control (boja: crveno; ) odaberite ( širina: 100%; kursor: pokazivač; padding: 10px 15px; obris: 0; obrub: 0; pozadina: #e6e6e6; boja: #7b7b7b; -webkit-appearance: none; /* poništite odabir webkit -preglednika */ -moz-appearance: none; /*odznači u Mozilla Firefoxu*/ ) select::-ms-expand ( display: none; /*odznači u IE*/ ) .select-strelica ( pozicija: apsolutna; vrh: 38px; desno: 15px; širina: 0; visina: 0; pokazivač-događaji: nijedan; /*aktivacija prikaza liste kada se klikne strelica*/ border-style: solid; border-width: 8px 5px 0 5px; boja obruba: #7b7b7b transparent transparent transparent; ) gumb ( padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform : velika slova; ) /**************************** dodaj adaptivni oblik ***************** **** **/ @media (max-width: 600px) ( .form-wrap (margina: 20px auto; max-width: 550px; width:100%;) .profile, form (float: none; width: 100%;) h1 (margin-top: auto; padding-bottom: 50px;) obrazac (border-radius: 0 0 20px 20px;) )</p><p><b>form.php datoteku</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: vaša_e-pošta". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "Hvala! Uspješno ste se registrirali."; ) ?></p><p><b>Bilješka</b><br>U varijabli $subject navedite tekst koji će biti prikazan kao predmet e-pošte; <br>Vaše_ime - ovdje možete odrediti ime koje će biti prikazano u polju "od koga je pismo"; <br>zamijenite your_site_url adresom stranice s registracijskim obrascem; <br>zamijenite your_email svojom adresom <a href="https://rt82.ru/hr/for-child-care-centers/uznat-login-apple-id-kak-uznat-apple-id-bez-slozhnostei-i-v-kratchaishee-vremya-po/">E-mail</a>;<br>$headers .= "Bcc: vaša_e-pošta". "\r\n"; šalje slijepu kopiju na vašu adresu e-pošte.</p> <p>Ovaj članak će opisati proces implementacije mogućnosti registracije i autentifikacije korisnika na najjednostavniji mogući način.</p><h3>1. Registracija</h3> <p>Počnimo s registracijom. Django izvan okvira pruža obrazac za kreiranje korisnika <b>Obrazac za kreiranje korisnika</b>, koji ćemo koristiti za registraciju. Osim toga, automatski obavlja sve potrebne provjere. Na primjer, je li korisnik s danim imenom već registriran. Reprezentacija izgrađena na temelju ovog obrasca izgledat će ovako:</p><p>From django.views.generic.edit import FormView from django.contrib.auth.forms import UserCreationForm class RegisterFormView(FormView): form_class = UserCreationForm # URL na koji će korisnik biti preusmjeren u slučaju uspješne registracije. # U ovom slučaju postoji poveznica na stranicu za prijavu za registrirane korisnike. success_url = "/login/" # Predložak koji će se koristiti prilikom renderiranja prikaza. template_name = "register.html" def form_valid(self, form): # Kreirajte korisnika ako je obrazac ispravno unesen. form.save() # Poziv metode osnovne klase return super(RegisterFormView, self).form_valid(form)</p><p>Kao što vidite, registracija korisnika je vrlo jednostavna. Sada morate dodati poveznicu na pogled u <b>urls.py</b>:</p><p>Iz django.conf.urls uvozite uzorke, uključite, url urlpatterns = patterns("", ... url(r"^register/$", views.RegisterFormView.as_view()), ...)</p><p>i oznaka <b>((oblik))</b> u predložak <b>registar.html</b>:</p><p> <!DOCTYPE html> <html> <head> <title>Registracija</title> </head> <body> <form action="" method="post">(%csrf_token%)(( form.as_p )) <button type="submit">Registar</button> </form> </body> </html> </p><p>Dakle, odlazak na stranicu <b>vaša.stranica/registracija/</b> moći ćete vidjeti obrazac za registraciju, koji će, ako budete imali sreće, čak i raditi. Međutim, izgledat će zastrašujuće. Kako na njega primijeniti CSS oblikovanje i stilove može se pogoditi iz članka ili čitanjem dokumentacije.</p><h3>2. Autentifikacija</h3> <p>Načela implementacije autentifikacije potpuno su ista, ali je implementacija malo kompliciranija (zbog korištenja nekih <a href="https://rt82.ru/hr/fire-protection/kak-obustroit-vannuyu-komnatu-s-dushevoi-kabinoi-kak-oformlyaetsya/">dodatne mogućnosti</a>). Bez daljnjeg odlaganja, pogledajmo kôd i pročitajmo komentare:</p><p># Opet, hvala djangu za obrazac za provjeru autentičnosti. from django.contrib.auth.forms import AuthenticationForm # Funkcija za postavljanje ključa sesije. # Ovako će django odrediti je li korisnik prijavljen. from django.contrib.auth import login class LoginFormView(FormView): form_class = AuthenticationForm # Isto kao prijava, ali koristite predložak za provjeru autentičnosti. template_name = "login.html" # Ako je uspješno, preusmjerite na glavnu stranicu. success_url = "/" def form_valid(self, form): # Dohvaćanje korisničkog objekta na temelju podataka unesenih u obrazac. self.user = form.get_user() # Autentificirajte korisnika. login(self.request, self.user) return super(LoginFormView, self).form_valid(form)</p><p>Ostalo je, slično kao i kod registracije, dodati link na <b>urls.py</b> i izradite predložak <b>prijava.html</b>(usput, predložak za registraciju prikazan gore također će raditi bez ikakvih promjena).</p><h3>3. Izlaz</h3>Za potpunu sreću preostaje dodati mogućnost izlaza (za još veću sreću promijeniti i vratiti lozinku, ali o tome u nastavku). Odjava ne zahtijeva nikakve obrasce ili predloške, tako da je prezentacija za nju doslovno napravljena u četiri retka: from django.http import HttpResponseRedirect from django.views.generic.base import View from django.contrib.auth import logout class LogoutView(View) : def get(self, request): # Odjavite se za korisnika koji je zatražio ovaj pogled. logout(request) # Nakon toga preusmjeravamo korisnika na glavnu stranicu. vrati HttpResponseRedirect("/") <h3>4. Zaključak</h3> <p>Kopiranjem i lijepljenjem svega ovoga, možete natjerati minimalan sustav da "radi" s puno potencijala za poboljšanje. Na primjer, možete implementirati stranice za oporavak i promjenu lozinke na sličan način na temelju obrazaca. <b>Obrazac za ponovno postavljanje lozinke</b> i <b>Obrazac za promjenu lozinke</b> iz <b>django.contrib.auth.forms</b>.</p> Omogućite JavaScript za pregled <br>Pozdrav, dragi habradrug! U ovom vodiču naučit ćemo kako izraditi dva HTML5 obrasca: obrazac za prijavu i obrazac za registraciju. Ovi oblici će se međusobno zamijeniti pomoću CSS3 :target pseudo-klase. Koristit ćemo CSS3 i font ikone. Ideja koja stoji iza ove demonstracije je prikazati korisniku obrazac za prijavu i pružiti mu vezu "idi" na obrazac za prijavu. <br>U ovom vodiču detaljno ću vas provesti kroz način stvaranja efekta kao u Demo 1. <h3>HTML</h3> <div id="container_demo" >  <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Prijaviti se</h1> <p> <label for="username" class="uname" data-icon="u" >Vaš email ili korisničko ime</label> <input id="username" name="username" required="required" type="text" placeholder="moje korisničko ime ili moja pošta@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p">Tvoja lozinka</label> <input id="password" name="password" required="required" type="password" placeholder="npr. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Zadrži me prijavljenim</label> </p> <p class="login button"> <input type="submit" value="Prijaviti se" /> </p> <p class="change_link">Još niste član? Pridruži nam se</p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>prijavite se</h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Vaše korisničko ime</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="moje superkorisničko ime690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" >tvoj email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mojsupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Tvoja lozinka</label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="npr. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Molimo potvrdite svoju lozinku</label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="npr. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="prijavite se"/> </p> <p class="change_link">već si član? Idi i prijavi se</p> </form> </div> </div> </div> <br>Ovdje smo upotrijebili nekoliko HTML5 trikova. Na primjer, element <i>tip=lozinka</i> automatski skriva ono što korisnik upisuje i zamjenjuje znakove točkama ili zvjezdicama (ovisno o pregledniku). Element <i>tip=e-pošta</i> omogućuje pregledniku da provjeri ispravan format adrese e-pošte. Osim toga, koristili smo parametar <i>zahtijevati=potrebno</i>; preglednici koji podržavaju ovu postavku neće dopustiti korisniku da podnese obrazac dok se polje ne ispuni, ovdje nije potreban JavaScript. Parametar <i>autocomplete=on</i> automatski će ispuniti neka polja. Također smo upotrijebili tekst rezerviranog mjesta kako bismo pomogli korisniku da ispuni obrazac. <p>Sada dvije škakljive točke. Možda ste primijetili dvije poveznice <a href>na početku obrasca. Ovaj zgodan trik omogućit će našoj formi da se ispravno ponaša pri radu sa sidrima (sidrima).</p><p>Druga točka odnosi se na korištenje fonta s ikonama. Za prikaz ikona koristit ćemo data-atribut. Postavljanje parametra <i>data-icon=”icon_character”</i> s odgovarajućim znakovima u HTML-u, trebamo dodijeliti samo jedno CSS pravilo za postavljanje stila svih ikona. Više o ovoj tehnici možete pročitati na web stranici: 24 načina: Prikaz ikona s fontovima i atributima podataka.</p><h2>css</h2>Kako bi kod bio čist, preskočit ću osnovne parametre (html, body, itd.), ali ih možete pronaći u izvornim datotekama. Opet, koristim CSS3 trikove koji neće raditi u svim preglednicima. Pa počnimo! <h4>Oblikovanje obrazaca pomoću CSS3</h4>Prvo dajmo našim obrascima osnovni stil. <p>#subscribe, #login( pozicija: apsolutna; vrh: 0px; širina: 88%; ispuna: 18px 6% 60px 6%; margina: 0 0 35px 0; pozadina: rgb(247, 247, 247); obrub: 1px čvrst rgba(147, 184, 189,0.8); okvir-sjena: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) umetnuti; granica-radijus: 5px ; ) #prijava( z-index: 22; )</p><p>Ovdje ćemo dodijeliti svojstva zaglavlju:</p><p>/**** tekst ****/ #wrapper h1( veličina fonta: 48px; boja: rgb(6, 106, 117); ispuna: 2px 0 10px 0; obitelj fonta: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Trenutno samo webkit podržava background-clip:text; **/ #wrapper h1( pozadina: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; ) #wrapper h1:after( content: " "; display:block; width:100%; height:2px; margin-top:10px; background: linearni gradijent(lijevo, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba( 147,184,189.1) 53%, rgba(147,184,189.0.8) 79%, rgba(147,184,189.0) 100%); )</p><p>Imajte na umu da danas podržavaju samo preglednici s webkitom <i>pozadinski isječak: tekst</i>, tako da ćemo napraviti prugastu pozadinu samo za webkit i usidriti je na H1 zaglavlje. Budući da je parametar <i>pozadinski isječak: tekst</i> radi samo u preglednicima Webkit, odlučio sam raditi samo sa svojstvima webkita. Zato sam podijelio CSS na dva dijela i koristio samo webkit gradijent. Međutim, ne biste trebali samo koristiti webkit na svojim web stranicama! Tako, na primjer, parametar <i>-webkit-text-fill-color: transparentan</i> omogućuje nam transparentnu pozadinu, ali samo za webkit preglednike, svi ostali preglednici će zanemariti ovo svojstvo.</p><p>Također smo napravili tanku liniju ispod naslova s elementom pseudoklase :after. Koristili smo gradijent od 2 px i smanjili neprozirnost na rubovima na nulu.</p><p>Sada se pobrinimo za polja za unos i dajmo im lijep izgled.</p><p>/**** napredni stil unosa ****/ /* rezervirano mjesto */ ::-webkit-input-placeholder ( boja: rgb(190, 188, 188); font-style: italic; ) input:-moz- placeholder, textarea:-moz-placeholder(boja: rgb(190, 188, 188); font-style: italic; ) input (outline: none; )</p><p>Prvo ćemo stilizirati margine i ukloniti crtu. Ali budite oprezni: potez pomaže korisniku da shvati u kojem se području nalazi. Ako ga uklonite, trebate primijeniti svojstva :active i :focus.</p><p>/* sva polja isključuju podnošenje i potvrdni okvir */ #wrapper input:not()( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; prijelaz: sve 0.2s linearno; ) #wrapper input:not():active , #wrapper input:not():focus( border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168) , 168, 168, 0.9) umetak; )</p><p>Ovdje smo upotrijebili pseudoklasu :not za stiliziranje svih polja osim potvrdnih okvira. Također, odlučio sam ukloniti crtu i dodao svojstva :focus i :active.</p><p>Sada je vrijeme za zabavu: font s ikonama. Budući da ne možemo koristiti pseudoklase :before i :after, dodat ćemo ikonu parametru oznake i zatim je postaviti u polje. Koristit ću biblioteku fontamas. Možete sami spojiti ikone s odgovarajućim slovom. Zapamti atribut <i>ikona podataka</i>? U njemu trebate umetnuti slovo. Koristio sam <i>data-icon='u'</i> za prijavu, 'e' za e-poštu, 'p' za lozinku. Nakon što sam odabrao slova, preuzeo sam font i upotrijebio generator fontova fontsquirrel da ga pretvorim u format prikladan za @font-face.</p><p>@font-face ( font-family: "FontomasCustomRegular"; src: url("fontomas-webfont.eot"); src: url("fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fontovi/fontomas-webfont.woff") format("woff"), url("fontovi/fontomas-webfont.ttf") format("truetype"), url("fontovi/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** čarobni trik! **/ :after ( content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; )</p><p>To je zapravo sve. Ne morate imati zasebnu klasu za svaku ikonu. Koristili smo parametar <i>content:attr(ikona-podataka)</i> da biste dobili slovo iz data-icon atributa. Dakle, samo trebamo dodijeliti font, odabrati boju i postaviti ikonu.</p><p>Sada dodijelimo pravila gumbu za slanje u obrascu.</p><p>/*stil oba gumba*/ #wrapper p.button input( width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; boja: #fff; veličina fonta: 24px; obrub: 1px puni rgb(28, 108, 122); margina-dno: 10px; sjena teksta: 0 1px 1px rgba(0, 0 , 0, 0.5); rubni radijus: 3px; okvir-sjena: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) umetnuti, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); prijelaz: svih 0,2 s linearno; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. gumb unos:fokus( pozadina: rgb(40, 137, 154); položaj: relativan; vrh: 1px; obrub: 1px puni rgb(12, 76, 87); okvir-sjena: 0px 1px 6px 4px rgba(0, 0) , 0, 0.2) umetnuti; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )</p><p>Trik je u korištenju box-shadow za stvaranje više obruba. Naravno, možete koristiti samo jedan okvir, ali možete koristiti i nekoliko. Koristit ćemo parametar duljine za stvaranje "lažnog" drugog bijelog obruba, širine 3 px, bez zamućenja.</p><p>Sada stilizirajmo potvrdni okvir, ovdje nećemo učiniti ništa neobično:</p><p>/* stilizirajte potvrdni okvir "zapamti me"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( width: 80%; )</p><p>Stilizirajte podnožje oblika koristeći više linearnih gradijenata da biste stvorili prugasti gradijent.</p><p>P.change_link( position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px puni rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); ) #omot p .change_link a ( display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text -decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); prijelaz: sve 0.4s linearno; ) #wrapper p.change_link a:hover (boja: rgb(57, 191, 215) ); pozadina: rgb(247, 247, 247); obrub: 1px puni rgb(74, 179, 198); ) #wrapper p.change_link a:active( position: relative; top: 1px; )</p><p>Sada možete vidjeti da imamo dva lijepa obrasca, ali želimo da samo jedan od njih bude prikazan. Vrijeme je za animaciju!</p><h4>Napravite animaciju</h4>Prvo što ćemo učiniti je sakriti drugi oblik postavljanjem neprozirnosti na 0: <p>#register( z-index: 21; neprozirnost: 0; )</p><p>Zapamtite da obrazac za prijavu ima z-index: 22? Na drugom obrascu ćemo ovaj parametar dodijeliti 21 kako bismo ga stavili "ispod" obrasca za prijavu.</p><p>A sada zabavni dio: mijenjanje oblika pomoću :target pseudo klase. Postoji jedna stvar koju trebate razumjeti o :target: koristit ćemo sidra za navigaciju. Normalno ponašanje sidra je skok na određeni element stranice. Ali mi to ne želimo, samo želimo mijenjati oblike. Ovdje u pomoć dolazi naš trik korištenja dvije veze na vrhu stranice. Umjesto da nas odvede izravno na drugi obrazac, uz rizik da doživimo efekt "skoka", vezama ćemo dati parametar <i>prikaz: nijedan</i>. To će vam pomoći da izbjegnete skakanje. Našao sam ovaj trik na stranici: CSS3 create (francuski).</p><p>#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )</p><p>Evo što se događa: kada kliknemo na gumb <i>Pridružiti</i>, idemo na #toregister. Zatim se odvija animacija i tek onda idemo na element #register. Koristimo animaciju tzv <i>fadeInLeft</i>. Budući da "skrivamo" oblik pomoću nulte neprozirnosti, primijenit ćemo animaciju koja će blijedjeti. Također smo promijenili z-index tako da se pojavljuje na vrhu drugog oblika. Ista stvar se događa za drugi oblik. <br>Evo koda animacije. Koristili smo CSS3 okvir za animaciju Dana Edena i prilagodili ga za naš vodič.</p><p>Animate( animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; ) @keyframes fadeInLeft ( 0% ( neprozirnost: 0; transformacija: translateX(-20px); ) 100% ( neprozirnost : 1; transformiraj: translateX(0); ) )</p><p>Oblik koji "nestane" imat će blijedu animaciju s lijeve strane:</p><p>#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register(naziv-animacije: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( neprozirnost: 1; transformacija: translateX(0); ) 100% ( neprozirnost : 0; transformiraj: translateX(-20px); ) )</p><p>Sada možete koristiti druge animacije Dana Edena s datotekom animate.css: samo promijenite nazive klase .animate i animacije. Također ćete pronaći nekoliko drugih animacija na kraju datoteke animate-custom.css.</p><p>To je sve, prijatelji. Nadamo se da ste uživali u ovom vodiču!</p><p><b>Imajte na umu da u nekim preglednicima opcija <i>pozadinski isječak: tekst</i> Nije podržano. Animacije ne rade u Internet Exploreru 9. U Internet Exploreru 8 i nižim, :target pseudo-klasa nije podržana, tako da ovaj efekt tamo uopće neće raditi.</b></p><p><b>p.s.</b> Sve komentare o prijevodu rado ćemo prihvatiti u osobnu. Hvala vam!</p><p>Oznake: Dodajte oznake</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> <p style="text-align: center;"></p> <p> <div style="text-align: center; margin: 3px 0;"> </div> <div style="text-align: center; margin: 1px 0 5px;"> </div> </p><span class="adplacer_pro_adblock_end_post_content" style="display: none;width: 0;height: 0;"></span> </article> <div class="post-meta"> <div class="post-share"> <div class="post-share__title">Za dijeljenje s prijateljima:</div> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div> </div> </div> <div class="title">Slični postovi</div> <div class="yarpp-related"> <ul class="related-items"> <style> </style> <style> #perelink-horizontal{ vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 230px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img{ width:230px; height:150px; margin-bottom:10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://rt82.ru/hr/in-everyday-life/yahniya-iz-kuricy-recept-yahniya-iz-kuricy-vkusnyi-recept-bolgarskoi-kuhni-yahniya/"> <img src="/uploads/eca37be242abc181b3514c6d8d1d746d.jpg" height="150" width="230" loading=lazy loading=lazy> <span>Pileća yakhnia - ukusan recept za bugarsku kuhinju</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rt82.ru/hr/alert/kurinye-serdechki-tushenye-s-gribami-kurinye-serdechki-i-griby/"> <img src="/uploads/6976efc7bcc5d492fa2613f07412970b.jpg" height="150" width="230" loading=lazy loading=lazy> <span>Pileća srca i šampinjoni - izuzetna harmonija okusa Svinjsko srce sa šampinjonima i vrhnjem</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rt82.ru/hr/safety/tvorozhnye-grenki-kulinarnye-recepty-i-fotorecepty-poshagovyi-process/"> <img src="/uploads/d02184c31b0ad79934abefd89197507f.jpg" height="150" width="230" loading=lazy loading=lazy> <span>Kulinarski recepti i foto recepti</span> </a> </div> </div> </ul> </div> <div class="yarpp-related"> <ul class="related-items"> <li><img src="/uploads/62d5d4a321fe6aa46f85b4f0c0d250e8.jpg" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/smoke-removal/fruktovoe-zhele-iz-paketikov-zhele-kak-prigotovit-zhele-doma/" target="_blank" rel="nofollow noopener noreferrer">vrećice voćnog želea</a></li> <li><img src="/uploads/ea02a09d46f4608c0bf5214f32d4760c.jpg" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/documentation/grenki-s-tvorogom-vkusnyi-i-bystryi-zavtrak-kulinarnye/" target="_blank" rel="nofollow noopener noreferrer">Recepti za kuhanje i foto recepti Za smjesu jaja i mlijeka</a></li> <li><img src="/uploads/c9ffb6564d14060469bcb5bd40182630.jpg" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/equipment-for-fire-fighters/greckie-orehi-dlya-povysheniya-laktacii-mif-ili-pravda-napitok-iz-orehov-ili/" target="_blank" rel="nofollow noopener noreferrer">Napitak od orašastih plodova ili samo mlijeko od orašastih plodova Mlijeko od orašastih plodova</a></li> </ul> </div> </main> <aside class="sidebar"> <div class="search-form ya-site-form ya-site-form_inited_no" onclick="return { 'bg': 'transparent', 'publicname': '\u041f\u043e\u0438\u0441\u043a \u043f\u043e rt82.ru', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': '/search', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2265323', 'logo': 'rb', 'websearch': false, 'type': 2} "> <form action="/search" method="get" target="_self"> <input type="hidden" name="searchid" value="2265323"> <input type="hidden" name="l10n" value="hr"> <input type="hidden" name="reqenc" value=""> <input type="text" name="text" placeholder="Pretraživanje stranice:" class="search-form__field" value=""> <input type="submit" value="" class="search-form__button"> </form> </div> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://rt82.ru/alert/prostaya-forma-registracii-html-forma-vhoda-i-registracii-s/" target="_blank" class="vk">U kontaktu s</a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Frt82.ru%2Fhr%2Falert%2Fprostaya-forma-registracii-html-forma-vhoda-i-registracii-s" target="_blank" class="tw">Cvrkut</a> <a href="" target="_blank" class="gp">Google+</a> </div> <nav class="sidebar-menu section"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/safety/">Sigurnost</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/arrangement/">Uređenje</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/equipment/">Oprema</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/safety/">Sigurnost</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/institutions/">Institucije</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rt82.ru/hr/category/the-theory-of-extinguishing/">Teorija kaljenja</a> </li> </ul></nav> <div class="section section-question"> <div class="title"><a href="https://rt82.ru/hr/">Novi članci</a></div> <ul class="section-question__posts"> <li> <a href="https://rt82.ru/hr/safety/buterbrody-s-kabachkami-i-pomidorami-poshagovyi-recept-s-foto/">Sendviči s tikvicama i rajčicama</a> </li> <li> <a href="https://rt82.ru/hr/fire-protection/zapechenaya-ryba-v-multivarke-recepty-prigotovleniya-ryby-na-paru/">Recepti za kuhanje ribe na pari u laganom štednjaku</a> </li> <li> <a href="https://rt82.ru/hr/fire-typology/kak-prigotovit-sladkie-oladi-recept-kak-prigotovit-oladi-na-kefire/">Recept za pravljenje palačinki na kefiru (bujno)</a> </li> <li> <a href="https://rt82.ru/hr/for-child-care-centers/biskvitnoe-testo-na-vodyanoi-bane-zavarnoi-biskvit-limonnyi-biskvit/">Tijesto za biskvit u vodenoj kupelji</a> </li> <li> <a href="https://rt82.ru/hr/safety/dlya-chego-nuzhna-limonnaya-kislota-v-kompote-kompot-iz-klubniki-s/">Kompot od jagoda s limunskom kiselinom</a> </li> <li> <a href="https://rt82.ru/hr/safety/poleznye-svoistva-imbirya-ego-istoriya-i-recepty-prigotovleniya-recepty/">Recepti za smoothie od đumbira za mršavljenje Smoothie od đumbira</a> </li> </ul> </div> <div class="section-posts-box section"> <div class="title">Popularni članci</div> <div class="section-video section-posts"> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/cb1f30ff8dab03db970102d348153cb3.jpg" width="199" height="150" alt="Ide pečene u pećnici" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/fire/yaz-v-duhovke-s-kartoshkoi-i-pomidorami-yaz-zapechennyi-v-duhovke-prigotovlenie/" class="section-posts__item-title">Ide pečene u pećnici</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/c07d83f2b7b8c6bd12afbf38041cff62.jpg" width="199" height="150" alt="Recepti za smoothie od đumbira za mršavljenje Smoothie od đumbira" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/alert/recepty-smuzi-dlya-pohudeniya-recepty-prigotovleniya-smuzi-s/" class="section-posts__item-title">Recepti za smoothie od đumbira za mršavljenje Smoothie od đumbira</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/1919dc0b1be2af6eb6d01fba0f472441.jpg" width="199" height="150" alt="Ukusna i hranjiva salata sa šunkom i kineskim kupusom" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/alert/salat-s-vetchinoi-i-kapustoi-bezumno-vkusno-vkusnyi-i/" class="section-posts__item-title">Ukusna i hranjiva salata sa šunkom i kineskim kupusom</a> </div> </div> </div> <div class="section-posts-box section"> <div class="title"><a href="https://rt82.ru/hr/">Izbor urednika</a></div> <div class="section-video section-posts"> <div class="section-posts__item"> <img src="/uploads/848c4c49aca6c8c67fc63e571ba9bfc5.jpg" width="199" height="150" alt="Recept za kawarmu od janjetine" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/the-theory-of-suppression/recept-kavarmy-iz-baraniny-kavarma-bolgarskaya-ingredienty-na-dve/" class="section-posts__item-title section-title_video">Recept za kawarmu od janjetine</a> </div> <div class="section-posts__item"> <img src="/uploads/623d527585028717d974caf326667ce0.jpg" width="199" height="150" alt="Ratatouille s mljevenim mesom u pećnici Kako kuhati ratatouille s mljevenim mesom" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/equipment/vkusnyi-ratatui-so-svinym-farshem-poshagovyi-recept-s-foto/" class="section-posts__item-title section-title_video">Ratatouille s mljevenim mesom u pećnici Kako kuhati ratatouille s mljevenim mesom</a> </div> <div class="section-posts__item"> <img src="/uploads/3fef6439b748914ed2261b617d6fa8a3.jpg" width="199" height="150" alt="Začinjena salata od smrznutog zelenog graha" / loading=lazy loading=lazy> <a href="https://rt82.ru/hr/equipment/salat-iz-zamorozhennoi-struchkovoi-pikantnyi-salat-iz-zamorozhennoi/" class="section-posts__item-title section-title_video">Začinjena salata od smrznutog zelenog graha</a> </div> </div> </div> </aside> </div> <footer class="footer"> <div class="wrap"> <div class="logo logo_footer" style="background:none;"> <div class="logo__copy">Sva prava pridržana, 2022</div> </div> <nav class="footer-navid"> <ul> <li class="menu-item type-post_type object-page "><a href="https://rt82.ru/hr/about.html">O stranici</a></li> <li class="menu-item type-post_type object-page "><a href="https://rt82.ru/hr/sitemap.xml">mapa stranice</a></li> </ul> </nav> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://rt82.ru/alert/prostaya-forma-registracii-html-forma-vhoda-i-registracii-s/" target="_blank" class="vk">U kontaktu s</a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Frt82.ru%2Fhr%2Falert%2Fprostaya-forma-registracii-html-forma-vhoda-i-registracii-s" target="_blank" class="tw">Cvrkut</a> <a href="" target="_blank" class="gp">Google+</a> </div> </div> </footer> <script>var adsplacerProAdblockMessage = { "message":"<div class=\"adb-def\">\r\n <div>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 AdBlock?<\/div>\r\n <div>\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/div>\r\n \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u043c\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432 \u0432\u0430\u0439\u0442\u043b\u0438\u0441\u0442 \u0432\u0430\u0448\u0435\u0433\u043e AdBlock \u043f\u043b\u0430\u0433\u0438\u043d\u0430\r\n<\/div>"} </script><script>var adsplacerProAdblockFirstOnly = 0</script><script>var adsplacerProVersion = "2.5.7"</script><script>if(!AdsplacerProReadCookie('adsplacerProReferrer')){ document.cookie = "adsplacerProReferrer=" + document.referrer + "; path=/; expires=" + (new Date(new Date().getTime() + 60 * 60 * 24 * 1000)).toUTCString(); } </script><script>var adsplacerProPostId = "1848"</script><script>var CookieDate = new Date;CookieDate.setDate(391);document.cookie = 'adsplacerProDontShowAdsIds=' + JSON.stringify(adsplacerProFirstTime) + '; expires=' + CookieDate.toGMTString( ) + '; path=/';</script><script>var adsplacerProAdblockExtendMessages = []</script><script type='text/javascript' src='https://rt82.ru/wp-content/plugins/adsplacer_pro/assets/js/jquery.adsplacer.adblock.js?ver=2.5.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://rt82.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://rt82.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 150, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['custom_html-2'] } ; </script> <script type='text/javascript' src='https://rt82.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> </div> </body> </html>

Iskaznica:
Ime:
tečaj:
podružnica:
Broj role:
Email adresa:
Korisničko ime:
O nama:
Zaporka: