Dit artikel zal u helpen bij het maken van een HTML-radioknop met behulp van een praktisch voorbeeld.
Hoe voeg ik een keuzerondje toe in HTML?
Volg de onderstaande syntaxis om een keuzerondje in HTML toe te voegen:
< invoer type = 'radio' naam = '' waarde = '' >
Hier is de beschrijving van de vermelde syntaxis:
- “ type ”: Dit attribuut geeft aan welk type invoer u wilt maken, zoals tekst, radio, selectievakje en meer. Om een keuzerondje te maken, moet de attribuutwaarde worden ingesteld als 'radio'.
- “ naam ”: Het definieert de naam van het invoerelement. Dit kenmerk moet hetzelfde zijn voor de lijst met keuzerondjes.
- “ waarde ”: Dit specificeert de waarde die naar de server wordt verzonden wanneer het keuzerondje is gemarkeerd als aangevinkt.
Voorbeeld: een keuzerondje toevoegen in HTML
In dit voorbeeld wordt de procedure besproken voor het toevoegen van een keuzerondje in HTML met behulp van het invoerkeuzerondje. In
Stap 1: HTML-bestand maken
Voeg eerst een
Binnen de gemaakte
- Voeg eerst de ' ”-tag om een kop aan de pagina te geven.
- Dan een ' ”-tag voor een alinea of tekstregel.
- Daarna wordt de invoertag toegevoegd met een attribuut ' type 'waarde hebben' radio- ”, de naam is ingesteld als select, en “ waarde ' net zo ' rood ”. Aan elk keuzerondje met dezelfde naam worden verschillende waarden gegeven. Dezelfde naam vertegenwoordigt dezelfde groep of lijst.
- Als u een knop wilt toevoegen die standaard is gemarkeerd als aangevinkt, wijs dan het attribuut ' gecontroleerd ” naar die knop.
- Als laatste de “
”-element op elk keuzerondje wordt gebruikt om bijschriften toe te voegen. Het zorgt ook voor een betere bereikbaarheid.
De onderstaande code is de interpretatie van het bovenstaande scenario:
< h1 > HTML-keuzerondje h1 >< p > Wat is je favoriete kleur? p >
< invoer type = 'radio' naam = 'selecteer kleur' waarde = 'rood' gecontroleerd >
< label voor = 'radio1' > Rood label >
< br >
< invoer type = 'radio' naam = 'selecteer kleur' waarde = 'blauw' >
< label voor = 'radio1' > Blauw label >
< br >
< invoer type = 'radio' naam = 'selecteer kleur' waarde = 'groente' >
< label voor = 'radio1' > Groente label >
< br >
< invoer type = 'radio' naam = 'selecteer kleur' waarde = 'Purper' >
< label voor = 'radio1' > Purper label >
< br >
< invoer type = 'radio' naam = 'selecteer kleur' waarde = 'anderen' >
< label voor = 'radio1' > Anderen label >
U kunt zien dat de keuzerondjes met succes zijn gemaakt:
U kunt ook stijlen toepassen op het hierboven gemaakte keuzerondje door de onderstaande CSS-code te volgen.
Stap 2: Stijl toepassen op HTML
De ' div ” geeft de div-tag aan die we in het HTML-bestand hebben gemaakt:
- Eerst de ' Achtergrond kleur ” eigendom is ingesteld als “ #8197f0 ”.
- “ grens ” eigendom is ingesteld als “ 5px gestippeld #13023a ”, waarbij 5px staat voor de breedte van de rand, gestippeld het type lijn aangeeft en vervolgens de kleur van de rand aangeeft.
- “ opvulling ” is ingesteld als “ 20px 100px ” Waarbij 20px de opvulling van boven en onder specificeert en 100px de opvulling van links en rechts aangeeft.
- Wijs voor lettertypestijlen de ' font-familie ” eigendomswaarde als “ cursief ”.
CSS
div {Achtergrond kleur: #8197f0;
rand: 5px gestippeld #13023a;
opvulling: 20px 100px;
lettergrootte: 20px;
font-familie: cursief;
}
Het is te zien dat het div-element met succes is opgemaakt:
Dat is het! We hebben in detail uitgelegd over de HTML-radioknop.
Conclusie
Een keuzerondje is een invoer die altijd verschijnt in groepen van twee of meer opties. Van deze groep kan de gebruiker slechts één optie selecteren. In HTML kan een keuzerondje worden gemaakt met behulp van de '