Hur väljer man en radioknapp som standard?

I HTML-form används alternativknappen där utvecklaren behöver begränsa användaren att tillhandahålla eller välja endast ett alternativ. Syftet med att ställa in knappen som standard är att säkerställa att användaren måste välja ett alternativ eftersom det tillåter användaren att bara välja ett enda alternativ. Den här bloggen visar steg-för-steg-instruktionerna för att välja en alternativknapp som standard.

Hur väljer man en radioknapp som standard?

Som standard ' kontrollerade ”-attributet används för att välja alternativknappen. Om detta attribut används på flera alternativknappar väljs den senaste alternativknappen som standard. Följ steg-för-steg-bloggen för att välja alternativknappen som standard:

Steg 1: Skapa radioknappar

Skapa tre alternativknappar i HTML-filen och bifoga etiketter med dem:

< Centrum >

< h3 > Välj din erfarenhetsnivå: < / h3 >

< div >

< inmatning typ = 'radio' id = 'nybörjare' namn = 'erfarenhet' värde = 'nybörjare' >

< märka för = 'nybörjare' > Nybörjare < / märka >

< / div >

< div >

< inmatning typ = 'radio' id = 'mellanliggande' namn = 'erfarenhet' värde = 'mellanliggande' >

< märka för = 'mellanliggande' > Mellanliggande < / märka >

< / div >

< div >

< inmatning typ = 'radio' id = 'förskott' namn = 'erfarenhet' värde = 'förskott' >

< märka för = 'förskott' > Förskott < / märka >

< / div >

< / Centrum >

I kodavsnittet ovan:

Alternativknappen bildas genom att skapa enkla ' ' taggar och ställer in dess typ på ' radio ”.
Tilldela varje alternativknapp 'namn', 'id' och 'värde'.
Till slut, använd ' id ' i inmatningsfältet för att bifoga ' ' taggen med ' för ' attribut.

Efter att ha kört skriptet utdata enligt nedan:

Bilden visar att alternativknapparna visas men att ingen av dem är vald som standard.

Steg 2: Välj som standard

den ' kontrollerade ”-attributet används för att automatiskt välja alternativknappen. Den väljer bara ett alternativ. Det är därför det är ett bättre sätt att välja en alternativknapp som standard. Det begränsar användaren till att välja rätt alternativ:

< div >

< inmatning typ = 'radio' id = 'nybörjare' namn = 'erfarenhet' värde = 'nybörjare' kontrollerat>

< märka för = 'nybörjare' >Nybörjare< / märka >

< / div >

I ovanstående kod är kontrollerade attribut används och det tilldelas endast det första inmatningsfältet.

Nu efter att ha kört ovanstående kod ser webbsidan ut så här:

Utdata illustrerar att den första alternativknappen väljs som standard vid varje uppdatering av sidan.

Bonustips: Använd JavaScript för att välja radioknappen som standard

För att välja en alternativknapp som standard med JavaScript, gå till alternativknappen med id. Välj sedan dess markerade attribut och ställ in dess booleska värde på 'true' som i koden nedan:

< manus >

document.getElementById ( 'nybörjare' ) . kontrollerade = Sann;

< / manus >

I den här koden är ' nybörjare ” är id för den alternativknapp som är vald som standard.

Efter att ha kompilerat skriptet utdata enligt nedan:

I ögonblicksbilden ovan är den första alternativknappen vald som standard med JavaScript.

Slutsats

För att välja en alternativknapp kan användare använda ' kontrollerade ' attribut. Om det markerade attributet används i mer än en alternativknapp, får alternativknappen det senaste 'markerade' attributvärdet. För att välja en alternativknapp som standard med JavaScript, gå till alternativknappen med id. Den här bloggen har framgångsrikt visat hur man väljer alternativknappen som standard.

Hur väljer man en radioknapp som standard?