Hvordan designe skjemaer i CSS

Å gjøre formen din estetisk flink er en betydelig oppgave hvis du vil forbedre brukeropplevelsen. En HTML -form består ofte av noen inngangsfelt, menyer og en knapp, derfor kan du bruke forskjellige CSS -egenskaper for å forbedre utseendet til skjemaet. Vi kommer til å presentere deg på noen måter som kan brukes til å forskjønne HTML -skjemaer.

La oss komme i gang.

Angi bredden på inngangsfeltene

Vi vet alle at inngangsfeltene har visse bredde som standard, men vi kan også endre bredden i henhold til vårt ønske. Følg koden nedenfor for å endre bredden på et inngangsfelt.

Html

Skriv inn fornavn

Her har vi opprettet et inngangsfelt.

CSS

input
Bredde: 80%;

Vi tildeler inngangsfeltet en bredde på 80%.

Merk: Bredden på et inngangsfelt kan spesifiseres i PX, Em, og prosentdel.

Produksjon

Bredden på inngangsfeltet har blitt endret i henhold til vårt ønske.

Legg til plass inne i inngangsfeltene

For å forbedre plassen inne i inngangsfeltet, bruk CSS -polstringseiendommen. For å legge til plass utenfor inngangsfeltet, når det er flere inngangsfelt, juster dessuten marginen til inngangsfeltet.

CSS

input [type = text]
Bredde: 80%;
polstring: 15px 20px;
Margin: 9px 0px;

I tillegg til å gi inngangsfeltet litt bredde har vi også gitt det litt polstring og marginer.

Produksjon

Det er lagt til plass i og utenfor inngangsfeltet.

Som du kan se i koden ovenfor, har vi brukt type = tekst for å style inngangsfeltet. Det er noen andre typer også på grunnlag av hvilke du kan style inndatafeltene som Type = Password (dette vil bare style passordfelt), eller type = nummer (dette vil bare style nummerfelt) osv.

Legger til grenser til å legge inn felt

Du kan justere størrelsen og fargen på inngangsfeltene ved å bruke CSS-grenseegenskapene, dessuten for å legge til mer stil som avrundede hjørner, bruk grensen-radius-eiendommen.

CSS

input [type = text]
Bredde: 80%;
polstring: 15px 20px;
Margin: 9px 0px;
Grense: 2px solid blå;
Border-Radius: 5px;

I koden ovenfor tildeler vi en grense på 2px til inngangsfeltene sammen med en blå farge. For å gjøre hjørnene runde har vi dessuten satt grensen-radius til 5px.

Produksjon

Grense- og grenseradius for åkrene er blitt justert etter ønske.

En annen morsom ting du kan gjøre er bare å legge til bunngrensen ved å bruke grensen-bottom-eiendommen som dette.

CSS

input [type = text]
Bredde: 80%;
polstring: 15px 20px;
Margin: 9px 0px;
Grense: Ingen;
Border-Bottom: 2px Solid Blue;

Her har vi satt grensen til inngangsfeltene til ingen, og tildelt en nederste kant på 2px.

Produksjon

En bunngrense er lagt til vellykket.

Du har imidlertid lagt merke til at en disposisjon har dukket opp når vi fokuserte på inngangsfeltet. Hva om vi vil fjerne det.

Hvordan fjerne omrisset av inngangsfeltet ved hjelp av fokus

For å endre eller stille stylingen når et inngangsfelt er fokusert, kan du bruke ":fokus”Valg og for å fjerne omrisset i fokus for et inngangsfelt, kan du bruke“skissere”Eiendom og setter verdien til“ingen”.

CSS

input [type = tekst]: fokus
Oversikt: Ingen;

Produksjon

Oversikt ble fjernet med hell.

Legg til farge til inngangsfelt

Ved å bruke fargeegenskapene som farge og bakgrunnsfarge kan du legge til henholdsvis farge til tekst og bakgrunn på inngangsfelt.

CSS

input [type = text]
Bredde: 80%;
polstring: 15px 20px;
Margin: 9px 0px;
Bakgrunnsfarge: Bisque;
Farge: blå;

I koden ovenfor gir vi en bisque -farge til bakgrunnen for inngangsfelt og blå farge til teksten.

Produksjon

Vi har gitt litt farge til bakgrunn og tekst.

Hvordan legge til styling på fokus på inngangsfelt

Du kan legge til litt kant eller bakgrunnsfarge eller hvilken.

CSS

input [type = tekst]: fokus
Bakgrunnsfarge: Skyblue;

Bakgrunnsfargen på inngangsfeltet vil endre seg til Skyblue når brukeren klikker på den.

Produksjon

Tilpasset styling på fokus legges til inngangsfeltet med hell.

Legge til et bilde eller et ikon i inngangsfeltet

For å gjøre inngangsfeltene dine mer interessante kan du legge til bilder eller ikoner til dem. Slik gjør du det.

CSS

input [type = text]
Bakgrunnsbilde: URL ('E-post.png ');
Bakgrunnsposisjon: 10px 6px;
Bakgrunnsstørrelse: 30px;
Bakgrunnsrepetitt: No-Repeteat;
polstring: 12px 20px 12px 40px;

I koden ovenfor la vi først et e -postikon og justerte størrelsen og posisjonen inne i inngangsfeltet ved hjelp av forskjellige CSS -egenskaper.

Produksjon

Et e -postikon ble lagt til inne i inngangsfeltet.

Legg til stil til menyer

Vi må ofte legge til menyer i HTML -former, derfor er det også nødvendig å style dem. Dette kan gjøres ved å bruke noen grunnleggende CSS -egenskaper. Her er et eksempel.

Html

Fotball
Siriss
Hockey

I koden ovenfor har vi opprettet en veldig grunnleggende meny.

CSS

plukke ut
Bredde: 80%;
polstring: 20px;
Grense: Ingen;
Border-Radius: 5px;
Bakgrunnsfarge: Lightgray;

alternativ
Font-stil: kursiv;
Font-størrelse: 20px;

Ved å bruke noen grunnleggende CSS-egenskaper som grense, grense-radius og bakgrunnsfarge har vi stylet menyen. Dessuten har vi også gitt litt stil til alternativene også.

Produksjon

Menyen er stylet.

Legge til stil til knapper

Knapper er en avgjørende del av en form, og disse kan utformes ved hjelp av CSS -egenskaper. Her er et eksempel.

Html

Her har vi ganske enkelt opprettet et innspillingsfelt.

CSS

input [type = send]
bakgrunnsfarge: rosa;
Fontvekt: fet;
Grense: Ingen;
polstring: 20px 25px;
Tekstdekorasjon: Ingen;
Margin: 6px 4px;

Ved å bruke forskjellige CSS-egenskaper som bakgrunnsfarge, fontvekt og polstring, har vi stylet knappen.

Produksjon

Knappen er stylet.

Konklusjon

Å gjøre din HTML -form attraktivt er absolutt nødvendig, og du kan gjøre det ved å gi stil til forskjellige elementer som er en del av skjemaet, for eksempel inngangsfelt, menyer eller knapper. Du kan bruke forskjellige CSS -egenskaper for å style disse elementene som; bredde, bakgrunnsfarge, farge, grense, grense-radius og mange flere. Dessuten kan du legge til ikoner eller bilder inne i inngangsfeltene. Alt dette og mye mer om stylingformer i CSS er fremhevet i dette innlegget.