Krysebokser er inngangskomponenter som inneholder boolske verdier. Ved å bruke den kan brukeren velge flere alternativer fra en liste over alternativer. Mens du utvikler et nettsted, er det å legge til en avkrysningsrute et utmerket alternativ hvis du vil at besøkende skal velge flere elementer fra en meny. Imidlertid fungerer avmerkingsbokser motsatt av radioknapper, som bare tillater ett valg fra en liste.

For å endre tilstanden til avkrysningsruten fra ukontrollert til avkrysset, må brukeren samhandle med den.

Denne håndboken vil guide deg om HTML -avkrysningsruten, dens tilstander og syntaks og demonstrere et praktisk eksempel relatert til å legge til en avkrysningsrute i HTML.

Hva er tilstandene til avkrysningsruten i HTML?

Avkrysningsruten har tre mulige tilstander:

• ekte: Denne tilstanden indikerer at avkrysningsruten er avmerket.
• falsk: Denne tilstanden indikerer at avmerkingsboksen ikke er merket av.
• blandet: Om avkrysningsruten er merket av eller ikke er udefinert.

Syntaks

I HTML brukes taggen til å legge til inngangselementer. For en avkrysningsrute, angi inngangstypen som "avkrysningsrute”.

Syntaks

La oss flytte til det praktiske eksemplet, der vi lager en avkrysningsrute. Så la oss starte.

Eksempel: Legge til en avkrysningsrute i HTML

I HTML oppretter vi en beholder og tildeler klassenavnet som "div”. Inne i taggen vil vi legge til en overskrift ved hjelp av

. Etter det, lag en underdiv for å legge til avkrysningsruter og etiketter.

Her vil vi bruke taggen til å stille inn etiketten til avkrysningsruten og taggen for å legge til inngangselementet. Neste, angi inngangstypen som "avkrysningsrute”Etter å ha stengt taggen til, vil vi legge til pause -taggen
Tag for å angi avmerkingsboksen i neste linje på skjermbildet. Her har vi lagt til Legg til fire avmerkingsbokser:

Inngangstype "avkrysningsrute"

Landene du vil besøke:


Spania


Tyrkia


Japan


Kina

Du kan se at avkrysningsruten for inngangstype opprettet vellykket:

Du kan også style "avkrysningsrute”Ved å følge den undergitte syntaks.

Trinn 1: Style Div

Her vil vi bruke “.div”For å få tilgang til den opprettede beholderen i HTML og sette høyden som“250px”. Deretter, bruk "bakgrunnsfarge”Eiendom for å sette bakgrunnsfargen på diven og tilordne verdien av fargen som“RGB (185, 255, 176)”. Styler deretter diven ved å bruke "grense”Eiendom for å sette grensen rundt div. Bredden på grensen er “5px”Stil som“Strikket”Og farge som“RGB (24, 58, 20)”.

CSS

.div
Høyde: 250px;
Bakgrunn: RGB (185, 255, 176);
Grense: 5px stiplet RGB (24, 58, 20);

Det kan sees at beholderen er stiler med hell:

Trinn 2: Stil avkrysningsrute

Nå vil vi bruke “inngang”For å få tilgang til inngangen som er opprettet i HTML. Deretter, bruk "margin-venstre”Eiendom for å sette marginen fra venstre side av avkrysningsruten og sette verdien som“30px”. For å sette bunnmargin, bruk "marginbunn”Eiendom og angi verdien som“15px”:

input
margin-venstre: 30px;
Margin-Bottom: 15px;

Det undergitte bildet betyr at den ekstra marginegenskapsverdien blir brukt på avmerkingsboksene:

Det er det! Vi har forklart i detalj om inngangstypen "avkrysningsrute”.

Konklusjon

En "avkrysningsrute”Er et inndatatypeelement av HTML som lar brukeren velge mellom to eller flere mulige alternativer. Det tillater brukeren å velge flere verdier fra en forhåndsdefinert liste. En avkrysningsrute har tre stater: sann, falsk og blandet. I denne guiden har vi forklart avkrysningsruten for inngangstype i detalj og gitt et eksempel relatert til å legge til et inngangsfelt og style det.