På nettsteder, skjemaer og rapporter hjelper brukerne med å utføre oppgavene sine raskt og effektivt. Sammendragsdataene er presentert i rapporter, mens skjemaer brukes til forskjellige oppgaver, inkludert datainnsamling, presentasjon av spørringsresultater, beregning osv. Et skjema gir kunden en systematisk måte å legge inn informasjon i databasen og direkte endre data i databasestrukturer som tabeller.

Denne oppskrivningen handler om å lage og style skjemaer ved hjelp av HTML og CSS.

Hvordan lage et skjema i HTML?

For å lage et skjema i HTML, først, bruk "”Element i HTML og deretter legge til og elementer.

For praktiske implikasjoner, følg de gitte instruksjonene.

Trinn 1: Legg til overskrift
For å sette inn en overskrift i et HTML -dokument, bruk en hvilken som helst overskriftskode fra “

" til "

”. I dette scenariet har vi brukt

stikkord.

Trinn 2: Lag form
Deretter lager du et skjema ved hjelp av "”Element og legg til formkomponentene.

Trinn 3: Legg til etikett i form
Etter det, sett inn “”Tag i skjemaet som representerer en bildetekst for et element i et brukergrensesnitt. Legg dessuten til "til”Attributt inne i“”Som brukes til å referere til IDen til elementet tilknyttet denne etiketten. For å gjøre det, verdien av "for" -attributtet i etikett -taggen og verdien av "ID" -attributtet til "”Bør være den samme.

Trinn 4: Lag inngangsfelt
For å legge til inngangsfeltet i skjemaet, bruk "”Element. Dette elementet representerer et skrevet datafelt, vanligvis med en formkontroll for å la brukeren redigere dataene. Inne i inngangskoden, legg til følgende attributter oppført nedenfor:

• “type”Attributt brukes til å kontrollere datatypen (og tilhørende kontroll) av elementet. Det er flere mulige verdier for denne attributtet, inkludert "tekst”,“Antall”,“Dato”,“passord", og mange flere.
• “id”Attributt/eiendom beskriver en unik ID for et HTML -element.

Trinn 5: Lag en knapp
For å legge til knappen på skjemaet, bruk HTML “”Element og legg inn tekst som skal vises på knappen:

Fyll ut dette skjemaet

Fornavn



Etternavn



Din DOB



Arbeidskategori



Ditt land



Sende inn

Det kan sees at skjemaet er opprettet med hell i HTML:

Gå mot neste avsnitt hvis du vil style skjemaet.

Hvordan style et skjema ved hjelp av CSS -egenskaper?

For å style skjemaet, er det forskjellige CSS -egenskaper tilgjengelig. For å gjøre det, få tilgang til formen og stil det som ønsket.

Trinn 1: Style skjemaet
Få tilgang til skjemaet i CSS og bruk følgende egenskaper:

form
Border: 3px prikket grønn;
Margin: 30px 80px;
polstring: 20px;
tekst-align: sentrum;
bakgrunnsfarge: RGB (194, 241, 194);

Her:

• “grense”CSS -egenskap tildeler en grense rundt det definerte elementet.
• “margin”Definerer et rom utenfor grensen.
• “polstring”Bestemmer det tomme rommet rundt elementet inne i den definerte grensen.
• “Tekstalign”Eiendom brukes til å stille inn justering av teksten som“senter”.
• “bakgrunnsfarge”Definerer fargen på grensens bakside.

Produksjon

Trinn 2: Bruk styling på “Label”
Få tilgang til “merkelapp”Og bruk nevnte CSS -egenskaper:

merkelapp
Farge: blå;
Font-stil: kursiv;

I henhold til ovennevnte kodeutdrag:

• “farge”Eiendom setter fargen for teksten. For det formålet er verdien av den spesifiserte egenskapen satt som “blå”.
• “fontstil”Eiendom spesifiserer en bestemt skrift for etikettdataene.

Produksjon

Trinn 3: Stil “Input” -element
Få tilgang til “inngang”Element med“:sveve”Pseudo -velger:

input: hover
bakgrunnsfarge: RGB (247, 202, 143);
Farge: grønn;

Etter det, bruk "bakgrunnsfarge”For å sette fargen på baksiden av inngangsfeltet og“farge”Eiendom for å definere fargen for teksten i feltet.

Produksjon

Det handler om å lage og style skjemaet i HTML/CSS.

Konklusjon

For å lage og style formen, først, bruk "”Element med det formål å lage et skjema i HTML. Bruk deretter “”Og“”Elementer for å sette inn etiketter og inngangsfelt inne i skjemaet. Etter det får du tilgang til skjemaet og bruk styling ved hjelp av CSS -egenskaper, inkludert "bakgrunnsfarge”,“margin”,“ Border, ”og mange flere, etter ditt valg. Dette innlegget forklarte metoden for å lage og style skjemaet i HTML og CSS.