HTML5 opplæringsloggside med HTML5 skjemaer
HTML5 bringer mange funksjoner og forbedringer til webskjemaer, Det er nye attributter og inngangstyper som ble introdusert hovedsakelig for å gjøre livet til webutviklere enklere og gi bedre opplevelse til nettbrukere.
Så, i dette innlegget skal vi lage en innloggingsside ved hjelp av HTML5-skjemaer for å se hvordan de nye ekstra funksjonene fungerer.
- Demo
- Last ned kilde
HTML5-inngang
La oss se på følgende oppføring.
Hvis du har jobbet med HTML-skjemaer før, vil dette se ut som kjent. Men du vil også merke forskjeller der. Inngangene har plassholder og nødvendig attributter, som er nye attributter i HTML5.
Plassholder
De plassholder Attributt tillater oss å gi innledende tekst i inngangen som vil forsvinne når den er i a fokus angi eller fylles inn. Tidligere brukte vi det med JavaScript, men nå blir det mye lettere med dette nye attributtet.
Nødvendig Egenskap
De nødvendig attributt vil sette feltet til å være obligatorisk og dermed ikke stå tomt før skjemaet er sendt inn, så når brukeren ikke har fylt ut feltet, vil følgende feil vises.
Ny selector er også introdusert i CSS3, : påbudt å målrette felt med nødvendig Egenskap. Her er et eksempel;
Inngang: Kreves border: 1px solid rød;
E-post Inndatortype
Den første inngangstypen er e-post som faktisk er en ny felttype lagt til i HTML5 også. De e-post type vil gi grunnleggende e-postadresse validering i feltet. Når brukeren ikke fyller feltet med en e-postadresse, viser nettleseren følgende varsel;
Bruk av e-posttyper kan også gi bedre opplevelse for mobilbrukere, som iPhone og Android-brukere, der den vil vise e-postoptimalisert tastatur på skjermen med en dedikert “@” knappen for å hjelpe deg med å skrive e-postadressen raskere.
Downsides
De nye formfunksjonene som tilbys i HTML5 er kraftige og enkle å implementere, men de er fortsatt mangel på enkelte områder. For eksempel;
De plassholder Egenskap, støttes kun i moderne nettlesere - Firefox 3.7+, Safari 4+, Chrome 4+ og Opera 11+. Så, hvis du trenger det til å fungere i ikke-støttede nettlesere, kan du bruke denne polypyfills sammen med Modernizr.
Det samme gjelder med nødvendig Egenskap. Feilmeldingen kan ikke tilpasses, feilen forblir “Vennligst fyll ut dette feltet” heller enn “Vennligst fyll ut ditt fornavn”, Denne attributtstøtten er også begrenset til de nyeste nettleserne.
Så, ved hjelp av JavaScript for å validere det obligatoriske feltet, er (så langt) et bedre alternativ.
funksjon validateForm () var x = document.forms ["login"] ["brukernavn"]. verdi; hvis (x == null || x == "") alert ("Vennligst fyll ut brukernavnet"); returner falsk; Styling skjemaene
OK, la oss nå dekorere vårt innloggingsskjema med CSS. Først vil vi gi bakgrunnen et tremønster i html stikkord.
html bakgrunn: url ('wood_pattern.png'); skriftstørrelse: 10pt; Da må vi fjerne standardpolstringen og marginen i ul tag som pakker hele innganger og flyter på li til venstre, så inngangene vil bli vist horisontalt, side om side.
.loginform ul padding: 0; margin: 0; .loginform li display: inline; flyte: venstre;
Siden vi flyter på li, foreldrene vil kollapse, så vi må fjerne ting rundt foreldrene med clearfix hack.
etikett display: block; farge: # 999; .cf: før, .cf: etter innhold: ""; skjerm: bord; .cf: etter clear: both; .cf * zoom: 1; : fokus disposisjon: 0;
I CSS3 har vi negasjonsvelgeren. Så, vi vil bruke den til å målrette innganger annet enn sende inn type, som i dette tilfellet vil målrette e-post og passordinngang;
.loginform input: ikke ([type = submit]) polstring: 5px; margin-høyre: 10px; grense: 1px solid rgba (0, 0, 0, 0.3); border-radius: 3px; boksskygge: innspill 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Til slutt vil vi gi en liten stil dekorasjon for Sende inn knappen, som følger.
.loginform input [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); bakgrunn: # 64c8ef; / * Gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 64c8ef), fargestopp (100%, # 00a2e2)); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær gradient (topp, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / bakgrunn: lineær gradient (til bunn, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / farge: #fff; polstring: 5px 15px; margin-høyre: 0; margin-topp: 15px; border-radius: 3px; tekstskygge: 1px 1px 0px rgba (0, 0, 0, 0.3);
Det er det, nå kan du prøve påloggingsskjemaet fra følgende linker.
- Demo
- Last ned kilde
Endelige ord
I denne opplæringen så vi på noen få nye funksjoner i HTML5-skjemaer:plassholder, nødvendig og e-post Inndata typer for å lage en enkel påloggingsside. Vi har også kommet gjennom nedtrekkene av attributter, slik at vi kan bestemme en bedre tilnærming som skal brukes.
I neste innlegg vil vi se på nye HTML5-formularfunksjoner, så hold deg oppdatert.
