input type=”radio”

La etiqueta <input> en HTML, tiene como valor "radio" en su atributo type, input type=”radio” esto simboliza a una opción que pertenece a un grupo o lista en el cual de una lista de opciones sólo uno podrá ser seleccionada. Estos listas están conformado por varios números de opciones, en el cual todos comparten el mismo atributo name.

Para la diferencia de las casillas de verificación, su valor del atributo value es muy importante para los casillas de opciones. Antes de enviar formulario a la gente procesador debe ser seleccionado solamente una sola casilla, además el atributo value de cada opción debe ser único en la lista.

Importante: Para que un conjunto de casillas de botones de opción incluyan al grupo, todos deben tener los mismos valores de atributos name.

Ejemplos

En este presente ejemplo creamos un formulario con el control input type=”radio”, en el cual mostramos una lista de opciones en donde el usuario final podrá seleccionar sólo una de las opciones, para que esto se cumpla, los botones de opciones deben tener los mismos valores en su atributo name.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Radio </legend>
        <label> Eliga su sexo:<br>

    <input type="radio" name="sexo" value="1"> Varón<br>

    <input type="radio" name="sexo" value="2"> Mujer<br>

    <input type="radio" name="sexo" value="3"> Sin definir </label>
        <input type="submit">
    </fieldset>
</form>

Adentrándonos sobre el input type=”radio”, en el ejemplo anterior nos faltó un detalle en el cual al hacer clic en el nombre de la opción no hace el efecto de selección, en este ejemplo resolveremos este problema, ya que por veces el usuario final selecciona a través del nombre de la opción.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Radio </legend>
        <p> Eliga su sexo:<br>

    <label><input type="radio" name="sexo" value="1"> Varón</label><br>

    <label><input type="radio" name="sexo" value="2"> Mujer </label><br>

   <label> <input type="radio" name="sexo" value="3"> Sin definir</label> </p>
        <input type="submit">
    </fieldset>
</form>

Siguiendo con los ejemplos de input type=”radio”, en este caso haremos el uso del atributo checked, este atributo indicará al navegador que debe cargar seleccionada la opción puesta este atributo checked.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Radio </legend>
        <p> Eliga su sexo:<br>

    <label><input type="radio" name="sexo" value="1" checked> Varón</label><br>

    <label><input type="radio" name="sexo" value="2"> Mujer </label><br>

   <label> <input type="radio" name="sexo" value="3"> Sin definir</label> </p>
        <input type="submit">
    </fieldset>
</form>

Para terminar haremos el uso del atributo required, este atributo indica al navegador que no debe permitir el envío del formulario hasta que seleccione una casilla.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Radio </legend>
        <p> Eliga su sexo:<br>

    <label><input type="radio" name="sexo" value="1" required > Varón</label><br>

    <label><input type="radio" name="sexo" value="2"> Mujer </label><br>

   <label> <input type="radio" name="sexo" value="3"> Sin definir</label> </p>
        <input type="submit">
    </fieldset>
</form>