Denne artikkelen vil veilede deg i å lage en HTML-radioknapp ved hjelp av et praktisk eksempel.
Hvordan legge til en radioknapp i HTML?
For å legge til en alternativknapp i HTML, følg syntaksen nedenfor:
< input type = 'radio' Navn = '' verdi = '' >
Her er beskrivelsen av den oppgitte syntaksen:
- ' type ”: Dette attributtet spesifiserer hvilken type input du ønsker å lage, for eksempel tekst, radio, avkrysningsboks og mer. For å opprette en alternativknapp, må attributtverdien settes som 'radio'.
- ' Navn ”: Den definerer navnet på inngangselementet. Dette attributtet skal være det samme for listen over alternativknapper.
- ' verdi ”: Dette spesifiserer verdien som vil bli sendt til serveren når alternativknappen er merket som avkrysset.
Eksempel: Legge til en alternativknapp i HTML
Dette eksemplet vil diskutere prosedyren for å legge til en alternativknapp i HTML ved å bruke alternativknappen for input. I
Trinn 1: Opprette HTML-fil
Først legger du til en
Inne i den opprettede
- Først legger du til ' ” tag for å gi en overskrift til siden.
- Så en ' ”-tag for et avsnitt eller en tekstlinje.
- Etter det legges inndatakoden til med et attributt ' type 'ha verdi' radio ', er navnet satt som velg, og ' verdi ' som ' rød '. Ulike verdier er gitt til hver alternativknapp som har samme navn. Det samme navnet representerer den samme gruppen eller listen.
- Hvis du vil legge til en knapp som som standard er merket som avmerket, tilordne attributtet ' sjekket ' til den knappen.
- Til slutt, '
”-elementet på hver radioknapp brukes til å legge til bildetekster. Det gir også bedre tilgjengelighet.
Koden nedenfor er tolkningen av scenarioet ovenfor:
< h1 > HTML radioknapp h1 >< s > Hvilken er din favorittfarge? s >
< input type = 'radio' Navn = 'velg farge' verdi = 'rød' sjekket >
< merkelapp til = 'radio1' > rød merkelapp >
< br >
< input type = 'radio' Navn = 'velg farge' verdi = 'blå' >
< merkelapp til = 'radio1' > Blå merkelapp >
< br >
< input type = 'radio' Navn = 'velg farge' verdi = 'grønn' >
< merkelapp til = 'radio1' > Grønn merkelapp >
< br >
< input type = 'radio' Navn = 'velg farge' verdi = 'lilla' >
< merkelapp til = 'radio1' > Lilla merkelapp >
< br >
< input type = 'radio' Navn = 'velg farge' verdi = 'andre' >
< merkelapp til = 'radio1' > Andre merkelapp >
Det kan sees at radioknappene er opprettet med hell:
Du kan også bruke stiler på den ovenfor opprettede alternativknappen ved å følge den nedenfor nevnte CSS-koden.
Trinn 2: Bruk stil på HTML
« div ' indikerer div-taggen vi har laget i HTML-filen:
- Først ' bakgrunnsfarge egenskapen er satt som #8197f0 '.
- ' grense egenskapen er satt som 5 piksler prikket #13023a ”, der 5px representerer bredden på kantlinjen, prikket indikerer typen linje, og deretter indikerer kantlinjens farge.
- ' polstring ' er satt som ' 20px 100px ” der 20px spesifiserer polstringen fra topp og bunn og 100px indikerer polstring fra venstre og høyre.
- For skriftstiling, tilordne ' font-familie ' eiendomsverdi som ' kursiv '.
CSS
div {bakgrunnsfarge: #8197f0;
kantlinje: 5 px prikkete #13023a;
polstring: 20px 100px;
skriftstørrelse: 20px;
font-familie: kursiv;
}
Det kan sees at div-elementet er stilt vellykket:
Det er det! Vi har forklart i detalj om HTML-radioknappen.
Konklusjon
En alternativknapp er en inngang som alltid vises i grupper med to eller flere alternativer. Fra denne gruppen kan brukeren bare velge ett alternativ. I HTML kan en alternativknapp opprettes ved å bruke ' '-taggen som har attributttypen med verdien ' radio '. Denne bloggen demonstrerte metoden for å legge til alternativknapper i HTML.