Den här artikeln hjälper dig att skapa en HTML-radioknapp med hjälp av ett praktiskt exempel.
Hur lägger man till en radioknapp i HTML?
För att lägga till en alternativknapp i HTML, följ nedanstående syntax:
< inmatning typ = 'radio' namn = '' värde = '' >
Här är beskrivningen av den angivna syntaxen:
- ' typ ”: Det här attributet anger vilken typ av indata du vill skapa såsom text, radio, kryssruta och mer. För att skapa en alternativknapp måste attributvärdet ställas in som 'radio'.
- ' namn ”: Den definierar namnet på inmatningselementet. Det här attributet ska vara detsamma för listan med alternativknappar.
- ' värde ”: Detta anger värdet som kommer att skickas till servern när alternativknappen är markerad som markerad.
Exempel: Lägga till en alternativknapp i HTML
Det här exemplet kommer att diskutera proceduren för att lägga till en alternativknapp i HTML med hjälp av alternativknappen för input. I
Steg 1: Skapa HTML-fil
Lägg först till en
Inuti den skapade
- Lägg först till ' ”-tagg för att ge en rubrik till sidan.
- Då en ' ”-tagg för ett stycke eller textrad.
- Efter det läggs inmatningstaggen till med ett attribut ' typ 'ha värde' radio ', namnet är inställt som välj, och ' värde ' som ' röd ”. Olika värden ges till varje alternativknapp som har samma namn. Samma namn representerar samma grupp eller lista.
- Om du vill lägga till en knapp som som standard är markerad som markerad, tilldela sedan attributet ' kontrollerade ' till den knappen.
- Slutligen, '
”-elementet på varje alternativknapp används för att lägga till bildtexter. Det ger också bättre tillgänglighet.
Koden nedan är tolkningen av scenariot ovan:
< h1 > HTML radioknapp h1 >< sid > Vilken är din favorit färg? sid >
< inmatning typ = 'radio' namn = 'välj färg' värde = 'röd' kontrollerade >
< märka för = 'radio1' > Röd märka >
< br >
< inmatning typ = 'radio' namn = 'välj färg' värde = 'blå' >
< märka för = 'radio1' > Blå märka >
< br >
< inmatning typ = 'radio' namn = 'välj färg' värde = 'grön' >
< märka för = 'radio1' > Grön märka >
< br >
< inmatning typ = 'radio' namn = 'välj färg' värde = 'lila' >
< märka för = 'radio1' > Lila märka >
< br >
< inmatning typ = 'radio' namn = 'välj färg' värde = 'andra' >
< märka för = 'radio1' > Andra märka >
Det kan ses att radioknapparna har skapats framgångsrikt:
Du kan också tillämpa stilar på den ovan skapade alternativknappen genom att följa den nedan nämnda CSS-koden.
Steg 2: Tillämpa stil på HTML
den ' div ” indikerar div-taggen vi har skapat i HTML-filen:
- Först, ' bakgrundsfärg ' egenskapen är inställd som ' #8197f0 ”.
- ' gräns ' egenskapen är inställd som ' 5 px prickad #13023a ”, där 5px representerar kantens bredd, prickad anger typen av linje och därefter anger kantens färg.
- ' stoppning ' är inställd som ' 20px 100px ” där 20px anger stoppningen uppifrån och ned och 100px anger stoppningen från vänster och höger.
- För teckensnittsstil, tilldela ' typsnittsfamilj ' fastighetsvärde som ' kursiv ”.
CSS
div {bakgrundsfärg: #8197f0;
kant: 5 px prickad #13023a;
stoppning: 20px 100px;
teckenstorlek: 20px;
font-family: kursiv;
}
Det kan ses att div-elementet har formats framgångsrikt:
Det är allt! Vi har förklarat i detalj om HTML-radioknappen.
Slutsats
En alternativknapp är en ingång som alltid visas i grupper om två eller flera alternativ. Från denna grupp kan användaren bara välja ett alternativ. I HTML kan en alternativknapp skapas med hjälp av '