I nettutvikling brukes et skjema for å lagre informasjon i en database på en organisert måte og for å konvertere den direkte til databaseobjekter, for eksempel tabeller, lister og andre. Den autoriserer også brukeren for å kontrollere brukergrensesnittet ved å samle inn data. I tillegg kan brukeren også angi skjemajustering i henhold til deres preferanse.

I denne oppskrivningen vil vi forklare:

• Metode 1: Hvordan midtre justere et skjema i HTML?
• Metode 2: Hvordan midtre justere et skjema i CSS?

Metode 1: Hvordan midtre justere et skjema i HTML?

Du kan bruke "”Element for å designe et skjema på HTML -siden. Videre kan brukere angi justering av skjemaet i HTML ved hjelp av inline styling.

For å senter justere et skjema i HTML, prøv ut den oppgitte prosedyren.

Trinn 1: Sett inn en overskrift

Først av alt, legg til en overskrift ved hjelp av en HTML -overskriftskode. I dette tilfellet "

”Tag brukes.

Trinn 2: Lag et skjema

Neste, bruk "”Element for å lage et skjema på HTML -siden. For å gjøre det, følg de gitte instruksjonene:

• “stil”Attributt brukes til å sette et elements inline styling. Stilattributtet vil overstyre enhver stil ved å bruke CSS -egenskapene direkte i HTML. I dette scenariet settes verdien av "stilen" -attributtet som "Justify-Content: Center”Og“Display: Flex”.
• “Justify-Content: Center”Inline CSS brukes for å plassere den fleksible beholderens innhold når de ikke fyller hele hovedaksen.
• Ved bruk av "Display: Flex”I rotelementer vil barneelementer automatisk samkjøre med automatisk bredde og høyde.
• Sett inn en “”Element og spesifiser typen inngang som“tekst”Og navnet som“Søk”.
• “type”Attributt brukes til å kontrollere datatypen til inngangselementet.
• “verdi”Attributt bestemmer verdien av en“”Element. Det brukes også annerledes for forskjellige inngangstyper:

Fyll ut skjemaet

Skriv inn navnet ditt

Det kan sees at skjemaet er opprettet og justert sentrum på en HTML -side:

Metode 2: Hvordan midtre justere et skjema i CSS?

For å senter justere et skjema i CSS, sjekk ut de uttalte instruksjonene.

Trinn 1: Lag en div container

Opprinnelig lag en div container ved hjelp av “div”Element og legg til en klasseattributt med et bestemt navn.

Trinn 2: Lag et skjema

Deretter lager du et skjema ved hjelp av "”Merk og sett inn følgende element mellom formelementet:

• “”Element gir etiketten for et element i et brukergrensesnitt.
• “”Brukes for å lage interaktive kontroller for nettbaserte skjemaer for å motta data fra brukeren. For å gjøre det, legg til “type”,“Navn”, Og“stedholder”.
• “stedholder”Attributt brukes til å legge til verdien i formfeltet for å vise:

Skriv inn navnet ditt:




Skriv inn din email:

Produksjon

Trinn 5: Stilskjema

Få tilgang til DIV -beholderen ved hjelp av en attributtvelger og spesifiser containernavnet med den. Bruk deretter CSS -egenskapene som er nevnt i kodeblokken nedenfor:

.senter-form
Justify-Content: Center;
Display: Flex;
Margin: 40px 50px;
Grense: 3px solid blå;
polstring: 30px;
bakgrunnsfarge: RGB (208, 205, 248);

Her:

• “Justify-Content”CSS -egenskap definerer hvordan nettleseren distribuerer rom mellom og rundt innholdsartikler langs hovedaksen til en flexbeholder og inline -aksen til en rutenettbeholder.
• “vise”Brukes til å angi visningsatferden til et element.
• “margin”Brukes til å legge til plassen utenfor den definerte grensen rundt elementet.
• “grense”Angir grensen rundt elementet.
• “polstring”Bestemmer rommet rundt det definerte elementet inne i grensen.
• “bakgrunnsfarge”Setter bakgrunnsfargen på elementets bakside.

Det kan observeres at skjemaet er sentrert på linje:

Vi har lært deg metoden for å justere skjemaet i sentrum.

Konklusjon

For å senter justere en form, er det forskjellige metoder. Den første er å bruke inline stylingmetoden i HTML. For det andre kan brukeren også bruke CSS -egenskapene etter tilgang til skjemaet i CSS. For å gjøre det, “Justify-Content”Eiendom med verdien”senter”Og“vise" angitt som "Flex”Brukes for å sette inn justering av skjemaet i sentrum. Dette innlegget har vist metoden for å midtre justere skjemaet.