HTML5 i njegovi atributi za provjeru valjanosti obrasca. Izrada jednostavnog obrasca za kontakt pomoću Angularjs i php T 15 potrebna je prijava pomoću imena

Potreban HTML Boolean atribut govori pregledniku da pošalje podatke obrasca samo kada su obavezna polja ispunjena. To znači da polje ne može ostati prazno i da se, ovisno o drugim atributima ili vrstama polja, mogu prihvatiti samo određene vrste vrijednosti. Razgovarat ćemo malo kasnije o tome kako naložiti preglednicima da šalju određene vrste podataka.

Ako su obavezna polja prazna, obrazac neće biti poslan. Opera, Firefox, Internet Explorer 10+ i Chrome daju korisniku poruku o pogrešci. Na primjer, "Ispunite ovo polje" ili "Moramo ispuniti prazna polja."

U terminologiji Javascripta, događaj fokusa pokreće element obrasca kada primi fokus, kada se fokus pomakne na drugi element ili kada izgubi fokus.

U CSS-u možete koristiti pseudo-klasu :focus za stiliziranje elemenata koji su trenutno istaknuti.

Traženi atribut primjenjuje se na bilo koju vrstu ulaznog elementa osim gumba, podnošenja, slike, boje i skrivenog. Svi ovi elementi imaju zadanu vrijednost, tako da bi dodatni atribut bio nepotreban. Sintaksa za ovaj atribut jednostavno je obavezna ili required="required" ako koristite XHTML sintaksu.

Dodajmo atribut HTML unos potrebno za obrazac za registraciju. Napravimo polja za ime i adresu E-mail, lozinka i datum pretplate su potrebni:

Moje ime:
Moj e-mail:
Moja web stranica:
Moja buduća lozinka:
(najmanje 6 znakova, bez razmaka)
Moje HTML znanje od 1 do 10:
Želim da moja pretplata počinje sa:
Želio bih primati primjerke knjiga The HTML5 Herald
Također bih se želio pretplatiti na The CSS3 Chronicle

Na snimkama zaslona ispod možete vidjeti što radi obavezni HTML atribut kada pokušate poslati obrazac:

Poruka o potrebnim poljima u Firefoxu

Ista situacija u Operi...

i u Google Chromeu

Oblikovanje obaveznih polja u obrascu

Možete stilizirati obavezna polja na obrascima pomoću :required,:optional pseudo-klase ili negativne :not(:required)) pseudo-klase. Također možete stilizirati važeća i nevažeća polja pomoću :valid i :invalid pseudo-klasa. Koristeći ove pseudo-klase potrebne za HTML unos, možete pokazati korisnicima koja su polja potrebna:

input (pozadinska pozicija: 0% 50%; pozadinsko ponavljanje: bez ponavljanja; padding-lijevo: 15px; ) input:required (background-image: url("../images/required.png"); ) input :focus:invalid (background-image: url("../images/invalid.png"); ) input:focus:valid ( background-image: url("../images/valid.png"); )

U ovom slučaju dodajemo pozadinsku sliku (zvjezdicu) u potrebna polja obrasca. Generirani sadržaj ne može se uključiti u ulazne elemente. Stoga bi bilo bolje koristiti pozadinsku sliku. Osim toga, važeća i nevažeća polja mogu se istaknuti različitim pozadinskim slikama. Promjene će biti vidljive samo ako je korisnik odabrao odgovarajući element obrasca.

Upozorenje: Firefox stilizira nevažeće elemente

Imajte na umu da Firefox preglednik primjenjuje vlastiti stil (crvena sjena) na nevažeće elemente, kao što je prikazano na jednoj od gornjih slika. Da biste onemogućili ovaj efekt za potreban HTML, koristite sljedeći CSS kod:

:nevažeći ( box-shadow: ništa; )

Savjet: ciljani stil za naslijeđene preglednike

Naslijeđeni preglednici poput IE8 i IE9 ne podržavaju pseudo-klasu :required, ali možete pružiti ciljane stilove pomoću selektora atributa:

