Stranica za prijavu u HTML5 Vodič s HTML5 obrascima
HTML5 donosi mnoge značajke i poboljšanja web obrasci, uvedeni su novi atributi i vrste ulaza uglavnom kako bi olakšali život web-programera i pružili web-korisnicima bolje iskustvo.
Dakle, u ovom postu ćemo napraviti stranicu za prijavu pomoću HTML5 obrasci da biste vidjeli kako nove dodane značajke funkcioniraju.
- Demo
- Preuzimanje izvora
HTML5 unos
Pogledajmo sljedeću oznaku.
Ako ste prije radili s HTML obrascima, to će vam izgledati poznato. Ali, također ćete primijetiti razlike tamo. Ulazi imaju rezerviranog mjesta i potreban atributi, koji su novi atributi u HTML5.
Rezerviranog mjesta
rezerviranog mjesta atribut nam omogućuje da na početku unesemo tekst koji će nestati kada je u fokus Prethodno smo to radili s JavaScriptom, ali sada postaje puno lakše s ovim novim atributom.
Obavezno svojstvo
potreban Atribut će postaviti polje kao obavezan i stoga ne bi trebao biti prazan prije slanja obrasca, tako da kada korisnik nije popunio polje, pojavit će se sljedeća pogreška:.
Novi selektor je također uveden u CSS3, :potreban ciljati polja s potreban atribut. Evo primjera;
ulaz: obavezno border: 1px solid red;
Vrsta ulaza e-pošte
Prvi tip ulaza je e što je zapravo novu vrstu polja dodan u HTML5. e tip će dati osnovnu provjeru adrese e-pošte u polju. Kada korisnik ne popuni polje s adresom e-pošte, preglednik će prikazati sljedeću obavijest;
Korištenje vrsta unosa e-pošte također može pružiti bolje iskustvo za mobilne korisnike, kao što su korisnici iPhone i Android, gdje će prikazati zaslonska tipkovnica optimizirana za e-poštu s posvećenim “@” gumb za brži unos adrese e-pošte.
The Downsides
Nove značajke obrazaca koje nudi HTML5 moćne su i jednostavne za implementaciju, ali u nekim područjima još uvijek nedostaju. Na primjer;
rezerviranog mjesta atribut, je podržan samo u modernim preglednicima - Firefox 3.7+, Safari 4+, Chrome 4+ i Opera 11+. Dakle, ako vam je potrebna za rad u nepodržanim preglednicima, možete koristiti ove polifillove u suradnji s Modernizr.
Isto vrijedi i za potreban atribut. Obavijest o pogrešci ne može se personalizirati, pogreška će ostati “Ispunite ovo polje” rađe nego “Ispunite svoje ime”, ova podrška za atribute također je ograničena na najnovije preglednike.
Dakle, upotreba JavaScripta za provjeru potrebnog polja je (za sada) bolja opcija.
funkcija validateForm () var x = document.forms ["login"] ["username"]. if (x == null || x == "") alert ("Molimo ispunite korisničko ime"); return false; Stiliziranje obrazaca
U redu, sada ćemo ukrasiti naš obrazac za prijavu pomoću CSS-a. Prvo ćemo pozadini dati uzorak drva u hTML označiti.
html pozadina: url ('wood_pattern.png'); veličina fonta: 10pt; Zatim trebamo ukloniti zadani padding i margin ul koja obmotava cijelu ulazi i pluta li lijevo, tako da se ulazi prikazuju vodoravno, jedan do drugog.
.loginform ul padding: 0; margina: 0; .loginform li display: inline; plutajući: lijevo;
Budući da plutamo li, roditelji će se srušiti, tako da trebamo očistiti stvari oko roditelja s clearfix hackom.
oznaka display: block; boja: # 999; .cf: before, .cf: nakon content: ""; prikaz: stol; .cf: nakon clear: oboje; .cf * zum: 1; : fokus outline: 0;
U CSS3 imamo izbornik za negaciju. Dakle, koristit ćemo ga za ciljanje ulazi osim one podnijeti tipa, što je u ovom slučaju će ciljati unos e-pošte i zaporke;
.loginform input: not ([type = submit]) padding: 5px; margin-right: 10px; granica: 1px solid rgba (0, 0, 0, 0.3); granični polumjer: 3px; box-shadow: umetak 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
Na kraju, dat ćemo malu stilsku dekoraciju podnijeti kako slijedi.
.loginform input [tip = podnijeti] border: 1px solid rgba (0, 0, 0, 0.3); pozadina: # 64c8ef; / * Stari preglednici * / background: -moz-linear-gradient (gore, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, stop boja (0%, # 64c8ef), zaustavljanje boje (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (gore, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / pozadina: -o-linearni gradijent (gore, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (gore, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / pozadina: linearni gradijent (do dna, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / boja: #fff; padding: 5px 15px; margin-right: 0; margina-gore: 15px; granični polumjer: 3px; tekst-sjena: 1px 1px 0px rgba (0, 0, 0, 0.3);
To je to, sada možete isprobati obrazac za prijavu iz sljedećih veza.
- Demo
- Preuzimanje izvora
Završne riječi
U ovom smo vodiču pogledali nekoliko novih značajki u HTML5 obrascima:rezerviranog mjesta, potreban i e vrste unosa za stvaranje jednostavne stranice za prijavu. Također smo došli do nedostataka atributa, tako da možemo odlučiti o boljem pristupu.
U sljedećem postu pregledat ćemo nove značajke HTML5 obrasca, stoga ostanite u tijeku.
