HTML5 vadovo prisijungimo puslapis su HTML5 formomis
HTML5 suteikia daug funkcijų ir patobulinimų žiniatinklio formos, įvesti nauji atributai ir įvesties tipai daugiausia siekiant palengvinti žiniatinklio kūrėjų gyvenimą ir suteikti geresnę patirtį interneto vartotojams.
Taigi, šiame pranešime ketiname sukurti prisijungimo puslapį naudojant HTML5 formos norėdami pamatyti, kaip veikia naujos papildomos funkcijos.
- Demo
- Atsisiųsti šaltinį
HTML5 įvestis
Pažvelkime į šį žymėjimą.
Jei anksčiau dirbote su HTML formomis, tai atrodys pažįstami. Tačiau taip pat pastebėsite skirtumus. Įėjimai yra vietos žymeklis ir reikalaujama atributai, kurie yra nauji atributai HTML5.
Vietovė
The vietos žymeklis atributas leidžia mums pateikti pradinį tekstą įvestyje, kuris išnyks, kai jis bus a sutelkti dėmesį Anksčiau mes tai darėme su „JavaScript“, bet dabar šis naujas atributas tampa daug lengvesnis.
Reikalingas atributas
The reikalaujama atributas nustatys, kad laukas bus privalomas ir todėl neturėtų būti paliktas tuščias prieš pateikiant formą, todėl, kai naudotojas nėra užpildęs lauko, atsiras ši klaida.
Naujasis selektorius taip pat pristatomas CSS3, : reikia nukreipti laukus į reikalaujama atributas. Štai pavyzdys;
įvestis: reikalinga siena: 1px kieta raudona;
El. Pašto įvesties tipas
Pirmasis įvesties tipas yra el kuris iš tikrųjų yra naujas lauko tipas pridėta ir HTML5. The el tipas suteiks pagrindinį el. pašto adreso patvirtinimą lauke. Kai naudotojas nepildo lauko el. Pašto adresu, naršyklėje bus rodomas šis pranešimas;
El. Pašto įvedimo tipų naudojimas taip pat gali suteikti geresnę patirtį mobiliesiems vartotojams, pvz., „IPhone“ ir „Android“ vartotojams, kur bus rodoma elektroniniu būdu optimizuota ekrano klaviatūra su specialiu “@” mygtukas, skirtas greičiau įvesti el. pašto adresą.
Praradimai
Naujos formos HTML5 siūlomos funkcijos yra galingos ir lengvai įgyvendinamos, tačiau kai kuriose srityse jos vis dar trūksta. Pavyzdžiui;
The vietos žymeklis atributas, yra palaikoma tik šiuolaikinėse naršyklėse - „Firefox 3.7+“, „Safari 4+“, „Chrome 4+“ ir „Opera 11“+. Taigi, jei reikia, kad dirbtumėte nepalaikomose naršyklėse, galite naudoti šį polifilą kartu su „Modernizr“.
Tas pats pasakytina ir su reikalaujama atributas. Pranešimas apie klaidą negali būti individualizuotas, klaida išliks “Prašome užpildyti šį lauką” geriau nei “Prašome užpildyti savo vardą”, ši atributo parama taip pat apsiriboja naujausiomis naršyklėmis.
Taigi, jei reikia patvirtinti reikiamą lauką, „JavaScript“ yra geresnis pasirinkimas.
funkcija validateForm () var x = document.forms ["prisijungti"] ["vartotojo vardas"]. jei (x == null || x == "") įspėjimas („Prašome užpildyti naudotojo vardą“); grąžinti klaidingą;
Formų formavimas
Gerai, dabar papasakokime savo prisijungimo formą su CSS. Pirmiausia mes suteiksime foną medžio modeliui html žyma.
html background: url ('wood_pattern.png'); šrifto dydis: 10pt; Tada mums reikia pašalinti numatytąją pagalvę ir paraštę ul žyma, kuri suvynioja visą sąnaudas ir plaukioja li į kairę, todėl įėjimai bus rodomi horizontaliai, šalia.
.loginform ul padding: 0; marža: 0; .loginform li ekranas: inline; plūdė: kairė;
Kadangi mes plaukiame li, tėvai žlugs, todėl turime išsiaiškinti aplink tėvą esančius dalykus su išvalytu įsilaužimu.
etiketė display: block; spalva: # 999; .cf: prieš, .cf: po content: ""; ekranas: lentelė; .cf: po aiškus: abu; .cf * priartinimas: 1; : fokusavimas kontūras: 0;
CSS3 mes turime neigimo parinkiklį. Taigi, mes jį panaudosime sąnaudas išskyrus Pateikti tipas, kuris šiuo atveju nukreips el. paštą ir slaptažodį;
.loginform įvestis: ne ([type = Submit]) padding: 5px; paraštė dešinėje: 10px; riba: 1px kietoji rgba (0, 0, 0, 0,3); pasienio spindulys: 3px; dėžutės šešėlis: įdėklas 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Galiausiai, mes suteiksime šiek tiek stiliaus dekoro Pateikti mygtukas.
.loginform įvestis [type = Submit] border: 1px solid rgba (0, 0, 0, 0.3); fonas: # 64c8ef; / * Senosios naršyklės * / fonas: -moz-linijinis gradientas (viršuje, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / fonas: -webkit gradientas (tiesinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, # 64c8ef), spalvų stabdymas (100%, # 00a2e2)); / * „Chrome“, Safari4 + * / fonas: -webkit-tiesinis gradientas (viršuje, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / fonas: -o-tiesinis gradientas (viršuje, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / fonas: -ms-linijinis gradientas (viršuje, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / fonas: tiesinis gradientas (į apačią, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / spalva: #fff; paminkštinimas: 5px 15px; paraštė dešinėje: 0; margin-top: 15px; pasienio spindulys: 3px; teksto šešėlis: 1px 1px 0px rgba (0, 0, 0, 0,3);
Taip, dabar galite išbandyti prisijungimo formą iš šių nuorodų.
- Demo
- Atsisiųsti šaltinį
Galutiniai žodžiai
Šioje instrukcijoje mes peržiūrėjome keletą naujų funkcijų HTML5 formose:vietos žymeklis, reikalaujama ir el įvesties tipai, kad būtų sukurtas paprastas prisijungimo puslapis. Mes taip pat pasiekėme atributų trūkumus, kad galėtume nuspręsti, kaip taikyti geresnį požiūrį.
Kitame pranešime mes ieškosime kitos naujos HTML5 formos funkcijos, todėl palaikykite ryšį.