unos:potrebno, unos (pozadinska slika: url("../images/required.png"); )

Također možete koristiti ovaj atribut kao kuku za provjeru valjanosti obrasca u preglednicima koji ne podržavaju provjeru utemeljenu na HTML5. Javascript kôd će provjeriti prazne elemente unosa za traženi atribut i neće poslati obrazac ako naiđe na prazna potrebna polja.

Pozdrav ljudi, nadamo se da stvari idu dobro, danas ćemo vam objasniti vrlo koristan vodič. U današnjem vodiču izradit ćemo jednostavan obrazac za kontakt koristeći angularJS i php.

Kontakt obrazac je standardna web stranica koja je dostupna na svakoj web stranici. To omogućuje posjetiteljima stranice da kontaktiraju vlasnike stranice ili pružatelje usluga koji su odgovorni za održavanje te web stranice. Pa smo pomislili zašto ne izraditi jednostavan obrazac za kontakt koristeći Angularjs i php za primanje poruka od web stranica, čitatelja i/ili korisnika.

Koristimo Angularjs za front end i php na strani poslužitelja. Napisat ćemo kod u php-u koji uzima podatke iz Angular forme i šalje ih e-poštom administratoru stranice. Napravite mapu pod nazivom "kontaktni obrazac" u imeniku svoje web aplikacije i izradite ogledni dizajn HTML stranice– indeks.html. Sada kopirajte i zalijepite donji kod u datoteku index.html.

Demo - Jednostavan obrazac za kontakt koristeći Angularjs i php Obrazac za kontakt koristeći angularjs i PHP Vaše ime E-mail Poruka Pošalji

Php kod za slanje e-pošte

Napravite stranicu contact.php i kopirajte i zalijepite donji kod. Ispod je php kod koji će dohvatiti podatke iz kutne forme i poslati ih e-poštom na navedenu e-mail adresu.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->Ime; echo "E-pošta: " . $podaci->e-pošta; echo "Poruka: " . $podaci->poruka; // slanje e-pošte $to = $data->email; $subject = "Testirajte web mjesto pisma za testiranje angularjs Kontakt obrazac"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpverzija(); //funkcija PHP pošta za slanje e-pošte na adresu e-pošte mail($to, $subject, $message, $headers); ?>

Zašto sam dobio ovaj obrazac?

Trenutno je na vašoj web stranici brute-force napad. Brute-force napad je napad pogađanjem lozinke. U ovom slučaju odabire se lozinka za administrativnu ploču vaše stranice.

Kako bismo spriječili hakiranje vaše stranice i povećali njezinu sigurnost, instalirali smo dodatnu zaštitu.

Kako sada mogu pristupiti administratorskoj ploči stranice?

Sada, kada pristupate administrativnoj ploči vaše stranice (na Joomli ili WordPressu), pojavit će se dodatni prozor za unos vašeg korisničkog imena i lozinke s natpisom "molimo koristite lozinku svoje kontrolne ploče". Kao prijavu, morate unijeti prijavu svoje usluge hostinga, izgleda kao "u1234567". Lozinka je trenutna lozinka za vašu uslugu hostinga.

Nakon što prođete osnovnu HTTP provjeru autentičnosti, vidjet ćete standardno polje za prijavu u administratorskoj ploči svoje stranice. Sada ćete morati unijeti prijavu i lozinku administratora stranice.

Kako radi HTTP osnovna provjera autentičnosti

Kada unesete svoju zaporku za prijavu u prozor osnovne provjere autentičnosti, hash vrijednosti za prijavu i zaporku uspoređivat će se s vrijednostima u posebna datoteka~/etc/users , dostupno na upravljačkoj ploči vašeg hostinga. Sadržaj datoteke izgleda otprilike ovako: “u1234567:dm48bspxIO3rg” . Gdje je “u1234567” prijava, a “dm48bspxIO3rg” hash zaporke (napomena: samo hash, ne sama lozinka!). Raspršivač lozinke rezultat je pretvaranja lozinke pomoću određenog algoritma.

