HTML5 Tutorial Login Page med HTML5 Forms
HTML5 bringer mange funktioner og forbedringer til webformularer, Der er nye attributter og inputtyper, der blev introduceret hovedsagelig for at gøre livet for webudviklere nemmere og give bedre brugere til web-brugere.
Så i dette indlæg vil vi oprette en login side ved hjælp af HTML5-formularer for at se, hvordan de nye funktioner tilføjes.
- Demo
- Download kilde
HTML5-indgang
Lad os se på følgende markering.
Hvis du har arbejdet med HTML-formularer før, vil dette se ud til kendskab. Men du vil også bemærke forskelle der. Indgangene har pladsholder og påkrævet attributter, som er nye attributter i HTML5.
Pladsholder
Det pladsholder attribut giver os mulighed for at give den første tekst i det input, der forsvinder, når det er i a fokus tilstand eller bliver udfyldt. Tidligere plejede vi at gøre det med JavaScript, men nu bliver det meget lettere med denne nye attribut.
Krævet Egenskab
Det påkrævet attribut vil sætte feltet til at være obligatorisk og bør derfor ikke stå blank før formularen er indsendt, så når brugeren ikke har udfyldt feltet, vises følgende fejl.
Ny vælger er også introduceret i CSS3, : kræves at målrette felter med påkrævet attribut. Her er et eksempel;
input: required border: 1px solid red;
E-mail-indtastningstype
Den første indtastningstype er e-mail som faktisk er en ny felttype tilføjet i HTML5 også. Det e-mail type vil give grundlæggende e-mail-adresse validering i feltet. Når brugeren ikke udfylder feltet med en e-mail-adresse, viser browseren følgende meddelelse;
Brug af e-mail-indtastningstyper kan også give bedre brugere til mobile brugere, som f.eks. IPhone- og Android-brugere, hvor den vil vise e-mail-optimeret tastatur på skærmen med en dedikeret “@” knappen for at hjælpe med at skrive e-mail-adressen hurtigere.
Downsides
De nye formularfunktioner, der tilbydes i HTML5, er kraftfulde og nemme at implementere, men de mangler stadig i nogle områder. For eksempel;
Det pladsholder attribut, understøttes kun i moderne browsere - Firefox 3.7+, Safari 4+, Chrome 4+ og Opera 11+. Så hvis du har brug for det til at arbejde i ikke understøttede browsere, kan du bruge disse polyfiller sammen med Modernizr.
Det samme gælder med påkrævet attribut. Fejlmeddelelsen kan ikke tilpasses, fejlen forbliver “Udfyld venligst dette felt” hellere end “Udfyld venligst dit fornavn”, Denne attributstøtte er også begrænset til de nyeste browsere.
Så ved at bruge JavaScript til at validere det krævede felt er (indtil videre) en bedre mulighed.
funktion validateForm () var x = document.forms ["login"] ["brugernavn"]. værdi; hvis (x == null || x == "") alert ("Udfyld venligst brugernavnet"); returnere falsk; Styling formularerne
Okay, lad os nu dekorere vores login formular med CSS. Først vil vi give baggrunden et træmønster i html tag.
html baggrund: url ('wood_pattern.png'); skrifttypestørrelse: 10pt; Derefter skal vi fjerne standard polstring og margen i ul tag, der indpakker hele indgange og flyder li til venstre, så indgange vil blive vist vandret side om side.
.loginform ul polstring: 0; margen: 0; .loginform li display: inline; flyde: venstre;
Da vi flyder den li, forældrene vil kollapse, så vi skal rydde tingene omkring forældrene med clearfix hack.
etiket display: block; farve: # 999; .cf: før, .cf: efter indhold: ""; display: bord; .cf: efter clear: both; .cf * zoom: 1; : fokus disposition: 0;
I CSS3 har vi negationsvælgeren. Så vi vil bruge den til at målrette indgange bortset fra Indsend type, som i dette tilfælde vil målrette mod e-mail og adgangskode input;
.loginform input: ikke ([type = indsende]) polstring: 5px; margen-højre: 10px; grænse: 1px solid rgba (0, 0, 0, 0.3); grænse-radius: 3px; box-skygge: indsæt 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Endelig vil vi give en lille stil dekoration til Indsend knappen, som følger.
.loginform input [type = indsende] border: 1px solid rgba (0, 0, 0, 0.3); baggrund: # 64c8ef; / * Gamle browsere * / baggrund: -moz-lineær-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # 64c8ef), farve stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / baggrund: -webkit-lineær-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / baggrund: -o-lineær-gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / baggrund: -ms-lineær gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / baggrund: lineær gradient (til bund, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / farve: #fff; polstring: 5px 15px; margen-højre: 0; margin-top: 15px; grænse-radius: 3px; tekstskygge: 1px 1px 0px rgba (0, 0, 0, 0.3);
Det er det, nu kan du prøve login-formularen fra følgende links.
- Demo
- Download kilde
Endelige Ord
I denne vejledning undersøgte vi nogle få nye funktioner i HTML5-formularer:pladsholder, påkrævet og e-mail inputtyper for at oprette en simpel login side. Vi har også kommet gennem egenskabernes ulemper, så vi kan beslutte en bedre tilgang til anvendelse.
I det næste indlæg vil vi se på en ny HTML5 formularfunktion, så hold dig opdateret.
