HTML5 apmācības lapa ar HTML5 veidlapām
HTML5 nodrošina daudzas funkcijas un uzlabojumus tīmekļa veidlapas, ir ieviesti jauni atribūti un ievades veidi galvenokārt, lai padarītu tīmekļa izstrādātāju dzīvi vieglāku un sniegtu labāku pieredzi tīmekļa lietotājiem.
Tātad šajā amatā mēs izveidosim pieteikšanās lapu, izmantojot HTML5 veidlapas lai redzētu, kā darbojas jaunās funkcijas.
- Demo
- Lejupielādēt avotu
HTML5 ievade
Apskatīsim šādu atzīmi.
Ja iepriekš strādājāt ar HTML veidlapām, tas izskatīsies pazīstami. Bet jūs tur atradīsiet arī atšķirības. Ievades ir vietas rezervētājs un nepieciešams atribūti, kas ir jauni atribūti HTML5.
Placeholder
The vietas rezervētājs atribūts ļauj mums ievadīt sākotnējo tekstu ievadā, kas pazudīs, kad tas ir a fokuss agrāk mēs to darījām ar JavaScript, bet tagad ar šo jauno atribūtu kļūst daudz vieglāk.
Nepieciešamais atribūts
The nepieciešams atribūts noteiks, ka lauks būs obligāts, un tāpēc to nedrīkst atstāt tukšu pirms veidlapas iesniegšanas, tāpēc, kad lietotājs nav aizpildījis lauku, parādīsies šāda kļūda.
CSS3 tiek ieviests arī jauns selektors, : nepieciešams lai mērķētu laukus ar nepieciešams atribūts. Šeit ir piemērs;
ievade: nepieciešama robeža: 1px cieta sarkana;
E-pasta ievades veids
Pirmais ievades veids ir e-pastu kas ir faktiski jaunu lauku veidu pievienots arī HTML5. The e-pastu tips piešķirs pamata e-pasta adreses apstiprinājumu laukā. Ja lietotājs neaizpilda lauku ar e-pasta adresi, pārlūkprogrammā tiks parādīts šāds paziņojums;
Izmantojot e-pasta ievades veidus, var iegūt arī labāku pieredzi mobilajiem lietotājiem, piemēram, iPhone un Android lietotājiem, kur tā rādīs E-pasta optimizēta ekrāna tastatūra ar īpašu “@” poga, lai ātrāk ievadītu e-pasta adresi.
Lejupēji
Jaunās HTML5 formātā piedāvātās funkcijas ir spēcīgas un viegli īstenojamas, bet dažās jomās tās joprojām nav. Piemēram;
The vietas rezervētājs atribūts, tiek atbalstīta tikai mūsdienu pārlūkprogrammās - Firefox 3.7+, Safari 4+, Chrome 4+ un Opera 11+. Tātad, ja jums tas ir vajadzīgs, lai darbotos neatbalstītajās pārlūkprogrammās, jūs varat izmantot šīs polifilmas kopā ar Modernizr.
Tas pats notiek ar nepieciešams atribūts. Kļūdas paziņojumu nevar personalizēt, kļūda paliks “Lūdzu, aizpildiet šo lauku” nevis “Lūdzu, aizpildiet savu vārdu”, šis atribūtu atbalsts attiecas arī uz jaunākajām pārlūkprogrammām.
Tātad, lietojot JavaScript, lai apstiprinātu vajadzīgo lauku, tas ir labāks risinājums.
funkcija validateForm () var x = document.forms ["login"] ["lietotājvārds"]. ja (x == null || x == "") brīdinājums ("Lūdzu aizpildiet lietotājvārdu"); atgriezties nepatiess; Veidlapu veidošana
Labi, tagad pieņemsim veidot mūsu pieteikšanās veidlapu ar CSS. Vispirms mēs fonā piešķirsim koka rakstu html tag.
html background: url ('wood_pattern.png'); fonta lielums: 10pt; Tad mums ir jānoņem noklusējuma polsterējums un rezerves ul tagu, kas aptin visu ievadi un peld li pa kreisi, tāpēc ieejas tiks rādītas horizontāli, blakus.
.loginform ul polsterējums: 0; starpība: 0; .loginform li displejs: inline; peldēt: pa kreisi;
Tā kā mēs peldamies li, vecāki sabruks, tāpēc mums ir jātīra lietas, kas atrodas vecākiem, ar hibrīda hack.
etiķete display: block; krāsa: # 999; .cf: pirms, .cf: pēc saturs: "; displejs: tabula; .cf: pēc skaidrs: abi; .cf * zoom: 1; : fokuss kontūra: 0;
CSS3 ir nolieguma selektors. Tātad, mēs to izmantosim, lai mērķētu ievadi kas nav Iesniegt veids, kas šajā gadījumā mērķēs e-pastu un paroli;
.loginform ievade: nav ([tips = Submit]) polsterējums: 5px; labās malas: 10px; robeža: 1px cietā rgba (0, 0, 0, 0,3); robežu rādiuss: 3px; kastes ēna: ieliktnis 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Visbeidzot, mēs piešķirsim nelielu stila apdari Iesniegt poga, kā norādīts tālāk.
.loginform ievade [type = Submit] border: 1px solid rgba (0, 0, 0, 0.3); fons: # 64c8ef; / * Vecās pārlūkprogrammas * / fons: -moz-lineārs gradients (augšā, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / fons: -webkit gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # 64c8ef), krāsu apstāšanās (100%, # 00a2e2)); / * Chrome, Safari4 + * / fons: -webkit-lineārs gradients (augšā, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / fons: -o-lineārie gradienti (augšā, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / fons: -ms-lineārs gradients (augšā, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / fons: lineārs gradients (uz leju, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / krāsa: #fff; polsterējums: 5px 15px; labās malas: 0; margin-top: 15px; robežu rādiuss: 3px; teksta ēna: 1px 1px 0px rgba (0, 0, 0, 0,3);
Tieši tā, tagad varat izmēģināt pieteikšanās veidlapu no šādām saitēm.
- Demo
- Lejupielādēt avotu
Galīgie vārdi
Šajā apmācībā mēs apskatījām dažas jaunas funkcijas HTML5 veidlapās:vietas rezervētājs, nepieciešams un e-pastu ievades tipi, lai izveidotu vienkāršu pieteikšanās lapu. Mēs arī esam nonākuši pie atribūtu nepietiekamības, tāpēc mēs varam izlemt piemērotāku pieeju.
Nākamajā ziņojumā mēs izskatīsim citas jaunas HTML5 veidlapas funkcijas, tāpēc palieciet.
