Et av de viktigste formålene med å bruke HTML er å lage nettformer. Disse nettskjemaene er ment for å samle inn den nødvendige informasjonen fra brukeren. De kan inneholde korte eller lange spørsmål, svar, handlingsknapper, radioknapper, rullegardinlister, avmerkingsbokser osv. Når det gjelder denne opplæringen, vil den hovedsakelig diskutere formålet og bruken av avmerkingsboksene i HTML.

Formålet med avkrysningsruter i HTML

Avmerkingsboksene og radioknappene brukes begge til å gi flere alternativer å velge mellom for brukeren. Imidlertid kan man spørre hvor disse to HTML -elementene er forskjellige da? Vel, en alternativknapp brukes alltid i situasjoner der du vil begrense brukeren til å velge nøyaktig ett alternativ og ikke mer enn det. På den annen side brukes en avkrysningsrute når du vil la brukeren til og med velge mer enn ett alternativ. Derfor, når du vil få maksimale mulige valg ut av den gitte listen, bruker du alltid avmerkingsboksene i HTML. For å forstå denne bruken i detalj, må du lese neste del av denne opplæringen.

HTML -kode for å lage avmerkingsbokser

Du kan opprette avmerkingsbokser i HTML veldig raskt. Alt du trenger å gjøre er å følge de to eksemplene nedenfor for å lære dette hacket:

Eksempel 1: Henter yrke av en person

Vi har allerede nevnt at avmerkingsboksene i HTML og alle andre språk alltid brukes når du har frihet til å velge mer enn ett alternativ. Derfor vil vi i dette scenariet designe et HTML -skript for å hente okkupasjonen av en person. Nå kan denne personen enten være en "student", en "lærer" eller begge deler. Når det gjelder det siste alternativet, ønsker vi å gi personen frihet til å velge begge avkrysningsrutene samtidig. For å utvikle slik funksjonalitet har vi designet følgende HTML -skript:

Etter å ha brukt dokumenttype -erklæringserklæringen, har vi brukt “" og “” -merkerne slik at vi kan skrive HTML -skriptet vårt. Deretter har vi brukt “

”Header Flag for å spesifisere overskriften på websiden vår. Dette blir fulgt av "Input Type" -flagget som vi har brukt for å varsle om at vi skal lage en avkrysningsrute i HTML. Deretter har vi laget en "ID" og "navn" for denne avkrysningsruten. Vi har også tildelt en etikett til denne avmerkingsboksen. Etter det har vi brukt "etiketten" -merket for å nevne etiketten mot hver av våre HTML -avmerkingsbokser. På samme måte har vi designet den andre avmerkingsboksen. Etter det har vi også opprettet en "Send" -knapp bare for å gjøre utseendet til websiden vår fin.

Etter å ha lagret og utført dette HTML -skriptet med Google Chrome, dukket websiden vist på bildet nedenfor opp i nettleseren vår:

Nå har du lov til å velge så mange alternativer fra denne websiden du vil. I det følgende bildet har vi bare valgt en av de to avmerkingsboksene.

I bildet vist nedenfor har vi valgt begge avmerkingsboksene.

For å forbedre funksjonaliteten til dette HTML -skriptet, kan du til og med designe en handlingsside ved å bruke PHP slik at når du vil trykke på "Send" -knappen etter å ha valgt ønsket avkrysningsrute [S], blir relevant handling iverksatt mot den.

Eksempel 2: Velge ens favoritt smak av milkshake:

Noen ganger kan du til og med velge å designe en veldig enkel webside mens du bruker HTML -avkrysningsrutene uten handlingsknapper. For eksempel kan det hende du bare vil presentere noen få avmerkingsbokser for brukeren for å velge sin favoritt smak av milkshake. Du vil imidlertid ikke at han skal gjøre noe lenger etter å ha gjort dette utvalget. Slike forekomster er veldig sjeldne. Normalt ber du brukeren om å ta noen handlinger etter å ha valgt, for eksempel å klikke på en knapp. Likevel vil vi fortsatt vise deg et slikt eksempel. For å illustrere dette eksemplet har vi designet følgende HTML -skript for deg:

I dette HTML -skriptet er det vesentlige av skriptet: Dokumenttypen -erklæringen, "", og "" -merkerne er de samme, og deres formål er også nøyaktig de samme som vi har beskrevet i vårt første eksempel. Deretter har vi brukt et avsnittsmerke for å vise en melding til brukeren som ber ham om å velge sin favoritt smak av milkshake. En bruker kan enkelt velge mer enn en smak etter valget hans hvis han/ hun ønsker å. Deretter har vi definert etikettene for disse avmerkingsboksene etterfulgt av den respektive erklæringen om avkrysningsrutene. Du må legge merke til at vi denne gangen ikke har brukt HTML "Label" -taggen for å spesifisere etiketten. Snarere har vi nettopp definert etikettene som det er. Det betyr at det er en annen måte du kan lage etiketter for avmerkingsboksene dine bare for å forenkle HTML -skriptet ditt. Etter å ha skrevet dette skriptet helt, lagret vi ganske enkelt denne notisblokkfilen med ".HTML ”utvidelse slik at den enkelt kan utføres med hvilken som helst nettleser etter eget valg.

Vi har utført dette HTML -skriptet mens vi brukte Google Chrome, og det viste websiden som vises på bildet nedenfor på nettleseren vår:

Nå kan du enkelt velge så mange av disse avmerkingsboksene du vil. Dette vises i følgende bilde:

Konklusjon

Med denne opplæringen ønsket vi å dele med deg bruken av HTML -avkrysningsrutene på den enkleste måten. For å gjøre det introduserte vi deg først til det grunnleggende formålet med dette HTML -elementet. Etter det forklarte vi to forskjellige eksempler for deg som benyttet deg av dette HTML -elementet. Ved å gå gjennom disse forklaringene, kan du enkelt begynne å bruke HTML -avmerkingsboksene når du ønsker å gi brukerne dine fleksibilitet til å velge mer enn ett alternativ fra en gitt liste over alternativer.