Slik utformer du skjemaer med CSS: En nybegynnerveiledning

Apper samler primært data via skjemaer. Ta et generisk registreringsskjema, for eksempel: det er flere felt for brukere å legge inn informasjon som navn, e-post osv.

I gamle dager hadde nettsteder bare kjedelige HTML-skjemaer med ingen stiler. Det var før CSS endret alt. Nå kan vi lage mer interessante, livlige former ved hjelp av de nyeste funksjonene i CSS.

Ikke bare ta ordet mitt for det. Nedenfor ser du hvordan et typisk HTML-skjema ser ut uten CSS.

Her er den samme formen jazzet opp med litt CSS .

I denne opplæringen viser vi deg hvordan du gjenskaper skjemaet vist ovenfor, samt noen få andre fantastiske modifikasjoner du kan implementere for å lage visuelt imponerende, brukervennlige skjemaer.

Vi viser hvordan du utformer skjemaer med CSS i seks trinn:

1. Innstilling box-sizing
2. CSS-velgere for inngangselementer
3. Grunnleggende stylingsmetoder for tekstinntastingsfelt
4. Styling av andre inndatatyper
5. UI-pseudoklasser
6. Ikke-tilpassbare innganger

Før vi dykker inn, er det viktig å forstå at det ikke er noen spesifikk stil for skjemaer. Mulighetene er bare begrenset av fantasien. Denne veiledningen er ment å hjelpe deg i gang på veien mot å lage dine egne unike design med CSS.

La oss komme i gang!

Stille inn boksstørrelse

Jeg setter vanligvis * {box-sizing:border-box;} ikke bare for skjemaer, men også for websider. Når du setter den, vil bredden på alle elementene inneholde polstringen.

Angi for eksempel bredden og polstringen som følger.

.some-class { width:200px; padding:20px;}

.some-class uten box-sizing:border-box vil ha en bredde på mer enn 200px, som kan være et problem. Derfor bruker de fleste utviklere border-box for alle elementene.

Nedenfor er en bedre versjon av koden. Den støtter også :before og :after pseudo-elementer.

*, *:before, *:after { box-sizing: border-box;}

Tips: * velgeren velger alle elementene i dokumentet.

CSS-velgerne for inngangselementer

Den enkleste måten å velge inngangselementer er å bruke CSS-attributtvelgere.

Disse velgerne vil velge alle inngangselementene i dokumentet. Hvis du trenger å spesifisere noen velger, må du legge til klasser i elementene.

<input type="text" class="signup-text-input" />

Deretter:

