Añadir un grupo de radio buttons en un formulario HTML

Los radio buttons, también llamados option buttons, que español se suelen llamar botones de radio o botones de opciones, son elementos HTML para formularios que permiten elegir una sola opción entre un grupo. El comportamiento es similar a un select de selección única, salvo que las distintas opciones se presentan de forma explícita en lugar presentarse en un despegable.

Sintaxis

Para mostrar un botón de radio en HTML se utiliza el elemento input con el atributo type="radio":

<input type="radio">

Cómo cualquier otro elemento input, el atributo name es necesario, ya que es enviado junto a los datos del formulario y es utilizado en el servidor para identificar a cada campo. El valor del radio button, también como en otros input, se establece con el atributo value. Por ejemplo:

<input type="radio" name="color" value="azul">

En los radio buttons, el atributo name se utiliza además para definir un grupo de opciones. Un conjunto de radio buttons con el mismo name, pertenecen al mismo grupo de opciones. El usuario solo podrá elegir una opción de cada grupo. En el siguiente ejemplo se definen dos grupos: color y número:

<form>
    <fieldset>
        <legend>Elige un color</legend>
        <label>
            <input type="radio" name="color" value="azul"> Azul
        </label>
        <label>
            <input type="radio" name="color" value="negro"> Negro
        </label>
        <label>
            <input type="radio" name="color" value="amarillo"> Amarillo
        </label>
    </fieldset>
    <fieldset>
        <legend>Elige un número</legend>
        <label>
            <input type="radio" name="numero" value="1"> 1
        </label>
        <label>
            <input type="radio" name="numero" value="2"> 2
        </label>
        <label>
            <input type="radio" name="numero" value="3"> 3
        </label>
        <label>
            <input type="radio" name="numero" value="3"> 4
        </label>
    </fieldset>
</form>

Demo

¿Cuándo utilizar radio buttons?

Los radio buttons se deben utilizar cuándo sea necesario escoger una sola opción entre varias posibles de forma excluyente entre sí. Si no hay varias opciones para elegir, es mucho más adecuado utilizar un checkbox, ya que el checkbox permite ser desmarcado, mientras que el radio button no.

Sí, has leído bien, el radio button no permite ser desmarcado. Una vez seleccionado un radio button, solo se desmarcará si se selecciona otro radio button del mismo grupo, de ahí que se habla de selección de opciones excluyentes entre sí. El comportamiento es similar a los botones de las radios analógicas antiguas que se utilizaban para seleccionar estaciones preconfiguradas: al pulsar un botón, los otros saltaban. De hecho, el nombre de «radio buttons» viene por analogía con el funcionamiento de estos botones.

Si comparas el comportamiento de radio buttons y de un select de selección única, verás que es prácticamente igual. En la gran mayoría de los casos puedes intercambiar ambos y se obtendrá el mismo resultado. La elección de uno u otro se basará prácticamente al 100% en criterios de diseño e UX.