Denne artikel vil guide dig til at oprette en HTML-radioknap ved hjælp af et praktisk eksempel.
Hvordan tilføjer man en radioknap i HTML?
Følg nedenstående syntaks for at tilføje en alternativknap i HTML:
< input type = 'radio' navn = '' værdi = '' >
Her er beskrivelsen af den angivne syntaks:
- “ type ”: Denne attribut specificerer hvilken type input du ønsker at oprette, såsom tekst, radio, afkrydsningsfelt og mere. For at oprette en alternativknap skal attributværdien indstilles som 'radio'.
- “ navn ”: Det definerer navnet på input-elementet. Denne egenskab skal være den samme for listen over alternativknapper.
- “ værdi ”: Dette angiver den værdi, der sendes til serveren, når alternativknappen er markeret som markeret.
Eksempel: Tilføjelse af en alternativknap i HTML
Dette eksempel vil diskutere proceduren for at tilføje en alternativknap i HTML ved hjælp af input-radioknappen. I
Trin 1: Oprettelse af HTML-fil
Tilføj først et
Inde i den oprettede
- Først skal du tilføje ' ” tag for at give en overskrift til siden.
- Derefter en ' ” tag for et afsnit eller en tekstlinje.
- Derefter tilføjes input-tagget med en attribut ' type 'have værdi' radio ', er navnet indstillet som vælg, og ' værdi ' som ' rød ”. Forskellige værdier gives til hver radioknap, der har samme navn. Det samme navn repræsenterer den samme gruppe eller liste.
- Hvis du vil tilføje en knap, der som standard er markeret som markeret, så tildel attributten ' kontrolleret ' til den knap.
- Til sidst, ' ”-elementet på hver radioknap bruges til at tilføje billedtekster. Det giver også bedre tilgængelighed.
Nedenstående kode er fortolkningen af ovenstående scenarie:
< h1 > HTML radioknap h1 >< s > Hvilken er din yndlingsfarve? s >
< input type = 'radio' navn = 'vælg farve' værdi = 'rød' kontrolleret >
< etiket til = 'radio1' > Rød etiket >
< br >
< input type = 'radio' navn = 'vælg farve' værdi = 'blå' >
< etiket til = 'radio1' > Blå etiket >
< br >
< input type = 'radio' navn = 'vælg farve' værdi = 'grøn' >
< etiket til = 'radio1' > Grøn etiket >
< br >
< input type = 'radio' navn = 'vælg farve' værdi = 'lilla' >
< etiket til = 'radio1' > Lilla etiket >
< br >
< input type = 'radio' navn = 'vælg farve' værdi = 'andre' >
< etiket til = 'radio1' > Andre etiket >
Det kan ses, at radioknapperne er oprettet med succes:
Du kan også anvende stilarter på den ovenfor oprettede alternativknap ved at følge nedenstående CSS-kode.
Trin 2: Anvendelse af stil til HTML
Det ' div ' angiver det div-tag, vi har oprettet i HTML-filen:
- For det første ' baggrundsfarve ' egenskab er indstillet som ' #8197f0 ”.
- “ grænse ' egenskab er indstillet som ' 5 px prikket #13023a ”, hvor 5px repræsenterer bredden af grænsen, stiplet angiver typen af linje, og derefter angiver grænsens farve.
- “ polstring ' er sat som ' 20px 100px ” hvor 20px angiver polstringen fra top og bund, og 100px angiver polstring fra venstre og højre.
- Til skrifttypestiling skal du tildele ' skrifttype-familie ' ejendomsværdi som ' kursiv ”.
CSS
div {baggrundsfarve: #8197f0;
kant: 5px prikket #13023a;
polstring: 20px 100px;
skriftstørrelse: 20px;
font-familie: kursiv;
}
Det kan ses, at div-elementet er stylet med succes:
Det er det! Vi har forklaret detaljeret om HTML-radioknappen.
Konklusion
En alternativknap er et input, der altid vises i grupper med to eller flere muligheder. Fra denne gruppe kan brugeren kun vælge én mulighed. I HTML kan en alternativknap oprettes ved hjælp af ' ' tag med attributtypen med værdien ' radio ”. Denne blog demonstrerede metoden til at tilføje radioknapper i HTML.