Ta med skjemaene dine med CSS3 og HTML5-validering

La oss se på hvordan du lager et funksjonsskjema som bekrefter brukerens data, klientsiden. Med det gjort, vil vi dekke prettying det opp med CSS, inkludert noen CSS3!

Før vi begynner, kan du vurdere å bruke en av våre HTML5-maler eller CSS-temaer for ditt neste prosjekt, det vil si hvis du trenger en rask og profesjonell løsning. Eller du kan få hjelp fra en ekspert på Envato Studio.

Ellers er det på tide å starte denne trinnvise opplæringen.

Trinn 1: Konseptualiseringsfunksjonalitet

Først vil vi konseptualisere hva vårt skjema skal se ut og hvordan det skal fungere. For dette eksempelet, la oss lage et enkelt kontaktskjema som ber om følgende informasjon fra brukeren:

• Navn
• e-post
• nettsted
• Budskap

Vi vil sørge for at brukeren skriver inn informasjonen riktig. For å oppnå dette, vil vi bruke HTML5s nye valideringsteknikker for klientsiden. Hva med brukere som ikke har HTML5-muligheter? Du kan bare bruke server-side validering, men det vil være utenfor rammen av denne artikkelen.

Trinn 2: Konseptualiseringsskjema

La oss få en ide om hva vi vil at vårt skjema skal se ut ved å lage en ujevn mockup.

Som du kan se, utgjør følgende elementer vårt skjema:

• Formittel Påkrevd feltvarsling
• Skjemaetiketter
• Skjemainnganger Plassholdertekst
• Form felt tips
• Send inn knapp

Nå som vi har angitt hvilke elementer som utgjør vårt skjema, kan vi opprette HTML-oppslaget.

Trinn 3: HTML Starterkode

La oss lage vår grunnleggende HTML-oppskrift fra formkonseptet vi opprettet.

Opptil dette punktet vil vår HTML-fil fremdeles vises tom i nettleseren. Dette er bare startkoden for en HTML5-side.

Trinn 4: HTML-skjema

La oss lage HTML-skjemaet (vi vil la handlingsmetoden være tom for nå, siden server-side validering ikke vil bli dekket i denne opplæringen):

Trinn 5: HTML-formelementer

For å holde vårt skjemainnhold organisert og strukturert, vil vi pakke inn våre skjemaelementer (merkelapp, inngang, etc) i en liste. Så la oss begynne med å lage skjemahodet og vårt første innspillingselement:

 
 
Kontakt oss
 * Angir felt som må fylles ut 
 
 Navn:  
 

Form Hint

Som vi ser i vår mockup, skal vi formatere hint for feltene "e-post" og "nettsted". Så vi legger til våre tips under inngang felt der det er nødvendig, og gi dem en klasse slik at vi kan style dem senere.

 e-post:  Riktig format "[email protected]" 

Det gjenværende Input Elements

