Stran za prijavo v HTML5 vadnico z obrazci HTML5

HTML5 prinaša številne funkcije in izboljšave spletne obrazce, uvedeni so novi atributi in vrste vnosov predvsem zato, da bi olajšali življenje spletnih razvijalcev in spletnim uporabnikom zagotovili boljše izkušnje.

Torej, v tem prispevku bomo ustvarili stran za prijavo z uporabo Obrazci HTML5 da vidite, kako nove dodane funkcije delujejo.

• Demo
• Prenesi vir

Vnos HTML5

Oglejmo si naslednje oznake.

 
 
 
 
E-naslov 
 
Geslo 
 
 
 
 
 
 

Če ste že prej delali z obrazci HTML, bo to videti znano. Toda tam boste opazili tudi razlike. Vhodi imajo ogrado in potrebno atributi, ki so novi atributi v HTML5.

Placeholder

The ogrado atribut nam omogoča, da vnesemo začetno besedilo, ki bo izginilo, ko je v osredotočiti Prej smo to počeli z JavaScriptom, zdaj pa je s tem novim atributom veliko lažje.

Zahtevani atribut

The potrebno atribut bo določil, da je polje obvezno in ga zato ne bi smeli pustiti praznega, preden je obrazec poslan, zato se bo, ko uporabnik ne bo izpolnil polja, pojavila naslednja napaka:.

Nov selektor je predstavljen tudi v CSS3, : potrebno na ciljna polja z potrebno atribut. Tukaj je primer;

 input: required border: 1px rdeča;  

Vrsta vnosa e-pošte

Prvi tip vnosa je E-naslov ki je dejansko novo vrsto polja dodan tudi v HTML5. The E-naslov tip bo podal osnovno preverjanje e-poštnega naslova v polju. Ko uporabnik ne izpolni polja z e-poštnim naslovom, bo brskalnik prikazal naslednje obvestilo;

Z uporabo tipov vnosa e-pošte lahko uporabnikom mobilnih storitev, kot so uporabniki iPhone in Android, zagotovite boljšo izkušnjo, kjer bodo prikazani zaslonska tipkovnica, optimizirana za e-pošto z namenskim “@” za hitrejši vpis e-poštnega naslova.

Slabosti

Nove oblike obrazca, ki jih ponuja HTML5, so zmogljive in enostavne za izvajanje, vendar na nekaterih področjih še vedno nimajo dovolj. Na primer;

The ogrado atribut, je podprt samo v sodobnih brskalnikih - Firefox 3.7+, Safari 4+, Chrome 4+ in Opera 11+. Torej, če jo potrebujete za delo v nepodprtih brskalnikih, lahko uporabite ta polifillov v povezavi z Modernizr.

Enako gre za potrebno atribut. Obvestila o napaki ni mogoče prilagoditi, napaka bo ostala “Izpolnite to polje” raje kot “Izpolnite svoje ime”, ta atributna podpora je omejena tudi na najnovejše brskalnike.

Zato je uporaba JavaScripta za preverjanje zahtevanega polja (doslej) boljša možnost.

 function validateForm () var x = document.forms ["login"] ["username"]. vrednost; if (x == null || x == "") alert ("Prosimo, izpolnite uporabniško ime"); return false;  

Oblikovanje obrazcev

Dobro, zdaj okrasimo naš obrazec za prijavo s CSS. Najprej bomo v ozadju podali vzorec lesa html oznaka.

 html ozadje: url ('wood_pattern.png'); velikost pisave: 10pt;  

Nato moramo odstraniti privzeto padding in margin v ul oznako, ki zavija celotno vhodi in plava li v levo, tako da bodo vhodi prikazani vodoravno, drug ob drugem.

 .loginform ul padding: 0; margin: 0;  .loginform li display: inline; plovec: levo;  

Odkar plavajo li, starši se bodo zrušili, zato moramo razčistiti stvari okoli staršev s čistilnim krampom.

 oznaka display: block; barva: # 999;  .cf: before, .cf: after content: ""; prikaz: tabela;  .cf: after clear: oboje;  .cf * zoom: 1; : izostritev oris: 0;  

V CSS3 imamo izbirnik negacije. Zato ga bomo uporabili za ciljanje vhodi razen. \ t predložiti tip, ki je v tem primeru bo ciljno usmerjen na vnos e-pošte in gesla;

 .loginform input: not ([type = submit]) polnilo: 5px; margin-right: 10px; meja: 1px trdna rgba (0, 0, 0, 0.3); obrobni polmer: 3px; box-shadow: vložek 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

Nazadnje pa bomo podarili še malo okraskov za stil Pošlji gumb, kot sledi.

 .loginform input [tip = predloži] border: 1px solid rgba (0, 0, 0, 0.3); ozadje: # 64c8ef; / * Stari brskalniki * / ozadje: -moz-linear-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # 64c8ef), barvno zaustavitev (100%, # 00a2e2)); / * Chrome, Safari4 + * / ozadje: -webkit-linear-gradient (vrh, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / ozadje: -o-linearni gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / ozadje: -ms-linear-gradient (vrh, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / ozadje: linearni gradient (do dna, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / barva: #fff; oblazinjenje: 5px 15px; margin-right: 0; margin-top: 15px; obrobni polmer: 3px; besedilna senca: 1px 1px 0px rgba (0, 0, 0, 0.3);  

To je to, zdaj lahko poskusite prijavni obrazec iz naslednjih povezav.

• Demo
• Prenesi vir

Končne besede

V tem vodiču smo preučili nekaj novih funkcij v obrazcih HTML5:ogrado, potrebno in E-naslov vrste vnosov, da ustvarite preprosto stran za prijavo. Prišli smo tudi do slabosti atributov, tako da se lahko odločimo za boljši pristop.

V naslednjem prispevku bomo preučili nove funkcije HTML5, zato ostanite z nami.