Dakle, kada unesete svoje korisničko ime i lozinku u prozor osnovne provjere autentičnosti, uzima se hash unesene lozinke i uspoređuje s hash vrijednošću u datoteci ~/etc/users. Ako se vrijednosti podudaraju, autentificirani ste.

Ne mogu proći osnovnu provjeru autentičnosti

Vjerojatno unosite krivu lozinku. Instalirati Nova lozinka za osnovnu autentifikaciju:

Ako ste prošli osnovnu autentifikaciju, ali se ne možete prijaviti izravno na administrativnu ploču svoje Joomla ili WordPress stranice, koristite pomoć:

Kako povećati zaštitu svoje web stranice od Brute-force napada?

Za povećanje sigurnosti stranice:

promijenite prijavu superkorisnika u jedinstveniju. Nemojte koristiti kratka imena, bolje je da uz prezime koristite i ime. Na Internetu postoji mnogo resursa u kojima se prikupljaju najpopularnije prijave. Upoznajte se s njima i nikada ih ne koristite;
Postavite složenu lozinku administratora stranice. Složena lozinka mora sadržavati velika i mala slova, brojeve i dodatne simbole poput “* - _ # :” itd. Dužina lozinke nije manja od 6 znakova. Po mogućnosti 10 i više.

Kako ukloniti obrazac HTTP Basic Authentication?

Za uklanjanje obrasca HTTP Basic Authentication:

AuthType Basic AuthName "molimo upotrijebite lozinku svoje upravljačke ploče" AuthUserFile .../users Zahtijeva valid-user

Da biste komentirali redak, stavite simbol hash ("#") na početak retka, ovako.

“Fool protection” je skup mjera za sprječavanje unosa netočnih podataka u obrazac. Na primjer, ako polje zahtijeva unos pozitivnog broja od 0 do 10, tada trebate provjeriti da korisnik ne unese tekst ili broj koji ne leži u navedenom rasponu, tj. broj ne smije biti manji od nule ni veći od deset.

Zašto se unose netočni podaci? To se uglavnom radi iz tri razloga.

Korisnik je slučajno pogriješio, na primjer, nepažljivo je pročitao ono što je trebao navesti.

Web stranica traži podatke na dvosmislen način, ostavljajući korisnika da nagađa i nagađa što zapravo želi. Međutim, mišljenja programera i korisnika ne podudaraju se uvijek.

Postoji niz ljudi koji instrukcije doživljavaju kao izazov i pokušavaju učiniti suprotno. Takvi korisnici razmišljaju otprilike ovako: “Da, traže od mene da unesem broj. Što će se dogoditi ako označim slova?" Zatim traže očito netočne podatke i vide čemu to vodi.

Treba razumjeti da precizan i ispravan tekst, iako smanjuje vjerojatnost pogrešaka, ni na koji način vas ne spašava od njih. Samo tehnička sredstva na strani poslužitelja omogućuju dobivanje traženog rezultata i izbjegavanje unosa netočnih podataka. Međutim, revizija ili, kako se još naziva, provjera valjanosti na strani klijenta omogućuje brzu provjeru točnosti podataka koje je korisnik unio, bez slanja obrasca na poslužitelj. Ovo štedi vrijeme korisnika i smanjuje opterećenje poslužitelja. Sa stajališta upotrebljivosti također ima prednosti - korisnik odmah dobiva poruku o tome koje je podatke pogrešno unio i može ispraviti svoju grešku.

Obavezno polje

Neka polja obrasca moraju biti ispunjena prije slanja na poslužitelj. To se, primjerice, odnosi na obrazac za registraciju, gdje se od vas traži da unesete prijavu i lozinku. Za navođenje obaveznih polja koristite obavezni atribut, kao što je prikazano u primjeru 1.