La oss gå videre og lage våre gjenværende formelementer, husk å pakke hver seksjon i en liste element.

 nettside:  Riktig format "http://someaddress.com" 
 
 Budskap:  </li> <li> <button type="submit">Send inn skjema</button> </li></pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_4.png">  <h2>Trinn 6: Legge til plassholderegenskapen </h2> <p>En av de første forbedringene HTML5 bringer til webskjemaer (en du er sannsynligvis allerede kjent med) er muligheten til å sette plassholderteksten. Plassholdertekst vises når inngangsfeltet er enten tomt eller ikke i fokus.</p> <p>La oss legge til stedholderattributtet til vår <code>inngang</code> elementer. Dette vil hjelpe brukeren å forstå hva de skal skrive inn i hvert felt.</p> <pre><input type="text" name="name" placeholder="John Doe" /> <input type="text" name="email" placeholder="john_doe@example.com" /> <input type="text" name="website" placeholder="http://johndoe.com/" required/></pre> <h3>Rask Tips: Stil din <code>plassholder</code> Tekst</h3> <p>Her er et raskt tips, hvis du vil style din plassholdertekst, er det noen nettleserprefikser for å hjelpe deg:</p> <pre>: -moz-plassholder farge: blå;  :: - webkit-input-placeholder farge: blå; </pre> <p>Støtte for stedholderattributtet er ganske godt etablert i moderne nettlesere (unntatt IE9, beklager). Hvis du virkelig trenger å få den støttet på alle nettlesere, er det noen javascript-løsninger du kan se på.</p> <h2>Trinn 7: Grunnleggende CSS</h2> <p>La oss legge til noen grunnleggende CSS for å gi vårt skjema litt struktur. Jeg går deg gjennom reglene:</p> <h3>Fjerne <code>:fokus</code> Stil</h3> <p>Webkit legger automatisk til noen styling for å legge inn elementer når de er i fokus. Siden vi legger til våre egne stiler, vil vi overstyre disse standardene:</p> <pre>*: fokus disposisjon: none;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_5.png">  <h3>Typografiske stiler</h3> <p>La oss legge til noen typografiske stiler til våre formelementer:</p> <pre>kroppen font: 14px / 21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; .contact_form h2, .contact_form label font-familie: Georgia, Times, Times New Roman serif; .form_hint, .required_notification font-size: 11px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_6.png">  <h3>Liste stiler</h3> <p>La oss stillegge våre listelementer for å gi vårt skjema litt struktur:</p> <pre>.contact_form ul width: 750px; list-style-type: none; list-style-posisjon: utenfor; margin: 0 px; padding: 0 px;  .contact_form li polstring: 12px; border-bottom: 1px solid #eee; stilling: i forhold; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_7.png">  <p>La oss også legge til en liten kantlinje til de øverste og nederste delene av skjemaet. Vi kan oppnå dette ved å bruke <code>:første barn</code> og <code>:siste barn</code> velgere. Disse, som navnene antyder, velger de første og siste elementene i <code><ul></code> liste.</p> <p>Dette legger til noen nyttige visuelle seksjoner i vårt skjema. Husk at disse CSS-valgene ikke støttes i eldre nettlesere. Siden dette ikke er avgjørende for nøkkelfunksjonalitet, belønner vi våre de som bruker nåværende nettlesere.</p> <pre>.contact_form li: første barn, .contact_form li: siste barn border-bottom: 1px solid # 777; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_8.png">  <h3>Skjemahode</h3> <p>La oss style header-delen av skjemaet vårt. Dette inkluderer overskriften tag og varselet som informerer brukerne om at stjernen (*) angir nødvendige felt.</p> <pre>.contact_form h2 margin: 0; skjerm: inline;  .quoted_notification color: # d45252; margin: 5px 0 0 0; display: inline; float: right; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_9.png">  <h3>Form Input Elements</h3> <p>La oss utforme alle våre kjerneformede elementer, de som brukes til å samle brukerinformasjon.</p> <pre>.contact_form label width: 150px; margin-topp: 3px; display: inline-blokk; float: venstre; padding: 3px;  .contact_form input høyde: 20px; bredde: 220px; polstring: 5px 8px;  .contact_form textarea polstring: 8px; bredde: 300px; .contact_form button margin-left: 156px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_10.png">  <p>La oss nå legge til noen ekstra visuelle CSS-stiler. Noen av disse er CSS3-stiler som belønner brukere som bruker moderne nettlesere.</p> <pre>.contact_form input, .contact_form textarea border: 1px solid #aaa; boks-skygge: 0px 0px 3px #ccc, 0 10px 15px #eee innskudd; border-radius: 2 piksler;  .contact_form input: fokus, .contact_form textarea: fokus bakgrunn: #fff; grense: 1px solid # 555; bokseskygge: 0 0 3px #aaa;  / * Button Style * / button.submit bakgrunnsfarge: # 68b12f; bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 68b12f) til (# 50911e)); bakgrunn: -webkit-lineær-gradient (topp, # 68b12f, # 50911e); bakgrunn: -moz-lineær-gradient (topp, # 68b12f, # 50911e); bakgrunn: -ms-lineær-gradient (topp, # 68b12f, # 50911e); Bakgrunn: -O-lineær-gradient (topp, # 68b12f, # 50911e); bakgrunn: lineær gradient (topp, # 68b12f, # 50911e); grense: 1px solid # 509111; grensebunn: 1px solid # 5b992b; border-radius: 3px; -webkit-grense-radius: 3px; -moz-grense-radius: 3px; -ms-grense-radius: 3px; -grense-radius: 3px; boks-skygge: innsett 0 1px 0 0 # 9fd574; -webkit-boks-skygge: 0 1px 0 0 # 9fd574 innsett; -moz-box-shadow: 0 1px 0 0 # 9fd574 innsett; -mask-skygge: 0 1px 0 0 # 9fd574 innsett; -o-boks-skygge: 0 1px 0 0 # 9fd574 innsett; farge: hvit; font-weight: bold; polstring: 6px 20px; tekst-align: center; tekstskygge: 0 -1px 0 # 396715;  button.submit: hover opacity: .85; markør: pointer;  button.submit: active border: 1px solid # 20911e; boks-skygge: 0 0 10px 5px # 356b0b innskudd; -webkit-boks-skygge: 0 0 10px 5px # 356b0b innsett; -moz-box-skygge: 0 0 10px 5px # 356b0b innskudd; -mask-skygge: 0 0 10px 5px # 356b0b innsett; -o-boks-skygge: 0 0 10px 5px # 356b0b innskudd; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_11.png">  <h2>Trinn 8: Legg til litt interaktivitet med CSS3</h2> <p>La oss legge til litt interaktivitet. Vi lager feltet som er valgt for å utvide, ved å legge til noe polstring.</p> <pre>.contact_form input: fokus, .contact_form textarea: fokus / * legg til dette til allerede eksisterende stil * / polstring-høyre: 70px; </pre> <p>Nå for nettlesere som støtter det, la oss gjøre utvidelsen av feltet til en jevn overgang ved hjelp av CSS3.</p> <pre>.contact_form input, .contact_form textarea / * legg til dette til allerede eksisterende stil * / -moz-overgang: padding .25s; -webkit-overgang: polstring .25s; -o-overgang: polstring .25s; overgang: polstring .25s; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_12.png">  <h2>Trinn 9: Den <code>nødvendig</code> Egenskap i HTML5</h2> <p>Nå er det tid for det vi alle har ventet på: HTML5s formhåndteringsverktøy.</p> <p>Legge til <code>nødvendig</code> Attributt til ethvert input / textarea-element vil fortelle nettleseren at en verdi er nødvendig før skjemaet kan sendes. Dermed kan et skjema ikke innleveres dersom a <code>nødvendig</code> feltet er ikke fylt ut.</p> <p>Så, la oss gå videre og legge til <code>nødvendig</code> attributt til alle våre formelementer (fordi vi vil at alle skal fylles ut).</p> <pre><input type="text" name="name" required /> <input type="text" name="email" required /> <input type="text" name="website" required /> <textarea name="message" cols="40" rows="6" required >

