En alternativknapp er et interaktivt element i HTML, som kan opprettes ved hjelp av "”Tag som har attributttypen med verdien”radio”. Brukere kan velge ett alternativ fra den medfølgende listen. Denne knappen brukes vanligvis der bare ett alternativ skal velges i forskjellige scenarier, for eksempel valg av kjønn, blodgruppeutvalg og mer.

Denne artikkelen vil guide deg i å lage en HTML -alternativknapp ved hjelp av et praktisk eksempel.

Hvordan legge til en alternativknapp i HTML?

For å legge til en alternativknapp i HTML, følg syntaksen under gitt:

Her er beskrivelsen av den uttalte syntaks:

• “type”: Denne attributtet spesifiserer hvilken type inngang du ønsker å lage, for eksempel tekst, radio, avkrysningsrute og mer. For å opprette en alternativknapp, må attributtverdien settes som "radio".
• “Navn”: Det definerer navnet på inngangselementet. Denne attributtet skal være den samme for listen over radioknapper.
• “verdi”: Dette spesifiserer verdien som vil bli sendt til serveren når alternativknappen er merket som sjekket.

Eksempel: Legge til en alternativknapp i HTML

Dette eksemplet vil diskutere prosedyren for å legge til en alternativknapp i HTML ved å bruke inngangs alternativknappen. I

Trinn 1: Opprette HTML -fil

Legg først til en tag i HTML -filen:

Inne i det opprettet:

• Først, legg til “

  ”Tag for å gi en overskrift til siden.

• Deretter en "

  ”Tag for et avsnitt eller tekstlinje.

• Etter det legges inndata -taggen til med et attributt “type”Å ha verdi”radio”, Navnet er satt som valgt, og“verdi" som "rød”. Ulike verdier er gitt til hver alternativknapp som har samme navn. Samme navn representerer den samme gruppen eller listen.
• Hvis du vil legge til en knapp som er som standard merket som sjekket, så tilordne attributtet “krysset av”Til den knappen.
• Til slutt "”Element på hver alternativknapp brukes til å legge til bildetekster. Det gir også bedre tilgjengelighet.

Nedenfor koden er tolkningen av ovennevnte scenario:

HTML -alternativknapp

Hvilken er din favorittfarge?

rød



Blå



Grønn



Lilla



Andre

Det kan sees at radioknappene er opprettet med hell:

Du kan også bruke stiler på den ovennevnte alternativknappen ved å følge den nedenfor-nevnte CSS-koden.

Trinn 2: Bruke stil på HTML

“div”Indikerer DIV -taggen vi har opprettet i HTML -filen:

• Først "bakgrunnsfarge”Eiendom er satt som“#8197F0”.
• “grense”Eiendom er satt som“5px stiplet #13023a”, Der 5px representerer bredden på grensen, stiplet indikerer typen linje, og neste indikerer grensens farge.
• “polstring”Er satt som“20px 100px”Hvor 20px spesifiserer polstring fra topp og bunn og 100px indikerer polstring fra venstre og høyre.
• For fontstyling, tilordne “Font-familie”Eiendomsverdi som“kursiv”.

CSS

div
Bakgrunnsfarge: #8197F0;
Grense: 5px prikket #13023A;
polstring: 20px 100px;
Font-størrelse: 20px;
Font-family: Cursive;

Det kan sees at DIV -elementet er stylet vellykket:

Det er det! Vi har forklart i detalj om HTML -alternativknappen.

Konklusjon

En alternativknapp er en inngang som alltid vises i grupper av to eller flere alternativer. Fra denne gruppen kan brukeren bare velge ett alternativ. I HTML kan en alternativknapp opprettes ved hjelp av "”Tag som har attributttypen med verdien”radio”. Denne bloggen demonstrerte metoden for å legge til radioknapper i HTML.