Teoría
Teoría

Un grupo de botones de opción

Ahora agregaremos otra opción a nuestro grupo. Para hacerlo, necesitamos otro <input> con el mismo nombre, pero con un valor distinto en value.

Así podemos crear grupos con tantas opciones como necesitemos. En cada grupo solo se puede seleccionar una opción a la vez.

Para que una opción del grupo esté seleccionada de forma predeterminada, agrega el atributo checked al <input> correspondiente, igual que con las casillas de verificación.

Recuerda: los botones de opción de un mismo grupo deben tener el mismo nombre, pero sus identificadores siempre deben ser únicos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Un grupo de botones de opción</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Cuestionario</h1> <form action="https://codigoheroe.com/echo" method="post"> <p>En los cuestionarios es común encontrar preguntas como «elige una de las siguientes opciones».</p> <p><i>¿Qué etiqueta representa un párrafo?</i></p> <label> <input type="radio" name="question-one" value="p"> Etiqueta <p> </label> <br> <label>  Etiqueta <b> </label> <input type="submit" value="Enviar"> </form> </body> </html>

CSS

input[type="submit"] { display: block; margin-top: 10px; }

ObjetivosRealizado

Agrega al formulario un segundo botón de opción con el nombre question-one y el valor b.
Haz que esté seleccionado de forma predeterminada.

Prueba enviar el formulario con distintas opciones seleccionadas.