Trinn 10: Styling nødvendig Enger

Du vil sikkert merke at det visuelt ikke skjedde noe ved å legge til nødvendig Egenskap. Vi skal stille inn obligatoriske felt ved hjelp av CSS. For dette eksempelet skal vi legge til en rød stjerne som et bakgrunnsbilde i hvert obligatorisk felt. For å oppnå dette vil vi først legge til noe polstring på høyre side av innspillet der bakgrunnsbildet vil være (dette vil forhindre tekst overlapping hvis feltoppføringen er en lang streng):

.contact_form input, .contact_form textarea polstring-høyre: 30px; 

Nå skal vi bruke CSS pseudovelgeren : påbudt å målrette mot alle formelementene med en nødvendig attributt. Jeg laget et enkelt 16x16 piksler rødt stjerneikon i photoshop som vil fungere som den visuelle indikatoren for et obligatorisk felt.

input: required, textarea: required background: #fff url (bilder / red_asterisk.png) no-repeat 98% center; 

Hva skjer ved innsending?

For øyeblikket vil forskjellige nettlesere gjøre forskjellige ting når et skjema som bruker HTML5-elementer, sendes inn. Når skjemaet er sendt, vil de fleste nettlesere forhindre at skjemaet sendes inn og vil vise et "hint" til brukeren, markere det første feltet som kreves og har ingen verdi. Visuell styling og støtte for disse "boblefeltene" er ganske bred. Forhåpentligvis vil disse oppføringene bli standardisert i fremtiden.

Du kan se nåværende nettleserstøtte for nødvendig attributt på quirksmode.

Raskt tips:

Du kan faktisk utforme boblingsmeldingen noe i webkit ved hjelp av følgende:

:: - webkit-validering-boble-melding padding: 1em; 

Trinn 11: Forstå ny HTML5 type Attributter og Validering av klienter

HTML5-validering fungerer i henhold til type attributt som er angitt i skjemafeltene. I årevis har HTML bare støttet en håndfull typeattributter, for eksempel type = "text" men med HTML5 er det over et dusin nye inngangstyper, inkludert e-post og url som vi skal bruke i vårt skjema.

