Elemento input (type=radio)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "radio" en su atributo type, representa una opción que pertenece a un grupo en el que no más de una opción puede ser seleccionada al mismo tiempo. Estos grupos están normalmente conformados por un número de botones de opción, todos compartiendo el mismo valor en el atributo name.

En contraste con las casillas de verificación, el valor del atributo value juega un papel fundamental para los botones de opción. Cuando el formulario es enviado solo la opción seleccionada es enviada con el formulario al agente procesador, quien no tiene otra forma de decidir qué opción ha sido seleccionada más que mirando al valor (value) del control enviado. Este es el motivo por el cual el atributo value de cada opción debe ser único en el grupo.

Para que un conjunto de botones de opción pertenezcan al mismo grupo, todos ellos deberían tener el mismo valor en el atributo name.

Todos los botones de opción en un grupo deben estar en el mismo documento y pertenecer al mismo formulario, o no pertenecer a ningún formulario. Ubicar botones de opción en diferentes formularios romperá su agrupamiento.

Ejemplos

Nuestro primer ejemplo muestra una lista básica de opciones donde el usuario puede seleccionar sólo una opción. Para que esto suceda, todos los botones de opción en la lista utilizan el mismo valor en sus atributos name.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Empleo actual:<br>
    <input type="radio" name="empleoactual" value="tiempocompleto"> Tiempo completo<br>
    <input type="radio" name="empleoactual" value="mediodia"> Medio día<br>
    <input type="radio" name="empleoactual" value="sinempleo"> Sin empleo
  </p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Empleo actual:
Tiempo completo
Medio día
Sin empleo

Como puedes ver en el ejemplo anterior, el texto junto a cada botón de opción no responde a los clics como cualquiera podría esperarse. En el siguiente ejemplo, resolveremos este problema convirtiendo este texto regular en una etiqueta para el botón.

Para lograr esto, encerraremos al texto y al control correspondiente con un elemento label. De esta forma, asociaremos al botón de opción con todo lo demás que esté dentro del elemento label.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Empleo actual:<br>
    <label><input type="radio" name="empleoactual" value="tiempocompleto"> Tiempo completo</label><br>
    <label><input type="radio" name="empleoactual" value="mediodia"> Medio día</label><br>
    <label><input type="radio" name="empleoactual" value="sinempleo"> Sin empleo</label>
  </p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Empleo actual:


En nuestro tercer ejemplo, haremos uso del atributo checked, para indicarle al navegador que debería seleccionar al botón de opción cuando la página es cargada y cuando el formulario es restaurado.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Selecciona un curso:<br>
    <label><input type="radio" name="curso" value="ceramica"> Cerámica</label><br>
    <label><input type="radio" name="curso" value="jardineria" checked> Jardinería</label><br>
    <label><input type="radio" name="curso" value="pintura"> Pintura</label>
  </p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Selecciona un curso:


Por último, echaremos un vistazo al atributo required. Cuando este atributo booleano está presente en cualquiera de los botones radio de un grupo particular, el navegador no permitirá en envío del formulario hasta que uno de los botones en el grupo haya sido seleccionado.

El soporte provisto por los navegadores para el atirbuto required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Selecciona un área para trabajar en ella an area to work in:<br>
    <label><input type="radio" name="areatrabajo" value="ventas" required> Ventas</label><br>
    <label><input type="radio" name="areatrabajo" value="it"> IT</label><br>
    <label><input type="radio" name="areatrabajo" value="planeamiento"> Planeamiento</label>
  </p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Selecciona un área para trabajar en ella an area to work in:


Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p><input type="radio" name="seguro" value="si" autofocus></p>

checked

Un valor booleano que indica si el control debería estar seleccionado por defecto, esto es, cuando la página es cargada o cuando el formulario es reestablecido. Si el atributo toma el valor "checked" o la cadena vacía (""), o si simplemente está presente, el control estará seleccionado por defecto.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Género:<br>
    <label><input type="radio" name="genero" value="masculino"> Masculino</label><br>
    <label><input type="radio" name="genero" value="femenino" checked> Femenino</label>
  </p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Género:

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Selecciona un color para tu perfil:<br>
    <label><input type="radio" name="color" value="rojo"> Rojo</label><br>
    <label><input type="radio" name="color" value="verde"> Verde</label><br>
    <label><input type="radio" name="color" value="azul" disabled> Azul (sin stock)</label>
  </p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Selecciona un color para tu perfil:


form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Todos los botones de opción en un grupo deben pertenecer al mismo formulario, o no pertenecer a ningún formulario. Ubicar botones de opción en diferentes formularios romperá su agrupamiento.

Ejemplo

<p>
  Ingreso:<br>
  <label><input type="radio" name="ingreso" value="menosde10000" form="formulario1"> Menos de $10,000</label><br>
  <label><input type="radio" name="ingreso" value="masde10000" form="formulario1"> Más de $10,000</label>
</p>
<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Ingreso:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Para que un conjunto de botones de opción pertenezcan al mismo grupo, todo ellos deberían tener el mismo valor en el atributo name.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Trabajando como:<br>
    <label><input type="radio" name="trabajandocomo" value="empleado"> Empleado</label><br>
    <label><input type="radio" name="trabajandocomo" value="independiente"> Independiente</label>
  </p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Trabajando como:

required

Un valor booleano que indica si el usuario puede dejar todas las opciones del grupo seleccionadas. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está simplemente presente, el usuario deberá seleccionar una opción en el grupo a fin de poder enviar el formulario.

Cuando este atributo booleano está presente en cualquiera de los botones de opción de un grupo particular, el navegador no permitirá el envío del formulario hasta que una opción del grupo haya sido seleccionada.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Viajar en:<br>
    <label><input type="radio" name="viajaren" value="avion" required> Avión</label><br>
    <label><input type="radio" name="viajaren" value="colectivo"> Colectivo</label>
  </p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Viajar en:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

<input type="radio" name="hijos" value="masde5">

value

Un valor para el control que será enviado al agente procesador, emparejado con el valor del atributo name, sólo si el botón de opción ha sido seleccionado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Método de envío:<br>
    <label><input type="radio" name="metodoenvio" value="post"> POST</label><br>
    <label><input type="radio" name="metodoenvio" value="get"> GET</label>
  </p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Método de envío:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.