Sådan styler du formularer med CSS: En begyndervejledning

Apps indsamler primært data via formularer. Tag en generisk tilmeldingsformular, for eksempel: der er flere felter, som brugerne kan indtaste information såsom deres navn, e-mail osv.

I gamle dage havde websteder bare almindelige, kedelige HTML-formularer med ingen stilarter. Det var før CSS ændrede alt. Nu kan vi skabe mere interessante, livlige former ved hjælp af de nyeste funktioner i CSS.

Tag ikke bare mit ord for det. Nedenfor er, hvordan en typisk HTML-form ser ud uden nogen CSS.

Her er den samme form jazzet op med lidt CSS .

I denne vejledning viser vi dig, hvordan du genskaber formen vist ovenfor samt et par andre fantastiske ændringer, du kan implementere for at skabe visuelt imponerende, brugervenlige formularer.

Vi viser, hvordan man formulariserer formularer med CSS i seks trin:

1. Indstilling box-sizing
2. CSS-vælgere til inputelementer
3. Grundlæggende stylingmetoder til tekstinputfelter
4. Styling af andre inputtyper
5. UI-pseudoklasser
6. Ikke-tilpasselige input

Før vi dykker ind, er det vigtigt at forstå, at der ikke er nogen specifik stil for former. Mulighederne er kun begrænset af din fantasi. Denne guide er beregnet til at hjælpe dig med at komme i gang med at skabe dine egne unikke designs med CSS.

Lad os komme i gang!

Indstilling af boksstørrelse

Jeg indstiller normalt * {box-sizing:border-box;} ikke kun til formularer, men også til websider. Når du indstiller det, indeholder bredden af alle elementerne polstring.

Angiv f.eks. Bredden og polstringen som følger.

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

.some-class uden box-sizing:border-box har en bredde på mere end 200px, som kan være et problem. Derfor bruger de fleste udviklere border-box til alle elementer.

Nedenfor er en bedre version af koden. Det understøtter også :before og :after pseudo-elementer.

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

Tip: * -vælgeren vælger alle elementerne i dokumentet.

CSS-vælgere til inputelementer

Den nemmeste måde at vælge inputelementer skal bruge CSS-attributvælgerne.

Disse vælgere vælger alle inputelementerne i dokumentet. Hvis du har brug for at angive en hvilken som helst vælger, skal du tilføje klasser til elementerne.

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

Derefter:

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

Grundlæggende stylingmetoder for tekstlinjefelt med en linje

Felter med en linje er de mest almindelige inputfelter, der bruges i formularer. Normalt er en tekstlinje med en linje et enkelt felt med en kant (dette afhænger af browseren).

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

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

Det vil se sådan ud:

Du kan bruge følgende CSS-egenskaber for at gøre dette indtastningsfelt mere attraktivt.

• Polstring (for at tilføje indre afstand)
• Margen (for at tilføje en margen omkring inputfeltet)
• Border
• Box shadow
• Border radius
• Bredde
• Font

Lad os zoome ind på hver af disse egenskaber.

Polstring

Tilføjelse af noget indre rum til inputfeltet kan hjælpe med at forbedre klarheden. Du kan opnå dette med egenskaben padding.

input { padding: 10px;}

Margen

Hvis der er andre elementer i nærheden af dit indtastningsfelt, kan du muligvis tilføje en margen omkring det for at forhindre klyngedannelse.

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

Border

I de fleste browsere har tekstinputfelter kanter, som du kan tilpasse.

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

Du kan også fjerne en kant helt.

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

Tip: Vær sikker for at tilføje en baggrundsfarve eller box-shadow når grænsen fjernes. Ellers kan brugerne ikke se input.

Nogle webdesignere foretrækker kun at vise den nederste kant, fordi det føles lidt som at skrive på en linje i en notesbog.

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

Box shadow

Du kan bruge egenskaben CSS box-shadow til at tilføje en skygge. Du kan opnå en række effekter ved at lege med egenskabens fem værdier.

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

Border radius

border-radius egenskaben kan have en massiv indflydelse på følelsen af dine former. Ved at kurve kanterne på boksene kan du ændre udseendet på dine indtastningsfelter markant.

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

Du kan opnå et nyt look og føle helt ved at bruge box-shadow og border-radius sammen.

Bredde

Brug egenskaben width til indstil bredden på input.

input { width:100%;}

Skrifttyper

De fleste browsere bruger en anden skrifttypefamilie og -størrelse til formelementer. Hvis det er nødvendigt, kan vi arve skrifttypen fra dokumentet.

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

Styling af andre inputtyper

Du kan style andre inputtyper som f.eks. tekstområde, radioknap, afkrydsningsfelt og mere. Lad os se nærmere på.

Tekstområder

Tekstområder svarer til tekstindgange, bortset fra at de tillader flere linieindgange. Du bruger typisk disse, når du vil indsamle data i længere form fra brugere, såsom kommentarer, meddelelser osv. Du kan bruge alle de grundlæggende CSS-egenskaber, vi tidligere har diskuteret, til at style tekstområder.