Ved å kombinere vår innsats type attributter med det nye nødvendig attributt, kan nettleseren nå validere skjemaets dataklient-side. Hvis brukerens nettleser ikke støtter det nye type attributter, for eksempel type = "email", det vil helt enkelt standard til type = "text". Dette er faktisk ganske fantastisk. I hovedsak har du bakoverkompatibilitet i alle nettlesere på jorden, hoi!

Så hva om nettleseren faktisk støtter den nye type egenskaper? For desktop-nettlesere er det ingen visuell forskjell (med mindre det er angitt av egendefinerte CSS-regler). EN type = "text" feltet ser det samme som a type = "email" felt. Men for mobile nettlesere er det en forskjell når det gjelder brukergrensesnittet.

Et eksempel: iPhone

Apples iPhone oppdager formtypene og endrer tastaturet på skjermen ved å gi kontekstbevisste tegn. For eksempel krever alle e-postadresser følgende symboler: "@" og "." Så iPhone gir disse tegnene når inngangstypen er spesifisert til e-post.

Trinn 12: Endre type Egenskaper

Vi har allerede våre skjemafelter satt til standard type = "text". Men nå vil vi endre typeattributtet på våre e-post- og nettstedfelter til deres tilsvarende HTML5-type.

Trinn 13: HTML5-validering

Som nevnt tidligere er HTML5-validering basert på din type attributter og det er som standard. Det kreves ingen spesifikk oppføring for å aktivere form validering. Hvis du ønsker å slå den av, kan du bruke novalidate attributt slik:

 <-- do not validate this form -->  

Navnfelt

La oss se på vårt første felt som ber brukeren for hans / hennes navn. Som beskrevet eariler, har vi lagt til type = "text" attributt og nødvendig Egenskap. Dette informerer nettleseren om at dette feltet er obligatorisk, og det bør validere feltet som bare tekst. Så lenge brukeren oppgir minst ett tegn i det feltet, vil den validere.

Nå skal vi lage vår egen CSS til stilfeltinnganger som anses som gyldige og ugyldige av nettleseren. Hvis du husker, brukte vi : påbudt i vårt CSS for å stile alle inputelementer med en nødvendig attributt. Nå kan vi stile våre obligatoriske felt som er enten gyldige eller ugyldige ved å legge til :gyldig eller :ugyldig til våre CSS-regler.

Først, la stilfelter som er ugyldige. For dette eksempelet vil vi bare formatere skjemaet som ugyldig når det er i fokus. Vi legger til en rød ramme, rød skygge og rødt ikon opprettet i photoshop for å angi det ugyldige feltet.

.contact_form input: fokus: ugyldig, .contact_form textarea: fokus: ugyldig / * når et felt anses å være ugyldig av nettleseren * / bakgrunn: #fff url (images / invalid.png) no repeat 98% center; bokseskygge: 0 0 5px # d45252; border-farge: # b03535

La oss nå lage regler som angir at feltet er gyldig. Vi legger til et grønt grensesnitt, et grønt skygge og et grønt sjekkmerkeikon i Photoshop. Dette vil bli brukt på alle gyldige felt om de er i fokus eller ikke.

.contact_form input: required: valid, .contact_form textarea: obligatorisk: gyldig / * når et felt anses for gyldig av nettleseren * / bakgrunn: #fff url (images / valid.png) no-repeat 98% center; bokseskygge: 0 0 5px # 5cd053; border-farge: # 28921f; 

Nå når du fokuserer på et skjemafelt, vises den røde ugyldige stylingen. Så snart et enkelt tegn er oppgitt i feltet, er det validert og grønne CSS-stiler vises for å indikere det faktum.

E-post og URL-felt

Våre CSS-stiler og valideringsregler er allerede brukt på e-postfeltet fordi vi setter inn type og nødvendig attributter tidligere.

Trinn 14: Innføring av HTML5 mønster Egenskap

Bruker type = "email" Tilordne som et eksempel, ser det ut til at de fleste nettlesere validerer feltet som * @ * (et hvilket som helst tegn + "@" -symbolet + et hvilket som helst tegn). Dette er åpenbart ikke veldig begrensende, men det forhindrer brukerne i å skrive inn mellomrom eller verdier som er helt feil.

