HTML5 juhendite sisselogimise leht HTML5 vormidega
HTML5 toob palju funktsioone ja parendusi veebivormid, on kasutusel uued atribuudid ja sisestusliigid peamiselt selleks, et muuta veebiarendajate elu lihtsamaks ja pakkuda veebikasutajatele paremat kogemust.
Niisiis loome selles postituses sisselogimislehe, kasutades HTML5 vormid et näha, kuidas uued lisatud funktsioonid toimivad.
- Demo
- Allalaadimise allikas
HTML5 sisend
Vaatame järgmist märgistust.
Kui olete varem HTML-vormidega töötanud, tundub see tuttav. Kuid te märkate seal ka erinevusi. Sisendid on kohahoidja ja nõutud atribuudid, mis on HTML5 uued atribuudid.
Placeholder
The kohahoidja atribuut võimaldab meil anda sisendile algteksti, mis kaob, kui see on a keskenduda eelnevalt tegime seda JavaScripti abil, kuid nüüd muutub see uue atribuudiga palju lihtsamaks.
Nõutav atribuut
The nõutud atribuut seab välja kohustuslikuks ja seetõttu ei tohiks seda enne vormi esitamist jätta tühjaks, nii et kui kasutaja ei ole välja täitnud, ilmub järgmine viga.
CSS3-sse on sisse toodud ka uus selektor, :nõutud sihtida väljadega nõutud atribuut. Siin on näide;
sisend: nõutav border: 1px solid punane;
E-posti sisendi tüüp
Esimene sisenditüüp on e-posti teel mis on tegelikult uus väli HTML5-sse lisatud. The e-posti teel tüüp annab väljale e-posti põhi aadressi valideerimise. Kui kasutaja ei täida väljale e-posti aadressi, kuvab brauser järgmise teate;
E-posti sisenditüüpide kasutamine võib anda ka paremaid kogemusi mobiilikasutajatele, nagu iPhone ja Android kasutajad, kus see näitab e-posti teel optimeeritud ekraaniklaviatuur pühendatud “@” nuppu, et aidata kiiremini sisestada e-posti aadressi.
Allakäigud
HTML5-s pakutavad uued vormifunktsioonid on võimsad ja kergesti rakendatavad, kuid mõnes valdkonnas on need ikka veel puudulikud. Näiteks;
The kohahoidja atribuut, toetab ainult kaasaegseid brausereid - Firefox 3.7+, Safari 4+, Chrome 4+ ja Opera 11+. Niisiis, kui vajate seda toetamata brauserites töötamiseks, saate kasutada seda polüpillid koos Modernizriga.
Sama kehtib ka nõutud atribuut. Veateatet ei saa isikupärastada, viga jääb “Palun täitke see väli” pigem kui “Palun täitke oma eesnimi”, see atribuudi tugi piirdub ka viimaste brauseritega.
Seega on JavaScript vajaliku välja valideerimiseks parem (siiani) parem valik.
function validateForm () var x = document.forms ["login"] ["kasutajanimi"]. kui (x == null || x == "") alarm ("Palun täitke kasutajanimi"); tagastage vale; Vormide kujundamine
Olgu, kaunistage nüüd meie sisselogimisvorm CSS-iga. Esmalt anname taustale puidust mustri html silt.
html background: url ('wood_pattern.png'); fondi suurus: 10pt; Seejärel peame eemaldama vaikimisi polsterdamise ja marginaali ul kogu ümbrisega silt sisendeid ja hõljub li vasakule, nii et sisendid kuvatakse horisontaalselt, kõrvuti.
.loginform ul padding: 0; varu: 0; .loginform li kuva: inline; float: vasakule;
Kuna me ujukime li, vanemad hakkavad kokku varisema, nii et peame selgitama hoopis vanema ümber asju.
silt display: block; värv: # 999; .cf: enne, .cf: pärast content: ""; kuva: tabel; .cf: pärast selge: mõlemad; .cf * zoom: 1; : fookus ülevaade: 0;
CSS3-s on meil nullimisvalija. Niisiis, me kasutame seda sihtimiseks sisendeid muud kui Esita tüüp, mis antud juhul sihib e-posti ja parooli sisestamise;
.sisselogimisvorm: mitte ([type = Submit]) padding: 5px; marginaali paremale: 10px; piir: 1px tahke rgba (0, 0, 0, 0,3); raadius: 3x; kast-vari: sisend 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Lõpuks anname me väikese stiili Esita nupp, järgmiselt.
.loginform input [type = Submit] border: 1px tahke rgba (0, 0, 0, 0,3); taust: # 64c8ef; / * Vana brauserid * / taust: -moz-lineaarne gradient (ülemine, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # 64c8ef), värvipeatus (100%, # 00a2e2)); / * Chrome, Safari4 + * / taust: -webkit-lineaarne gradient (ülemine, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / taust: -o-lineaarne gradient (ülemine, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / taust: -ms-lineaarne gradient (ülemine, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / taust: lineaarne gradient (alumisse, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / värv: #fff; polsterdus: 5px 15px; marginaal-parem: 0; margin-top: 15px; raadius: 3x; teksti vari: 1px 1px 0px rgba (0, 0, 0, 0,3);
See ongi nii, nüüd saad proovida sisselogimisvormi järgmistest linkidest.
- Demo
- Allalaadimise allikas
Lõplikud sõnad
Selles juhendis uurisime mõningaid HTML5 vormide uusi funktsioone:kohahoidja, nõutud ja e-posti teel sisenditüübid lihtsa sisselogimislehe loomiseks. Oleme jõudnud ka atribuutide varjukülgedeni, nii et me saame otsustada parema lähenemisviisi kohaldamise.
Järgmises postituses vaatleme veel üht uut HTML5 vormi funktsiooni, nii et olge kursis.
