Radio Button
1.- CONCEPTO:
Un botón de opción o botón de opción es un elemento de control gráfico que permite
al usuario elegir solo uno de un conjunto predefinido de opciones mutuamente
excluyentes. La propiedad singular de un botón de opción lo distingue de una casilla de
verificación , que permite que se seleccione más de un elemento (o ninguno) y que se
restaure el estado no seleccionado.
Los botones de opción están dispuestos en grupos de dos o más y se muestran en la
pantalla como, por ejemplo, una lista de agujeros circulares que pueden contener
espacios en blanco (para no seleccionados) o un punto (para seleccionados). Cada botón
de radio normalmente va acompañado de una etiqueta que describe la elección que
representa el botón de opción. Las elecciones son mutuamente excluyentes ; cuando el
usuario selecciona un botón de opción, cualquier botón de opción previamente
seleccionado en el mismo grupo queda deseleccionado (por lo que solo se puede
seleccionar uno). La selección de un botón de opción se realiza haciendo clic con
el mouse en el botón, o en el título, o usando un atajo de teclado .
Es posible que inicialmente ninguno de los botones de opción de un grupo esté
seleccionado. Este estado no seleccionado no se puede restaurar al interactuar con el
widget de botón de opción, aunque puede ser posible a través de otros elementos de la
interfaz de usuario. Cuando se utiliza en un formulario HTML , si no se marca ningún
botón en un grupo, no se pasa ningún par nombre-valor cuando se envía el formulario.
Botones de radio en GTK + ; la opción "Cat" está
seleccionada.
2.- SINTAXIS:
HTML
En los formularios web , el elemento HTML se usa para mostrar un botón de
opción. Ejemplo: <input type="radio">
< form >
< input type = "radio" name = "season" value = "winter"
checked > Winter
< input type = "radio" name = "season" value = "spring" >
Spring
< input type = "radio" name = "temporada" value = "verano" >
Verano
<input type = "radio" name ="season" value = "autumn" > Autumn
</ form >
Grupo de atributos definidos por nombre. En un grupo, solo se puede elegir un botón de opción
CONFIGURACIÓN:
B elow es una lista de configuraciones válidas para los botones de opción:
HTML EXPLICACIÓN EJEMPLO
nombre de radio Elija una, y solo una, opción
= Nombre del grupo.
valor = Valor que se envía si está marcado.
align = Alineación del campo
tabindex = Orden de tabulación del campo.
marcado Por defecto revisa este campo.
T el nombre de ajuste indica a que grupo de botones de radio pertenece el campo.
Cuando selecciona un botón, todos los otros botones en el mismo grupo no están
seleccionados.
T el valor de ajuste define lo que se presentara si se activa.
T se alinean ajustes define como se alinea el campo.
-Pueden alinear las imágenes de acuerdo con el texto que la rodea, utilizando las
siguientes alienaciones:
el valor predeterminado alinea la imagen usando la configuración
predeterminada del navegador web. Igual que la línea de base.
izquierda alinea la imagen en el margen izquierdo y envuelve el texto que sigue
a la imagen.
alinea a la derecha la imagen en el margen derecho y envuelve el texto que
precede a la imagen.
la parte superior alinea la parte superior de la imagen con el texto circundante.
texttop alinea la parte superior de la imagen con la parte superior del texto más
alto en la línea.
el medio alinea el medio de la imagen con el texto circundante.
absmiddle alinea la imagen con el medio de la línea actual.
la línea de base alinea la imagen con la línea base de la línea actual.
el fondo alinea la parte inferior de la imagen con el texto circundante
absbottom alinea la imagen con el final de la línea actual.
centro alinea el centro de la imagen con el texto circundante.
En la tabla a continuación puede ver ejemplos de las diferentes alineaciones verticales
que puede hacer para una imagen.
La nota em los ejemplos solo está ahí para mostrar como el signo circular se ve
afectando por otras imágenes en la misma línea.
Esto significa que las alineaciones que se muestran en el ejemplo se hacen con el signo
circular y no con la nota.
HTML EJEMPLO
<img src = "rainbow.gif" align =
"texttop" >
bla bla bla
bla
<img src = "rainbow.gif" align = "top" >
bla bla bla
bla
<img src = "rainbow.gif" align = "middle" >
bla bla bla
bla
<img src = "rainbow.gif" align =
"absmiddle">
bla bla bla
bla
<img src = "rainbow.gif" align = "bottom" >
bla bla bla
bla
<img src = "rainbow.gif" align =
"absbottom">
bla bla bla
bla
<img src = "rainbow.gif" align =
"baseline"> bla bla bla
bla
Las entradas validas son: ARRIBA, MEDIA, ABAJO, DERECHA, IZQUIERDA, TEXTO, BASAL,
ABSMIDDLE, ABSBOTTOM.
T el TABINDEX la configuración define en que orden se deben activar los diferentes
campos cuando el visitante hace clic en la tecla tabulación.
3.- EJEMPLOS:
L ojee este ejemplo de HTML:
<html>
<head>
<title> Mi página </ title>
</ head>
<body>
<form name = "myform" action =
"http://www.mydomain.com/myformhandler.cgi" method = "POST ">
<div align =" center "> <br>
<input type =" radio "name =" group1 "value =" Milk "> Leche
<br>
<input type =" radio "name =" group1 "value =" Mantequilla
"marcada"> Mantequilla <br>
<tipo de entrada = "radio" nombre = "grupo1" valor = "Queso">
Queso
<hr>
<tipo de entrada = "radio" nombre = "grupo2" valor = "Agua"> Agua
< br>
<input type = "radio" name = "group2 "value =" Beer "> Beer <br>
<input type =" radio "name =" group2 "value =" Wine "checked>
Wine<br>
</ div>
</ form>
</ body>
</ html >
Y el resultado resultante:
Leche
Mantequilla
Queso
Agua
Cerveza
Vino
EJEMPLO 1
En este caso se habilitarán o deshabilitarán los checkbox dependiendo del valor de la
propiedad checked de otro checkbox.
El Script...
<script languaje="javascript">
function habilitaDeshabilita(form)
{
if (form.boletin.checked == true)
{
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}
if (form.boletin.checked == false)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
}
</script>
El Formulario...
<form name="ejemplo2">
¿Desea suscribirse a nuestro boletín de novedades? <input type="checkbox"
name="boletin" value="ON" checkedonClick="habilitaDeshabilita(this.form)"> SI,
quiero suscribirme.
<br><br>
Seleccione los temas de su interés:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Música">Música<br>
</form>
EJEMPLO2:
En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que
seleccione el usuario de un grupo de dos radio buttons
El Script...
<script languaje="javascript">
function habilita(form)
{
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}
function deshabilita(form)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
</script>
El Formulario...
<form name="ejemplo1">
¿Desea suscribirse a nuestro boletín de novedades? <br>
<input type="radio" name="boletin"
value="si" checked onClick="habilita(this.form)"> SI, quiero suscribirme.
<input type="radio" name="boletin"
value="no" onClick="deshabilita(this.form)"> No, gracias.
<br><br>
Seleccione los temas de su interés:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Música">Música<br>
</form>