Primjer 1. Traženi atribut

HTML5 IE 10+ Cr Op Sa Fx

Obavezno polje

Prijaviti se:

Lozinka:

Obavezna polja moraju biti ispunjena prije slanja obrasca, inače obrazac neće biti poslan na poslužitelj, a preglednik će o tome izdati upozorenje. Vrsta poruke ovisi o pregledniku, na primjer Chrome prikazuje opis alata kao što je prikazano na sl. 1.

Riža. 1. Obavezno polje nije popunjeno

Ispravnost podataka

U početku postoje dva polja u kojima se korisnički unos automatski provjerava. Ovo je web adresa i adresa e-pošte. Chrome preglednik također provjerava valjanost polja s podacima kalendara, ali samo zato što nema sučelje za odabir kalendara klikom miša. Za ove elemente vrijede sljedeća pravila.

Web adresa ( ) mora sadržavati protokol (http://, https://, ftp://).
Adresa e-pošte ( ) mora sadržavati slova ili brojke prije simbola @, nakon njega, zatim točku i vršnu domenu.

Preglednici imaju malo drugačija pravila za provjeru korisničkih podataka. Na primjer, Opera automatski umeće http:// protokol ispred unesenog teksta, dok drugi preglednici to čekaju od korisnika. Chrome i Opera to zahtijevaju poštanska adresa bilo je smisla, nije potrebno za Firefox.

Primjer 2 prikazuje obrazac s obaveznim poljima u kojem dva polja provjerava valjanost preglednika.

Primjer 2: Točnost podataka

HTML5 IE 10+ Cr Op Sa Fx

Ispravnost podataka

Ispunite obrazac (sva polja su obavezna)

Ime:

Email:

Web stranica:

Opera samo provjerava element obrasca ako ima atribut imena.

Što se događa u Operi kada unesete netočne podatke prikazano je na sl. 2.

Riža. 2. Upozorenje na netočne podatke

Predložak za unos

Neki se podaci ne mogu svrstati u jedan od tipova elemenata obrasca, pa za njih morate koristiti tekstualno polje. Pritom se unose prema određenom standardu. Dakle, IP adresa sadrži četiri broja odvojena točkom (192.168.0.1), poštanski broj Rusije ograničen je na šest znamenki (124007), telefonski broj sadrži pozivni broj i određeni broj znamenki, često odvojenih znakom crtica (391 555-341-42) itd. Preglednik treba odrediti predložak za unos kako bi prema njemu provjeravao podatke koje korisnik unese. Da biste to učinili, koristi se atribut pattern, a njegova vrijednost je regularni izraz. Neke tipične vrijednosti navedene su u tablici. 1.

Primjer 3 od vas traži da unesete heksadecimalnu vrijednost boje (#ffcc00) i ako nije u tom rasponu, preglednik prikazuje poruku o pogrešci.

Primjer 3. Predložak unosa

HTML5 IE 10+ Cr Op Sa Fx

Unos boja

Unesite heksadecimalnu vrijednost boje (mora započeti s #)

Na sl. Slika 3 prikazuje upozorenje u pregledniku Chrome.

Riža. 3. Uneseni podaci ne odgovaraju predlošku

Poništavanje valjanosti

Provjera valjanosti nije uvijek potrebna za obrazac; na primjer, programer bi je mogao upotrijebiti univerzalno rješenje u JavaScriptu i pregledniku više nije potrebna provjera duplikata. U takvim slučajevima trebate onemogućiti ugrađenu provjeru valjanosti. Da biste to učinili, upotrijebite atribut novalidate oznake. Primjer 4 pokazuje korištenje ovog atributa.

Primjer 4: Poništavanje valjanosti

HTML5 IE 10+ Cr Op Sa Fx

atribut novalidate

U sličnu svrhu koristi se atribut formnovalidate koji se dodaje na gumb za predaju obrasca, u ovom slučaju na tag. U ovom slučaju obrazac iz primjera 4 će izgledati ovako.