9 - Formulario HTML (control radio)


El segundo control que podemos utilizar en un formulario HTML son los de tipo radio. La característica de estos controles es que normalmente agrupamos un conjunto de radios para la selección de uno de ellos.

El navegador permite seleccionar solo un control de tipo radio a la vez. Cuando seleccionamos otro automáticamente deselecciona el actual.

Para ver la sintaxis y uso de este control implementaremos la carga de dos números y posteriormente mediante dos controles de tipo radio pediremos que seleccione si quiere sumarlos o restarlos (solo una de estas operaciones se puede seleccionar)

pagina1.html

<html>
<head>
<title>Problema</title>
</head>
<body>
<form action="pagina1.asp" method="post">
Ingrese primer valor:
<input type="text" name="valor1">
<br>
Ingrese segundo valor:
<input type="text" name="valor2">
<br>
<input type="radio" name="radio1" value="suma">sumar
<br>
<input type="radio" name="radio1" value="resta">restar
<br>
<input type="submit" value="operar">
</form>
</body>
</html> 

Si observamos la sintaxis para la definición de cada radio:

<input type="radio" name="radio1" value="suma">sumar
<br>
<input type="radio" name="radio1" value="resta">restar
<br>

vemos que los dos tienen el mismo valor para la propiedad name (en nuestro caso el valor radio1) de esta forma el navegador puede identificar que los dos controles de tipo radio están relacionados.

La propiedad type la inicializamos con el valor radio. La propiedad value almacena el valor que se rescatará en la página ASP.

Veamos ahora la página que rescata los valores de los controles text y verifica que elemento radio se encuentra seleccionado:

pagina1.asp

<%option explicit%>
<html>
<head>
<title>problema</title>
</head>
<body>
<%
dim v1,v2,suma,operacion,resta
v1=request.form("valor1")
v2=request.form("valor2")
operacion=request.form("radio1")
if (operacion="suma") then
  suma=cint(v1)+cint(v2)
  response.write("la suma de los dos valores es:")
  response.write(suma)
end if
if (operacion="resta") then
  resta=cint(v1)-cint(v2)
  response.write("la diferencia de los dos valores es:")
  response.write(resta)
end if
%>
</body>
</html>

Definimos las variables que necesitaremos para resolver el algoritmo:

dim v1,v2,suma,operacion,resta

Rescatamos el valor contenido en cada control de tipo "text" como ya conocemos:

v1=request.form("valor1")
v2=request.form("valor2")

Para rescatar el valor del control radio seleccionado procedemos de la siguiente manera:

operacion=request.form("radio1")

Luego de esto tenemos almacenado en la variable operacion el atributo value del control radio seleccionado.

Verificamos con un if si se encuentra seleccionado el primer radio:

if (operacion="suma") then
  suma=cint(v1)+cint(v2)
  response.write("la suma de los dos valores es:")
  response.write(suma)
end if

Procedemos de la misma manera para verificar si el valor rescatado del control radio almacena el valor resta:

if (operacion="resta") then
  resta=cint(v1)-cint(v2)
  response.write("la diferencia de los dos valores es:")
  response.write(resta)
end if

Podemos comentar también que pueden no estar seleccionado ningún control de tipo radio, por lo que las dos condiciones del if serían falsas y no mostraría valor alguno.

Si queremos que uno de los controles de tipo radio aparezca seleccionado por defecto debemos agregarle la propiedad checked:

<input type="radio" name="radio1" value="suma" checked>sumar


Retornar