I eksemplet på type = "URL" attributt, ser det ut som om minimumskravene for de fleste nettlesere er et tegn etterfulgt av et kolon. Så, hvis du skrev inn «h:», ville feltet validere. Dette er ikke ekstremt nyttig, men det forhindrer brukerne i å skrive inn irrelevant informasjon, for eksempel e-postadressen eller hjemmeadressen. Nå kan du håndtere å være mer spesifikk med dine verdier i server-side validering; Vi skal imidlertid snakke om hvordan du gjør det i HTML5.

De mønster Egenskap

Mønsterattributtet aksepterer et javascript-regulært uttrykk. Dette uttrykket brukes, i stedet for nettleserens standard, til å validere feltets verdi. Så vår HTML ser nå ut som dette:

Nå vil vårt felt bare akseptere verdier som starter med "http: //" eller "https: //" og ett ekstra tegn. Disse vanlige uttrykksmønstrene kan være forvirrende først, men når du tar deg tid til å lære dem, vil skjemaene dine være åpne for en helt ny verden.

Trinn 15: Form Field Tips (CSS)

La oss nå utforme våre skjemahint som forteller brukeren hvilket format de skal bruke når de skriver inn informasjonen.

.form_hint bakgrunn: # d45252; border-radius: 3px 3px 3px 3px; farge: hvit; margin-left: 8 piksler; polstring: 1px 6px; z-indeks: 999; / * hint forbli over alle andre elementer * / posisjon: absolutt; / * Tillater riktig formatering hvis hint er to linjer * / display: none; 

Vi setter display: none fordi vi bare skal vise hintene når brukeren fokuserer på inngangsfeltet. Vi stiller også våre verktøytips for å standardisere vår røde ugyldige farge, fordi de alltid anses ugyldige til riktig informasjon er angitt i.

Bruker ::før Selector

Nå vil vi legge til en liten trekant i våre hint-bokser som hjelper direkte og veileder øyet. Dette kan gjøres ved hjelp av bilder, men i vårt tilfelle skal vi gjøre det ved hjelp av ren CSS.

Fordi det er rent presentasjonselement som ikke er avgjørende for sidens funksjonalitet, skal vi legge til en liten trekant som peker igjen ved å bruke ::før pseudovelger. Vi kan gjøre dette ved å bruke en av de unicode geometriske figurene.

Normalt vil vi bruke HTML Unicode-formatet til å vise disse i vår HTML (som vist på bildet ovenfor). Men fordi vi skal bruke ::før CSS velger, må vi bruke trekantens tilsvarende rømte unicode når du bruker innhold:"" regel. Da bruker vi bare posisjonering for å få det der vi vil ha det.

.form_hint :: før innhold: "\ 25C0"; / * venstre punktstriangel i escaped unicode * / farge: # d45252; posisjon: absolutt; top: 1px; venstre: -6px; 

Bruker + Tilstøtende selector

Til slutt skal vi bruke CSS tilstøtende selector for å vise og gjemme våre skjemafelt tips. Den tilstøtende velgeren (x + y) velger elementet som umiddelbart føres av det tidligere elementet. Siden våre felttips kommer rett etter våre inntastingsfelt i HTML, kan vi bruke denne velgeren til å vise / skjule verktøytipsene.

.contact_form input: fokus + .form_hint display: inline; .contact_form input: required: valid + .form_hint bakgrunn: # 28921f; / * endre skjema hintfarge når gyldig * / .contact_form input: required: valid + .form_hint :: før farge: # 28921f; / * endre skjemahint pilfarge når gyldig * /

Som du kan se fra CSS, setter vi også skjemahintene for å bytte farger sammen med grensesnittet til inngangen når et felt er gyldig eller ugyldig.

Trinn 16: Sett deg tilbake og beundre ditt vakre HTML5-skjema

Gå videre og ta en titt på ditt endelige produkt!

Konklusjon

Som du kan se, er de nye HTML5-skjemafunksjonene ganske ryddige! Alt er bakoverkompatibelt, slik at innlemming av disse nye funksjonene i nettstedet ditt ikke vil ødelegge noe.

HTML5-validering kommer nærmere ved å erstatte validering av klientsiden ved å hjelpe brukerne til å fylle ut deres elektroniske skjemaer på riktig måte. Imidlertid erstatter HTML5-validering fortsatt ikke server-side validering. For tiden er det best å bruke begge metodene når du håndterer brukeropplysninger. Takk for at du leste!

Ta en titt gjennom våre HTML5-maler eller CSS-temaer for ditt neste prosjekt - hvis du trenger en profesjonell, ferdig løsning.