resize egenskab er også meget nyttig i tekstområder. I de fleste browsere kan tekstområder ændres som standard langs både x- og y-akserne (værdi: both). Du kan indstille den til both, horizontal eller vertical.

Tjek dette tekstområde, jeg stylede:

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

I dette eksempel brugte jeg resize:vertical for kun at tillade størrelsen på lodret størrelse. Denne praksis bruges i de fleste former, fordi den forhindrer irriterende vandrette rullepaneler.

Bemærk: Hvis du har brug for at oprette automatisk ændring af størrelse på tekstområder, skal du bruge en JavaScript-tilgang, der er uden for omfanget af denne artikel.

Afkrydsningsfelter og radioknapper

Standardafkrydsningsfeltet og radioknapperne er svære at style og kræver mere kompleks CSS (og HTML).

At style et afkrydsningsfelt, brug følgende HTML-kode.

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

Et par ting at bemærke:

• Da vi bruger <label> for at pakke <input>, hvis du klikker på et element inde i <``label``>, <input> bliver klikket
• Vi skjuler <input> fordi browsere ikke tillader os at ændre det meget
• <span> opretter et brugerdefineret afkrydsningsfelt
• Vi bruger input:checked pseudoklassevælgeren til at få den markerede status og stil det brugerdefinerede afkrydsningsfelt

Her er et brugerdefineret afkrydsningsfelt (se kommentarerne i CSS for flere forklaringer):

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

Her er en brugerdefineret radioknap:

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

Vi brugte det samme koncept (input:checked) til at oprette brugerdefinerede elementer i begge eksempler.

I browsere er afkrydsningsfelterne boksformede, mens radioknapperne er runde. Det er bedst at holde denne konvention i brugerdefinerede input for at undgå at forvirre brugeren.

Vælg menuer

Vælg menuer gør det muligt for brugere at vælge et emne fra flere valg.

Du kan style <select> -elementet for at se mere engagerende ud.

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

Du kan dog ikke formatere rullemenuen (eller <option> -elementer), fordi de er indrettet som standard afhængigt af operativsystemet. Den eneste måde at style disse elementer på er at bruge brugerdefinerede rullelister med JavaScript.

Knapper

Som de fleste elementer har knapper standardformater.

<button>Click Me</button>

Lad os krydre dette lidt.

UI-pseudoklasser

Nedenfor er nogle UI-pseudoklasser, der ofte bruges med formelementer.

Disse kan bruges til at vise meddelelser baseret på elementets attributter:

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

Disse kan bruges for at skabe effekter på hver tilstand:

• :hover
• :focus
• :active

Genererede meddelelser med: krævet

For at vise en meddelelse, der kræves input:

Hvis du fjerner -attribut med JavaScript, meddelelsen "Required" fjernes automatisk.

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

: svæver og: fokus

:hover vælger et element, når musemarkøren svæver over det. :focus vælger et element, når det er fokuseret.

Disse pseudoklasser bruges ofte til at skabe overgange og mindre visuelle ændringer. For eksempel kan du ændre bredden, baggrundsfarven, kantfarven, skyggestyrken osv.Brug af transition egenskaben med disse egenskaber gør disse ændringer meget glattere.

Her er nogle svæveeffekter på formelementer (prøv at svæve over elementerne).

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

Når brugere ser elementer, der subtilt ændres, når de svæver over dem, de får en fornemmelse af, at elementet kan handles. Dette er en vigtig overvejelse, når du designer formelementer.

Har du bemærket, at (i nogle browsere) vises en blå kontur, når du fokuserer på formelementer? Du kan bruge :focus pseudoklassen til at fjerne den og tilføje flere effekter, når elementet er fokuseret.

Følgende kode fjerner fokusoversigten for alle elementer.

*:focus {outline:none !important}

Sådan tilføjes en fokusoversigt:

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

Har du set søgeindgange, der skala når fokuseret? Prøv dette input.

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

Ikke-tilpasselige input

Stylingformelementer har historisk været en høj ordre. Der er nogle formelementer, som vi ikke har meget kontrol over styling. For eksempel:

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

Disse elementer leveres af browseren og styles baseret på operativsystemet. Den eneste måde at style disse elementer på er at bruge brugerdefinerede kontroller, der oprettes ved hjælp af stilfulde HTML-elementer såsom div, span osv.

For eksempel, når vi styler <input type="file">, kan vi skjule standardindgangen og bruge en brugerdefineret knap.

Brugerdefinerede kontroller til formelementer er udviklet til de fleste større JavaScript-biblioteker. Du kan finde dem på GitHub.

Konklusion

Du skal nu forstå, hvordan man style enkle formelementer, og hvordan man bruger brugerdefinerede kontroller, når browserinputfelter er svære at style. Som jeg sagde i begyndelsen af dette indlæg, er disse kun de grundlæggende byggesten i CSS form styling. Du bør bruge disse tip som et fundament for at lade din fantasi løbe vild.

Som et afsluttende tip skal du huske at gøre alle dine formularer lydhøre.

Leder du efter mere inspiration til formdesign? Tjek denne CodePen-samling.