.signup-text-input { // styles here}

Grunnleggende stylingsmetoder for tekstlinjefelt med en linje

Felter med en linje er de vanligste inndatafeltene som brukes i skjemaer. Vanligvis er tekstinput med en linje en enkel boks med en kant (dette avhenger av nettleseren).

Her er HTML-markeringen for et felt med en linje med en plassholder.

<input type="text" placeholder="Name" />

Det vil se slik ut:

Du kan bruke følgende CSS-egenskaper for å gjøre dette inndatafeltet mer attraktivt.

• Padding (for å legge til indre avstand)
• Margin (for å legge til en margin rundt inndatafeltet)
• Kant
• Bokskygge
• Kantradius
• Bredde
• Skrift

La oss zoome inn på hver av disse egenskapene.

Polstring

Å legge til litt indre plass i inndatafeltet kan bidra til å forbedre klarheten. Du kan oppnå dette med padding -egenskapen.

input { padding: 10px;}

Margin

Hvis det er andre elementer i nærheten av inndatafeltet ditt, kan det være lurt å legge til en margin rundt det for å forhindre klynging.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Border

I de fleste nettlesere har tekstinntastingsfelt grenser, som du kan tilpasse.

.border-customized-input { border: 2px solid #eee;}

Du kan også fjerne en kant helt.

.border-removed-input { border: 0;}

Tips: Vær sikker for å legge til en bakgrunnsfarge eller box-shadow når grensen fjernes. Ellers vil ikke brukerne se innspillene.

Noen webdesignere foretrekker å bare vise nedre kant fordi de føles litt som å skrive på en linje i en notatbok.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Box shadow

Du kan bruke CSS box-shadow -egenskapen for å legge til en skygge. Du kan oppnå en rekke effekter ved å leke med eiendommens fem verdier.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Grenseradius

Egenskapen border-radius kan ha en enorm innvirkning på følelsen av skjemaene dine. Ved å bøye kantene på boksene kan du endre utseendet på inntastingsfeltene dine betydelig.

.rounded-input { padding:10px; border-radius:10px;}

Du kan oppnå et nytt utseende helt ved å bruke box-shadow og border-radius sammen.

Bredde

Bruk egenskapen width til angi bredden på innganger.

input { width:100%;}

Skrifter

De fleste nettlesere bruker en annen skriftfamilie og størrelse for skjemaelementer. Om nødvendig kan vi arve skriften fra dokumentet.

input, textarea { font-family:inherit; font-size: inherit;}

Styling av andre inndatatyper

Du kan style andre inndatatyper som f.eks. tekstområde, alternativknapp, avkrysningsrute og mer. La oss se nærmere på.

Tekstområder

Tekstområder ligner på tekstinnganger, bortsett fra at de tillater flere linjer. Du vil vanligvis bruke disse når du vil samle inn data i lengre form fra brukere, for eksempel kommentarer, meldinger osv. Du kan bruke alle de grunnleggende CSS-egenskapene vi tidligere har diskutert for å utforme tekstområder.

resize -egenskapen er også veldig nyttig i tekstområder. I de fleste nettlesere kan tekstområdene endres størrelse både på x- og y-aksen (verdi: both). Du kan sette den til both, horizontal eller vertical.

Sjekk ut dette tekstområdet jeg stylet:

Se pennen og dyomzez av Supun Kavinda (@SupunKavinda)
på CodePen.

I dette eksemplet brukte jeg resize:vertical for å tillate bare vertikal endring av størrelse. Denne fremgangsmåten brukes i de fleste former fordi den forhindrer irriterende horisontale rullefelt.

Merk: Hvis du trenger å lage størrelsesendring av tekstområder, må du bruke en JavaScript-tilnærming, som er utenfor omfanget av denne artikkelen.

Avkrysningsruter og radioknapper

Standard avkrysningsrute og radioknapper er vanskelig å style og krever mer komplisert CSS (og HTML).

Å style en avkrysningsrute, bruk følgende HTML-kode.

<label>Name <input type="checkbox" /> <span></span></label>

Et par ting å merke seg:

• Siden vi bruker <label> for å pakke <input>, hvis du klikker på noe element i <``label``>, blir <input> vil bli klikket
• Vi skjuler <input> fordi nettlesere ikke tillater oss å endre det mye
• <span> oppretter en egendefinert avkrysningsrute
• Vi bruker input:checked pseudoklassevelgeren for å få den avmerkede statusen og stil den tilpassede avmerkingsboksen

Her er en tilpasset avkrysningsrute (se kommentarene i CSS for flere forklaringer):

Se pennen
yLNKQBo av Supun Kavinda ( @SupunKavinda)
på CodePen.

Her er en tilpasset alternativknapp:

Se pennen
eYNMQNM av Supun Kavinda (@SupunKavinda)
på CodePen.

Vi brukte det samme konseptet (input:checked) for å lage tilpassede elementer i begge eksemplene.

I nettlesere er avmerkingsboksene boksformede mens alternativknappene er runde. Det er best å holde denne konvensjonen i tilpassede innganger for å unngå å forvirre brukeren.

Velg menyer

Velg menyer gjør det mulig for brukere å velge et element fra flere valg.

Du kan style <select> -elementet for å se mer engasjerende ut.

select { width: 100%; padding:10px; border-radius:10px;}

Du kan imidlertid ikke style rullegardinmenyen (eller <option> -elementene) fordi de er utformet som standard avhengig av operativsystemet. Den eneste måten å style disse elementene på er å bruke egendefinerte rullegardiner med JavaScript.

Knapper

Som de fleste elementene har knapper standardstiler.

<button>Click Me</button>

La oss krydre dette litt.

UI-pseudoklasser

Nedenfor er noen UI-pseudoklasser som ofte brukes med formelementer.

Disse kan brukes til å vise varsler basert på elementets attributter:

• :required
• :valid og :invalid
• :checked (vi har allerede brukt dette)

Disse kan brukes for å skape effekter på hver tilstand:

• :hover
• :focus
• :active

Genererte meldinger med: obligatorisk

For å vise en melding om at input er nødvendig:

Hvis du fjerner -attributt med JavaScript, "Required" -meldingen fjernes automatisk.

Vi kan gjøre det samme med :valid og :invalid pseudoklasser.

: svever og: fokus

:hover velger et element når musepekeren svever over det. :focus velger et element når det er fokusert.

Disse pseudoklassene brukes ofte til å skape overganger og små visuelle endringer. For eksempel kan du endre bredde, bakgrunnsfarge, kantfarge, skygge styrke osv.Bruk av transition -egenskapen med disse egenskapene gjør disse endringene mye jevnere.

Her er noen svevende effekter på skjemaelementer (prøv å sveve over elementene).

Se pennen
yLNKZqg av Supun Kavinda (@SupunKavinda)
på CodePen.

Når brukere ser elementene endres subtilt når de svever over dem, de får følelsen av at elementet er handlingsbart. Dette er en viktig faktor når du designer skjemaelementer.

Har du lagt merke til at (i noen nettlesere) vises en blå disposisjon når du fokuserer på skjemaelementer? Du kan bruke :focus pseudoklassen for å fjerne den og legge til flere effekter når elementet er fokusert.

Følgende kode fjerner fokusoversikten for alle elementene.

*:focus {outline:none !important}

Slik legger du til en fokusoversikt:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Har du sett søkeinnganger som skala når fokusert? Prøv denne inngangen.

Se pennen
KKpoJJa av Supun Kavinda (@SupunKavinda)
på CodePen.

Ikke-tilpassbare innganger

Stylingformelementer har historisk vært en høy orden. Det er noen formelementer som vi ikke har mye kontroll over styling. For eksempel:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Disse elementene leveres av nettleseren og utformes basert på operativsystemet. Den eneste måten å style disse elementene på er å bruke egendefinerte kontroller, som er laget med stilige HTML-elementer som div, span osv.

For eksempel når vi styler <input type="file">, kan vi skjule standardinngangen og bruke en egendefinert knapp.

Egendefinerte kontroller for skjemaelementer er utviklet for de fleste store JavaScript-biblioteker. Du finner dem på GitHub.

Konklusjon

Du bør nå forstå hvordan du kan style enkle skjemaelementer og hvordan du bruker tilpassede kontroller når nettleserinntastingsfelt er vanskelig å style. Som jeg sa i begynnelsen av dette innlegget, er dette bare de grunnleggende byggesteinene i CSS form styling. Du bør bruke disse tipsene som et grunnlag for å la fantasien løpe løpsk.

Som et avsluttende tips, husk å gjøre alle skjemaene dine responsive.

Leter du etter mer inspirasjon til formdesign? Ta en titt på denne CodePen-samlingen.